If I use a gauge node, there are four modes.
Gauge
donut
compass
level
I usually use gauge and donut.
In these there are options for colours for values.
Using level now on a job, there are no options for colour ranges.
Let alone setting the colour of the gauge itself.
Levels would be nice, but even being able to adjust the colour would be nice.
You can already set many more options on the gauges if you want - https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md
If you need different colours for different levels then the ui-level widget may be what you require - https://flows.nodered.org/node/node-red-contrib-ui-level
There was an (performance/cpu usage ) issue I remember you have been struggled using the ui-level widget and may be you avoid using it for now but I have slight pre-announcement about ui-level, as I have performance issues reported by others too. There will be new version of widget I hope next week. All changes targeted to performance improvement and it will be quite big I can say already. Stay tuned 
Thanks both.
@dceejay
Ok. Thanks. Shall follow up on that.
@hotNipi
Thanks to you too.
I am sorry I haven't followed up on tests to confirm my claims. I have been really busy writing/designing dashboards.
I am maybe thinking of using your node again. Good to hear there is a new one coming out soon.
Sorry but I have tried with the knowledge I have.
All I am getting in NaN in the gauge.
This is the flow.
[{"id":"f6cfa92.6e10958","type":"ui_gauge","z":"d7542db7.ca4698","name":"Disc usage","group":"2f70ce14.471c8a","order":0,"width":"3","height":"3","gtype":"wave","title":"gauge","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":750,"y":2790,"wires":[]},{"id":"a38eaf9c.6cafc8","type":"inject","z":"d7542db7.ca4698","name":"","topic":"","payload":"3","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":2690,"wires":[["bc7224c2.6e3fd8"]]},{"id":"5d7b573b.6fe02","type":"inject","z":"d7542db7.ca4698","name":"","topic":"","payload":"40","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":2730,"wires":[["bc7224c2.6e3fd8"]]},{"id":"dcde9908.38a49","type":"inject","z":"d7542db7.ca4698","name":"","topic":"","payload":"75","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":2770,"wires":[["bc7224c2.6e3fd8"]]},{"id":"79b8df68.ee6bd","type":"inject","z":"d7542db7.ca4698","name":"","topic":"","payload":"95","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":250,"y":2810,"wires":[["bc7224c2.6e3fd8"]]},{"id":"d3c63e9b.b767f","type":"ui_ui_control","z":"d7542db7.ca4698","name":"","x":740,"y":2750,"wires":[["f6cfa92.6e10958"]]},{"id":"bc7224c2.6e3fd8","type":"fan","z":"d7542db7.ca4698","x":390,"y":2750,"wires":[["22c92a9d.e99ede"]]},{"id":"22c92a9d.e99ede","type":"function","z":"d7542db7.ca4698","name":"","func":"var c = flow.get(\"colour\");\nmsg.colors = c;\nreturn msg;","outputs":1,"noerr":0,"x":530,"y":2750,"wires":[["d3c63e9b.b767f"]]},{"id":"ed324ef8.924578","type":"change","z":"d7542db7.ca4698","name":"","rules":[{"t":"set","p":"colour","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":590,"y":2870,"wires":[[]]},{"id":"3a770f40.bd788","type":"inject","z":"d7542db7.ca4698","name":"","topic":"","payload":"cyan","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":400,"y":2840,"wires":[["ed324ef8.924578"]]},{"id":"5d93e1b4.44e84","type":"inject","z":"d7542db7.ca4698","name":"","topic":"","payload":"green","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":400,"y":2880,"wires":[["ed324ef8.924578"]]},{"id":"74ea07b7.917d18","type":"inject","z":"d7542db7.ca4698","name":"","topic":"","payload":"yellow","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":400,"y":2920,"wires":[["ed324ef8.924578"]]},{"id":"cd9f7f7d.d0f23","type":"inject","z":"d7542db7.ca4698","name":"","topic":"","payload":"red","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":400,"y":2960,"wires":[["ed324ef8.924578"]]},{"id":"2f70ce14.471c8a","type":"ui_group","z":"","name":"Gauge test","tab":"ce4bcacd.5cc46","order":6,"disp":true,"width":"6","collapse":false},{"id":"ce4bcacd.5cc46","type":"ui_tab","z":"","name":"VTEMP","icon":"dashboard","order":21,"disabled":false,"hidden":false}]
Given that the colour is set before an injection of the number.
I went to the other link mentioned at the bottom about "liquid fill gauges" but I can't understand/use that as it is HTML and NR wants JS.
I'm not trying to be difficult. I just don't see a starting point from which I can build.
NaN happened because you are sending not numeric payload to gauge.
Also if you going to change gauge colors and you are using wide range of colors, you probably need to change the text color to something opposite to stand out.
Here's the starting point
[{"id":"61092de0.0d1e54","type":"ui_gauge","z":"7f6628bb.1a7bf8","name":"Disc usage","group":"c3c2cdb0.e07e","order":0,"width":"3","height":"3","gtype":"wave","title":"gauge","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":1040,"y":840,"wires":[]},{"id":"26c9dc16.51dc34","type":"inject","z":"7f6628bb.1a7bf8","name":"","topic":"","payload":"3","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":810,"y":820,"wires":[["61092de0.0d1e54"]]},{"id":"8b41e199.77259","type":"inject","z":"7f6628bb.1a7bf8","name":"","topic":"","payload":"40","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":810,"y":860,"wires":[["61092de0.0d1e54"]]},{"id":"a72ed50.ea99528","type":"inject","z":"7f6628bb.1a7bf8","name":"","topic":"","payload":"75","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":810,"y":900,"wires":[["61092de0.0d1e54"]]},{"id":"546f709.e62f89","type":"inject","z":"7f6628bb.1a7bf8","name":"","topic":"","payload":"95","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":810,"y":940,"wires":[["61092de0.0d1e54"]]},{"id":"17f2a356.165f1d","type":"change","z":"7f6628bb.1a7bf8","name":"","rules":[{"t":"set","p":"colour","pt":"flow","to":"payload[0]","tot":"msg"},{"t":"set","p":"textcolour","pt":"flow","to":"payload[1]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":680,"wires":[["3ec871c4.392b4e"]]},{"id":"a843ecff.5d8f1","type":"inject","z":"7f6628bb.1a7bf8","name":"","topic":"","payload":"[\"cyan\",\"red\"]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":330,"y":600,"wires":[["17f2a356.165f1d"]]},{"id":"fbc1ba88.e593e8","type":"inject","z":"7f6628bb.1a7bf8","name":"","topic":"","payload":"[\"green\",\"orange\"]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":340,"y":640,"wires":[["17f2a356.165f1d"]]},{"id":"91866984.76a5a8","type":"inject","z":"7f6628bb.1a7bf8","name":"","topic":"","payload":"[\"yellow\",\"blue\"]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":340,"y":680,"wires":[["17f2a356.165f1d"]]},{"id":"f6fed539.7b6788","type":"inject","z":"7f6628bb.1a7bf8","name":"","topic":"","payload":"[\"red\",\"white\"]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":330,"y":720,"wires":[["17f2a356.165f1d"]]},{"id":"3ec871c4.392b4e","type":"change","z":"7f6628bb.1a7bf8","name":"","rules":[{"t":"set","p":"ui_control.options.waveColor","pt":"msg","to":"colour","tot":"flow"},{"t":"set","p":"ui_control.options.circleColor","pt":"msg","to":"colour","tot":"flow"},{"t":"set","p":"ui_control.options.waveTextColor","pt":"msg","to":"textcolour","tot":"flow"},{"t":"set","p":"ui_control.options.textColor","pt":"msg","to":"textcolour","tot":"flow"},{"t":"delete","p":"payload","pt":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":800,"y":700,"wires":[["61092de0.0d1e54"]]},{"id":"591c0c28.ed6c84","type":"ui_ui_control","z":"7f6628bb.1a7bf8","name":"","x":600,"y":740,"wires":[["3ec871c4.392b4e"]]},{"id":"c3c2cdb0.e07e","type":"ui_group","z":"","name":"Gauge test","tab":"4d7cb4e4.88493c","order":6,"disp":true,"width":"6","collapse":false},{"id":"4d7cb4e4.88493c","type":"ui_tab","z":"","name":"VTEMP","icon":"dashboard","order":21,"disabled":false,"hidden":false}]
Thanks.
Shall look at the flow soon.
It is only going to be 3 maybe 4 colours.
I've installed your ui_level node. That seems to be working fine.
Oh, somewhere - recently - I remember being told that I can send "text" payloads into the gauge and it will parse the "text" as a number.
So I can send "88" and it will be parsed by the gauge as 88 (number).
But I may be dreaming that someone said that.
I told that about the ui_level and that's still valid.
(Take me out the back and shoot me!)
I'm re-designing a lot of dashboards saving real estate with layouts.
Head is spinning.
So can't I send a . . . . . . don't worry.
About to look at your code now.
Thanks.
Thanks Thanks.
Shall study it soon.
Dumb question:
Looked at your flow. Yeah it is great. I've already said that.
But "pulling it apart".
Mind if I ask why/how/where the ui control node fits in?
I got curious and deleted the link from the ui control node. The flow still works.
I don't get how it fits in the scheme of things.
It isn't I want to put you on the spot. Just if you could please help with me understanding that part.
(I can ask in the forum, but just feel it would be polite to ask you first.)
Is it ok if you don't want to help if I ask on the forum?
This is related how server side and Dashboard communicate.
ui_control node sends message on many socket events. (connecting,disconnection,change tab). Here it is not important what is the content of this message (you can get advantage of the message content but this is another story) but the event itself.
Gauge, when initialized has configured defaults. It always starts with configured state. Those are what you can configure from edit panel.
Additional configuration (with msg.ui_control.options) is not stored in gauge. So this must be resent every time after deploy (and/or if you need to change it) And of course the configuration may have totally different in any time. for example if your server running all the time and you just open the dashboard at random time, the gauge also needs to be with up to date configuration to present info correctly.
So at the moment the connection established and ui_control fires the message, that fires your custom configuration to be sent to the gauge.
Ok. That sort of makes sense. (Not blaming you)
But when I look at this link: Gauges they don't have anything I can discern as a ui control node.
It puts all the extra stuff in routines like this:
var gauge1 = loadLiquidFillGauge("fillgauge1", 55);
var config1 = liquidFillGaugeDefaultSettings();
config1.circleColor = "#FF7777";
config1.textColor = "#FF4444";
config1.waveTextColor = "#FFAAAA";
config1.waveColor = "#FFDDDD";
config1.circleThickness = 0.2;
config1.textVertPosition = 0.2;
config1.waveAnimateTime = 1000;
Which can kind of get. It is still a foreign language to me, but I can/am starting to see the structure there.
And, looking at what you sent me in the flow, it is similar to that code.
I'll keep trying to get my head around it. Thanks.
What is also not helping is that there are no options in ui control. So that in itself sort of confuses me. But as you said/explained
So I'll put it down to that for now.
Again: I appreciate your help with this.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy