# Switch node icons color problem

**URL:** <https://discourse.nodered.org/t/switch-node-icons-color-problem/33758>\
**Category:** Dashboard\
**Created:** [5 October 2020 09:10 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758 "2020-10-05T09:10:40Z")\
**Posts on this page:** 6\
**Page:** 2

<div class="post-metadata">

**Author:** ![mariulin](https://avatars.discourse-cdn.com/v4/letter/m/a9adbd/32.png) [@mariulin](https://discourse.nodered.org/u/mariulin)\
**Post date:** [5 October 2020 21:02 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/23 "2020-10-05T21:02:48Z")

</div>

More or less...  
"Ci vediamo" is correct...

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [5 October 2020 21:06 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/24 "2020-10-05T21:06:29Z")

</div>

I looked at the flow I posted and there is a slight bit of confusion.

Why?

Well, I just grabbed that from some working stuff and I forgot to include some extra stuff - which you either may or not like/want.

It also allows the _icon_ to have varying background colours also.

So this is some code to better show you what is happening, as you may be confused by the `button` node also having `msg.background` used.

```auto
[{"id":"8f2f7d28.395dc","type":"inject","z":"8bb4de19.f72c88","name":"ON","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":550,"wires":[["48274cad.781644"]]},{"id":"48274cad.781644","type":"change","z":"8bb4de19.f72c88","name":"","rules":[{"t":"set","p":"icon","pt":"msg","to":"<font color = \"lime\"><i class=\"fa fa-lightbulb-o fa-3x\"></i></font>","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":550,"wires":[["b113db7b.098b18","870b0886.1619b8"]]},{"id":"870b0886.1619b8","type":"ui_button","z":"8bb4de19.f72c88","name":"BULB#2","group":"53792891.774238","order":2,"width":"3","height":"2","passthru":false,"label":"{{msg.icon}}","tooltip":"","color":"","bgcolor":"{{msg.background}}","icon":"","payload":"X","payloadType":"str","topic":"","x":550,"y":550,"wires":[[]]},{"id":"8bce1c43.e97bf8","type":"change","z":"8bb4de19.f72c88","name":"","rules":[{"t":"set","p":"icon","pt":"msg","to":"<font color = \"red\"><i class=\"fa fa-lightbulb-o fa-3x\"></i></font>","tot":"str"},{"t":"set","p":"background","pt":"msg","to":"white","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":320,"y":600,"wires":[["870b0886.1619b8"]]},{"id":"1f5fd410.d19cc4","type":"inject","z":"8bb4de19.f72c88","name":"OFF","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":600,"wires":[["8bce1c43.e97bf8"]]},{"id":"53792891.774238","type":"ui_group","name":"Group 7","tab":"de5134a7.f0a0d","order":4,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":5}]

```

This is only to show you what is happening and what you can do with the `button` node as opposed to the `switch` node.

I think that it is better as allows both the colour of the icon and the background to be changed and a lot easier.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [5 October 2020 21:28 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/25 "2020-10-05T21:28:40Z")

</div>

(Don't worry, I am curious and now I have an interesting question to answer)

How about this easy bit of code:

```auto
[{"id":"c91511f4.2ef35","type":"ui_switch","z":"8bb4de19.f72c88","name":"","label":"switch","tooltip":"","group":"53792891.774238","order":13,"width":"3","height":"2","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-4x fa-lightbulb-o","oncolor":"dimgrey","offvalue":"false","offvalueType":"bool","officon":"fa-4x fa-lightbulb-o","offcolor":"gold","x":330,"y":790,"wires":[[]]},{"id":"149838c3.dc8217","type":"inject","z":"8bb4de19.f72c88","name":"","topic":"","payload":"true","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":770,"wires":[["c91511f4.2ef35"]]},{"id":"3f440eaf.b0f65a","type":"inject","z":"8bb4de19.f72c88","name":"","topic":"","payload":"false","payloadType":"bool","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":810,"wires":[["c91511f4.2ef35"]]},{"id":"53792891.774238","type":"ui_group","name":"Group 7","tab":"de5134a7.f0a0d","order":4,"disp":true,"width":6},{"id":"de5134a7.f0a0d","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":5}]

```

---

<div class="post-metadata">

**Author:** ![mariulin](https://avatars.discourse-cdn.com/v4/letter/m/a9adbd/32.png) [@mariulin](https://discourse.nodered.org/u/mariulin)\
**Post date:** [8 October 2020 19:48 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/26 "2020-10-08T19:48:54Z")

</div>

Finally I'm back...  
After three night of work, changes and various attempts (and with your help), I managed to get it to work!!!  
Now I can turn on or off the lights from NodeRed, from Shelly Apps or from original wall switch and in every case icon on NodeRed dashboard change (Yellow for ON status, Grey for OFF status)

Thanks to all...

I attach my code:

```auto
[
    {
        "id": "69103026.a212b",
        "type": "comment",
        "z": "4f28d205.05afcc",
        "name": "Luci Esterne",
        "info": "",
        "x": 110,
        "y": 40,
        "wires": []
    },
    {
        "id": "33d06843.6dce88",
        "type": "ui_audio",
        "z": "4f28d205.05afcc",
        "name": "Messaggio Vocale",
        "group": "3b49ec8e.cf4144",
        "voice": "it-IT",
        "always": true,
        "x": 600,
        "y": 40,
        "wires": []
    },
    {
        "id": "34fc0755.d3c048",
        "type": "http request",
        "z": "4f28d205.05afcc",
        "name": "Switch Shelly",
        "method": "GET",
        "ret": "txt",
        "paytoqs": false,
        "url": "http://admin:XXXX@192.168.1.213/relay/0?turn=toggle",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "x": 380,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "8539e1f.f79182",
        "type": "change",
        "z": "4f28d205.05afcc",
        "name": "Setta Messaggio",
        "rules": [
            {
                "t": "change",
                "p": "payload",
                "pt": "msg",
                "from": "true",
                "fromt": "bool",
                "to": "Luci Esterne Accese",
                "tot": "str"
            },
            {
                "t": "change",
                "p": "payload",
                "pt": "msg",
                "from": "false",
                "fromt": "bool",
                "to": "Luci Esterne Spente",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 400,
        "y": 40,
        "wires": [
            [
                "33d06843.6dce88"
            ]
        ]
    },
    {
        "id": "cac6dfed.07eb",
        "type": "ui_switch",
        "z": "4f28d205.05afcc",
        "name": "",
        "label": "Accendi / Spegni",
        "tooltip": "",
        "group": "a4049c44.5b032",
        "order": 1,
        "width": 6,
        "height": "2",
        "passthru": false,
        "decouple": "true",
        "topic": "",
        "style": "",
        "onvalue": "true",
        "onvalueType": "str",
        "onicon": "onicon",
        "oncolor": "oncolor",
        "offvalue": "false",
        "offvalueType": "str",
        "officon": "officon",
        "offcolor": "offcolor",
        "x": 130,
        "y": 80,
        "wires": [
            [
                "8539e1f.f79182",
                "34fc0755.d3c048"
            ]
        ]
    },
    {
        "id": "9ebebda1.5024a",
        "type": "function",
        "z": "4f28d205.05afcc",
        "name": "Luci ON",
        "func": "msg.ui_control = { onicon:\"fa-4x fa-lightbulb-o\",oncolor:\"yellow\"}\nmsg.payload=\"true\"\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 810,
        "y": 130,
        "wires": [
            [
                "cac6dfed.07eb"
            ]
        ]
    },
    {
        "id": "a7e417f4.f4d768",
        "type": "http request",
        "z": "4f28d205.05afcc",
        "name": "Status Shelly",
        "method": "GET",
        "ret": "txt",
        "paytoqs": false,
        "url": "http://admin:XXXX@192.168.1.213/relay/0?status",
        "tls": "",
        "persist": false,
        "proxy": "",
        "authType": "",
        "x": 230,
        "y": 150,
        "wires": [
            [
                "e502c6f.06e5438"
            ]
        ]
    },
    {
        "id": "e502c6f.06e5438",
        "type": "json",
        "z": "4f28d205.05afcc",
        "name": "Trasforma in JSON",
        "property": "payload",
        "action": "",
        "pretty": false,
        "x": 410,
        "y": 150,
        "wires": [
            [
                "14b6bd7a.f0edb3"
            ]
        ]
    },
    {
        "id": "14b6bd7a.f0edb3",
        "type": "switch",
        "z": "4f28d205.05afcc",
        "name": "Controllo se ON o OFF",
        "property": "payload.ison",
        "propertyType": "msg",
        "rules": [
            {
                "t": "true"
            },
            {
                "t": "false"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 620,
        "y": 150,
        "wires": [
            [
                "9ebebda1.5024a"
            ],
            [
                "f1ebdbd6.28a388"
            ]
        ]
    },
    {
        "id": "f1ebdbd6.28a388",
        "type": "function",
        "z": "4f28d205.05afcc",
        "name": "Luci OFF",
        "func": "msg.ui_control = { officon:\"fa-3x fa-lightbulb-o\",offcolor:\"grey\"}\nmsg.payload=\"false\"\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 810,
        "y": 170,
        "wires": [
            [
                "cac6dfed.07eb"
            ]
        ]
    },
    {
        "id": "5c103573.3e325c",
        "type": "inject",
        "z": "4f28d205.05afcc",
        "name": "Avvio",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 90,
        "y": 150,
        "wires": [
            [
                "a7e417f4.f4d768"
            ]
        ]
    },
    {
        "id": "3b49ec8e.cf4144",
        "type": "ui_group",
        "z": "",
        "name": "Gestione Cancello",
        "tab": "be3b686.c1d7998",
        "order": 1,
        "disp": true,
        "width": 6,
        "collapse": true
    },
    {
        "id": "a4049c44.5b032",
        "type": "ui_group",
        "z": "",
        "name": "Luci Esterne",
        "tab": "59b63931.02dec8",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "be3b686.c1d7998",
        "type": "ui_tab",
        "z": "",
        "name": "Cancello",
        "icon": "account_balance",
        "order": 5,
        "disabled": false,
        "hidden": false
    },
    {
        "id": "59b63931.02dec8",
        "type": "ui_tab",
        "z": "",
        "name": "Luci",
        "icon": "lightbulb_outline",
        "order": 6,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [8 October 2020 21:01 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/27 "2020-10-08T21:01:00Z")

</div>

Good to hear.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 October 2020 21:01 UTC](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758/28 "2020-10-22T21:01:04Z")

</div>

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

[Previous page](https://discourse.nodered.org/t/switch-node-icons-color-problem/33758.md?page=1)