Suggestion for which icons to use

Hang on.... Is this the node that sends the message?

Because I think we are talking about opposite ends of the message flow.
Dunno. Just checking.

I can (usually) work out how to send the message. But dealing with the reception is a whole other thing.

This is just a normal ui switch.
When you click it sends its msg and then its icon changes between on and off icons you have set.

Screenshot from 2022-02-09 11-21-51

That isn't iconify-mdi:fan-auto and iconify-mdi:fan

I'm not using those ones, they are the ones Steve posted, these are some others you see in my screenshot.

The template code gives access to all iconify icons so you can use whaterver you want to.

Ok, my bad.

But I am still missing something.

This is the switch node - as per example.
And the template node.

[{"id":"6979f5841ed2ce16","type":"ui_template","z":"10dda891.0445cf","group":"9d94622b.1f02e","name":"","order":6,"width":0,"height":0,"format":"<script src=\"\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":870,"y":1000,"wires":[[]]},{"id":"51cbd130e48f277f","type":"ui_switch","z":"10dda891.0445cf","name":"","label":"switch","tooltip":"","group":"32e5d991.ba0e26","order":6,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"iconify-mdi:fan-auto","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"iconify-mdi:fan","offcolor":"","x":1180,"y":1080,"wires":[[]]},{"id":"9d94622b.1f02e","type":"ui_group","name":"Local Telemetry","tab":"4b7ee1607e13459c","order":1,"disp":true,"width":"7","collapse":false},{"id":"32e5d991.ba0e26","type":"ui_group","name":"Fan control","tab":"72e19677.786938","order":2,"disp":true,"width":"6","collapse":false},{"id":"4b7ee1607e13459c","type":"ui_tab","name":"Telemetry","icon":"track_changes","order":1,"disabled":false,"hidden":false},{"id":"72e19677.786938","type":"ui_tab","name":"Fan control","icon":"fa-thermometer-half","order":11,"disabled":false,"hidden":false}]

This is what I see on the dashboard.

Screenshot from 2022-02-09 11-27-08

Screenshot from 2022-02-09 11-27-11

So, something isn't doing what it should.

Weirdly, if I do it in a button node, it works.

[{"id":"c092178334c6fcd3","type":"ui_button","z":"10dda891.0445cf","name":"","group":"32e5d991.ba0e26","order":7,"width":"2","height":"1","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"iconify-mdi:fan-auto ","payload":"","payloadType":"str","topic":"","x":1330,"y":1080,"wires":[[]]},{"id":"32e5d991.ba0e26","type":"ui_group","name":"Fan control","tab":"72e19677.786938","order":2,"disp":true,"width":"6","collapse":false},{"id":"72e19677.786938","type":"ui_tab","name":"Fan control","icon":"fa-thermometer-half","order":11,"disabled":false,"hidden":false}]

Screenshot from 2022-02-09 11-31-09

seems you need to set a color for off and on then it will work, you can also change its size by putting it after the icon name eg iconify-mdi:fan 34px

Ok, so now, are we using the switch node to SEND of DISPLAY the icon?

I'd prefer to DISPLAY it. Sending is done via change nodes from the flow.
I get that part.

And having to set the colour/s.... I want to control that by the incoming message.

The color and icon can be setup how you like, operating the switch can then do whatever is needed to make your fan work, while also displatying its current setting ?

I have the input side worked out with buttons to press.

It is a set of .... 4 buttons.
ON and OFF

Then there is an icon which depicts if the fan is running or not.
But no indication of the mode. (Auto/Manual)
So I'm wanting something to show that side of things.

This is where I am at.
Seems the colour thing isn't quite working as I thought.
Ok, it caught me the first time, but when you said the colours need to be defined, I tried it this way.

Keeping it as simple as I can.

[{"id":"d66f4d53ce4f3080","type":"ui_switch","z":"10dda891.0445cf","name":"","label":"switch","tooltip":"","group":"32e5d991.ba0e26","order":7,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"iconify-mdi:fan 34px","oncolor":"{{msg.colour}}","offvalue":"off","offvalueType":"str","officon":"iconify-mdi:fan-auto 34px","offcolor":"{{msg.colour}}","x":1480,"y":1030,"wires":[[]]},{"id":"d882965753d95591","type":"inject","z":"10dda891.0445cf","name":"","props":[{"p":"payload"},{"p":"colour","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"off","payloadType":"str","x":1340,"y":990,"wires":[["d66f4d53ce4f3080"]]},{"id":"3197d67953d6f103","type":"inject","z":"10dda891.0445cf","name":"","props":[{"p":"payload"},{"p":"colour","v":"green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"on","payloadType":"str","x":1340,"y":1030,"wires":[["d66f4d53ce4f3080"]]},{"id":"32e5d991.ba0e26","type":"ui_group","name":"Fan control","tab":"72e19677.786938","order":2,"disp":true,"width":"6","collapse":false},{"id":"72e19677.786938","type":"ui_tab","name":"Fan control","icon":"fa-thermometer-half","order":11,"disabled":false,"hidden":false}]

if you see my example


I have 2 switches next to the fan. First is power on or off (running) which I can control manually.
Second changes mode from manual to auto,. Both also show the current state.

If the fan is started automatically then the first icon would turn green, just as if I had pressed it myself,so there is no need for 4 buttons.

Yeah, thanks.

But sorry, I am not getting why it isn't working with the two inject nodes.

I'm trying to not get too far ahead of things. Something that just came to mind is the new multiposition switch (slider) that may be better for doing what I want.

But that's a different thing.

I'm trying to get the icon to represent what is going on.
I don't mind trying things to see different approaches to things. But just now I am really not with it.
You've shown me how to use the switch node to toggle the icons depending on the message received.
Fair enough. But to get it working, I need to define the colours - or it is just blank.
Taking that to the next step, I would like to control the colours of the icons in the message.
But that doesn't seem to work.
If it can't be done, fair enough. Can I use another node that allows it?

I've got the size worked out too. Not too difficult. Just add 34px (for instance and as it is a good size) to the end of the icon name and voila it works.

I'm going to ask how to get them to spin, but that too eludes me. But again: I don't want to get too far ahead of where we are.

At this point, I can set the icons and their sizes. Different messages show different icons. (With the switch node)
But colour: nothing.

I would like to be able to control:
The icon shown.
The size - done.
The colour - can't get it working.
Spinning. (Haven't got that far yet)

I don't think switch supports color by msg, but you can have a different color for off and on state in the config.
As you only need two switches and they can only have two states each why would you need more colors ?

For spin use iconify-mdi:fan 34px fa-spin in icon field.

Well, for reasons unknown, it isn't spinning.

Screenshot from 2022-02-09 12-33-41

Screenshot from 2022-02-09 12-33-00

Even after I send the on command to the node.

I was only wanting to set the colours by message.... It is possible to set them as how you showed. Ok.

fa-spin as above

[{"id":"d66f4d53ce4f3080","type":"ui_switch","z":"10dda891.0445cf","name":"","label":"switch","tooltip":"","group":"32e5d991.ba0e26","order":7,"width":"2","height":"1","passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"iconify-mdi:fan 34px mdi-spin","oncolor":"red","offvalue":"off","offvalueType":"str","officon":"iconify-mdi:fan-auto 34px","offcolor":"lime","x":1480,"y":1030,"wires":[[]]},{"id":"3197d67953d6f103","type":"inject","z":"10dda891.0445cf","name":"","props":[{"p":"payload"},{"p":"colour","v":"green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"on","payloadType":"str","x":1340,"y":1030,"wires":[["d66f4d53ce4f3080"]]},{"id":"d882965753d95591","type":"inject","z":"10dda891.0445cf","name":"","props":[{"p":"payload"},{"p":"colour","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"off","payloadType":"str","x":1340,"y":990,"wires":[["d66f4d53ce4f3080"]]},{"id":"32e5d991.ba0e26","type":"ui_group","name":"Fan control","tab":"72e19677.786938","order":2,"disp":true,"width":"6","collapse":false},{"id":"72e19677.786938","type":"ui_tab","name":"Fan control","icon":"fa-thermometer-half","order":11,"disabled":false,"hidden":false}]

Not here. :confused:

The colours change. But no spinning.

Its still fa-spin not mdi-spin

1 Like

Sorry.... I scrolled down to the bottom of the page with all the icons...

They say: mdi-spin.

Screenshot from 2022-02-09 12-42-07

fa-spin... that's Font Awesome - I thought we were talking Material Design?
(More confused)

fa-spin adds the needed class to the icon, it doesn't matter which icon it is.

(Silly me)

Thanks. We're getting there.

Which is good.
And thanks - sincerely - for the time/effort.

So now you have a nice gui, its not too hard to write the flow around it to control your fan.
Bed time for me :sleeping: :sleeping: :sleeping: