Change icon on switch


#1

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:

image

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

Thanks in advance


#2

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.


#3

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

image

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


#4

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.

image

image

image

Hope you like it :slight_smile:


#5

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...

f-01

f-02

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"}]

#6

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