Dashboard Battery Widget

Hi Guys,

Have been using node-red for a while now, but have never really got into the java script side of it, i have been lucky that most people have already done all the things i've wanted and made nodes to share..
Thank you all so much for all of your contributions!

The question is, does anyone have a battery indicator widget they have made for use in nodered?

We use the dashboard to display all of our home solar statistics and would LOVE a battery display based on payload ie 0-100 payload. Have anyone found anything similar they could share?

Thanks in advance guys!

Maybe https://flows.nodered.org/node/node-red-contrib-ui-level ?

Battery indicator is basically gauge. It just have body with battery shape. This makes battery indicator very specific and it is quite hard to figure out the look and feel which would fit into wide cases of user choices how the dashboard should look. This is question of art.

There has been questions about other shapes too. Barrel and bottle and ... You can imagine how many such things there exist.

It may be reasonable to do some kind of "container-gauge" with many shape options but I haven't figured out good solution for that so far.

That's I'd guess why it has been out of list of "should it be done".

But as always, you can do ti by yourself. Just search in forum and you'll find something at least to start with.
Fancy battery indicator

And for another option, the artless gauge can show battery indicator


1 Like

Hi dceejay , Thanks. Yes i am currently using levels but really would rather something nice and thick i can see from a distance, i find the levels node awesome for accessing on a phone etc but just need something i can glance at on our 7"Pi Solar Screen.

hotNipi, thanks for your input on this one. Appreciate it. I had come across that bubbly battery meter before and thought it looks almost where i wanted it to be. Minus the annoying bubbles, haha!

I did notice the artless guage and thought they looked very nice indeed, but again need something with a bit more substance, that i can see from a distance. I know its quite specific for someone who cant make it themselves but its the wifey who keeps complaining she cant see it! haha

That's another and very clear story. And for today no more option for you than to figure it out by doing some html + javascript in ui_template.

But I keep it in my mind. It is kind of specific stuff (graphical elements which talk in first glance) and it takes time to turn such into custom widget so if I ever find myself in "doing nothing" situation then who knows ...

cheers mate. The biggest issue is up until a few days ago, the solar screen was running off EmonCMS that had quite a nice Vertical battery widget, with 10 segments.

i did look into Vector images and using the vector node, but not sure i can trigger a layer from a payload = say 10 or 30 etc etc.

Hi @beccsjb,
You can also use the node-red-contrib-ui-svg node and dynamically change the level via input messages. There are plenty of battery svg images available on the web, which you can copy-paste-adapt...


Seems we have been posting at the same moment... With "Vector node", do perhaps mean the node-red-contrib-ui-svg node? You can always share here that part of your flow, and explain what doesn't work...

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