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

Share Your Nodes
1

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:

6 Likes
2

Really nice example, thanks!

1 Like
3

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

4

Hi There.

so I can tell with Font Awesome Icon you can set the size of the icon quite easily in the ICON field with fa-3x etc.

Question is how do you do that for the other supported icons.. e.g. Material Design icons?

I tried add this to the Button Icon field but just shows a ? mark.

> You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.
but doesnt explain if it allows for changing the size of the icon or how it should be done.

So far only Font Awesome seem the only one easily can change it size (and is documented how to)

ta.

5

It really depends where and how you try to use the icons. They are created in different ways in different widgets so the additional treatment vary.
It is easier to talk about specific use case. Whole story is just too complicated to write down and probably not something to just learn by reading a post.

6

Would it make sense to select a single icon library as native to NR? Would that provide a standardization of use and implementation? Seems like icon support... is well... all over the place... referencing @hotNipi comment above? Could we not encourage contributors to use standardized methods? Just asking.

7

Well originally when we inherited the dashboard it used Angular Material icons that only has about 70 icons , so we added Font Awesome 4.7 as that is what we use in the core of Node-RED. But of course users always want more.

We can't just add them all as we want Dashboard to run offline and they all take space and load times are slow enough already.

I have added some info to the readme to help clarify.

8

All good, thanks for explaining. A slippery slope to be sure.

9

This topic was automatically closed after 60 days. New replies are no longer allowed.