Dashboard text-node change text color

[klaarnou]

Hello.

I would like to change the text color of a text node depending on the input.

-------- [IF switch is on show ON(green) else show OFF(red)]

From this page : https://dashboard.flowfuse.com/nodes/widgets/ui-text.html#dynamic-properties

I should be able to send msg.ui_update.color to the text-node and change the font color, but I cannot get this to work. Please help.

thanks

Bernard.

[hotNipi]

Hello and welcome to forum.

It starts working if you tick the Apply style

But the way it does the color change may surprise you a bit....

[klaarnou]

Hello, thank you very much for your help.
I did tick that box, did not work.

Obviously I am messing up somewhere, please post a example.

thank you very much.

[hotNipi]

Here you are

[{"id":"191ee848013e1267","type":"ui-text","z":"8240715f881ef736","group":"2c34b9c7d6324531","order":0,"width":0,"height":0,"name":"","label":"the text node","format":"{{msg.payload}}","layout":"row-spread","style":true,"font":"","fontSize":16,"color":"#bfbfbf","wrapText":false,"className":"","x":810,"y":1360,"wires":[]},{"id":"9f72c3b497988bd1","type":"inject","z":"8240715f881ef736","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"OFF","payloadType":"str","x":450,"y":1340,"wires":[["1f2ef2aa8b0e3a25"]]},{"id":"b5296ae047bcd9be","type":"inject","z":"8240715f881ef736","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"ON","payloadType":"str","x":450,"y":1380,"wires":[["1f2ef2aa8b0e3a25"]]},{"id":"1f2ef2aa8b0e3a25","type":"function","z":"8240715f881ef736","name":"function 10","func":"const c = msg.payload == \"OFF\" ? \"#ff0000\" : \"#00ff00\"\nmsg.ui_update = {\"color\":c}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":630,"y":1360,"wires":[["191ee848013e1267"]]},{"id":"2c34b9c7d6324531","type":"ui-group","name":"Devices","page":"7294756f31e17b81","width":"6","height":"1","order":2,"showTitle":false,"className":"dynamic-title","visible":"true","disabled":"false","groupType":"default"},{"id":"7294756f31e17b81","type":"ui-page","name":"Home","ui":"29792df7d7b05e2e","path":"/home","icon":"home","layout":"grid","theme":"52ba8a01d6eda628","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":9,"className":"","visible":"true","disabled":"false"},{"id":"29792df7d7b05e2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":[],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"52ba8a01d6eda628","type":"ui-theme","name":"Mobile","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"5px","groupGap":"5px","groupBorderRadius":"10px","widgetGap":"5px"}}]

[klaarnou]

Thank you very much for your help, will try that as soon as I get home.

[smanjunath211]

is there a way to change the background color?

[hotNipi]

I don't see any options to do it with the ui_control.something-dedicated but definitely possible to apply some CSS using msg.class

[smanjunath211]

i tried doing it, but it is affecting all the text nodes across the dashboard. need to see how to do a particular widget only.

[smanjunath211]

Got it...