Change color by value + or -

[Becker]

Hi,
is it possible that the color of a value is changing automaticly ?
+: black
-: red
for example ?

[UnborN]

Hi .. you can use the msg.className and depending whether the number is positive or negative send a "warning / red" class to the ui text node .. quite a tedious process but i couldn't think of anything else.

Here is an example

[{"id":"88a1abde91dda0d2","type":"inject","z":"937cb040.d8e16","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"-123","payloadType":"num","x":310,"y":800,"wires":[["cb3952fb16ac8ba2"]]},{"id":"2b6afda8cf58a308","type":"ui_text","z":"937cb040.d8e16","group":"dc65816ac3f5a17f","order":0,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","className":"","x":690,"y":860,"wires":[]},{"id":"cb3952fb16ac8ba2","type":"function","z":"937cb040.d8e16","name":"add style","func":"if (msg.payload < 0) {\n    msg.className = \"warning\"\n}\nelse {\n    msg.className = \"\"\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":860,"wires":[["2b6afda8cf58a308","bdd7a947ffb90d4d"]]},{"id":"75b642c88c32662e","type":"inject","z":"937cb040.d8e16","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"345","payloadType":"num","x":310,"y":900,"wires":[["cb3952fb16ac8ba2"]]},{"id":"149778cdf7684859","type":"ui_template","z":"937cb040.d8e16","group":"","name":"warning styles","order":0,"width":0,"height":0,"format":"<style>\n    .warning {\n        color: red !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":820,"y":700,"wires":[[]]},{"id":"bdd7a947ffb90d4d","type":"debug","z":"937cb040.d8e16","name":"debug 36","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":590,"y":800,"wires":[]},{"id":"dc65816ac3f5a17f","type":"ui_group","name":"Default","tab":"27301abf42b47a3a","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"27301abf42b47a3a","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[smanjunath211]

I use this method, no css involved, may be limited options, but works for me.

[{"id":"39af0df5fe1c06a2","type":"switch","z":"d1d5b47695a238e0","name":"","property":"payload","propertyType":"msg","rules":[{"t":"lt","v":"0","vt":"num"},{"t":"eq","v":"0","vt":"num"},{"t":"gt","v":"0","vt":"num"}],"checkall":"true","repair":false,"outputs":3,"x":570,"y":420,"wires":[["917b8d1e3d71db60"],["2385c18f0f324c76"],["a75de53149517996"]]},{"id":"c4dcf81b6c43aebd","type":"ui_button","z":"d1d5b47695a238e0","name":"","group":"0df4552f9d69039d","order":4,"width":3,"height":2,"passthru":false,"label":"Zero","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"0","payloadType":"num","topic":"topic","topicType":"msg","x":390,"y":420,"wires":[["39af0df5fe1c06a2"]]},{"id":"cf35e882013e04b0","type":"ui_button","z":"d1d5b47695a238e0","name":"","group":"0df4552f9d69039d","order":5,"width":3,"height":2,"passthru":false,"label":"+10","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"10","payloadType":"num","topic":"topic","topicType":"msg","x":390,"y":460,"wires":[["39af0df5fe1c06a2"]]},{"id":"2ff6f57ce6bbc73f","type":"ui_button","z":"d1d5b47695a238e0","name":"","group":"0df4552f9d69039d","order":2,"width":3,"height":2,"passthru":false,"label":"-10","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"-10","payloadType":"num","topic":"topic","topicType":"msg","x":390,"y":380,"wires":[["39af0df5fe1c06a2"]]},{"id":"917b8d1e3d71db60","type":"change","z":"d1d5b47695a238e0","name":"","rules":[{"t":"set","p":"fcolor","pt":"msg","to":"red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":380,"wires":[["027c4571b7afc0e2"]]},{"id":"2385c18f0f324c76","type":"change","z":"d1d5b47695a238e0","name":"","rules":[{"t":"set","p":"fcolor","pt":"msg","to":"yellow","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":420,"wires":[["027c4571b7afc0e2"]]},{"id":"a75de53149517996","type":"change","z":"d1d5b47695a238e0","name":"","rules":[{"t":"set","p":"fcolor","pt":"msg","to":"green","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":460,"wires":[["027c4571b7afc0e2"]]},{"id":"027c4571b7afc0e2","type":"ui_text","z":"d1d5b47695a238e0","group":"0df4552f9d69039d","order":3,"width":9,"height":6,"name":"","label":"Value","format":"<font size=6><font color={{fcolor}}>{{msg.payload}}","layout":"row-spread","className":"","x":950,"y":420,"wires":[]},{"id":"0df4552f9d69039d","type":"ui_group","name":"DEFAULT","tab":"f3a8a67ff0904e39","order":1,"disp":false,"width":"12","collapse":false,"className":""},{"id":"f3a8a67ff0904e39","type":"ui_tab","name":"HOME","icon":"dashboard","order":17,"disabled":false,"hidden":false}]

[E1cid]

You can use angular to set the css
e.g

[{"id":"2b6afda8cf58a308","type":"ui_text","z":"65617ffeb779f51c","group":"dc65816ac3f5a17f","order":0,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload < 0 ? '<span  class=\"minus\">' + msg.payload  + '</span>' : msg.payload}}","layout":"row-spread","className":"","x":310,"y":3800,"wires":[]},{"id":"88a1abde91dda0d2","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"-123","payloadType":"num","x":150,"y":3740,"wires":[["2b6afda8cf58a308"]]},{"id":"75b642c88c32662e","type":"inject","z":"65617ffeb779f51c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"345","payloadType":"num","x":130,"y":3820,"wires":[["2b6afda8cf58a308"]]},{"id":"b1ac2980dabdcd31","type":"ui_template","z":"65617ffeb779f51c","group":"","name":"warning styles","order":0,"width":0,"height":0,"format":"<style>\n    .minus {\n        color: red !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":400,"y":3680,"wires":[[]]},{"id":"dc65816ac3f5a17f","type":"ui_group","name":"Default","tab":"27301abf42b47a3a","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"27301abf42b47a3a","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

{{msg.payload < 0 ? '<span  class="minus">' + msg.payload  + '</span>' : msg.payload}}

@dceejay But it does not support inline style style="color:red !important;" which is valid html?
@smanjunath211 <font> is not supported in html5