Master the Art of Animated GIFs on ESP32!

[@docteurzoidberg]

great tutorial, exactly what i was looking for !

[@theveteranworkshop8328]

Great work, I am going to start working on this for a few projects I have! Thanks!!!

[@GarnetUngar]

Thank you so much for this video! I also had to move the gifs to the same folder as the sketch (as you suggested below) for it to work for me.

[@TheSmugglersRoom]

THANK YOU!!! I absolutely needed this!!!

[@richardphillips1891]

I thoroughly enjoy all your videos. I have several projects that I keep active in the "Droid Shop" of my Star Wars room. I get many comments on how great they look and always share that I got them from "The Last Outpost Workshop". This one is exceptional. My favorite gifs are the "star_destroyer", "x_wing", "hud_a", and the "death_star". Your routines are far beyond the simple sketches I've created so far. I appreciate the work you put into these projects especially the way you explain the process and look forward to your next project. Thank you!

[@thelastoutpostworkshop]

Thanks a lot, that will keep me going!

[@henrybecker2842]

Thank you for an excellent tutorial. Your presentation style is the best 🙂

[@thelastoutpostworkshop]

Thanks a lot

[@LowerDeckProps]

Thank you, Charles. Very informative video. Good job. I love the GIFs.

[@thelastoutpostworkshop]

Thanks!

[@tattoopartoofrance]

merci ❤

[@Alice8000]

Tabernac c'est manifique!!! 👏

[@kickbaktube]

Awesome content. Thanks

[@raphanunu6912]

I think that instead of giving pin numbers, for the MCU, that can vary from one board to another, you can give pin description, which are invariant. Appart from that, this is a very instructive video. Cheers.

[@thelastoutpostworkshop]

Thanks,

[@ricardobrivasalejo4543]

great video. thank you friend. One question ¿could you add a micro sd lector to have more space ?

[@thelastoutpostworkshop]

Thank You, Yes, see this other tutorial : kzbin.info/www/bejne/o6K2lpKrgtWrf9U

[@ricardobrivasalejo4543]

@@thelastoutpostworkshop i appreciate it. Ill take a look on it

[@ping0518]

I subscribed ~ I was wondering how you can play 3-5 gifs but using one button to cycle from each gifs (if the gif loops or not). And wondering if the esp32 can handle such load or need another SD memory like one of your other videos~ looking forward to learn from your videos!

[@thelastoutpostworkshop]

Thank you. It is possible to play gif using button to cycle through them stored on an SD card. I am currently working on a project that is doing exactly this. The challenge is that playing GIF directly from the SD card is possible, but the playback is too slow. So what I did is copy the GIF file from the SD card to PSRAM memory and play the GIF from PSRAM at full speed. But there are other limitations, you need at least an ESP32 dev board with 8 MB of PSRAM and you can play animated GIF up to 8-12 seconds with a good quality.

[@ping0518]

@@thelastoutpostworkshopI am new to programming and have withheld doing this for years but your videos definitely made me comfortable to start! So far it’s gifs and sound that I am interested at~ I will definitely keep posted on your works! Thank you for making this easier for even a beginner like me 💯💙

[@softart5235]

could you please show us how to have video/mp4 or other

[@derekwyler1729]

Thanks for this video! This is fantastic. Got it to work quickly once I got a working screen (first one was DOA and had to be returned to Amazon). Question though on using the image_to_c command on a Mac as I'm having trouble getting it to work. Do you happen to know the correct syntax to type in Mac Terminal to get it to work? I've tried image_to_c radar.gif > radar.h but get a "command not found: image_to_c" error. Any suggestions?

[@thelastoutpostworkshop]

Thank you, never tried it on a mac, i am not sure of the syntax. But if the command is not found, I would run it inside the folder where the inage_to_c command is located

[@derekwyler1729]

@@thelastoutpostworkshop Finally figured it out. In Mac Terminal, we have to type ./image_to_c radar.gif > radar.h to get it to work. The ./ is what I was missing. On top of that, we have to go to settings / Privacy to tell the OS it's ok to open the file from an unknown developer. Thought I'd pass it on in case anyone else was trying to figure it out on a Mac. Also is it typical for the .h file to be larger than the .gif it was created from?

[@moormoor4281]

From England

[@moormoor4281]

Fantastic

[@juniorps7484]

thank you for the tutorial !! it's working but the colors are inverted, how to fix ?

[@thelastoutpostworkshop]

Thanks. Try GIF_PALETTE_RGB565_LE in this function : gif->begin(GIF_PALETTE_RGB565_BE);

[@juniorps7484]

@@thelastoutpostworkshop thank youuuu so much, its working now !! one more question.. is there anyway to upload gif files to the esp32-s3 thru web server ?

[@dgsgc69]

Would it be possible to use an SD card to store larger animations on, or more to cycle through?

[@thelastoutpostworkshop]

Yes see this tutorial : kzbin.info/www/bejne/o6K2lpKrgtWrf9U

[@dgsgc69]

@@thelastoutpostworkshop thanks, im trying to get this working on the CYD with built in SD reader

[@dgsgc69]

@@thelastoutpostworkshop thanks for the link, ive managed to get this working with the push button on my 2.8" screen. If I upload the same gifs to my 3.5" screen they work fine. If I try to upload resized images (480x320) it doesn't work. Do I need to specify the width and height of the gif size anywhere?

[@dgsgc69]

@@thelastoutpostworkshopno matter what I do the larger gifs won’t work. I assume at this point it’s a limitation of the ram on the eps32. It can’t handle 320x480 gifs. Have you had any experience for larger gifs

[@jesaldesai1889]

What I can do to play 2 50MB gif on ESP32. I really like your video on ESP32

[@thelastoutpostworkshop]

You can't , there is not enough memory in the microcontroller

[@giuseppeforte7813]

Hey, thanks for the tutorial. I followed it and it works on my display (that yellow one with the integrated ESP32). But using the custom GIF conversion for another file I have that is 10 seconds, it runs a lot faster, it plays the whole GIF in less than 4 seconds, while the downloaded GIF from EzGif is still 10 seconds . I used the 25fps as recommended. Any idea what could it could be?

[@thelastoutpostworkshop]

Thank you. In the gif->playFrame function, pass true for the first argument : gif->playFrame(true, NULL); this will try to match the timing encoded in the GIF

[@giuseppeforte7813]

@@thelastoutpostworkshop that works great, many thanks!

[@orisuestudios]

hello, I have an inland esp32 and a 1.3 oled v2 also by inland. it is a monochrome screen, how would I go about uploading a custom gif to that? is it similar to this?

[@thelastoutpostworkshop]

Yes it's similar, you will have to use the tool (ezgif.com) base on your screen size and remove color on the gif

[@GarnetUngar]

I am using a ST7789V 1.14 inch display. Everything is working, the gif is displaying the right size, but the image is off center and only half visible. The gif is properly sized for the display (240x135). Any thoughts? Thank you!

[@thelastoutpostworkshop]

In the library bb_lcd_spi, the is a mention that the type to use is DISPLAY_CYD_2USB, see here : github.com/bitbank2/bb_spi_lcd/pull/16

[@GarnetUngar]

@@thelastoutpostworkshop I found the code under DISPLAY_CYD_2USB in the bb_spi_lcd library: case DISPLAY_CYD_2USB: spilcdInit(&_lcd, LCD_ST7789, FLAGS_INVERT, 40000000, 15, 2, -1, 21, 12, 13, 14, 1); // Cheap Yellow Display 2 USB (2.8 w/resistive touch, 2 USB ports) spilcdSetOrientation(&_lcd, LCD_ORIENTATION_270); _lcd.pSPI = NULL; _lcd.iRTMOSI = 32; _lcd.iRTMISO = 39; // pre-configure resistive touch _lcd.iRTCLK = 25; _lcd.iRTCS = 33; _lcd.iRTOrientation = 0; _lcd.iRTThreshold = 6300; Do I cut and paste this into the main sketch? And are the pins I use on the esp32 now different? Sorry for the dumb questions!

[@thelastoutpostworkshop]

try whithout these lines first: _lcd.pSPI = NULL; _lcd.iRTMOSI = 32; _lcd.iRTMISO = 39; // pre-configure resistive touch _lcd.iRTCLK = 25; _lcd.iRTCS = 33; _lcd.iRTOrientation = 0; _lcd.iRTThreshold = 6300;

[@GarnetUngar]

@@thelastoutpostworkshop Thanks! Here's the code from that part: void setup() { Serial.begin(115200); spilcdInit(&_lcd, LCD_ST7789, FLAGS_INVERT, 40000000, 15, 2, -1, 21, 12, 13, 14, 1); // Cheap Yellow Display 2 USB (2.8 w/resistive touch, 2 USB ports) spilcdSetOrientation(&_lcd, LCD_ORIENTATION_270); tft.fillScreen(TFT_BLACK); But I am getting this error: C:\Users\Griselda Grumpy\Documents\Arduino\AnimatedGIF340_240\AnimatedGIF340_240_for_ST7789v_version_2\AnimatedGIF340_240_for_ST7789v_version_2\AnimatedGIF340_240_for_ST7789v_version_2.ino: In function 'void setup()': C:\Users\Griselda Grumpy\Documents\Arduino\AnimatedGIF340_240\AnimatedGIF340_240_for_ST7789v_version_2\AnimatedGIF340_240_for_ST7789v_version_2\AnimatedGIF340_240_for_ST7789v_version_2.ino:38:14: error: '_lcd' was not declared in this scope 38 | spilcdInit(&_lcd, LCD_ST7789, FLAGS_INVERT, 40000000, 15, 2, -1, 21, 12, 13, 14, 1); // Cheap Yellow Display 2 USB (2.8 w/resistive touch, 2 USB ports) | ^~~~ exit status 1 Compilation error: '_lcd' was not declared in this scope

[@thelastoutpostworkshop]

in order to help you more easily, please post your full code here in a new issue : github.com/thelastoutpostworkshop/AnimatedGIF340_240/issues

[@frostfyrezero1830]

Very informative! The only issue that I am getting that is preventing me from uploading it is getting an error message that states "no such file or directory" despite the gifs existing in the folder. Not sure what I am doing wrong, but it feels like trying to find a broken christmas light bulb.

[@thelastoutpostworkshop]

You get this error at compile time ?

[@frostfyrezero1830]

​@@thelastoutpostworkshop yeah. Been trying to see if there are any solutions online. So far, the source of the error is gif_files\hud_a.h

[@thelastoutpostworkshop]

paste the part of the error you get here

[@thelastoutpostworkshop]

You can also try placing hud_a.h in the same folder of the sketch and use #include "hud_a.h"

[@frostfyrezero1830]

@@thelastoutpostworkshop Here's the error below. I blanked out the user name. Let me know if you want the verbose code. C:\Users\[user]\Downloads\AnimatedGIF340_240-main\AnimatedGIF340_240-main\AnimatedGIF340_240\AnimatedGIF340_240.ino:16:10: fatal error: gif_files\hud_a.h: No such file or directory 16 | #include "gif_files\hud_a.h" //GIF size in FLASH memory is 1.7MB | ^~~~~~~~~~~~~~~~~~~ compilation terminated. exit status 1 Compilation error: gif_files\hud_a.h: No such file or directory

[@SeaDoggo557]

I'm using a 1.77" display with a ST7735 Drive. I was able to run the gif, but it has no colors, i barely can see the gif outline. Do you know what i should be doing to work? Thanks for the videos, it was soo helpfull

[@SeaDoggo557]

the GIF_PALETTE_RGB565_LE to didn't work to

[@SeaDoggo557]

nvm, found it

[@wimkaay]

Is this possible on the CYD?

[@imambaihaqqy7596]

can I apply it at esp8266?

[@infinityrift_]

Intento reproducir dos gif de muy corto tiempos osea de 63KB o 171KB, solamente puedo reproducir uno al cambiar a otro dice que no hay memoria

[@KnightNinja-ch8cx]

Excuse me. Can you program the video on the SD card to be played on the TFT esp32, I want to learn from you

[@thelastoutpostworkshop]

Yes you can but the playback speed is too slow

[@SinuheZubieta]

Great work, It's any way to run gif once and then run other code?

[@thelastoutpostworkshop]

Thanks. Yes just put the code that shows the animated gif in a function and just call it when yo u want the GIF to play

[@SinuheZubieta]

@@thelastoutpostworkshopThanks I will check code and try it, I try putting code in setup but still playing in a loop (obviously i'm doing something wrong)

[@thelastoutpostworkshop]

Use somehting like this void playGif(AnimatedGIF *gif){ while(gif->playFrame(false, NULL))) }

[@SinuheZubieta]

@@thelastoutpostworkshop Thanks it's work: void playGIF(void) { AnimatedGIF *gif; gif = openGif((uint8_t *)GifData, sizeof(GifData)); while (gif->playFrame(false, NULL)); }

[@SinuheZubieta]

@@thelastoutpostworkshop Thanks for your help, I have other question, do you know or have any example with this library (BB_SPI_LCD) how to show images? I know the library have the function push Image but can't find any example and can't compile if Iuse in the same way of the TFT_eSPI library

[@davidcaballero952]

Can you use it with a ST7789 screen?

[@thelastoutpostworkshop]

I think so, it is supported by the display library : github.com/bitbank2/bb_spi_lcd

[@davidcaballero952]

@@thelastoutpostworkshopThank you

[@philluvschips3787]

Many thanks, will this work with a Arduino Mega or R4Wifi?

[@thelastoutpostworkshop]

I don't think for the Mega, not enough memory. For the R4 I do not know.

[@philluvschips3787]

@@thelastoutpostworkshop Thanks, I think the answer is no to both, so I ordered some EP32's, cheers.

[@alyssalacuna420]

@@philluvschips3787hi can i ask why it wont work on r4 wifi?

[@juandiegoramirezmontalvan8912]

Hey is it possible to have somehow 22 screens connected to one micro controller? Or is there another way without making it difficult?

[@masar-at]

Squareline Studio and ESP32-S3

[@maxamis]

Would this work with a TZT TFT Display? I get a white screen after uploading the code

[@thelastoutpostworkshop]

Check if the controller of your screen is supported by the bb_spi_lcd library : github.com/bitbank2/bb_spi_lcd A blank screen can also mean other problems, like wrong wiring of the SPI bus. Make sure the pins you use on your board are available to use. Change the pins if needed

[@maxamis]

@@thelastoutpostworkshop I see, the pins are different, my esp32 is not the same in your video so I guess I have to figure out which one is which compared to the code. BB_spi_lcd because the lcd is a ILI9341

[@mahdimkn5510]

how to slow down the animation !!!

[@thelastoutpostworkshop]

you can use true in the fisrt parameter : gif->playFrame(true, NULL); This will use the timing in the GIF file. Or you can insert a delay in the loop : while (true) { gif->playFrame(false, NULL); delay(10); }

[@mahdimkn5510]

@@thelastoutpostworkshop thank you 🌹

[@JohnVance]

What is this, an LCARS for ants!?

[@Sanchez9241]

lol. not working.first it exceed memory (152%), second dont play video

[@thelastoutpostworkshop]

which gif is not working ? Have you followed the board configuration in the video ?