# Victron Solar power Usage screen with ui dashboard or http Nodes - how?

**URL:** <https://discourse.nodered.org/t/victron-solar-power-usage-screen-with-ui-dashboard-or-http-nodes-how/30504>\
**Category:** Dashboard\
**Created:** [21 July 2020 19:27 UTC](https://discourse.nodered.org/t/victron-solar-power-usage-screen-with-ui-dashboard-or-http-nodes-how/30504 "2020-07-21T19:27:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![IoTPlay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iotplay/32/40_2.png) [@IoTPlay](https://discourse.nodered.org/u/IoTPlay)\
**Post date:** [21 July 2020 19:27 UTC](https://discourse.nodered.org/t/victron-solar-power-usage-screen-with-ui-dashboard-or-http-nodes-how/30504/1 "2020-07-21T19:27:51Z")

</div>

Hi, the [Victron Energy](https://www.victronenergy.com) hybrid Energy storage System (Grid / Solar / Battery) - CCGX unit has a handy screen that shows the full status of all components of the system. See below. All the information is accessible via mqtt on the Victron device as well. I would like to build something simple - but similar to the look and feel of this screen.

I do not want to use ui-builder (do not have the time to learn it now). I know how to build html tables from rows of data - using a template node, and a UI template node. I have very little html knowledge. After some searching, it looks like one can use html sections - and 'float' thee of them next to one another - and send that mqtt using mousache template into each of the top thee sections, and do something similar for 2 sections at the bottom. But after trying several approaches, I was not able to get this going.

Anybody with advise for me on this please?

 ![Victron-dash](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/7545ba1e061afb825aa33c4453233ca15585b2da.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [21 July 2020 20:43 UTC](https://discourse.nodered.org/t/victron-solar-power-usage-screen-with-ui-dashboard-or-http-nodes-how/30504/2 "2020-07-21T20:43:33Z")

</div>

You could do this with the recently contributed SVG node for Dashboard (or my example SVG component for uibuilder if you prefer 😉). Find something to build the SVG basic image for you - there are online tools, recent versions of Microsoft PowerPoint will also do it. You will then need to spend a bit of time understanding the code that makes up the image (it is a dialect of XML) - by adding ID's to the various elements you can take control of the colour and text. The Dashboard node even has an SVG editor built in.

---

<div class="post-metadata">

**Author:** ![IoTPlay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iotplay/32/40_2.png) [@IoTPlay](https://discourse.nodered.org/u/IoTPlay)\
**Post date:** [22 July 2020 04:36 UTC](https://discourse.nodered.org/t/victron-solar-power-usage-screen-with-ui-dashboard-or-http-nodes-how/30504/3 "2020-07-22T04:36:50Z")

</div>

Thank you Julian, one day I am going to have to put time aside to learn uibuilder !!!

---

<div class="post-metadata">

**Author:** ![IoTPlay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iotplay/32/40_2.png) [@IoTPlay](https://discourse.nodered.org/u/IoTPlay)\
**Post date:** [22 July 2020 20:49 UTC](https://discourse.nodered.org/t/victron-solar-power-usage-screen-with-ui-dashboard-or-http-nodes-how/30504/4 "2020-07-22T20:49:36Z")

</div>

@TotallyInformation - was not looking forward to get my teeth into SVG, do not have the time currently, but got my new Victron equipment's MQTT working - and streaming data into NR - SVG node. Thnak you for pushing me - will use this more. See below, I am almost there.... and can do extra things, like change the color of the AC if it get to its limit of 2500W.... sweet !

![Screenshot 2020-07-22 at 22.46.34](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/f/bf5dc426cfb5e9464e665cd50fca29f41af1d52c.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 August 2020 20:58 UTC](https://discourse.nodered.org/t/victron-solar-power-usage-screen-with-ui-dashboard-or-http-nodes-how/30504/5 "2020-08-05T20:58:38Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.