Slider with custom icon?

Slider with custom icon?

I enabled custom configuration on slider and used an icon that I know is in the FA icon library, done similar for say dashboard buttons. but the slide is not using the icons for on and off?

image

What if you simply put fa-circle?

Built in help...

I believe I tried that, but will again. Like I said, have done this with other nodes, just not a switch node. Based on what you presented it should work.

If you define icons, then the color must be defined.

2 Likes

That is not required for a simple button. So a switch has that specific requirement? Tested it... yup color required... WHY is that the case? Makes on sense when other UI objects can have an icon with no color assignment explicitly required. I mean easy to get around but seems like a design inconsistency?

[{"id":"b1227818064dcd74","type":"tab","label":"Test","disabled":false,"info":"","env":[]},{"id":"e49709133353d97c","type":"inject","z":"b1227818064dcd74","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":60,"wires":[["983ebad0d43f0d30"]]},{"id":"983ebad0d43f0d30","type":"ui_button","z":"b1227818064dcd74","name":"","group":"d7347da6c81c08f4","order":23,"width":0,"height":0,"passthru":false,"label":"Refresh","tooltip":"","color":"","bgcolor":"","className":"","icon":"fa-refresh","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":280,"y":60,"wires":[[]]},{"id":"1e80cf27aa311ccf","type":"inject","z":"b1227818064dcd74","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":120,"wires":[["5b51fcedb67256ba"]]},{"id":"5b51fcedb67256ba","type":"ui_switch","z":"b1227818064dcd74","name":"","label":"switch","tooltip":"","group":"d7347da6c81c08f4","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-power-off","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"fa-circle-o-notch","offcolor":"","animate":false,"className":"","x":270,"y":120,"wires":[[]]},{"id":"4ad96db8dd7532de","type":"inject","z":"b1227818064dcd74","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":180,"wires":[["9f388e17bb5d9c63"]]},{"id":"9f388e17bb5d9c63","type":"ui_switch","z":"b1227818064dcd74","name":"","label":"switch with color","tooltip":"","group":"d7347da6c81c08f4","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-power-off","oncolor":"white","offvalue":"false","offvalueType":"bool","officon":"fa-circle-o-notch","offcolor":"red","animate":false,"className":"","x":300,"y":180,"wires":[[]]},{"id":"d7347da6c81c08f4","type":"ui_group","name":"Test","tab":"207b62cbfdb3f6ba","order":2,"disp":true,"width":"6","collapse":true,"className":""},{"id":"207b62cbfdb3f6ba","type":"ui_tab","name":"Test","icon":"dashboard","order":10,"disabled":false,"hidden":false}]

Example flow, button can have icon with no color explicitly set.

1 Like