Change icon on switch

[davidcgu]

Good afternoon, I know how to how to show a image on a text box or there are options on a template, however on the standard switch node there is the option to change the icon

I have tried to set this as custom and set the name of the .png image from the static folder but does not work and shows me an error as folloes:

Is that possible to be done or there is no more choice than moving to a template?

Thanks in advance

[shrickus]

Those "icon" text fields are not for entering urls or filenames, which is why your icon is not showing what you expect. From the ui_switch node's info:

The On/Off Color and On/Off Icon are optional fields. If they are all present, the default toggle switch will be replaced with the relevant icons and their respective colors.

The On/Off Icon field can be either Material Design icons (e.g. 'check', 'close') or Font Awesome icons (e.g. 'fa-fire').

If you need to show some custom icon images, I think you will have to use a ui_template node -- but then you will have to build the interactivity (to send/recv msg data) yourself.

[davidcgu]

For Fa icons I already know it works, anyhow I have being able to do something similar coping the icons on the static folder and injecting each one on a text box.

Result is already amazing

Next target..... be able to create a template with those 3 icons on a single row and each one act as a pushbutton, lets see... does not looks easy to me.

Regards

[davidcgu]

Finally I have decided to leave it like this as a bit rudimentary but made to show the expected actual status of the blind depending on the latest button pushed..... so if last action (in manual or under schedule) was to raise up the blind then up is on green and down icon on yellow, if last action was to move down then down is on green and up icon on yellow, in the case the stop button was pressed then booth up & down blind icon are shown on red as the position is not determined.

Hope you like it

[Andrei]

Hi,

Your final design is great. Well done.

Just a comment about using fa icons in the switch dashboard node (original question):

It will work fine if you enter the name of the fa icon, as below:

You can use even the spinning icons...

Flow:

[{"id":"18597abe.938ec5","type":"ui_switch","z":"2cb1b127.fa28be","name":"","label":"UP","group":"953a8d3e.ddd6","order":0,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-refresh fa-spin","oncolor":"lime","offvalue":"false","offvalueType":"bool","officon":"fa-arrow-circle-down","offcolor":"yellow","x":351.1000061035156,"y":86.00000381469727,"wires":[[]]},{"id":"f9aeac7c.b94c1","type":"ui_switch","z":"2cb1b127.fa28be","name":"","label":"Down","group":"953a8d3e.ddd6","order":0,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-refresh fa-spin","oncolor":"lime","offvalue":"false","offvalueType":"bool","officon":"fa-arrow-circle-up","offcolor":"yellow","x":353.00000381469727,"y":153.99999904632568,"wires":[[]]},{"id":"953a8d3e.ddd6","type":"ui_group","z":"","name":"TEST","tab":"94476cd1.94e7c","disp":true,"width":"4","collapse":false},{"id":"94476cd1.94e7c","type":"ui_tab","z":"","name":"GRID","icon":"dashboard"}]

[swisscore]

Hello, nice icons, what are your icons ? I didn't find these icons on fa icons

[igrowing]

Maybe off-top...
I observe that fa-icons aren't accepted by switch. Tried 'fa-fire' as in the node help: none is showing.
However, google material works OK if used without 'mi-'. Tried 'check' and 'close' from node help and it works.
My NR version is:

27 Jul 10:19:27 - [info] Node-RED version: v0.18.7
27 Jul 10:19:27 - [info] Node.js  version: v8.11.2
27 Jul 10:19:27 - [info] Linux 4.14.37-v7+ arm LE

[knolleary]

@igrowing

My NR version is:

It's probably more relevant to share what version of node-red-dashboard you have as that's what you're asking about.

[davidcgu]

[{"id":"9697e2fb.c46fe","type":"change","z":"712ddec8.883c8","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"1","fromt":"num","to":"<i class=\"fa fa-lightbulb-o fa-2x nr-dashboard-warning\"></i>","tot":"str"},{"t":"change","p":"payload","pt":"msg","from":"0","fromt":"num","to":"<p><i class=\"fa fa-lightbulb-o fa-2x\"></i> ","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":960,"y":3240,"wires":[["f70cab64.9dd638"]]},{"id":"f70cab64.9dd638","type":"ui_text","z":"712ddec8.883c8","group":"7fccc952.17a8e8","order":1,"width":"1","height":"1","name":"icon status entrada","label":"","format":"{{msg.payload}}","layout":"row-center","x":1150,"y":3240,"wires":[]},{"id":"7fccc952.17a8e8","type":"ui_group","z":"","name":"luces","tab":"7b345faa.30565","order":2,"disp":true,"width":"7","collapse":true},{"id":"7b345faa.30565","type":"ui_tab","z":"","name":"SALON","icon":"fa-television","order":2}]

[igrowing]

@knolleary

It's probably more relevant to share what version of node-red-dashboard you have as that's what you're asking about.

NR dashboard version 2.15.5

And node:

[
    {
        "id": "c58ee072.8a123",
        "type": "ui_switch",
        "z": "f1073339.c03c3",
        "name": "",
        "label": "Valve",
        "tooltip": "Think twice before click",
        "group": "93bf6bca.bc3238",
        "order": 7,
        "width": "2",
        "height": "2",
        "passthru": false,
        "decouple": "true",
        "topic": "homie/shiber-01/shiber/valve/set",
        "style": "",
        "onvalue": "true",
        "onvalueType": "bool",
        "onicon": "fa-tint",
        "oncolor": "cyan",
        "offvalue": "false",
        "offvalueType": "bool",
        "officon": "fa-fire",
        "offcolor": "red",
        "x": 610,
        "y": 1740,
        "wires": [
            [
                "210cb9a6.c15896",
                "2ae91a5f.34bfb6"
            ]
        ]
    },
    {
        "id": "93bf6bca.bc3238",
        "type": "ui_group",
        "z": "",
        "name": "She-bear: status",
        "tab": "fd92601d.1a632",
        "order": 7,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "fd92601d.1a632",
        "type": "ui_tab",
        "z": "",
        "name": "Garden",
        "icon": "local_florist",
        "order": 2
    }
]

[zenofmud]

fa-icons work fine for me using dashboard v 2.15.5


However I am running NR 0.20.5 and I see you are on NR v0.18.7.....

And your example shows the icon fine in my dashboard....

[pietrofduarte]

Hi @davidcgu great controls. I am looking for some like this to adapt to set up my air conditioner. Could you share this code with me?

[zenofmud]

@pietrofduarte
A - this thread is over a year old
B - did you try the flow he posted?

[pietrofduarte]

@Andrei nice job. Could you tel me how you could be the right alignment?
I copy and import you code but when I try do myself the I failed.

[zenofmud]

How large did you define the group?