Icons

[peepshow-21]

Hi, very nice work btw!

looking at doing my own screens and had a question before starting. Is it right you can't use icons with transparent backgrounds? So you need to make an image and flatten the icons onto that, then cut those new icons out with the background included and use them in the hmi?

That sound very awkward to do. You have any tips on how to do that? both to make the icons and layout out in hmi editor?

Thanks!!

[marcfager]

Hi,

That is unfortunately correct. The display does not support transparency. If you want to make a "transparent" image, you need to add the background from the position where you will place the icon. This works well if you only place it into one position. I did it like this for the weather widgets. The weather icon is not actually transparent, but contains the background from the HMI background image for the position it is placed on.

The second option is to add a one colored background to the HMI and replace the transparency in your image with this color. Either statically to the image, or by adding it as an image component in Nextion Editor. I have used this on the Lights page, where I want to be able to use the same icons on multiple positions.

[peepshow-21]

I looked at the files on your HMI and saw that's what you'd done. Coding wise I'm fine, but graphics wise would take me ages!! What app did you use to do it?

[marcfager]

I used GIMP. Graphics is not my strong point either. :) I created most of the graphics by using the ios dark mode theme in Lovelace and added the objects I wanted to a dashboard (such as the Media Player-widget). I have then print-screened the Lovelace and added that to the ios background I re-sized for the NSPanel.

The lights page is done in a similar way, but as the raw graphics (icons) were easily accessible, I imported those to GIMP.

[peepshow-21]

Getting there!!

[marcfager]

Looking good!