Gauge colour depends on its group visibility-initial state

I observe a pretty strange behaviour with a gauge in which I reversed the value range.

I know... min:5 max:0 settings look awkward, but the gauge generally works as expected and counts down to zero.

[{"id":"55da1325.e4287c","type":"function","z":"62e8ac07.b13044","name":"Set timer","func":"var new_msg = {};\n\nflow.set(\"off_timestamp\", msg.payload + 1000 * 5)\n\nreturn new_msg;","outputs":1,"noerr":0,"x":340,"y":200,"wires":[["e98c8102.ec192"]]},{"id":"9a659ef3.123ce","type":"change","z":"62e8ac07.b13044","name":"show","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"show\":[\"Gauge_Test_Default\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":320,"wires":[["c2044150.a525b"]]},{"id":"9981b895.cea978","type":"change","z":"62e8ac07.b13044","name":"hide","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"hide\":[\"Gauge_Test_Default\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":280,"wires":[["c2044150.a525b"]]},{"id":"109baf08.711d71","type":"ui_ui_control","z":"62e8ac07.b13044","name":"","events":"all","x":960,"y":300,"wires":[[]]},{"id":"8670a6ab.54b4b8","type":"ui_gauge","z":"62e8ac07.b13044","name":"","group":"4183ec4e.1ab114","order":3,"width":0,"height":0,"gtype":"gage","title":"","label":"","format":"{{value}}","min":"5","max":"0","colors":["#00b500","#e6e600","#ca3839"],"seg1":"","seg2":"","x":950,"y":200,"wires":[]},{"id":"a4bca6a.3e33058","type":"inject","z":"62e8ac07.b13044","name":"Start countdown","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":200,"wires":[["55da1325.e4287c","9a659ef3.123ce"]]},{"id":"c58f3496.e98338","type":"function","z":"62e8ac07.b13044","name":"Calculate difference","func":"var new_msg = {};\n\nnew_msg.payload = Math.floor((flow.get(\"off_timestamp\") - Date.now()) / 1000);\n\nreturn new_msg;","outputs":1,"noerr":0,"x":740,"y":200,"wires":[["8670a6ab.54b4b8"]]},{"id":"e98c8102.ec192","type":"looptimer","z":"62e8ac07.b13044","duration":"1","units":"Second","maxloops":"4","maxtimeout":"5","maxtimeoutunits":"Second","name":"","x":520,"y":200,"wires":[["c58f3496.e98338"],["9981b895.cea978"]]},{"id":"c2044150.a525b","type":"delay","z":"62e8ac07.b13044","name":"","pauseType":"delay","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":720,"y":300,"wires":[["109baf08.711d71"]]},{"id":"4183ec4e.1ab114","type":"ui_group","z":"","name":"Default","tab":"93da81a1.df78d","disp":false,"width":"6","collapse":false},{"id":"93da81a1.df78d","type":"ui_tab","z":"","name":"Gauge Test","icon":"dashboard","disabled":false,"hidden":false}]

That is, it works as expected, unless I hide and show the gauge UI group in which case the initial colours get reversed every second run.

First Start countdown and the gauge proceeds from green to red:

image

Second run - from red to green:

image

Third run - from green to red.

And again, and again.


I'm not sure if it counts as a bug, or am I abusing the settings, as this does not happen when min is lower than max.

Or is there any workaround?


And this is purely visibility state-related, not value-related. I just thought of a better demo:

[{"id":"f5f3d7af.1a6b28","type":"change","z":"62e8ac07.b13044","name":"show","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"show\":[\"Gauge_Test_Default\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":540,"wires":[["9f6b9323.8cf93","992b3b8d.4d8db8"]]},{"id":"fb0e71ae.b6f9","type":"change","z":"62e8ac07.b13044","name":"hide","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"hide\":[\"Gauge_Test_Default\"]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":530,"y":500,"wires":[["9f6b9323.8cf93","7a6aa4b3.de3f9c"]]},{"id":"9f6b9323.8cf93","type":"ui_ui_control","z":"62e8ac07.b13044","name":"","events":"all","x":960,"y":520,"wires":[[]]},{"id":"e013f509.0c3728","type":"ui_gauge","z":"62e8ac07.b13044","name":"","group":"4183ec4e.1ab114","order":3,"width":0,"height":0,"gtype":"gage","title":"","label":"","format":"{{value}}","min":"5","max":"0","colors":["#00b500","#e6e600","#ca3839"],"seg1":"","seg2":"","x":950,"y":420,"wires":[]},{"id":"fc6cdb06.2c9878","type":"inject","z":"62e8ac07.b13044","name":"Start fun","topic":"","payload":"4","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":260,"y":420,"wires":[["e013f509.0c3728","fb0e71ae.b6f9"]]},{"id":"7a6aa4b3.de3f9c","type":"delay","z":"62e8ac07.b13044","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":680,"y":580,"wires":[["f5f3d7af.1a6b28"]]},{"id":"992b3b8d.4d8db8","type":"delay","z":"62e8ac07.b13044","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":680,"y":460,"wires":[["fb0e71ae.b6f9"]]},{"id":"4183ec4e.1ab114","type":"ui_group","z":"","name":"Default","tab":"93da81a1.df78d","disp":false,"width":"6","collapse":false},{"id":"93da81a1.df78d","type":"ui_tab","z":"","name":"Gauge Test","icon":"dashboard","disabled":false,"hidden":false}]

Can see that it is happening - but totally weird. By all means raise an issue against the project but no idea when I'll get time to look at it.

Somewhere, when determining the intermediate value of colour to display, a multiplication with a negative multiplier (resulting from min > max) must occur.

I'll have a look at the code and raise an issue on GitHub.

1 Like

So I have had a look at the dashboard code and at least I reassured myself I was not going beyond the intended usage case:

reverse: (parseFloat(config.max) < parseFloat(config.min)) ? true : false

That said, node-red-dashboard code looks to me pretty passive, only relaying the settings.

Isn't the issue with the used Angular UI library? Does it belong to Node-RED's code?

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