metr.at VESC logger app - Video Overlay custom HTML/CSS/JS

metr-at-video-overlay.css

.hidden{ display: none; }

/* --- */

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

#green {
  width: 1000px;
  height: 120px;
  background-color: Green;
  position: relative;
  font: 80px mini_pixel-7, sans-serif;
  text-shadow: 4px 4px #414141;
  display: flex;
  justify-content: center;
}

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

.expand {
  flex-grow: 10;
}

.col-space {
  flex-shrink: 4;
}

.row span {
  width: 37px;
}

@font-face {
    font-family: 'mini_pixel-7';
    /* for publishing: */
    src: url('/assets/mini_pixel-7.ttf');

    /* for development: */
    /*src: url('vendor/fonts/mini_pixel-7.ttf');*/
}

.row > div {
  width: 200px;
}

.yellow-text {
  font-size: 48%;
  color: #dfdd5d;
  height: 24px;
  text-align: right;
}

#hud {
  width: 96%;
  height: 96%;
  position: absolute;
  bottom: 4px;
}

.big-text {
  color: #bd0711;
  -webkit-text-stroke: 2px #420102;
  height: 70px;
}

.small-text {
  font-size: 50%;
  color: #aaaaaa;
}

.misc-text {
  font-size: 48%;
  color: #aaaaaa;
  text-align: right;
  height: 24px;
  /*margin-top: 39px;*/
  margin-top: 34px;
}

.sml {
  width: 80%;
}

#power-box {
  position: absolute;
  left: 2%;
}

#speed-box {
  position: absolute;
  left: 25%;
}

#current-box {
  position: absolute;
  left: 49%;
}

#duty-box {
  position: absolute;
  left: 69%;
}

#temp-box {
  position: absolute;
  left: 87%;
}

#face {
  position: absolute;
  left: 26%;
  top: 9%;
  width: 86px;
  height: 96px;
}

#misc-box {
  position: absolute;
  width: 30%;
  height: 100%;
  right: 0%;
  top: 10%;
}

#misc-box > .column > div {
  height: 24%;
}

metr-at-video-overlay.html

<div id='green'>
  <div id='hud'>

    <div class='hidden'><img id='face' src='/assets/doom1.png'></img></div>

    <div id='power-box' class='hidden'></div>
    <div id='speed-box' class='hidden'></div>
    <div id='misc-box' class='hidden'></div>

    <div class="row">
      <div class='column'>
        <div id='speed' class='big-text'>33kph</div>
        <div class='small-text'>SPEED</div>
      </div>
      <div class='col-space'></div>
      <div class='column'>
        <div id='power' class='big-text'>200W</div>
        <div class='small-text'>POWER</div>
      </div>
      <div class='col-space'></div>
      <div class='column'>
        <div class='row'>
          <span id='current' class='big-text'>25</span>
          <span class='misc-text sml'>/</span>
          <span id='current-max' class='misc-text sml'>25 A</span>
        </div>
        <div class='small-text'>CURRENT</div>
      </div>
      <div class='col-space'></div>
      <div class='column'>
        <div id='voltage' class='big-text'>41</div>
        <div class='small-text'>VOLTAGE</div>
      </div>
      <div class='col-space'></div>
      <div class='column'>
        <div class='row'>
          <span id='duty' class='big-text'>25</span>
          <span class='misc-text sml'>/</span>
          <span id='duty-max' class='misc-text sml'>95</span>
        </div>
        <div class='small-text'>DUTY %</div>
      </div>
      <div class='col-space'></div>
      <div class='column'>
        <div class='row'>
          <span id='temperature' class='big-text'>25</span>
          <span class='misc-text sml'>/</span>
          <span id='temp-max' class='misc-text sml'>70</span>
        </div>
        <div class='small-text'>TEMP °C</div>
      </div>
    </div>

  </div>
  <div id='doom'></div>
</div>

metr-at-video-overlay.js

var d = document;
var c = console;

// multiply values by two (if you have two vescs, otherwise use vescNum == 1)
var vescNum = 2;
// var vescNum = 1;

function set(elemId, value) {
  // var elem = document.getElementById(elemId)
  // if (elem) {
  //   elem.innerHTML = value;
  // }
  document.getElementById(elemId).innerHTML = value;
}

function init(record) {
  var maxDuty = parseFloat(Math.max.apply(null, record.duty)).toFixed(0);
  set('duty-max', maxDuty);
  var maxTemp = parseFloat(Math.max.apply(null, record.temperature)).toFixed(0);
  set('temp-max', maxTemp);
  var maxCurrent = parseFloat(Math.max.apply(null, record.current)).toFixed(0);
  set('current-max', maxCurrent+" A");
}

function update(record, index) {
  set('power', (parseFloat(record.current[index]) * vescNum * parseFloat(record.voltage[index])).toFixed(0) + 'W');
  set('current', parseFloat(record.current[index]*vescNum).toFixed(0));
  set('temperature', parseFloat(record.temperature[index]).toFixed(0));
  set('speed', parseFloat(record.speed[index]).toFixed(0) + 'kph');
  set('duty', parseFloat(record.duty[index]).toFixed(0));
  set('voltage', parseFloat(record.voltage[index]).toFixed(1));

  // removed face

  setTimeout(() => {
    addFrame(record.interval, next);
  }, 0);
}