SWITCH & BUTTON ui node : how to change color, background color, size

I see that a lot of us are struggling to customize their buttons in the Dashboard.
So here are two very simple flows to modify using messages: the icon, the icon color, the size (for the Font Awesome icon), the background color (for the Button node) of these buttons.

  1. This First example modify Switch button :
    image
    The result : image image image image
    Note : you can clic on the icon to change his state. A msg. payload is send eg: true or false
[{"id":"f451dbff.2559c8","type":"function","z":"c5966c3d.677f3","name":"Gate","func":"if (msg.payload === \"soundOn\")node.send({ui_control:{onicon:\"volume_up\",oncolor:\"blue\"},payload:true});\nif (msg.payload === \"soundOff\")node.send({ui_control:{officon:\"volume_off\",offcolor:\"black\"},payload:false});\n\nif (msg.payload === \"lightbulbOn\")node.send({ui_control:{onicon:\"fa-3x fa-lightbulb-o\",oncolor:\"#e6d00b\"},label:\"on\",payload:true});\nif (msg.payload === \"lightbulbOff\")node.send({ui_control:{officon:\"fa-2x fa-lightbulb-o\",offcolor:\"grey\"},label:\"off\",payload:false});\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":590,"y":1960,"wires":[["edb5bc.0dedba48"]]},{"id":"7c998c1e.5c4724","type":"comment","z":"c5966c3d.677f3","name":"========== SWITCH : change icone, icon color, size icon (for Font Awesome icon) ==========","info":"","x":390,"y":2060,"wires":[]},{"id":"7cd061e8.b4148","type":"inject","z":"c5966c3d.677f3","name":"on","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":590,"y":1870,"wires":[["edb5bc.0dedba48"]]},{"id":"2a23d055.aa576","type":"inject","z":"c5966c3d.677f3","name":"off","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":590,"y":1910,"wires":[["edb5bc.0dedba48"]]},{"id":"35df9cc7.222c74","type":"inject","z":"c5966c3d.677f3","name":"soundOn","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"soundOn","payloadType":"str","x":420,"y":1910,"wires":[["f451dbff.2559c8"]]},{"id":"91b3131d.0cede","type":"inject","z":"c5966c3d.677f3","name":"soundOff","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"soundOff","payloadType":"str","x":420,"y":1940,"wires":[["f451dbff.2559c8"]]},{"id":"18a0c148.d28a0f","type":"inject","z":"c5966c3d.677f3","name":"lightbulbOn","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"lightbulbOn","payloadType":"str","x":430,"y":1990,"wires":[["f451dbff.2559c8"]]},{"id":"4bfa0776.c35e28","type":"comment","z":"c5966c3d.677f3","name":"Angular materials icon : Animated","info":"","x":190,"y":1930,"wires":[]},{"id":"96e9358b.d0cac8","type":"comment","z":"c5966c3d.677f3","name":"Font Awesome icon : Not Animated","info":"","x":200,"y":2010,"wires":[]},{"id":"8e6598a7.5f2448","type":"inject","z":"c5966c3d.677f3","name":"lightbulbOff","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"lightbulbOff","payloadType":"str","x":430,"y":2020,"wires":[["f451dbff.2559c8"]]},{"id":"25ea2f41.b3be8","type":"debug","z":"c5966c3d.677f3","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":940,"y":1960,"wires":[]},{"id":"edb5bc.0dedba48","type":"ui_switch","z":"c5966c3d.677f3","name":"","label":"{{msg.label}}","tooltip":"","group":"110f893b.a0f1d7","order":2,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"onicon","oncolor":"oncolor","offvalue":"false","offvalueType":"bool","officon":"officon","offcolor":"offcolor","x":770,"y":1960,"wires":[["25ea2f41.b3be8"]]},{"id":"110f893b.a0f1d7","type":"ui_group","z":"","name":"Default","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
  1. This second example modify Push Button:
    image
    The result : image image image image
    Note : when you clic on the icon, a msg.payload is send eg: "pushed"
[{"id":"5ab73dd5.b88f94","type":"function","z":"c5966c3d.677f3","name":"Gate","func":"if (msg.payload === \"soundOn\")node.send({ui_control:{icon:\"volume_up\"},bgcolor:\"blue\",color:\"lightblue\",payload:msg.payload});\nif (msg.payload === \"soundOff\")node.send({ui_control:{icon:\"volume_off\"},bgcolor:\"black\",color:\"red\",payload:msg.payload});\n/*\nif (msg.payload === \"soundOn\"){\n    msg.ui_control = {icon:\"volume_up\"}\n    msg.bgcolor = \"blue\";\nreturn msg; \n}\nif (msg.payload === \"soundOff\"){\n    msg.ui_control = {icon:\"volume_off\"}\n    msg.bgcolor = \"black\";\nreturn msg; \n}\n*/\n\nif (msg.payload === \"batteryFull\")node.send({ui_control:{icon:\"fa-1x fa-battery-full\"},bgcolor:\"linen\",color:\"green\",label :\"Full\",payload:msg.payload});\nif (msg.payload === \"batteryEmpty\")node.send({ui_control:{icon:\"fa-2x fa-battery-quarter\"},bgcolor:\"linen\",color:\"red\",label : \"Attention !\",payload:msg.payload});\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":560,"y":2230,"wires":[["8523d176.da3c"]]},{"id":"8523d176.da3c","type":"ui_button","z":"c5966c3d.677f3","name":"button","group":"110f893b.a0f1d7","order":3,"width":"3","height":1,"passthru":true,"label":"{{msg.label}}","tooltip":"","color":"{{msg.color}}","bgcolor":"{{msg.bgcolor}}","icon":"{{msg.icon}}","payload":"pushed","payloadType":"str","topic":"","x":680,"y":2230,"wires":[["18282008.1793d"]]},{"id":"226d6476.378ccc","type":"inject","z":"c5966c3d.677f3","name":"soundOn","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"soundOn","payloadType":"str","x":420,"y":2180,"wires":[["5ab73dd5.b88f94"]]},{"id":"5215b3eb.6494cc","type":"inject","z":"c5966c3d.677f3","name":"soundOff","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"soundOff","payloadType":"str","x":420,"y":2210,"wires":[["5ab73dd5.b88f94"]]},{"id":"c3f89578.823088","type":"comment","z":"c5966c3d.677f3","name":"========== BUTTON : change icon, icon color, background color, size icon (for Font Awesome icon)  ==========","info":"","x":440,"y":2330,"wires":[]},{"id":"9117e612.9d8768","type":"inject","z":"c5966c3d.677f3","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"batteryFull","payloadType":"str","x":420,"y":2260,"wires":[["5ab73dd5.b88f94"]]},{"id":"46dd1809.8fba38","type":"inject","z":"c5966c3d.677f3","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"batteryEmpty","payloadType":"str","x":430,"y":2290,"wires":[["5ab73dd5.b88f94"]]},{"id":"18282008.1793d","type":"debug","z":"c5966c3d.677f3","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":820,"y":2230,"wires":[]},{"id":"79e23a4f.002dc4","type":"comment","z":"c5966c3d.677f3","name":"Angular materials icon : Animated","info":"","x":200,"y":2190,"wires":[]},{"id":"e57cc2df.7f85b","type":"comment","z":"c5966c3d.677f3","name":"Font Awesome icon : Not Animated","info":"","x":190,"y":2270,"wires":[]},{"id":"110f893b.a0f1d7","type":"ui_group","z":"","name":"Default","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","z":"","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Enjoy !

Chris :wink:

5 Likes

Really nice example, thanks!

1 Like

Thanks,it's a pleasure to share usefull flows :wink: