Using custom png files with ui-switch node

[khoihosi]

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":"192.168.178.83","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?

[hotNipi]

Try this
http://localhost:1880/images/bulb-on.png

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

[khoihosi]

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

[hotNipi]

@hotNipi

http://localhost:1880/images/bulb-on.png

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?

[khoihosi]

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

[hotNipi]

So direct access with browser works?

[khoihosi]

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

[hotNipi]

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

[khoihosi]

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

[khoihosi]

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?

[hotNipi]

Try this

[khoihosi]

That worked!
Thank you @hotNipi