Change background color of ui_switch dynamic

I have spend many, many hours to figure out how I could change the background color dynamic of a dashboard UI switch (palette node-red-dashboard node "Switch" / ui_switch).
I could set the background color static by using CSS for each switch, but I don´t know how I can change the color dynamic.
I could also change the knob color for on/off-state for each switch with msg. or CSS.
I have read many comment in this forum, but no one have solved my problem.

I want to set each switch on the dashboard in 3 states, ON, OFF or OFFLINE.
When a device e.q. SONOFF S26 is connected to the WiFi-network, the UI of the switch should be ON or OFF with blue background color(ONLINE).
When the device is disconected from Wifi-network the UI switch background color should be gray (OFFLINE).
The switch-node are disable pass through the msg-message.
I´m using the latest version of NodeRed.

Please, help me....

I´m using MQTT teleperiod (topic stat/device/state) to detect if a device is ONLINE or OFFLINE. If NodeRed haven´t received a MQTT tele-message from the Tasmota-device before 300 seconds then the device is detected as OFFLINE.

Create some CSS classes that do what you need then send the class name in msg.className.

Read the built in help and search the forum for "msg.className"

A simple example:

[{"id":"9c6077bb3b0cbc57","type":"ui_switch","z":"831a451fa9d84779","name":"","label":"switch","tooltip":"","group":"360b409060b23c5b","order":3,"width":0,"height":0,"passthru":false,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":510,"y":200,"wires":[[]]},{"id":"0aeab08326d94ffb","type":"inject","z":"831a451fa9d84779","name":"msg.className = \"green\"","props":[{"p":"className","v":"green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":270,"y":200,"wires":[["9c6077bb3b0cbc57"]]},{"id":"5503f0b3f56647a7","type":"ui_template","z":"831a451fa9d84779","group":"360b409060b23c5b","name":"","order":3,"width":0,"height":0,"format":"<style>\n    .blue md-switch{\n    background-color: blue;\n    }\n    .green md-switch{\n    background-color: green;\n    }\n   </style> ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":520,"y":140,"wires":[[]]},{"id":"eb28e8798a066344","type":"inject","z":"831a451fa9d84779","name":"msg.className = \"blue\"","props":[{"p":"className","v":"blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":270,"y":240,"wires":[["9c6077bb3b0cbc57"]]},{"id":"360b409060b23c5b","type":"ui_group","name":"Demo","tab":"0c531246b2a3f00e","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"0c531246b2a3f00e","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

sw
Thank you, but it doesn´t change the background color.
It change only the background color of the small area around the "knob".
I want to change the hole area marked with a red line.

Use your browsers tools to inspect it determine the correct CSS selector and adjust the CSS to include that area.

I could set the background color static by using CSS for each switch

I assumed from what you first said that you knew how to set the background colour using CSS.

My example just showed you how to change the colour of a CSS element (background-color, as it happens) dynamically.
It's up to you to extend that to your requirements :upside_down_face:

Yes, I know how to set the color static with CSS, but not dynamic

Have you got it sorted out?

If you need more help please post your flow (use the </> button)

I´m not a professional programmer, so I still need help with my program. My program doesn´t work to change the background color of the ui_switch in OFFLINE state and I have no idea how I should solve it.
jbudd, I think you are very close to a solution for me :wink:

[{"id":"8d019ea56be3d90f","type":"delay","z":"b274a3816b2c7716","name":"Delay","pauseType":"delayv","timeout":"7","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":530,"y":620,"wires":[["74fad2df6cfccac7"]],"icon":"node-red-contrib-bigtimer/timer.png"},{"id":"74fad2df6cfccac7","type":"function","z":"b274a3816b2c7716","name":"Test if \"OFFLINE\"-state","func":"// Set OFFLINE\nmsg.bakgrund = \"#808080\";\nmsg.texta = \"#C0C0C0\";\nmsg.enable =false;\nmsg.payload=\"OFFLINE\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":770,"y":620,"wires":[["868716a0e25b62ac"]]},{"id":"99170cbf37c7b996","type":"mqtt in","z":"b274a3816b2c7716","name":"","topic":"tele/DEV1/STATE","qos":"2","datatype":"auto-detect","broker":"ddc04ba7b60af969","nl":false,"rap":true,"rh":0,"inputs":0,"x":140,"y":620,"wires":[["e77587ee8b33c6f2","868716a0e25b62ac"]]},{"id":"868716a0e25b62ac","type":"function","z":"b274a3816b2c7716","name":"Set \"ON\", \"OFF\" or \"OFFLINE\"","func":"var xx;\nxx=msg.payload.POWER1 ;\nmsg.payload=xx;\nmsg.topic=\"stat/DEV1/POWER1\";\nmsg.ikon = \"lightbulb_outline\";\nmsg.my_label = \"Living room\";\n\nif (xx === \"ON\") {\n    msg.bg =  \"#000050\" ; // set dark blue background color in ONLINE state\n    msg.knob = \"#FFFF00\" ; //set knob color in ON state\n    msg.enable = true ;\n    } \n\nif (xx === \"OFF\") {\n    msg.bg =   \"#000050\" ; // set dark blue background color in ONLINE state\n    msg.knob = \"#FFFF00\" ; //set yellow knob color in ON statet\n    msg.enable = true ;\n    }\n\nif (xx === \"OFFLINE\") {\n    msg.bg =   \"#303030\" ; // set gray background color in ONLINE state\n    msg.knob = \"#505050\" ; //set gray knob color in OFFLINE state\n    msg.enable =false;\n    }\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"// Code added here will be run once\n// whenever the node is started.\n//Set to OFFLINE from start until a tele message is sent from the device\n//var msg2 = { payload: msg.payload,topic:msg.topic };\n\n//setTimeout=150;\n//msg2.payload=\"OFFLINE\";\n//msg2.topic=\"stat/DEV2/POWER1\";\n//msg2.ikon = \"lightbulb_outline\";\n//msg2.etikett = \"DEV2 102\";\n//msg2.bakgrund = \"#808080\"; //dark gray background\n//msg2.texta = \"#C0C0C0\"; // gray text\n//msg2.enable =false;\n//return msg2;\n\n//var newMsg = { payload: msg.payload,topic:msg.topic };\n//return newMsg;","finalize":"","libs":[],"x":590,"y":540,"wires":[["4666ef848cd2daeb","53efc1510ee939cc"]]},{"id":"e77587ee8b33c6f2","type":"function","z":"b274a3816b2c7716","name":"Set tele check timer","func":"// check if  tele-massage is received from the device every 5 minut\n// teleperiod = 300 seconds = 5 minut\nmsg.delay=360000; // wait 360 seconds \nvar m1 = {reset:true};\nreturn [[m1,msg]];","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":350,"y":620,"wires":[["8d019ea56be3d90f"]]},{"id":"4666ef848cd2daeb","type":"ui_switch","z":"b274a3816b2c7716","name":"Living room DEV1","label":"{{msg.my_label}}","tooltip":"","group":"b04b273915dc4d79","order":1,"width":5,"height":1,"passthru":false,"decouple":"true","topic":"cmnd/DEV1/POWER1","topicType":"str","style":"","onvalue":"ON","onvalueType":"str","onicon":"fa-3x fa-lightbulb-o","oncolor":"YELLOW","offvalue":"OFF","offvalueType":"str","officon":"fa-2x fa-lightbulb-o","offcolor":"GRAY","animate":true,"className":"<i class=\"fa fa-toggle-off\" aria-hidden=\"true\"></i>","x":870,"y":540,"wires":[[]]},{"id":"030c7c831726a08b","type":"inject","z":"b274a3816b2c7716","name":"Assume device OFFLINE when start NodeRed","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"tele/DEV1/STATE","payload":"OFFLINE","payloadType":"str","x":400,"y":680,"wires":[["74fad2df6cfccac7"]]},{"id":"b0481c44fa76da9c","type":"ui_template","z":"b274a3816b2c7716","group":"9108a547650403e7","name":"sw0","order":4,"width":0,"height":0,"format":"<style id=\"switch-css\">\n    .sw0{\n        background: #000066 !important;\n    }\n    .sw0 > md-switch .md-thumb{\n        background: gray !important;\n    }\n    .sw0 > md-switch.md-checked .md-thumb{\n        background: yellow !important;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":770,"y":680,"wires":[[]]},{"id":"8b210b0f7395cb0e","type":"inject","z":"b274a3816b2c7716","name":"Test the OFFLINE state","props":[{"p":"payload.POWER1","v":"OFFLINE","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":160,"y":540,"wires":[["868716a0e25b62ac"]]},{"id":"0b10468d0f683269","type":"inject","z":"b274a3816b2c7716","name":"Test the OFF state","props":[{"p":"payload.POWER1","v":"OFF","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":150,"y":500,"wires":[["868716a0e25b62ac"]]},{"id":"c06c1ef19c1e3d68","type":"inject","z":"b274a3816b2c7716","name":"Test the ON state","props":[{"p":"payload.POWER1","v":"ON","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":140,"y":460,"wires":[["868716a0e25b62ac"]]},{"id":"53efc1510ee939cc","type":"debug","z":"b274a3816b2c7716","name":"debug 47","active":true,"tosidebar":true,"console":true,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":890,"y":460,"wires":[]},{"id":"ddc04ba7b60af969","type":"mqtt-broker","name":"Broker","broker":"localhost","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"b04b273915dc4d79","type":"ui_group","name":"Datarum","tab":"5e3aeb8c11d16ed6","order":2,"disp":true,"width":5,"collapse":true,"className":""},{"id":"9108a547650403e7","type":"ui_group","name":"Akvarium","tab":"4079a25d2b7273b5","order":9,"disp":true,"width":6,"collapse":false,"className":""},{"id":"5e3aeb8c11d16ed6","type":"ui_tab","name":"Belysning","icon":"fa-2x fa-lightbulb-o","order":1,"disabled":false,"hidden":false},{"id":"4079a25d2b7273b5","type":"ui_tab","name":"Akvarium","icon":"","order":3,"disabled":false,"hidden":false}]

I assume you have a reasonably up-to date installation of Node-red; node-red-dashboard should be version 3.1.7

You need a ui-template which defines the background-color and other properties for the three different classes ON, OFF and OFFLINE

Then you need to send a message to the switch node which includes msg.className "ON", "OFF" or "OFFLINE". It has to be msg.className.
It looks like you can get this from your MQTT node msg.payload.POWER1.
You can move it into msg.payload.className with a change node.

[{"id":"234b595564c69a47","type":"tab","label":"Flow 3","disabled":false,"info":"","env":[]},{"id":"d2d573e0d2850da2","type":"ui_switch","z":"234b595564c69a47","name":"","label":"switch","tooltip":"","group":"360b409060b23c5b","order":3,"width":0,"height":0,"passthru":false,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":590,"y":320,"wires":[[]]},{"id":"d33f138a6c748e79","type":"ui_template","z":"234b595564c69a47","group":"360b409060b23c5b","name":"","order":3,"width":0,"height":0,"format":"<style>\n    /* Background colour of entire widget */\n    md-card.nr-dashboard-switch.ON { \n       background-color: green;\n   }\n   md-card.nr-dashboard-switch.ON p {\n      font-family: \"Comic Sans MS\", sans-serif;\n      font-size: 1.5em;\n    }\n    md-card.nr-dashboard-switch.OFF {\n       background-color: red;\n   }\n   md-card.nr-dashboard-switch.OFF p {\n      font-family: \"Times New Roman\", serif;\n      font-size: 1.5em;\n    }\n    md-card.nr-dashboard-switch.OFFLINE {\n        background-color: grey;\n    }\n\n    /* Example for OFFLINE - The actual switch thumb (knob) and bar (slider) with and without .checked */\n    md-card.nr-dashboard-switch.OFFLINE md-switch .md-thumb {\n       background-color: gainsboro;\n    }\n    md-card.nr-dashboard-switch.OFFLINE md-switch.md-checked .md-thumb {\n       background-color: lightslategrey;\n    }\n    md-card.nr-dashboard-switch.OFFLINE md-switch .md-bar {\n       background-color: ghostwhite;\n    }\n    md-card.nr-dashboard-switch.OFFLINE md-switch.md-checked .md-bar {\n        background-color: lightgrey;\n    }\n   </style> ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":600,"y":280,"wires":[[]]},{"id":"38bbf13cfb3fc93b","type":"inject","z":"234b595564c69a47","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"ON","payloadType":"str","x":210,"y":140,"wires":[["c5e0972c497e3c05"]]},{"id":"c583de4eed3b0dea","type":"inject","z":"234b595564c69a47","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"OFF","payloadType":"str","x":210,"y":180,"wires":[["c5e0972c497e3c05"]]},{"id":"0045e4c73b88caf0","type":"inject","z":"234b595564c69a47","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"OFFLINE","payloadType":"str","x":220,"y":220,"wires":[["c5e0972c497e3c05"]]},{"id":"c5e0972c497e3c05","type":"change","z":"234b595564c69a47","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"className","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":320,"wires":[["d2d573e0d2850da2"]]},{"id":"7f7c5557c0d05ffd","type":"mqtt in","z":"234b595564c69a47","name":"","topic":"tele/DEV1/STATE","qos":"2","datatype":"auto-detect","broker":"ddc04ba7b60af969","nl":false,"rap":true,"rh":0,"inputs":0,"x":220,"y":380,"wires":[["c5e0972c497e3c05"]]},{"id":"360b409060b23c5b","type":"ui_group","name":"Demo","tab":"0c531246b2a3f00e","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"ddc04ba7b60af969","type":"mqtt-broker","name":"Broker","broker":"localhost","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"0c531246b2a3f00e","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

I don't think your msg.background and msg.knob is the best approach, not sure what you are trying to do there.

Finally it works after 40 h works.....
jbudd, thank you !
You are fantastic :wink:

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