How to use LVGL for animated GIFs?

Description

LILYGO T-Display-S3 AMOLED with Arduino IDE 2.1.0 on a Mac.

LVGL 8.37

GOAL

Okay. So I’ve come here from the world of coding for desktops/laptops, and I’m finding microcontrollers a real challenge! :slight_smile:

I want to do something pretty simple - display an animated GIF (respecting the time values built into the file) on a loop.

I bought a Lilygo ESP32-S3 board with a gorgeous phone-like high-resolution AMOLED display, and can display a single picture on it using LVGL. But an animated GIF is just eluding me.

BACKSTORY

I think the biggest problem is that the device seems to have no computer-mountable filesystem, and the code examples for animated GIF expect files from a local filesystem. The device appears to default to SPIFFS, so I try partitioning a SPIFFS partition and uploading an animated GIF using the Arduino 1.8 plugin, since apparently it doesn’t work at all using Arduino IDE 2.10

And now I get the error:

(factory.ino.cpp.o):(.literal.lv_example_gif_1+0x0): undefined reference to `hal_gif’

So I’ve given up on that, and figure maybe I use the LVGL Online Image Converter and make the file a C array. I do that, but now the sample code seems to have no way of specifying a local program file rather than an uploaded image in the filesystem.

QUESTION

My attempts thus far have failed. So what is the simplest way to get an animated GIF to play on this LVGL-capable device?

(the fantasy would be a FAT32 filesystem that mounted over USB automatically when plugged into my computer, and then the device automatically plays whatever GIF files have been copied onto it)

Grateful thanks in advance for any suggestions or assistance, and thanks for making this tool available!

Since you are using an ESP32 and you want something closer to having a file system I am going to suggest you use l_binding_micropython. While this is not going to give you an os integrated filesystem you will have the ability to send files to it using something like ampy.

It’s kind of funny how things work out because I am currently in the process of writing a piece of software that will give an os integrated ability to transfer files and browse the filesystem on a micropython device. It will only work on Windows initially and I may expand it to include other OS’s if there is a demand for it.

The Micropython binding is fairly easy to compile and flash to the ESP32. From there you will not have to compile or flash the firmware again (unless you booger something up). Your source files would only have to be uploaded and not compiled as python does this at runtime.

If you don’t know the Python language it is a really easy language to learn.

My first question is are you using the animimg widget?? That is what you should be using. You might have to change some defaults in lvgl to alter the refresh time depending on the timings for the frames in the gif.

Hi, and thanks for taking the time to respond!

I’m trying to keep this project as simple as possible, to be honest. It’s why I’m going for an animated GIF rather than, say, realtime video.

Is animimg required to use the animated GIF code? I don’t have any need for any of the other functionality that animimg offers. Likewise, using both C++ and Micropython seems like an additional complication. :slight_smile:

That said, if it makes it simpler overall then I might consider it!

I believe it is a requirement for animated GIF’s

Unfortunately I’ve made no progress.

Basically I need to figure out the syntax for the GIF display code to load a local C array, rather than a filesystem image.

Thank you!

You could simply split the animated gif in the images composing it and animate them using the lv_anim_ functions.
Another way of animating things is using lv_rlottie module

check this out

https://docs.lvgl.io/master/libs/gif.html

Hi, and thanks for the suggestions, all!

In the end I was able to get the Arduino_GFX libraries to compile. And I can upload images, after a bunch of messing about, to my board. So that looks like the approach I’m going to take.