powerflow-animation.html

<style>
  div.powerDiv {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: url(public/img/load_big.gif) center center no-repeat;
      }
  div.firmwareDiv {
        width: 100%;
        position: absolute;
        text-align: center;
        left: 0;
        bottom: 0;
        overflow: hidden;
      }
  iframe.powerFrame {
        width: 400px;
        height: 300px;
        transform: scale(0);
        transform-origin: center;
        position: absolute;
        left: 50%;
        top: 50%;
        border-style: none;
      }
  </style>
  <div class="powerDiv">
      <iframe id="frame8675" class="powerFrame" src="/public/img/grafana_icon.svg">IFRAME not supported by browser.</iframe>
  </div>
  <div class="firmwareDiv">
    <p class="version" style="color:gray; text-align: center;">Firmware</p>
  </div>
  <script>
  // Scale Animation when Window is Resized
  function scale() {
    document.querySelectorAll('.powerFrame').forEach(scaled => {
      parent = scaled.parentNode;
      ratio = Math.min(1,parent.offsetWidth / scaled.offsetWidth, parent.offsetHeight / scaled.offsetHeight);
      scaled.style.transform = 'translate(-50%, -50%) scale(' + ratio + ')';
    })
  }
  window.addEventListener('resize', function(e){ scale(); }, false);

  // Display Firmware Version
  function showversion() {
      var pwver = window.location.protocol + "//" + window.location.hostname + ":8675/version";
      $.getJSON(pwver, function(data) {
          var text = `Firmware: ${data.version.split(" ")[0]}`;
          $(".version").html(text);
      });
      setTimeout(showversion, 60000);
  }
  showversion();

  // Load Animation from pyPowerwall
  var powerFrame = document.getElementById('frame8675');
  powerFrame.onload = function() {
    // remove animated gif from background now that frame downloaded...
    this.parentNode.setAttribute('style','background: none');
    // and scale the frame to fit...
    scale();
  }
  powerFrame.src = window.location.protocol + "//" + window.location.hostname + ":8675/";
  </script>