Setting font color for a value

I've seen a number of examples on how to set the font color (or an icon) for the whole message using msg.color but I'm looking for the right way to do the same basing on the value within the message.
In my case the message contains an array with values like true/false or On/Off, and currently each text node I have has Value format set to something like {{msg.payload[5]}}.
Is there an option to configure formatting like this: true (or On) -->green, false (or Off) -->red ?

I have been using a Switch Node and selecting either one of Change Nodes and then outputting via a text node. I don't know if that would help.

[{"id":"f64a4d0.e5aca3","type":"change","z":"8803e200.b1143","name":"","rules":[{"t":"set","p":"Output","pt":"msg","to":"#FF3333","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1082,"y":143,"wires":[["85b1230b.a97a98"]]},{"id":"1c394b6.6ac76b5","type":"change","z":"8803e200.b1143","name":"","rules":[{"t":"set","p":"Output","pt":"msg","to":"#33ff55","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1080,"y":105,"wires":[["85b1230b.a97a98"]]},{"id":"d6bd54ea.0ea98","type":"switch","z":"8803e200.b1143","name":"Target?","property":"switch","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":918,"y":126,"wires":[["1c394b6.6ac76b5"],["f64a4d0.e5aca3"]]},{"id":"85b1230b.a97a98","type":"ui_text","z":"8803e200.b1143","group":"6a2416d.9938968","order":1,"width":0,"height":0,"name":"Ambient Temperature","label":"<font color= {{msg.Output}} > {{\"Living Temperature\"}} </font>","format":"<strong><font color= {{msg.Output}} > {{msg.payload}} </font></strong>","layout":"row-spread","x":1300,"y":140,"wires":[]},{"id":"6a2416d.9938968","type":"ui_group","z":"","name":"Heating","tab":"f77d04c6.cfa778","order":1,"disp":false,"width":"6","collapse":false},{"id":"f77d04c6.cfa778","type":"ui_tab","z":"","name":"HMI","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Thanks, but that will not help in my case as I have multiple text nodes, I probably need some logic right in formatting function, not sure if it exists though.

There are many ways to do what you want.

off the top of my head...

You take your array of messages, put it though a function that generates a new msg for each entry & outputs a stream of new messages that have a .color (property depending on the value). I'd suggest you add a topic like "item1", "item2" etc so you can route the stream of messages to your dashboard nodes appropriately.

You send your array of messages into a split node, then through a function node that that adds a .color (property depending on the value).

You could add a function node with 5 outputs, loop through your array, generate a new msg for each element & add the desired .color property based on the element value then return an array of messages (where each one lines up with the output pins)

1 Like

Thank you for the ideas, I've got it working. This solution is perhaps far from perfect, but but still good for a non profi :wink:

[{"id":"d53f115.e791df","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"77d03571.d5b03c","type":"split","z":"d53f115.e791df","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":270,"y":160,"wires":[["f3192a52.5daf18"]]},{"id":"ade11630.7a53c8","type":"switch","z":"d53f115.e791df","name":"","property":"parts.index","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"},{"t":"eq","v":"3","vt":"num"},{"t":"eq","v":"4","vt":"num"},{"t":"eq","v":"5","vt":"num"},{"t":"eq","v":"6","vt":"num"},{"t":"eq","v":"7","vt":"num"}],"checkall":"true","repair":false,"outputs":8,"x":600,"y":160,"wires":[["67141802.de6758"],[],[],[],[],[],[],["16430092.5fe45f"]]},{"id":"f3192a52.5daf18","type":"function","z":"d53f115.e791df","name":"add color","func":"var data = msg.payload;\nvar color;\nif (msg.payload == \"On\") { \n    color = \"red\";\n    } else {\n    color = \"blue\";\n    }\nmsg.color = color;\nreturn msg;","outputs":1,"noerr":0,"x":450,"y":160,"wires":[["ade11630.7a53c8"]]},{"id":"16430092.5fe45f","type":"ui_text","z":"d53f115.e791df","group":"d53fbd69.0cb7d","order":11,"width":0,"height":0,"name":"","label":"DI 7","format":"<font color ={{msg.color}}>{{msg.payload}}</font>","layout":"row-spread","x":760,"y":220,"wires":[]},{"id":"67141802.de6758","type":"ui_text","z":"d53f115.e791df","group":"d53fbd69.0cb7d","order":11,"width":0,"height":0,"name":"","label":"DI 0","format":"<font color ={{msg.color}}>{{msg.payload}}</font>","layout":"row-spread","x":770,"y":100,"wires":[]},{"id":"d53fbd69.0cb7d","type":"ui_group","z":"","name":"Inputs","tab":"13fd2b57.c56695","order":1,"disp":true,"width":4,"collapse":false},{"id":"13fd2b57.c56695","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
1 Like

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