Bring GIFs to Life: Animating with Round Displays & ESP32
Вставка
- Опубліковано 26 чер 2024
- Bring your visual creativity to life with this detailed tutorial on animating GIFs using a unique round display with GC9A01 driver and ESP32.
You'll find all you need here to adapt your animated GIFs for the round display, wire them with an ESP32, and code them into being.
Explore two versatile ways to use animated GIFs: utilizing ESP32 memory or using a convenient SD Card method.
Watch all the Arduino Display videos : • Arduino & Display
Components:
Round Display with pin headers : amzn.to/3L4pud6
Round Display with JST: amzn.to/3CJjbHy
ESP32 38 narrow pins: amzn.to/3OwNKFt
SD Card Reader: amzn.to/3DUkwf0
🔔 Support the channel🔔
www.buymeacoffee.com/thelasto...
Please note that the product links are Amazon affiliate links. As an Amazon Associate, I earn from qualifying purchases at no additional cost to you. This helps support the channel and allows me to continue creating content for you. Thank you for your support!
Code for the in-memory method:
github.com/thelastoutpostwork...
Code for the SD-Card method: github.com/thelastoutpostwork...
Tools:
SD Card Formatter: www.sdcard.org/downloads/form...
EZGIF: ezgif.com/resize
Image to C numbers: github.com/bitbank2/image_to_c
Chapters:
0:00 Introduction & Kick-off
1:07 Overview of Round Display Models
2:00 Introduction to the Memory-Based Method
2:02 Wiring the Pin Headers Model of Round Display
3:00 Wiring the Waveshare Round Display
4:04 Preparing Code for the Memory-Based Method
10:46 Utilizing Code with the Memory-Based Method
12:23 Guide to Creating Your Own Animated GIFs
19:25 Introduction to the SD Card Reader Method
19:50 Wiring the SD Card Reader
20:59 Preparing Code for the SD Card Reader Method
21:57 Formatting the Micro SD Card
23:52 Utilizing Code with the SD Card Reader Method
#RoundDisplay #ESP32 #AnimatedGIFs #DIYElectronics #CreativeCoding #VisualArt #AnimationTutorial #Arduino #MicroSDCard #TechGuide #programming #coding #beginners #tutorial #guide #stepbystep - Наука та технологія
Im a huge fan of your videos! Could you please make a tutorial with the Beetle ESP32 - C3 and the GC9A01 screen? I think everyone would enjoy that. It is a smaller chip with the same capacity!
it's added to my bucket list, lets see the number of likes it will get
Great video. Very thorough and easy to understand. Thank you for posting it.
Special gauges are gonna become so cool and custom.
Thank you for making the complex simple.
Thank you for the animated GIFs
I really enjoy your videos. I purchased the various things to do this project and got it to work. I was hung up on uploading the code to the ESP32 but eventually got it figured out. Everything works great. Your videos are always well explained and I look forward to each one. Thank you.
Thanks a lot for your feedback!
One of the best tutorials. Thanx a lot!
These videos are wonderful! Thank you!
very detailed tutorial, thank you a lot, mate! hope you could post more videos like this!
Thank you! this is a project saver. I couldn't find a reliable way to display animations on a small OLED display and this is the simplest solution without having to figure out the adafruit library.
Great video and tutorial. I got mine working with your help! Note to others new to this MCU and display - I had to disconnect power to the display to get the script to load.
thanks, i was looking for a tutorial about gifs !
I just found you, this it the exact thing that i need, thank you
Thank you very much ! AAA class tutorials here ! great job
Great, you deserve more subscribers.
Thanks a lot!
See my other videos on Display:
Master Animated GIF on the Round Display & ESP32:
ua-cam.com/video/mqSe_uMpxIs/v-deo.html
Master the Round TFT Display on ESP32 and GC9A01 driver with the TFT_eSPI library:
ua-cam.com/video/pmCc7z_Mi8I/v-deo.html
Real-Time Display Design With the Serial Monitor - No Upload, Instant Display Prototyping - Magic:
ua-cam.com/video/09negq9Zk_c/v-deo.html
Create a Star Wars Tactical Display with the round Display:
ua-cam.com/video/HzHRJd7rihE/v-deo.html
Tipp: You can load the smallest gifs nostromo, hyperspace and hud_6 together into the memory and play them back one after the other. More gifs, more fun. 😀
How you do that please ?
@@NA-rh7iyif you have done what was shown in the video and it's working, I'm sure you can figure this out
Hello, excellent video, it helped me a lot but I would like to know if you have a video explaining how to switch between gifs with a button
Very helpful video 👍🏻
Will try this with the Xiao ESP32S3 and the related round display.
As a beginner, I wonder how to select the right drivers... sometimes they choice seems overwhelming, and the difference are not obvious.
I recommend using the TFT_eSPI library, you can follow my tutorial here : ua-cam.com/video/mqSe_uMpxIs/v-deo.html
Is it possible to stop the gif after it starts playing? I ask this, because the Loop event stops working if there is a gif running, and I would like to change the current gif as soon as a button is pressed
while the GIF is playing, you can check if the button is pressed, exit the while loop and change the gif being played :
void loop()
{
if (gif.open((uint8_t *)GIF_IMAGE, sizeof(GIF_IMAGE), GIFDraw))
{
Serial.printf("Successfully opened GIF; Canvas size = %d x %d
", gif.getCanvasWidth(), gif.getCanvasHeight());
tft.startWrite();
while (gif.playFrame(true, NULL))
{
// Check if button is pressed
yield();
}
gif.close();
tft.endWrite();
}
}
@@thelastoutpostworkshop Thanks a lot 😇
Another excellent video, Charles. With the SD card method, is it possible to play multiple GIFs in sequence (in a loop)? Thanks.
Yes it is possible but reading from the SD card is slow so when playing a GIF, another task could read the next GIF from the SD Card to be ready to be played
Can you tell us how to do that ?@@thelastoutpostworkshop
Hi I got into esp32 after watching your video, I'm new to coding...but your videos always entertain me!! thank you!! I wish you happiness always!!! (It's a translator, so please understand if there are errors)
Thank you very much
I'm having fun watching the video. I have a question. I would like to edit it based on the shared file, but I am a beginner and have not been able to solve the problem for several days, so I am asking a question. I'm trying to play a gif file, and print time text on it, but it doesn't work. What should I do because the time seems to be going under the gif image?@@thelastoutpostworkshop
You can achieve it in 3 ways : 1. print the text in a zone that is transparent for the GIF or 2. Reprint your text every time a a frame is drawn, but there will be some annoying flicker or 3. Modify the GIFDraw function so no pixels are drawn where the text is, it can be done, but not easily.
exorbitant. result.
1. Print text in empty space > The desired design and text size do not come out... (I am a design destroyer... the design is terrible)
2. Haven't tried it yet.
3. About half of my remaining hair has fallen out.
Now let's go try method number 2.
I have another question. If I use the code you provided by converting a regular jpeg file rather than a gif file to an h file, is there anything that needs to be modified?@@thelastoutpostworkshop
The code provided works only with GIF files
Great video mate! Thank you! How do I get my arduino ide to look like yours?
I use the "Dark" Theme with a font size of 14
This tutorial is wonderful, thank you for making it so easy to follow! Really eager to try this out myself.
Out of curiousity, I'd like to use the ESP32 and a 2" 240x320 display playing a gif on a loop, how big of a file can that microprocessor handle? I have a 1min long, 30fps gif that clocks in at around 30MB, and would have only that single one running, could it handle that?
No it can't, 30MB is way too large, My advice is to play with the optimization of ezgif.com/resize to bring it down in size at 20FPS. I am currently working on a new video with the ESP32-S3-N16R2 which has 8MB of PSRAM.
thank you for this video! can we add an option to change them via the phone?
yes, you could add a web server in your code with a simple web interface to change the GIF
thanks again mate, i figured out the "A fatal error occurred: Packet content transfer stopped (received 8 bytes)" error, just remove pin 2 while you're uploading the code then plug it back in once its uploaded then reset the esp32 and hey presto!
Pin 2 must be at 0V during flash
can this be installed on a motorbike?
Great content again. If at all possible could you offer a how to video combing this display with the mp3 player starwars sound fonts connected to a PIR sensor ( sensor activates the display and the music ) ?
Thanks again for these videos
Very good idea! I have added it to my list
Salut Charles. J'ai deux questions. 1. Dans le schéma de l'écran de Aliexpress, tu le branches dans le 3 volts, mais en regardant la vidéo, je vois que tu le branche, avec le lecteur SD, dans le 5 volts. Je vois bien que ça fonctionne, mais est-ce judicieux même si les specs de mon écran dit 3 volts ? Ou bien je met le lecteur sur 5v et l'écran sur 3v ? J'ai fini le montage des connections, mais c'est juste pour être certain avant de le brancher. 2. Pour convertir les gifs tu utilises Command Prompt sur Windows, mais sur Mac sais-tu si j'utilises si ça peut se faire et naturellement les commandes ne seront pas pareils ? Je vais probablement utiliser la méthode de la carte SD, mais j'aimerais savoir quand même si je réussis à faire mes propres gifs. 😉
L'écran supporte 3.3v ou 5V mais pas le lecteur SD, il fonctionne seulement sur 5V. Pour le command prompt il y a une version Mac sur le site mais je ne l'ai pas essayé
Merci@@thelastoutpostworkshop
Could you do the same tutorial but adding a rechargeable lithium battery and a couple of buttons to change a gif to the next and the previous one? thank you very much it's amazing
Yes I could do that, I have another video using a button, but no rechargeable battery, if you want to take a look at it : ua-cam.com/video/zBzIBRsckTw/v-deo.html
Really good tutorial. I managed to run it with no problem. Do you know if it is possible to stream an mp4 file?
Yes it is possible, that's a good idea for a future video
@@thelastoutpostworkshop Thanks. Waiting for a possible, next tutorial.
Hello, i have a question, the screen arduino, it can the animation work without those cables? :(
do I have a link to the said screen ?
Great job! How to make animated .gif loop once? Thanks
you just have to animate it outside the loop function
Great video! I need to load between multiple animations on the fly. How long is the delay between reloading new sequences? I need it to be no more than 1/2 a second. Is this possible with SD? Doesn’t seem so.
I do not remember the load time but it is slow, maybe some SD module on the market are faster.
@@thelastoutpostworkshop Thanks for that information. Could any be that fast, faster than 1/2 a second?
I really do not know
I’m curious, will this work on an esp32 dev kit A? I have a bunch of them and would like to use them.
I have not tested it, but I am pretty sure it will work, all ESP32 have the same architecture. The main function used in this project is the SPI bus, and I have not encountered any esp32 dev board that does not have it
Can these be used with a portable power pack? And if so what kind? Many thanks
GC9A01-driven round displays can be powered using portable power packs, ideally those with output voltages of 3.3V or 5V and capable of supplying a few hundred milliamperes. Lithium-ion or lithium-polymer USB power packs with voltage adjustment capabilities and built-in protection features like overcurrent and short-circuit protection are recommended for their safety and energy efficiency.
When i try to upload, it comes with this:
Compilation error: 'animated_240_240' was not declared in this scope.
How can I fix this? This is for the file that is the gif (#define GIF_IMAGE animated_240_240) not the gif converted to c
will it play our project after all work is done without sd card if we power the esp32 board with power bank?
Yes using the memory method
merci pour cette vidéo !! je travaille en ce moment sur un projet avec un écran et une carte sd justement et ça m'aide beaucoup. Mais leproblème c'est que j'aurais aussi besoin d'images. y'aurait un moyen de vous contacter pour en parler ? en tout cas génial la vidéo !!
Bonjour !
I managed to make everything work perferctly with you tutorial, Thanks a lot !!
I'm now looking for a solution to display multiple GIF one after the other. I guess the only way is to use the SD card solution right ?
Can you please give me some help on the modification i need to do to the code ?
I also have a Raspberry Zero w board, should i switch to this one to save me some of the few hair i have left ?
Merci beaucoup !
Yes if you need to play many gifs in sequence, this chapter in the video ua-cam.com/video/mqSe_uMpxIs/v-deo.html, covers SD card
Thank you so much for your answer, i saw this part but i did;nt see anything about the change in the code to be able to read GIF one after the other automatically
Can you help please ? Thanks again @@thelastoutpostworkshop
when using the sd card is there any way to make it load the gif faster?
SD card module is slow, I do not think it can load faster
keep getting exit status 1
Compilation error: exit status 1, when trying to verify code
Hi, i have an issue where the serial monitor will spit out "SD card initialization failed" then repeat "Failed to open GIF file from SPIFFS!" over and over again, i triple checked the connections and verified they're properly connected with a multimeter, the sd card was formated and i used the same sd card reader module you used, any advise?
Make sure the SD Card Reader VCC pin is connected to the 5V pin on the ESP32 or the VIN pin
Turns out the SD card reader module was faulty, it works great now!
Hello! I have some concerns if I am to use a TTGO T-display which has a st7789v display. In the User_Setup.h, which one do I uncomment?
In the "User_Setup.h" you uncomment this line :
//#define ST7789_DRIVER // Full configuration option, define additional parameters below for this display
In the "User_Setup_Select.h" you un comment this line :
// #include // Setup file for ESP32 and TTGO T-Display ST7789V SPI bus TFT
This diplay wiring is different, the pins are :
TFT_MOSI 19
TFT_SCLK 18
TFT_CS 5
TFT_DC 16
TFT_RST 23
@@thelastoutpostworkshop Thank you! will try when my parts arrive!
@@thelastoutpostworkshop Hello again!, so my display has arrived and it has the pins mentioned except for the MOSI. I have a pin named "SDA", is that pin typically the MOSI pin? Im really new to these displays stuff.
Hi mate can you help me i have LILYGO T-RGB 2.8 i am trying to use gifs but not success
Are you able to add a switch to change the gifs through the SD card?
yes look at this video: ua-cam.com/video/zBzIBRsckTw/v-deo.html
Thank you so much!
Images to C seems to crush the Bit making the colours look bad. Any way to keep the quality of the gif high?
Before converting with image to C, did you first use ezgif.com/video-to-gif to resize it to 240x240 pixels ?
@@thelastoutpostworkshop I converted it to 320x170 which is the resolution of the screen I'm using. Model T S3 Lilygo. Perhaps I'm asking too much of this screen.
How many colors can it display ?
can i use this for non round displays? esp32? thanks I'm completely new
Yes you can adapt it for non round display, you will have to make sure you have enough memory if your screen is large and select the correct driver for the TFT_eSPI library. Make sure first your display is compatible with this library.
I am really struggling. this is the board I have. what should I write in arduino ide?
ESP32 Development Board with 2.8inch LCD Arduino LVGL WIFI&Bluetooth 240*320 Smart Display Screen TFT Module With Touch WROOM@@thelastoutpostworkshop
i will literally pay someone to help me get an animated gif onto one of these, i bought 3 and cant get any of them to play nice (not same as this, round display has esp32 board attached))
The code seems to take the first defined image and display it. I'm looking to have a button press switch between two animated gifs. I'm not sure how I change which GIF line #52 opens
Any thoughts?
You can definitely change the code to do that
Hola!! estoy intendando hacer lo mismo, de casualidad lo lograste? Cuando quiero hacer eso me aparece que la capacidad de mi esp32 fue sobrepasada
How much current does this display consume?
Around 40ma
why is there no chip select in the code? where can i change the chip select?
It is define in your driver setup for the TFT_eSPI
Gresy video thank you can you use on a square display instead on round
Absolutely, you can use a square display
@thelastoutpostworkshop thank you for your fast response i am doing a project with a model of the batmobile tumbler and want to add animation displays to it am very new to coding if you can please advise me on how this would be achieved i would really appreciate it if i can have your contact please so i can give you some more information that woukd be awesome
If you could please let me know which square display will work would it be any colour tft display
any square display as long as it is an SPI (Serial Peripheral Interface) like this one : amzn.to/424J6DR
Ok thanks for your reply i will give it a try and see if i can add my own gif files thank you once again for your help
Hello I can not get any screens to work with my white NodeMCU 32 boards I have tried 3 different Boards and followed every video to the letter and still I get a scrambled screen or black screen when I try yours, Not sure if it is the pin out on the screens or boards, Please help.
Please provide the URL to your screen model and also the URL to your NodeMCU board
@@thelastoutpostworkshop I have bought many different screens
If you are not using the round screen GC9A01, then you will have to select the proper driver in the TFT_eSPI library and adjust SPI pins according to your screen specifications
@thelastoutpostworkshop thank you, for helping I have tried all the help videos, I bought the round ones to see if it might be the NodeMCU32 the pins have a P1 instead of D1 etc.
can we able to change colour of an eye? EX: RED??
You have to change the GIF to that
Is it possible to mirror a laptop screen to this round display?
Yes I have seen people doing it, but I have not tried it.
@@thelastoutpostworkshop Awesome. I would love to try this for a car gauge pod.
mate! Urgent help! The code in this video is totally different from the previous video, and I can't find the code for the second screen.
If you mean the code for the two eyes display, it's here : github.com/thelastoutpostworkshop/ESP32LCDRound240x240Eyes
@@thelastoutpostworkshop Brother, this tutorial does not allow you to make and upload GIFs yourself!
老哥，sd卡版本可以上传很多动画？设定依次播放吗？求助
Yes you can store a lot of animations on an SD card and play them sequentially
@@thelastoutpostworkshop 那如果使用按键，应该添加什么代码?按键使用哪个接口？谢谢！
is it touchscreen
No
Sir how to convert txt file into .ino
I am not sure what you mean, what are your trying to do exactly ?
i have a problem while connecting sd card module and says
[ 76652][E][vfs_api.cpp:23] open(): File system is not mounted
Failed to open GIF file from SPIFFS!
Did you modify the code ?
@@thelastoutpostworkshop already but looks my tft screen its broken and blank . i use esp32 devkit v1 defined cs pin to 12
Does it work when using the memory version of the code ?
@@thelastoutpostworkshop yes it s works fine, curently im ordering again the sd card module other version. and i used 64gb of sd card . does it supported??
No, like it's mentioned in the video the max supported is 32GB, rewatch it because it must be formatted properly
I see that the comment got only one like :(
Could you perhaps explain to me how to gain this knowledge?
I have looked at the specifications the ESP-C3 and it is a bit slower and a bit less of internal RAM. As for the SPI it supported. So I think you could follow my tutorial and use the ESP-C3 to play animated GIF.
Superbe projet comme d'hab. J'ai reçu deux ESP32 hier et j'ai décidé d'en utiliser un ce matin pour faire ce projet. Malheureusement, je reçois ce message à chaque fois: « A fatal error occurred: Failed to write to target RAM (result was 01070000: Operation timed out). Failed uploading: uploading error: exit status 2 ». Y'a d'autres infos - il semble «voir» le chip et ces infos - en haut de ce texte si c'est important pour la compréhension. Le pire c'est que c'est idem avec l'autre ESP32 neuf. J'ai même mis un sketch simple avec le même résultat. J'espère que tu pourras m'aider avec ce problème et/ou m'aiguiller vers une solution. Merci
Lorsque tu upload ton code, au moment ou il tente de communiquer avec l'ESP32 sur le COM port, il faut appuyer le bouton "boot" qui est sur l'ESP32 et le maintenir jusqu'à ce que l'upload commence.
Au moment ou il est écrit Connecting... je le fais, mais c'est trop rapide et ça me donne une erreur. Je fais essayer du début. Les autres ESP32 que j'ai, qui sont occupés, je n'ai pas besoin de le faire... heureusement. Dois-tu le faire sur les tiens ? Merci @@thelastoutpostworkshop
J'ai essayer du début et aussi au moment ou ça dit Connecting... et c'est la même chose qui arrive. J'attend un autre ESP32 aujourd'hui, mais comme celui dans ton vidéo et je vais réessayer. Frustrant quand ça fonctionne pas. En passant, ça dit Uploading stub... juste avant de me donner l'erreur. Sais pas ce que ça veut dire. LOL@@thelastoutpostworkshop
oui je dois appuyer sur boot pour que l'upload démarre
Sur la page Amazon du produit, il montre, lorsque tu sélectionne le board, DOIT ESP32 DEVKIT V1, mais moi je ne l'ai pas. Ça pourrais-tu être une cause ? Je sélectionne ESP32-WROOM-DA habituellement (ce qui est écrit sur la plaque métallique du module. @@thelastoutpostworkshop