Scaling the power flow animation.

[dkerr64]

I embedd the power flow animation into my own webpage. This is done using an iframe element. But the animation assumes a 500x300 pixel space. What if you want it a different size?

<style>
.powerDiv {
      width: 30%;
      height: 23%;
      position: absolute;
      left: 0%;
      top: 75%;
    }
.powerFrame {
      width: 500px;
      height: 300px;
      transform: scale(0);
      transform-origin: 0 0;
      position: absolute;
      left: 0;
      top: 0;
      border-style: none;
    }
</style>

<script>
    function scale() {
      document.querySelectorAll('.powerFrame').forEach(scaled => {
        parent = scaled.parentNode,
        ratio = (parent.offsetWidth / scaled.offsetWidth),
        padding = scaled.offsetHeight * ratio;

        scaled.style.transform = 'scale(' + ratio + ')';
        scaled.style.transformOrigin = 'top left';

        parent.style.paddingTop = padding; // keeps the parent height in ratio to child resize
      })
    }

   window.addEventListener('resize', function(e){ scale(); }, false);
</script>

<div class="powerDiv">
    <iframe class="powerFrame" src="https://localhost:8675" onload="scale(this)">IFRAME not supported by browser.</iframe>
</div>

This defines an outer <div> that is set to 30% width / 23% height of its parent <div> with an absolute position 75% down from the top of the parent <div>. These values are arbitrary and set to position the graphic where I wanted it.

Within that the iframe is set to its 500x300 size, but scaled to zero (essentially invisible) until onload fires and calls the scale() function. This function is also called whenever the bounding window is resized.

Don't ask me how all this works, it took a fair amount of googling. But it is really cool to see the power flow animation scale as the bounding window changes size.

David.

[jasonacox]

Wow! This is great @dkerr64 ! I wonder if we could incorporate that in the Grafana panel. That would allow users to resize the panel and have the animation resize with it.

[jasonacox]

That was easy... I was able to adapt this to the Grafana panel and include the Firmware Version. It now scales the animation as you change the browser window size, as expected! I'm going to test it for a while to see how well it does before changing the base dashboard.json, but anyone wanting to test it can paste this html into the HTML form for the animation panel:

<style>
.powerDiv {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0%;
      top: 0%;
    }
.firmwareDiv {
      width: 100%;
      position: absolute;
      text-align: center;
      left: 0%;
      bottom: 0%;
    }
.powerFrame {
      width: 500px;
      height: 300px;
      transform: scale(0);
      transform-origin: 0 0;
      position: absolute;
      left: 0;
      top: 0;
      border-style: none;
    }
</style>
<div class="powerDiv">
    <iframe id="frame8675" class="powerFrame" src="/public/img/grafana_icon.svg" onload="scale(this)">IFRAME not supported by browser.</iframe>
</div>
<div class="firmwareDiv">
  <p class="version" style="color:gray; text-align: bottom">Firmware</p>
</div>
<script>
// Scale Animation when Window is Resized
function scale() {
  document.querySelectorAll('.powerFrame').forEach(scaled => {
    parent = scaled.parentNode,
    ratio = (parent.offsetWidth / scaled.offsetWidth),
    padding = scaled.offsetHeight * ratio;

    scaled.style.transform = 'scale(' + ratio + ')';
    scaled.style.transformOrigin = 'top left';

    parent.style.paddingTop = padding; // keeps the parent height in ratio to child resize
  })
}
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 pwurl = window.location.protocol + "//" + window.location.hostname + ":8675/";
document.getElementById('frame8675').src = pwurl;

</script>

Example of a "squeeze" that would result in clipping of the animation in the past... now resizing to fit:

[jasonacox]

Well... found a bug. It will scale down perfectly but as it scales up it starts clipping on the vertical. I'll have to play with it a bit more...

[dkerr64]

An aspect ratio problem. It looks like the scale is calculated only based on width. I think the scale ratio needs to be calculated as the
min((parent.offsetWidth / scaled.offsetWidth), (parent.offsetHeight / scaled.offsetHeight))
(not sure if that is correct javascript syntax).

[jasonacox]

Yes, thanks! I wish I knew more about css. I needed to use Math.min() but it worked and I also added a translate() to center it vertically and horizontally. I wanted a margin between the animation and the "Firmware" text and just set height to 95% but I know there has to be a better way... Any CSS gurus out there that can help? 😁

<style>
.powerDiv {
      width: 100%;
      height: 95%;
      position: absolute;
      left: 50%;
      top: 50%;
    }
.firmwareDiv {
      width: 100%;
      position: absolute;
      text-align: center;
      left: 0%;
      bottom: 0%;
    }
.powerFrame {
      width: 500px;
      height: 300px;
      transform: scale(0);
      transform-origin: 0 0;
      position: absolute;
      left: 0;
      top: 0;
      border-style: none;
    }
</style>
<div class="powerDiv">
    <iframe id="frame8675" class="powerFrame" src="/public/img/grafana_icon.svg" onload="scale(this)">IFRAME not supported by browser.</iframe>
</div>
<div class="firmwareDiv">
  <p class="version" style="color:gray; text-align: bottom">Firmware</p>
</div>
<script>
// Scale Animation when Window is Resized
function scale() {
  document.querySelectorAll('.powerFrame').forEach(scaled => {
    parent = scaled.parentNode;
    ratio = Math.min((parent.offsetWidth / scaled.offsetWidth), (parent.offsetHeight / scaled.offsetHeight));
    padding = scaled.offsetHeight * ratio;
    scaled.style.transform = 'scale(' + ratio + ') translate(-50%, -50%)';
    scaled.style.transformOrigin = 'top left';
    parent.style.paddingTop = padding; // keeps the parent height in ratio to child resize
  })
}
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 pwurl = window.location.protocol + "//" + window.location.hostname + ":8675/";
document.getElementById('frame8675').src = pwurl;

</script>

In any case, it looks pretty good!

[jasonacox]

Okay, after playing with this on different screens, I came to the conclusion that it looks best keeping the scale <= 1.0x. I also wanted to clip the whitespace (clear space) around the image which works well by doing a zoom of 120% on the iFrame. End result:

<style>
.powerDiv {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
    }
.firmwareDiv {
      width: 100%;
      position: absolute;
      text-align: center;
      left: 0%;
      bottom: 0%;
    }
.powerFrame {
      width: 500px;
      height: 300px;
      transform: scale(0);
      transform-origin: 0 0;
      position: absolute;
      left: 0;
      top: 0;
      border-style: none;
    }
</style>
<div class="powerDiv">
    <iframe id="frame8675" class="powerFrame" src="/public/img/grafana_icon.svg" onload="scale(this)">IFRAME not supported by browser.</iframe>
</div>
<div class="firmwareDiv">
  <p class="version" style="color:gray; text-align: bottom">Firmware</p>
</div>
<script>
// Scale Animation when Window is Resized
function scale() {
  document.querySelectorAll('.powerFrame').forEach(scaled => {
    parent = scaled.parentNode;
    ratio = 1.2 * Math.min((parent.offsetWidth / scaled.offsetWidth), (parent.offsetHeight / scaled.offsetHeight));
    if (ratio > 1.0) ratio = 1.0;
    padding = scaled.offsetHeight * ratio;
    scaled.style.transform = 'scale(' + ratio + ') translate(-50%, -50%)';
    scaled.style.transformOrigin = 'top left';
    parent.style.paddingTop = padding; // keeps the parent height in ratio to child resize
  })
}
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 pwurl = window.location.protocol + "//" + window.location.hostname + ":8675/";
document.getElementById('frame8675').src = pwurl;

</script>

Clean rendering on wide display:

Clean scale-down of animation on squeeze display:

Unfortunately, it introduces scrollbars on mobile - I'll have to see what I can do to fix that.

[dkerr64]

Try this for possible scrollbar fix... https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

[jasonacox]

Thanks @ThePnuts - I know you are using a custom grafana installation and dashboard, so it is good to hear the scaling still works. I can't replicate your install to figure out why the clipping is happening, but would wonder if it is just the Panel size you set. Can you stretch it down and unclip?

[ThePnuts]

Thanks for the followup @jasonacox I dunno if I ever asked, but what version of Grafana is the default dashboard on? Just for reference I'm on v9.4.7 I'm sure all of my craziness is related to the version.

I played with it a bit more, I didnt see them before because of the white or I didnt mouse over it to activate them, but I have scroll bars for the iframe. As long as I do not make my window too wide, everything works as it centers in the scrollable area by default. Its only when I go wide enough, that it scales out of view like that screen shot above.
Here you can see the sroll bars:

Even if I move the panel and increase its size, I still have the scrollable area:

[dkerr64]

@ThePnuts are you using the HTML that I posted above? Exactly that and nothing else in the panel? My grafana version is 9.1.2 (which is whatever @jasonacox bundles by default) but this should have nothing to do with the Grafana version as all the HTML goes directly to the browser.

The firmware <div> does float relative to the bottom of the panel so it can overlap with the Powerwall graphic. But you do have to fiddle with the panel size in the Grafana dashboard (aspect ratio) to ensure no clipping occurs.

[jasonacox]

FYI - power flow animation auto-scale added as default for v2.8.9 - https://github.com/jasonacox/Powerwall-Dashboard/releases/tag/v2.8.9

[jgleigh]

I'm getting scroll bars and clipping of the FW version (in Chrome desktop)

[ThePnuts]

@dkerr64 I am using the html posted here #216 (reply in thread) exactly as posted. I am learning a lot of this as I go, let me see if I can play around with the dashboard aspect ratio.

I mentioned the version, but I guess a little more info. I am using the stand alone official release dockers from grafana, etc, instead of @jasonacox complete package. As a result of this, I have had a few little nuances to work through as I come across them. I really should just take a closer look at everything that is customized for grafana and make some adjustments on my end. Biggest glaring example is how my tesla graphic is not transparent.

[dkerr64]

@jasonacox @ThePnuts @jgleigh Yes there is a bug. Will need to investigate. The solution to the scroll bars is to add overflow: hidden; to the CSS style. However in testing that I found the bug illustrated in the screen shot below. The powerDiv element has been correctly resized, but it has also been moved to the lower right rather than remaining centered. With overflow hidden you can see the resulting clipping of the iFrame.

This is fixable, but I just wanted to acknowledge here that "we have a problem". I'll work on it later.

[jasonacox]

Ah... that makes sense now. Yes, I only tested on Mac (Chrome, Safari and Brave) and iPhone (Safari). I need to get a Windows VM set up so I can test.

[jgleigh]

@ThePnuts Nope, I'm also on a Mac. Not sure why I'm seeing the scroll bars and clipping and @jasonacox isn't.

[dkerr64]

I fired up a VM with Windows 11 and yes I can reproduce what @ThePnuts is seeing. I tested with Edge browser because I don't have Chrome installed yet -- but I think they both use the same underlying engine anyway. The horizontal scrollbar only appears for me at certain sizes, if I resize I can get it to go away. The clipping on the firmware version is also there.

Time to investigate.

[jasonacox]

@jgleigh and @ThePnuts - Just to confirm, you did not see this before making animation scaling code change? I'll roll back the dashboard updates until we have fix. Thanks for the help!

[jgleigh]

@jasonacox Correct. I only saw the issue with the 2.8.9 release.

[dkerr64]

Okay so, one at a time. For the firmware version clipping the problem is the

<div class="scrollbar-view" style-"position: relative; overflow: hidden; margin-right: -8px; margin-bottom: -8px; min-height: calc(100% + 8px); max-height: calc(100% + 8px); '>

Which is part of Grafana's page layout. This is the <div> that we change the overflow setting to hidden. But the culprit here is the -8px on margin right/left and calls that also use 8px. On the Mac version these are all zero. I do not know why they are different, it is possible that Grafana is trying to work around some other problem. Two possible fixes:

1. Perpetuating the ugly hacks, we can either modify this (remove all the margin/calcs) or go up yet another <div> element and remove it's overflow:hidden style, or...
2. Adjust the positioning of the paragraph element inside the firmwareDiv element. This is a whole lot cleaner, but will likely cause the firmware text to overlap with the Powerwall graphic more often.

I don't know what the right answer is, but lean towards the 2nd.

While we're in there, the style text-align: bottom is not valid, bottom is not a valid value. This was probably intended to be text-alight: center ?

Oh... and if we remove the 1.2x multiplier then in theory we shouldn't even need our current ugly hack that sets overflow to hidden.

[dkerr64]

As for the scroll bars. I'm convinced that this is a result of the 1.2x multiplier. Now I understand that this is here to maximize the size of the graphic in the window. I think if we play with the iframe default size that would be a better solution. 500x300 does not appear optimal, I find that 400x300 looks better.

[jasonacox]

For reference: We had issues with scrollbars in the past, the fix (identified #139 by @cwagz ) was related to iFrame size.

<iframe id="frame" src="/public/img/grafana_icon.svg" width="100%" height="290" frameBorder="0">No</iframe>

[dkerr64]

Yes. We need to ensure that the iframe size is the same or smaller than the containing element. First solution was to set overflow to hidden which should suppress scrollbars if the iframe is larger than any containing element. But using scale() to ensure that it is always same or smaller should have same effect.

We cannot use a percentage on our iframe as that will break the scaling... 100% is always 100%. We can tweak the pixel dimensions to be the smallest possible values that do not cause clipping of the underlying graphic.

[dkerr64]

I fiddled with the values. If I go less than 300 in the vertical then the firmware version text doesn't look so good as it often overlaps with the graphic. If I go less than 400 on the horizontal then clipping occurs on the "to-house" kW value (the W is clipped).

[dkerr64]

Give this one a go please...

<style>
div.powerDiv {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
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" onload="scale(this)">IFRAME not supported by browser.</iframe>
    <script>
    //document.getElementById('frame8675').parentElement.parentElement.parentElement.style.overflow = 'hidden';
    </script>
</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 pwurl = window.location.protocol + "//" + window.location.hostname + ":8675/";
document.getElementById('frame8675').src = pwurl;
</script>

I commented out setting the overflow:hidden rather than delete it.... just in case we need to bring it back.

[dkerr64]

I am liking this version a lot more than the prior... removing fudge-factors like the multiplier and not needing the nasty hack to set overflow to hidden feels a whole lot better.

[jgleigh]

@dkerr64 Looks good on my end. :)

[ThePnuts]

Also on "pypowerwall": "0.6.2 Proxy t25"
Tested on Windows, Mac, iPad and it works for me. Awesome work!

I dont think you need to worry about this but ill note it here just in case. Rotating the iPad vertical to horizontal and back breaks scaling, but if I remember right, its no different then how it displayed before scaling in vertical orientation anyways.

[jasonacox]

Thanks for the testing, everyone. I'll update dashboard.json and release the update.

Thanks again @dkerr64! The auto-scale enhancement is nice and this latest approach is more elegant. Thank you!

[Updated]

• Pushed as v2.8.11
• I also added the html to the dashboards folder for easier reading, updates and reference: https://github.com/jasonacox/Powerwall-Dashboard/blob/main/dashboards/powerflow-animation.html

[cwagz]

I just updated. This looks great. Nice work everyone!

[dkerr64]

Here is another nice refinement... in the div.powerDiv style add this one line...

background: url(public/img/load_big.gif) center center no-repeat;

And update the iframe statement to remove the onload from the line...

<iframe id="frame8675" class="powerFrame" src="/public/img/grafana_icon.svg">IFRAME not supported by browser.</iframe>

And then add in the onload function just before changing the placeholder src URL to the actual URL to download from...

// Load Animation from pyPowerwall
var powerFrame = document.getElementById('frame8675');
powerFrame.onload = function() {
  this.parentNode.setAttribute('style','background: none');
  scale();
}
powerFrame.src = window.location.protocol + "//" + window.location.hostname + ":8675/";

What this does is put an animated loading graphic onto the background while the power flow animation all downloads, which can take a few seconds if it is not cached in the browser, and then remove it once it is downloaded.

My whole script now looks like...

<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(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>

Note that this version allows ratio to exceed 1 as I found I needed to allow scaling larger than actual size in one case. You can put it back in if you want...

ratio = Math.min(1, parent.offsetWidth / scaled.offsetWidth, parent.offsetHeight / scaled.offsetHeight);

David.

[jgleigh]

I love the update. Works nicely when loading a tab in Chrome that's been inactive (new memory saving option).

[jasonacox]

Thanks @jgleigh ! And thanks to the great enhancement by @dkerr64

[cwagz]

Very slick. Thanks everyone!

[dkerr64]

Thanks @jasonacox for pushing the update. Sorry I was slow to respond. I'm glad that we discovered this scaling trick... I have been able to apply it to other webpage projects I am working on, unrelated to Powerwall-dashboard.

[jasonacox]

Agree! It works great! Thanks @dkerr64