Using custom png files with ui-switch node

Hi all,

Currently I'm using a ui-switch node with standaard fa icons controlling my lights via mqtt
this is the code:

[{"id":"19f45587.ec299a","type":"mqtt in","z":"48518d4f.6375e4","name":"Olive tree right","topic":"homie/homey-topic/olivetreeright/onoff","qos":"2","datatype":"auto","broker":"d094d3b7.a558a8","x":140,"y":1240,"wires":[["13334208.6e9c9e"]]},{"id":"13334208.6e9c9e","type":"function","z":"48518d4f.6375e4","name":"Convert String to Boolean","func":"if(msg.payload === \"true\"){\n   msg.payload = true;  \n}else{\n   msg.payload = false;\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":390,"y":1240,"wires":[["907f80a.79b7e8"]]},{"id":"907f80a.79b7e8","type":"ui_switch","z":"48518d4f.6375e4","name":"Olive tree right","label":"","tooltip":"","group":"2cc829a5.610f36","order":46,"width":1,"height":1,"passthru":false,"decouple":"false","topic":"homie/homey-topic/olivetreeright/onoff/set","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-3x fa-lightbulb-o","oncolor":"Yellow","offvalue":"false","offvalueType":"bool","officon":"fa-3x fa-lightbulb-o","offcolor":"Black","x":640,"y":1240,"wires":[["acba197a.d27b68"]]},{"id":"acba197a.d27b68","type":"mqtt out","z":"48518d4f.6375e4","name":"MQTT Transmitter","topic":"","qos":"","retain":"","broker":"d094d3b7.a558a8","x":970,"y":1120,"wires":[]},{"id":"d094d3b7.a558a8","type":"mqtt-broker","name":"Homey MQTT","broker":"","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"2cc829a5.610f36","type":"ui_group","name":"all","tab":"6766858b.dee74c","order":3,"disp":false,"width":"20","collapse":false},{"id":"6766858b.dee74c","type":"ui_tab","name":"Dash","icon":"home","order":1,"disabled":false,"hidden":false}]

I would like to use my own custom png files (locally stored on the static root ''/images/bulb-on.png and ''/images/bulb-off.png) Can somebody put me in the right direction?

Try this

And of course the colors don't work but you still need to define them.

This is not working. This post suggests that it needs to be arranged with an ui-template node.

If you try to access those png-s directly do you see them? I mean is your static folder configured properly and it works for other usages?

yes i'm using a custom background picture in NR which is in the same folder

So direct access with browser works?

Oh silly, I made a typo... It works now. Thanks!

Is there anyway i can control the size of it in NR? Or should i just increase the PNG size

If those icons will be only for that purpose it will be easier to make them proper size.
Sure there is ways to manipulate them with CSS but it may be tricky...

Yes only for that purpose. I will make them the proper size, thanks again

Hi hotNipi,

Changing the size has no effect on the dashboard. It keeps resizing it to a width of 24px. This is also shown in the 'inspect elements' of my browser.

Is there a piece of CSS to overrule that and resize the bulp-on.png image?

Try this

That worked!
Thank you @hotNipi

1 Like

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