Octopus Energy Agile Tariff

Third party integrations
47

Finally got a solution working for a local dashboard with today’s Octopus Agile pricing.

image
image596×526 15.2 KB

The graph shows a rolling 24Hr so far left bar is the current price. When it gets beyond half 10 at night you start to see a blank area to the right as the new data does not come out until about 16:30 but that is fine for my purposes. It is easy for the rest of the household to understand.

This is a Node-Red dashboard as I could not get HADashboard to authenticate and let me show the Grafana Graph.

Data is pulled into Infludb from the API by NR, the graph is produced by Grafana. Couldn’t have happened without @frenck and all of his add-ons.

[edit]
I realised I had missed off explaining a number key things I discovered to make this work.

  • Accessing Grafana without authorization
  • displaying the graph without controls
  • Getting the graph to refresh in Lovelace and on the NR UI
  • Getting the graph to resize in the NR UI.

Grafana

In the add-on options

  • add a specific port (3000)
  • add Options
plugins: []
env_vars:
  - name: GF_AUTH_ANONYMOUS_ENABLED
    value: 'true'
  - name: GF_SECURITY_ALLOW_EMBEDDING
    value: 'true'
  - name: GF_AUTH_ANONYMOUS_ORG_NAME
    value: XXX.XXX.net
ssl: true
certfile: fullchain.pem
keyfile: privkey.pem

In Grafana add in an organisation to match the one above.

Truth be told, I fiddled and added all sorts of things to try and make it work. It now does so I am not fiddling again!

To display the graph without controls change the /d/ in the URL to /d-solo/.

Lovelace UI

In the Webpage Card Configuration add an &refresh=5m to get it to refresh and also a &theme=light to match standard Lovelace UI.

https://xxx.xxxx.net:3000/api/hassio_ingress/XXXX/d-solo/7p1LkuRgk/agileprice?orgId=2&panelId=2 width="200" height="100" frameborder="0"&refresh=5m&theme=light

Node-Red Dashboard

  • To refresh the image add an &refresh=5m to end of URL as per Lovelace UI
  • To resize, a little bit of Javascript I found somewhere.
[{"id":"7dd32ba9.631134","type":"ui_template","z":"7c1c1dc2.f60624","group":"e453ab5b.693c08","name":"Agile Pricing","order":1,"width":0,"height":0,"format":"<div style=\"border:2px; overflow:hidden;\">\n\n    <iframe \n        id=\"form-iframe\" \n        src=\"https://xxx.xxx.net:3000/api/hassio_ingress/PLuAAK0XIwRorNFRT_oFqbWiUB746HpLKLvw0qM4ocE/d-solo/7p1LkuRgk/agileprice?orgId=2&panelId=2&refresh=5m\"\n        style=\"margin:0; width:100%; height:250px; border:none; overflow:hidden;\" \n        scrolling=\"no\" \n        onload=\"AdjustIframeHeightOnLoad()\">\n    </iframe>\n    \n    <script type=\"text/javascript\">\n    function AdjustIframeHeightOnLoad() \n        { document.getElementById(\"form-iframe\").style.height = document.getElementById(\"form-iframe\").contentWindow.document.body.scrollHeight + \"px\"; }\n    function AdjustIframeHeight(i) \n        { document.getElementById(\"form-iframe\").style.height = parseInt(i) + \"px\"; }\n    </script>\n</div>\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":801.25,"y":45,"wires":[[]]},{"id":"e453ab5b.693c08","type":"ui_group","z":"","name":"Group 1","tab":"229ad979.0c7e56","order":1,"disp":false,"width":"8","collapse":false},{"id":"229ad979.0c7e56","type":"ui_tab","z":"","name":"Octopus","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
1 Like