OnDiskGif - GIF with transparent background shows a black background

[ryatkins]

CircuitPython version

Adafruit CircuitPython 8.1.0-beta.0 on 2023-03-01; RP2040-LCD-1.28

Code/REPL

#code from docs

start = time.monotonic()
odg.next_frame() # Load the first frame
end = time.monotonic()
overhead = end - start

face = displayio.TileGrid(
    odg.bitmap,
    pixel_shader=displayio.ColorConverter(
        input_colorspace=displayio.Colorspace.RGB565_SWAPPED
    ),
)
splash.append(face)
main.append(splash)

Behavior

Transparent backgrounds are showing black

Description

No response

Additional information

No response

[gamblor21]

A couple of comments here:

1. Depending on the GIF if it uses the "Restore to previous" disposal method that cannot be fully supported in CircuitPython. In that method the drawing routine is supposed to remember what was behind the GIF before drawn so would require two frames to be stored in memory. For most microcontrollers that isn't practical as it doubles memory requirements.

2. What can be done is to ensure the transparent background is a set color. @FoamyGuy (can you share your code?) managed to replace a GIF background with pure green and then you can set the ColorConverter object to have a transparent color. Maybe a future GIF feature should be set transparent pixels to "X" color for the converter.

[FoamyGuy]

Nothing in circuitpython supports transparency directly. User code must use make_transparent() function of Palette or ColorConverter in order to achieve something akin to "green screen" transparency. You can set the color you want to represent as transparent and displayio will omit drawing pixes of that color, allowing whatever is beneath them to be seen.

I was just looking back at the VOD to figure out how that ended up working, as it does require some quirks in the user code.

I used this GIF which I added a solid green background color to (0x00ff00). I used some combination of GIMP and ezgif.com for the editing process, I was editing a few other aspects as well, but background color is most important for achieving something like transparency
party_parrot_13

Any solid color should work, but the code will need to be updated to reflect the color you choose if it's not solid green.

code:

import board
import gifio
import displayio
import time
import vectorio

display = board.DISPLAY
splash = displayio.Group()
display.root_group = splash

bg_palette = displayio.Palette(1)
bg_palette[0] = 0xffffff
bg_rect = vectorio.Rectangle(pixel_shader=bg_palette, width=display.width, height=display.height, x=0, y=0)
splash.append(bg_rect)

odg = gifio.OnDiskGif('party_parrot_13.gif')

start = time.monotonic()
odg.next_frame()  # Load the first frame
end = time.monotonic()
overhead = end - start

cc_gif = displayio.ColorConverter(
    input_colorspace=displayio.Colorspace.RGB565_SWAPPED
)
face = displayio.TileGrid(
    odg.bitmap,
    pixel_shader=cc_gif,
)
cc_gif.make_transparent(0xe007)
splash.append(face)
board.DISPLAY.refresh()
next_delay = 0
# Display repeatedly.
while True:
    # Sleep for the frame delay specified by the GIF,
    # minus the overhead measured to advance between frames.
    time.sleep(max(0, next_delay - overhead))
    next_delay = odg.next_frame()

The bit that makes it work is:

cc_gif.make_transparent(0xe007)

That is the line you'd need to substitue a different color in if you don't use solid green. The value is RGB565 color format with the bytes swapped.

For green the conversion looked like this:

RGB888: 0x00ff00 -> RGB565: 0x07e0 -> Swapped bytes: 0xe007

You can also use ColorConverter to help figure out the color needed:

cc_888 = displayio.ColorConverter(
    input_colorspace=displayio.Colorspace.RGB888
)
print(hex(cc_888.convert(0x00ff00)))
>>> 0x07e0

Then with that output you can swap the bytes (first and last 2 digits) to find the value you need to pass to make_transparent().

[FoamyGuy]

I've figured out a way to do all the necessary conversions in the user code so that you can more easily indicate a RGB888 color value that you want to be transparent:

cc_gif.make_transparent(int.from_bytes(cc_888.convert(0x00ff00).to_bytes(2, 'little'), 'big'))

[ryatkins]

@FoamyGuy - I was able to successfully use white to make my GIF transparent, 0xFFFF.

However, I've tried a file at 240x240, 54k in size, with 51 frames and I've hit an out of memory error.

[FoamyGuy]

@ryatkins what device are you running it on? It may be the case that there isn't enough RAM in order for it to render it as-is

That is much larger than any GIFs that I tested.

The only idea I can really offer is try to lower the size of the gif. ezgif.com has some compression functionality including possibly scaling the image down some. If you make the source gif smaller but still want to display it larger on the display you could try using scale=2 or some other value on the Group that holds the GIF. It will lose resolution and become "blocky" sort of but might be necessary in order to display something of that size.

[FoamyGuy]

For what it's worth, I downloaded that gif that you posted and I am able to render it as-is on a Feather ESP32-S2 TFT, although it's bigger than the size of the built-in display, so not everything is actually visible.

If you have access to ESP32-S2 based device it may be worth trying on there.

[ryatkins]

I’m on a Waveshare RP2040-LCD-1.28 Thanks for giving it a try. How was the performance of the animation?

…

On Mon, Mar 6, 2023 at 6:18 PM foamyguy ***@***.***> wrote: For what it's worth, I downloaded that gif that you posted and I am able to render it as-is on a Feather ESP32-S2 TFT, although it's bigger than the size of the built-in display, so not everything is actually visible. If you have access to ESP32-S2 based device it may be worth trying on there. — Reply to this email directly, view it on GitHub <#7687 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJH254EY4TUVV6X6QGOWVTW2ZWENANCNFSM6AAAAAAVRT2SCQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[FoamyGuy]

@ryatkins I didn't do any timing or real measurements, but anecdotally it seems pretty good to me:

Screencast.from.03-06-2023.05.42.42.PM.webm

Better than I thought it would be before I tried honestly. I'm not sure if or how the pixels "outside" of the visible display factor in. Perhaps it's saving some time by not rendering them

[ryatkins]

That looks very nice and usable. It seems the ESP32-S2 has more RAM. It tried to do the same type of animation with drawing vectors and ran into RAM issues as well. What would be really interesting is if CircuitPython supported svgs and svg animations!!

…

On Mon, Mar 6, 2023 at 6:46 PM foamyguy ***@***.***> wrote: @ryatkins <https://github.com/ryatkins> I didn't do any timing or real measurements, but anecdotally it seems pretty good to me: Screencast from 03-06-2023 05:42:42 PM.webm <https://user-images.githubusercontent.com/2406189/223282111-0faeee6d-f558-4050-8803-3d0913f9e0c2.webm> Better than I thought it would be before I tried honestly. I'm not sure if or how the pixels "outside" of the visible display factor in. Perhaps it's saving some time by not rendering them — Reply to this email directly, view it on GitHub <#7687 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAJH252E4TTIU242GHNAHF3W2ZZOHANCNFSM6AAAAAAVRT2SCQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[gamblor21]

For what it is worth I was able to load the GIF onto an KB 2040. The 2040s do not have a lot of RAM so depending what else is being loaded it could be easy to run out.

[ryatkins]

Thanks both!