Change Gauge node colors

[RogierQ]

Is this the correct place to post some gauge wishes?

I am using it for scuba gas blending and would like to use some colors as indicators.
In the normal gauge you can set gradients with sectors, but depending on the type of gas i am mixing the sectors are different. so i tried to set the sectors with {{msg.min}} and {{msg.max}} but unfortunately this is not working. Is it correct that it is not flexible or do i make a mistake here?

Next wish is the level gauge, i really love this one, looks like water, and water = scuba diving
But i also would like to use colors in this one if possible...

And last wish wish wish... as cream on the cake... would like so much to put 2 different values in the in one level gauge with different colors... as my gasses are oxygen and helium together. but ok thats far away from the basic gauge... i understand.

Thanks!

[TotallyInformation]

How good is your HTML?

You could always try to track down an alternative gauge then use a Dashboard Template node to add it to your Dashboard.

[RogierQ]

ehhh bad.... i am always happy when my NR things work haha
but i give it a try thanks!

[hotNipi]

If the time starts to grow as fruits on the trees, I will do all the still missing gauges. Meanwhile I can give advises how everyone who ever reached Node RED can do its own gauge. And then share it with community. It truely not that complicated at all

[Andrei]

@RogierQ

Next wish is the level gauge, i really love this one, looks like water, and water = scuba diving
But i also would like to use colors in this one if possible...

You can use below flow as a reference for customizing the colors of the level gauge.

[{"id":"3f6adf81.8b1a6","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"f10db114.4357f","type":"ui_gauge","z":"3f6adf81.8b1a6","name":"","group":"d633ead2.d637c8","order":10,"width":6,"height":6,"gtype":"wave","title":"","label":"","format":"{{value}}","min":0,"max":"1200","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":790,"y":220,"wires":[]},{"id":"4f4d2903.04f408","type":"inject","z":"3f6adf81.8b1a6","name":"Water Usage","topic":"Water Usage Today - Gallons","payload":"600","payloadType":"num","repeat":"","crontab":"","once":true,"onceDelay":"1","x":190,"y":220,"wires":[["ad333f84.f8fcc","ac85626.9c36ba"]]},{"id":"202d393d.bbcef6","type":"ui_template","z":"3f6adf81.8b1a6","group":"d633ead2.d637c8","name":"Water Usage Label","order":5,"width":6,"height":1,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":690,"y":140,"wires":[[]]},{"id":"ad333f84.f8fcc","type":"template","z":"3f6adf81.8b1a6","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div class =\"chartlike\" > {{topic}} </div>","output":"str","x":500,"y":140,"wires":[["202d393d.bbcef6"]]},{"id":"f4e006f4.07adc8","type":"comment","z":"3f6adf81.8b1a6","name":"Water Usage","info":"","x":170,"y":140,"wires":[]},{"id":"ecfb236a.63727","type":"function","z":"3f6adf81.8b1a6","name":"Style Gauge","func":"msg.ui_control = \n\n{\n    \"gtype\": \"wave\",\n\n    \"options\":{\n        \"circleColor\": msg.circleColor, \n        \"textColor\": msg.textColor, \n        \"waveTextColor\": msg.waveTextColor, \n        \"waveColor\": msg.waveColor, \n        \"circleThickness\":0.06, \n        \"textVertPosition\":0.4, \n        \"waveHeight\":0.08, \n        \"waveCount\":3\n    \n}\n}\n\n\nreturn msg;","outputs":1,"noerr":0,"x":630,"y":220,"wires":[["f10db114.4357f"]]},{"id":"ac85626.9c36ba","type":"change","z":"3f6adf81.8b1a6","name":"Gauge Colors","rules":[{"t":"set","p":"circleColor","pt":"msg","to":"#255691","tot":"str"},{"t":"set","p":"textColor","pt":"msg","to":"#b2ddfb","tot":"str"},{"t":"set","p":"waveTextColor","pt":"msg","to":"#ff0000","tot":"str"},{"t":"set","p":"waveColor","pt":"msg","to":"#00ff00","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":220,"wires":[["ecfb236a.63727"]]},{"id":"1707d004.2840f","type":"change","z":"3f6adf81.8b1a6","name":"Gauge Colors","rules":[{"t":"set","p":"circleColor","pt":"msg","to":"#255691","tot":"str"},{"t":"set","p":"textColor","pt":"msg","to":"#b2ddfb","tot":"str"},{"t":"set","p":"waveTextColor","pt":"msg","to":"#b2ddfb","tot":"str"},{"t":"set","p":"waveColor","pt":"msg","to":"#3fa9f5","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":280,"wires":[[]]},{"id":"d633ead2.d637c8","type":"ui_group","z":"","name":"T1","tab":"d0cbb5d4.b94068","disp":false,"width":"6","collapse":false},{"id":"d0cbb5d4.b94068","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":9}]

[RogierQ]

Cool, thanks for making an example!

[dceejay]

Not sure about diving in water that colour but ...

[zenofmud]

@Andrei Very nice! Now the test is can you show what happens if the number of gallons exceeds the upper limit. Something like this:

[Andrei]