dashboard - make gauge colors configurable

1,696 views
Skip to first unread message

Guilherme Francescon Cittolin

unread,
Jul 26, 2016, 2:58:19 PM7/26/16
to Node-RED
Hello,

It would be really nice to have configurable colors for the gauge node in the dashboard. Maybe a full gauge should be green (a "the higher, the better" scenario), or maybe you're displaying temperatures, and the gradient should be between blue and red.

Actually, the best would be to have all the parameters configurable from the editor (an "advanced" tab in the config for them?), but being able to change the level colors would already be awesome.

Does someone also have the same needs?

Dave C-J

unread,
Jul 26, 2016, 3:19:38 PM7/26/16
to node...@googlegroups.com

Yes, we hear you. Step one was always to take the original contrib-ui and merge it. We didn't want to add too many extra features on day one. The list is growing 😀

Guilherme Francescon Cittolin

unread,
Jul 26, 2016, 4:20:58 PM7/26/16
to Node-RED
Seems a reasonable plan :) I can imagine how big the list is!

In the meantime, I'll work on it on a branch in a fork. Looking forward to having this! :)

Henrik Eketjäll

unread,
Nov 11, 2016, 8:10:00 AM11/11/16
to Node-RED
I'm trying to dynamically change the color of a level gauge depending on the value.
Been playing around with template nodes but my main issue is that the gauge html id is changed on every new deployment.
Is it possible to identify an individual gauge in any other way?

Guilherme Francescon Cittolin

unread,
Nov 14, 2016, 9:51:51 AM11/14/16
to Node-RED
Hi Henrik,

What exactly are you trying to do? The gauge colors are configurable in the current version of the dashboard, limited to three colors. Are you trying to add more colors?

Henrik Eketjäll

unread,
Nov 18, 2016, 7:17:35 AM11/18/16
to Node-RED
Hi, 

The "regular gauge" has the 3 colors. 
I was after to get the "level gague" to change color depending on the value.
I'm fine with that it's not built-in, but I was hoping to be able to use the template node to change things, but I think I misunderstood how the template node is supposed to work.
I was thinking I could use the template node to make an own template for the different UI-nodes.

Peter Scargill

unread,
Jan 8, 2017, 11:35:53 PM1/8/17
to Node-RED
I'm just reading this now -  yes I would like to change the colour.. I have the level gauge as being the prettiest, showing heating temperature - I'd really like to change the colour from the current bluish more towards orange/reddish as the heating warms up.

Krzysztof Karpiński

unread,
Jan 9, 2017, 8:55:34 AM1/9/17
to Node-RED
My first post here, so hello !
What are you think (when we talk about wish list) to have also range configurable dynamically ?
I have a gauge with according chart to show temperature from few sources ie: inside  outside, so for them the range is different, I'm changing choosen sensor by dropdown list.

Krzysztof 

Dave C-J

unread,
Jan 9, 2017, 9:26:11 AM1/9/17
to node...@googlegroups.com
errr - how would that work ? Normally the idea of a visual gauge is that the angle of the pointer means something - so (say) straight up - in the middle - is OK - and to the right is too hot (maybe) etc...  If it auto ranges and starts off normal and never gets a high value then it will always be to the right as that will be the max value seen - giving the impression that things are too hot... when they are ok...

or maybe I'm not understanding.

Krzysztof Karpiński

unread,
Jan 9, 2017, 10:17:58 AM1/9/17
to Node-RED
Hi,
Hi,
I have not  mean "autorange", I mean range configurable by ie. msg.range to set min and max depend on sensor or also have idea to change outside temp. gauge range depend on season.

Krzysztof

Dave C-J

unread,
Jan 9, 2017, 11:53:08 AM1/9/17
to node...@googlegroups.com
Aha - told you I didn't understand :-)

Henrik Eketjäll

unread,
Jan 10, 2017, 5:37:01 AM1/10/17
to Node-RED

And while we're at it. The level gauge is "clipped" at the right side if displayed in 1x1 size.

Cor Bosman

unread,
Jan 13, 2017, 7:44:17 PM1/13/17
to Node-RED
I can color a level gauge through a css template with this style:

    .nr-dashboard-gauge circle {
        fill: red !important;
    }

May serve as a starting point to get your own colors going. You can target specific matches in css as well. Like 'the third circle element'

Simon H

unread,
Jan 15, 2017, 4:12:52 PM1/15/17
to Node-RED
in terms of displaying heat, I use a template node to show a plain div with a css gradient representing my hot water cylinder - described here:

and ends up looking like the part on the right (made up of 3 gradient sections, driven from 4 temperature measurements):



It's hardly a gauge as such; but as a graphical display of hot water availability, it works quite well.
I suppose it could be applied in some way to the background of an existing gauge, as Cor states below..?

s
Reply all
Reply to author
Forward
0 new messages