Displaying .PNG image with transparency

I am working on making a smart touchscreen thermostat using an ILI9341 display and ESP32. I would like to use .PNG images for the up and down arrows. The issue I am having is that they only display with black in any area that is supposed to be transparent. I tried to using the Image file type set to TRANSPARENT_BINARY which actually showed the transparent parts as transparent but whited out the rest.
Is there any way to achieve what I want or should I just find a workaround? Any help would be appreciated.

What do your pics look like?

Thanks for responding.
I started with this downloaded image as a test:


Then I cropped it to this:

Here is the relevant code:


image:
  - file: "splash.png"
    id: my_image
    resize: 400x 300
    type: rgb24
  - file: "up.png"
    id: my_image1
    resize: 175 x 75
    type: rgb24

  lambda: |-  
      //background image
      it.image(0, 0, id(my_image));
      //raise temp image
      it.image(215, 5, id(my_image1));

It shows up this:

I don’t know;)

You could always use mdi icons if you get stuck with images.

I can figure out a workaround for sure, I was just looking for a relatively easy way to end up with a really polished look for my thermostat.

Thank You

1 Like

Yeah I know the feeling when you “want it to look slick”… Good luck hope you get more bites…

@cmj118 any luck with this? I have a similar issue and looking for a solution :slight_smile:

No sorry, I had go another route.

use RGBA

  • RGB24: Full RGB color stored. Uses 3 bytes per pixel.
  • RGBA: Full RGB color stored. Uses 4 bytes per pixel. Any pixel with an alpha value < 127 will not be drawn.