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":"d0…

Try this http://localhost:1880/images/bulb-on.png And of course the colors don't work but you still need to define them.

[image] 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?

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. [Screen Shot 2021-01-22 at 5.56.40 PM] Is there a piece of CSS to overrule that and resize the bulp-on.png image?

That worked! Thank you @hotNipi

Node-RED

Node-RED Forum

Using custom png files with ui-switch node

General

khoihosi 22 January 2021 08:30 3

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

Topic		Replies	Views
Change icon on switch Dashboard	14	38435	8 October 2020
How to increase material icon size for switch Dashboard	8	2880	8 October 2020
SWITCH & BUTTON ui node : how to change color, background color, size Share Your Nodes	7	8268	22 November 2020
Ui-switch icon size Dashboard dashboard-2	8	318	25 August 2024
Customizing appearance of UI-Switch node Dashboard ui-widgets	8	2471	20 December 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Using custom png files with ui-switch node

Related topics