Node-Red Dashboard Color ui_text Node by value

[Kip Shaffer]

Howdy folks!

I've recently discovered Node-Red, and am thrilled by it.  I am using it to provide a dashboard view for my home automation as well as the status of a game server I administer.  It is proving fantastic.  Many thanks to Pete Scargill and others for their inspiring articles.

I am a bit perplexed by the rules of the Value Format field of the Text Node.  I feel like I am super close.  I've already used the ui_text node to create LEDs in my dashboard!  For those, I set the value format parameter to:

<font color={{msg.payload ? 'lime' : 'grey'}} ><i class="fa fa-circle"></i></font>

This easily colors a circle icon bright green if the payload is true, or grey if it is false.

Now I want to do something similar, but instead of the icon, I want to put a value.  In a function node I create a new property on msg called color that is either 'red' or 'lime' based on the value of the payload.  It seems I can use either msg.color or msg.payload but not both simultaneously.

The attached flow has three examples.  The first, shows that I can display the value contained in msg.payload:

<font color='white'>{{msg.payload}}</font>

As expected, the value displayed updates with the value stored in msg.payload.

The second example shows I can change the color:

<font color='{{msg.color}}'>foo</font>

As expected, the word 'foo' is displayed in the color stored in msg.color.

But when I try to combine the two:

<font color='{{msg.color}}'>{{msg.payload}}</font>

No value whatsoever is displayed!

Does this make sense to the Node-Red experts? Is this expected behavior or a bug?  I'd really like to understand what is going on.  Pointers to the right documentation would help be much appreciated.

Thank you!

-Kip

[{"id":"def7e1a4.9eeb","type":"ui_text","z":"b1a486cd.0af458","group":"d5edbadc.e315f8","order":2,"width":"2","height":"1","name":"","label":"Test 2","format":"<font color='{{msg.color}}'>foo</font>","layout":"row-center","x":453,"y":136,"wires":[]},{"id":"10632e5a.bf5182","type":"function","z":"b1a486cd.0af458","name":"< 55?","func":"msg.color = (msg.payload < 55)?'red':'lime';\nreturn msg;","outputs":1,"noerr":0,"x":301,"y":137,"wires":[["def7e1a4.9eeb","aaa0cacf.5c3008","4fb48875.687568","d5cec69e.972db8"]]},{"id":"aaa0cacf.5c3008","type":"debug","z":"b1a486cd.0af458","name":"","active":false,"console":"false","complete":"true","x":459,"y":35.000030517578125,"wires":[]},{"id":"15c5050b.b3715b","type":"inject","z":"b1a486cd.0af458","name":"","topic":"","payload":"99","payloadType":"str","repeat":"","crontab":"","once":false,"x":120,"y":135.82998657226562,"wires":[["10632e5a.bf5182"]]},{"id":"4de77ac9.ef5b74","type":"inject","z":"b1a486cd.0af458","name":"","topic":"","payload":"33","payloadType":"str","repeat":"","crontab":"","once":false,"x":109,"y":84.82998657226562,"wires":[["10632e5a.bf5182"]]},{"id":"4fb48875.687568","type":"ui_text","z":"b1a486cd.0af458","group":"d5edbadc.e315f8","order":1,"width":"2","height":"1","name":"","label":"Test 1","format":"<font color='white'>{{msg.payload}}</font>","layout":"row-center","x":457,"y":89,"wires":[]},{"id":"d5cec69e.972db8","type":"ui_text","z":"b1a486cd.0af458","group":"d5edbadc.e315f8","order":3,"width":"2","height":"1","name":"","label":"Test 3","format":"<font color='{{msg.color}}'>{{msg.payload}}</font>","layout":"row-center","x":455,"y":185,"wires":[]},{"id":"d5edbadc.e315f8","type":"ui_group","z":"","name":"Status","tab":"7221face.9772a4","order":1,"disp":true,"width":"6"},{"id":"7221face.9772a4","type":"ui_tab","z":"","name":"Testing","icon":"dashboard","order":3}]

[Dave C-J]

Is indeed current expected behavior.... But also could/should be better. Happy for you to raise it as an issue.

[Jéan Roux]

+1 for both msg.color and msg.payload

[Dave C-J]

Hi,

actually was a simple fix. now pushed to master on github. (not on npm)

    cd ~/.node-red

    npm i node-red/node-red-dashboard

if you want to try it (but is part of the beta/work in progress so may be other bugs of course)

[Jéan Roux]

Wow, that was speedy ! 

Thanks !

[Kip Shaffer]

That's fantastic!  I'll give it a shot!  Thank you C-J!

[Kip Shaffer]

Thank you.... It worked!  I'm a bit of a novice when it comes to npm.  Thank you for giving me the commands to test it out.

I can now change the text and color with the following Value Format string:

<font color='{{msg.color}}'>{{msg.payload}}</font>

where msg.color is defined by a function node upstream of the ui_text node:

msg.color = (msg.payload < 55)?'red':'lime';

return msg;

Very very cool.  Perfect! 

[Venkateshwar Rao]

Super cool.

I was trying to do something like this for my door sensors (ESP12-Reed sensor-MQTT-NodeRed on Pi).

Is there a way I could change the back ground colour of a Text Node ? ( I am a total idiot when it comes to coding - and this is my 1st reach out for help)