Change gauge color gradient

Dashboard
1

Hi

I saw some other post about this topic but I don't know how apply to my case.
I'm trying to use msg. ui_control without success can someone help me with that?
The following flow is just to test how it would works whet it comes to change gauge color gradient.

[{"id":"1f5495f4.9a15da","type":"ui_gauge","z":"2c9e8824.fd75b8","name":"","group":"bfffd362.67af3","order":5,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value|number:1}}","min":0,"max":"300","colors":["#c0c0c0","#c0c0c0","#c0c0c0"],"seg1":"","seg2":"","x":850,"y":60,"wires":[]},{"id":"e6c933ab.fe833","type":"inject","z":"2c9e8824.fd75b8","name":"","topic":"","payload":"140","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":80,"wires":[["6064d8a3.3b07b8"]]},{"id":"6064d8a3.3b07b8","type":"function","z":"2c9e8824.fd75b8","name":"Change color","func":"var payload =  msg.payload;\n\nif(payload>150) {\n msg.ui_gauge=[\"#ff4d4d\",\"#ff4d4d\",\"#ff4d4d\"];}\n\nelse{msg.ui_gauge=[\"#ffff66\",\"#ffff66\",\"#ffff66\"];\n    \n}\nreturn msg;","outputs":1,"noerr":0,"x":670,"y":160,"wires":[["1f5495f4.9a15da","e5b6f3c2.fb53b"]]},{"id":"e5d232c7.1962d","type":"inject","z":"2c9e8824.fd75b8","name":"","topic":"","payload":"200","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":370,"y":160,"wires":[["6064d8a3.3b07b8"]]},{"id":"e5b6f3c2.fb53b","type":"debug","z":"2c9e8824.fd75b8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":910,"y":160,"wires":[]},{"id":"bfffd362.67af3","type":"ui_group","z":"","name":"Pressures","tab":"e14475ad.995118","order":2,"disp":true,"width":"6","collapse":false},{"id":"e14475ad.995118","type":"ui_tab","z":"","name":"Settings","icon":"dashboard","order":3}]

Thank you in advance

2

It is gauge's natural function to change color if value is above some threshold. Of course you can change it manually if you like but it seems impractical. However here is example how to how to change gauge colors. (you'll need latest version of dashboard)

[{"id":"5c4c5120.bb035","type":"ui_gauge","z":"91a358ea.bbbb98","name":"","group":"dc4d8303.df87","order":0,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value | number:1}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"5","seg2":"7","x":490,"y":180,"wires":[]},{"id":"b26a6748.70f428","type":"function","z":"91a358ea.bbbb98","name":"options","func":"msg.ui_control = {options:{customSectors: {\n  percents: false, \n  ranges: [{\n    color : \"#009900\",\n    lo : 0,\n    hi : 2\n  },{\n    color : \"#33cccc\",\n    lo : 2.1,\n    hi : 4\n  },{\n    color : \"#3366ff\",\n    lo : 4.1,\n    hi : 6\n  },{\n    color : \"#ff00ff\",\n    lo : 6.1,\n    hi : 8\n  },{\n    color : \"#ff0000\",\n    lo : 8.1,\n    hi : 10\n  }]\n    \n}}}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":280,"wires":[["5c4c5120.bb035"]]},{"id":"ef9011e5.8e00d","type":"ui_slider","z":"91a358ea.bbbb98","name":"","label":"slider","tooltip":"","group":"dc4d8303.df87","order":1,"width":0,"height":0,"passthru":true,"outs":"end","topic":"","min":0,"max":10,"step":"2","x":150,"y":180,"wires":[["5c4c5120.bb035"]]},{"id":"b2eb7e33.b3416","type":"ui_button","z":"91a358ea.bbbb98","name":"","group":"dc4d8303.df87","order":2,"width":0,"height":0,"passthru":false,"label":"2 colors","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":140,"y":240,"wires":[["22f666e0.f2ceda"]]},{"id":"d3416f08.ad98e","type":"ui_button","z":"91a358ea.bbbb98","name":"","group":"dc4d8303.df87","order":2,"width":0,"height":0,"passthru":false,"label":"5 colors","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":140,"y":280,"wires":[["b26a6748.70f428"]]},{"id":"22f666e0.f2ceda","type":"function","z":"91a358ea.bbbb98","name":"options","func":"msg.ui_control = {options:{customSectors: {\n  percents: false, \n  ranges: [{\n    color : \"#ffff00\",\n    lo : 0,\n    hi : 5\n  },{\n    color : \"#3399ff\",\n    lo : 5.01,\n    hi : 10\n  }]\n    \n}}}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":240,"wires":[["5c4c5120.bb035"]]},{"id":"dc4d8303.df87","type":"ui_group","z":"","name":"Charts","tab":"18e7297.06310d7","disp":true,"width":"6"},{"id":"18e7297.06310d7","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
3

Very interesting your nodes, thank you, I worked out my issue.

1 Like