How to display pictures with transparency

[Kingwulin]

Hi,
I want to disp a pic in 240*240 lcd driver by spi, and pic's is transparency
I use the code as below，but the background color of the displayed picture is white
how can i make it to display pictures with transparency

TFT_eSPI tft = TFT_eSPI();
tft.pushImage(70, 70, 45, 45, motion_001);

[Bodmer]

Use:
tft.pushImage(70, 70, 45, 45, motion_001,TFT_WHITE);

[Kingwulin]

Use: tft.pushImage(70, 70, 45, 45, motion_001,TFT_WHITE);

thanks you very mech
but my back group is a picture, if the function you metion can solve my quetion?

[Kingwulin]

Use: tft.pushImage(70, 70, 45, 45, motion_001,TFT_WHITE);

Hi,If my backgroup is a image,but no a single color, how can I play a icon or top picture with transparent layer

[Bodmer]

The library does not support image transparency for this case.

However you could use the PNGdec library and a png image with transparency. Your processor would need ~40kbytes of RAM free to be able to decode png images.

You would need to write a function to draw a masked image. I may have a function for this available if you are unable to code one.

[Kingwulin]

masked image.

I am using esp8266，and the screen size is 240*320,Whether the space of iram is enough
And would you give me a reference the function you mentioned

[tochinet]

Did you try svg images ? See for example https://www.arduino.cc/reference/en/libraries/svgparser/

[Bodmer]

Here is an example that draws a transparent png compressed image.

The ESP8266 may not have sufficient RAM to run it.

Flash_transparent_PNG_demo.zip

[Vispixad]

Is it possible to draw an ordinary shape, such as a rectangle, translucent? So that other components are visible underneath.

[frank71336]

I just tested the example in the zip file and it works great.

But I can see a little room for improvements:

I tried this with an icon that has a semi-transparent shadow:

This shadow does not appear on the display. I think the example above only handles "binary" transparancy. We would have to use true alpha blending to get this shadow displayed instead of passing a threshold to "png.getAlphaMask" ?

Here you can see a (non-transparent) jpg image with see shadow together with the same image as a png file where the shadow is missing:

Here's the original file:

Any ideas? :-)