Powerflow animation not showing when accessing remotely

[dsf01]

Disclaimer: I am not a programmer, but Googled around for a solution …

I use NGROK to create a tunnel to my local PC running Windows 11 and Powerwall Dashboard. Since this PC is local to the Powerwall, but I live elsewhere, I wanted to be able to access my dashboard remotely.

It works, but the animation for Powerflow isn’t showing. I’ve tried in different browsers, but no luck. No issues when I remote in to the local PC (it shows the animation), just not through the NGROK instance.

Any suggestions?

[mp09]

I've been meaning to file an ER to make this work but I think it's because the section for the animated graph is just pulling the graphic live from the gateway, so it only works if you're able to get / resolve that gateway address too from the remote machine.

[mp09]

VPN-ing into my home network worked, but seems like overkill to solve this problem :)

[dsf01]

That makes total sense.  Can I port forward the PW?On Feb 6, 2023, at 1:20 PM, mp09 ***@***.***> wrote: I've been meaning to file an ER to make this work but I think it's because the section for the animated graph is just pulling the graphic live from the gateway, so it only works if you're able to get / resolve that gateway address too from the remote machine. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[BJReplay]

Can I port forward the PW

It's not so much a port forward, as proxying.

It might be possible, but you'd have to change:

• That section of the dashboard to refer to the proxy
• Set up a proxy to proxy the live graphic from the pypowerwall proxy of the dashboard

I've got my dashboard running via nginx proxy manager (NPM) in a docker container, and it is exposing the rest of the dashboard successfully to the outside world.

I haven't got around to setting up a proxy for the live animation section, but it should also be possible.

Might be an exercise for the weekend.

[BJReplay]

Well, I got a bit futher, but not all the way...

I had a look at the source for the animation, saw that it linked to the same protocol and location as the host, and appended port 8675 to that location.

I created a copy of that dashboard, and changed it to instead link to same protocol and location and path pypowerwall.

I set up a custom location in nginx proxy manager that redirected pypowerwall to port 8675.

It partially works - the display now displays the firmware version.

However, it throws a bunch of errors trying to display the animation.

Refused to apply style from 'https://myexternalurl/app.4486495186b015b4913f.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
myexternalurl/:3 
       
GET https://myexternalurl/vendor.4486495186b015b4913f.js net::ERR_ABORTED 404
myexternalurl/:1 
        
Refused to execute script from 'https://myexternalurl/vendor.4486495186b015b4913f.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
myexternalurl/:3 
        
GET https://myexternalurl/app.4486495186b015b4913f.js net::ERR_ABORTED 404
myexternalurl/:1 
        
Refused to execute script from 'https://myexternalurl/app.4486495186b015b4913f.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

[dsf01]

Impressed, thank you for the effort!  Where there’s a will, there (might) be a way.On Feb 6, 2023, at 5:16 PM, Bernard Sheppard ***@***.***> wrote: Well, I got a bit futher, but not all the way... I had a look at the source for the animation, saw that it linked to the same protocol and location as the host, and appended port 8675 to that location. I created a copy of that dashboard, and changed it to instead link to same protocol and location and path pypowerwall. I set up a custom location in nginx proxy manager that redirected pypowerwall to port 8675. It partially works - the display now displays the firmware version. However, it throws a bunch of errors trying to display the animation. Refused to apply style from 'https://myexternalurl/app.4486495186b015b4913f.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. blah.sheppard-family.au/:3 GET https://myexternalurl/vendor.4486495186b015b4913f.js net::ERR_ABORTED 404 blah.sheppard-family.au/:1 Refused to execute script from 'https://myexternalurl/vendor.4486495186b015b4913f.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. myexternalurl/:3 GET https://myexternalurl/app.4486495186b015b4913f.js net::ERR_ABORTED 404 myexternalurl/:1 Refused to execute script from 'https://myexternalurl/app.4486495186b015b4913f.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: ***@***.***>

[jasonacox]

It seems that you have solved most of this, but to provide some additional detail in case it helps:

Powerwall Gateaway

The Powerwall flow animation originates from the Powerwall gateway interface. Naturally it is formatted to fit the look/feel of that page.

pyPowerwall Proxy

The pypowerwall proxy has a feature to rewrite the animation assets (e.g. CSS) to better match and fit within the Grafana panel. You can see an example of how pypowerwall does this by going directly to the pypowerwall port: http://pypowerwall:8675/example.html (replace pypowerwall with the IP of the host running pypowerwall).

Grafana

The Powerwall flow animation in Grafana is an html panel that renders an empty iFrame.

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

The html for the panel includes JavaScript to construct the URL to your pypowerwall proxy service. The code that sets the source that the iFrame should pull from is here:

var pwurl = window.location.protocol + "//" + window.location.hostname + ":8675/";
document.getElementById('frame').src = pwurl;

What you don't see is the code that flows from pypowerwall to the iFrame. That code contains html, javascript, css and API calls. The browsers renders the animation based on that code and begins to make API calls to get real time status about the flows (solar production, home usage, battery level, grid import/export, etc.). The API calls are made to pypowerwall which serves up cached data or fetches the relevant data from the Powerwall gateway.

Proxy the Proxy for External View

There is a way to see your Grafana dashboard from outside your home network. It will require that you allow and NAT both port 80 for Grafana as well as port 8675 for pypowerwall. A VPN could be set up to allow this as well and is a safer approach. My low-budget VPN uses a locked down SSH host exposed via NAT port 7654. I use a simple script on my Mac to load the Dashboard while outside my home, like this:

#!/bin/bash

# Define the internal server IP address
SERVER=10.0.10.10
# Define the external ssh address - assumes you have already set up ssh keys
[email protected]

# Create the tunnel
ssh -N -p 7654 $PUBLIC -L 9000:$SERVER:9000 -L 8675:$SERVER:8675

# View the Dashboard
echo "Open http://localhost:9000''

Warning

Opening up Grafana or pypowerwall proxy to the public internet does come with risks. It does mean that anyone knowing the address can see your Powerwall data. However, more importantly, if a vulnerability exists in either of these tools, a hacker could potentially gain access to your internal network. This is why I would recommend a VPN approach.

[cwagz]

I ended up using HAProxy on my pfSense router to reverse proxy Grafana to the outside world. I was not comfortable reverse proxying pypowerwall as well so if I connect to my dashboard without VPN I do not see the animation. If I am on my VPN or local network the animation is proxied and I see it.

If I remember correctly, I needed to setup an ACME cert for my domains (internal and external) and have the proxy use it to prevent any SSL errors since I have enabled SSL for Grafana.

I am under the impression that exposing something like this via a reverse proxy is considered more safe than just exposing to the internet. I have my dashboard and the kids minecraft server admin interface proxied this way so I can get to them easily without needing to first connect to the VPN. Hopefully I am not exposing myself to too much risk.

It would be interesting if there was a way for Grafana to display the animation from it's own cache. Like it gathers the data from internal and then serves it out directly. This would allow everything to work with just Grafana being behind the reverse proxy. I searched forever but could not figure out how this would be done.