Making animation from GIF files for TFT screen (ESP32 ,ESP8266 , Arduino)
Вставка
- Опубліковано 11 жов 2024
- Hello! This week I will show You how I make animations for color TFT displays. In this video I am using M5Stick C , TTGO display board, TTGO T-Watch. But any fast ESP board can be used. Also these animations will work on new Arduinos. It works best on ESP32 boards with lots of memory. Data are stored in two dimensional array, each pixel will took two bytes of space .
SUBSCRIBE HERE:
/ @volosprojects
You can also buy me a coffe at:
ko-fi.com/volo...
BOARDS USED IN VIDEO:
M5StickC
You can buy M5StickC here : www.banggood.c...
TTGO T-display:
Here you can buy TTGO T-Display board www.banggood.c...
TTGO T-Watch 2020
www.banggood.c...
Here you can download WALK EXAMPLE sketch: github.com/Vol...
Here is software github.com/Vol...
This is awesome. You have given a brilliant new life to these displays. Keep up this excellent work. PS a link to your space animation header file would be brilliant.
OK - got this working after finding a sample setup for the User_Setup.h file in the TFT_eSPI library. I've been struggling with this part. Also, I'm using an ESP8266... So next - I'll use your system (and .exe) to create my own giffs. Thanks for the video!
6:45 "Believe me, I'm not hacker" - that what a hacker would say.
Jokes aside, very well done, thank you for the video, everything is clearly explained.
Thanks once more.
Thats true😀 thank you
@@VolosProjects your software about frames into .h file is not working correctly it shows not responding status and very slow and i cant create header files from frames so do you have possible solution for this bro please give some solution to this im in trouble
I've been wanting to learn how to do this for a long time! Thank you for posting the video. It will make things so much easier!
Is everyone in the Eastern Block a programmer? It's crazy! Well, lucky for the rest of us. Good info, thanks.
In this lesson(on Github), when compiling the code, the error page "stray \357" appears in the file walk.h 1:1. You have to transfer it to a simple editor and save it in the correct Unicode. At the beginning there is an invisible sign that causes the compiler to stumble.
Very cool! I'm excited to follow along and learn how to make these animations
Can you please explain how to connect an SD card to this board and run videos and GIFs from the SD card? Almost every GIF I want to play is more than 4MB. Thank you very much!
For others trying to do this- the esps aren't fast enough to just "play" gifs. That is why he is converting the gif to a header file with hex values for pixels...so that the esp32 doesn't have to do that math too.
Excellent video that shows how to find animations with Google. Use EZGif to crop and resize an existing GIF.
You end up with a 36kB GIF file. Then extract all the frames to a set of RAW pixel arrays in a .H file that is 341kB in size.
The ESP32 has got plenty of power to decode and display the 36kB Animated GIF file directly.
You can store the 36kB of GIF data in PROGMEM, SPIFFS or a SD file.
You can fit many 36kB GIFs in PROGMEM or SPIFFS. Obviously bigger animations require an SD card.
Your TFT Animatons GIF program dose not work everytime i upload the jpegs the program says not responding.
WOW, pretty good job!
do you think its possible to save these .h files in the lcd sd card and run them from there?
Hello the software that you provide doesnt work anymore can you give another option to convert gif to .h file pleasee
the program just has a sand timer icon when I hover over it and when I click it the app stops responding
Thank you sir. This is what i'm finding. I have subscribed your channel. Keep it up.
To everyone with problems with the software:
1. Check that you have exported the images as JPEG! It doesn't work with gif files.
2. If jpeg doesn't work - run the software in compability mode for win8.
1. How much of this code is the ESP8266 idling, waiting for the next frame? (I am looking to interleave audio with my animation)
2. Is the ESP8266 fast enough to run a similar format animation from the SD card at a framerate of at least 20 FPS?
3. If I can't use an SD card, how many seconds of video can I fit in the 1 or 4 MB of the ESP8266?
4. Can this work with the 9 digital pins of the WeMos D1 mini?
6:50 😂 The most difficult thing for a programmer is to justify that his software is not a virus
Using your TFTAnimations utility, I created the ".h" file. However, I get message "frame.h:1:1: error: stray '\357' in program", "frame.h:1:2: error: stray '\273' in program
", and "frame.h:1:3: error: stray '\277' in program". Did I do something wrong? I appreciate you taking the time to create these UA-cam videos. Thank you.
got the same problem
Exactly what I was looking for!
Hello Sir :
Greeting from Indonesia.
I like your tutorial videos.
regarding to this video, I want to ask how to make the gif file stored in SDCARD can be played and changeable by using push button ? so we can play more gif files, or change by Bluetooth from the cellphone ?
Thank you so much! Keep up the great work!
Hi im trying this but with a 2.4inch display and your later tutorial worked ok for me (ie draw string), but this one has lost me, is there some other code you add apart from the #include "walk.h"?
Thank you so much for sharing, this is so cool!
Thank you for this great video! would you consider posting the source for your converter? That way, people who are worried about it can compile their own, or just to see how it works
@@kamilkonstruktor thank you very much!
what a good video friend!
a question how can I change the font styles on the screen?
Your lessons are great. But not everything can be tried, since they do not work on the T-Display S3 Amoled! For example, this lesson, even if I change the code for Amoled, gives a black screen and only flashing the firmware helps... If you can, make your lessons for Amoled displays too. Thank you.
Hey I dowloaded the software to convert the images to c++, but its currently not working. I've tried on multiple computers. Is there a good alternative?
AMAZING! Can I use this workflow somehow for my 8x8 Adafruit Neopixel LED Matrix?
Sure. But likely no software can downsample to 8x8 accurately.
Great Job, I hate having to convert each image of an animation one at a time, +1
Excellent Job!!! Thanks so much for sharing!! Keep going
Thx cool video. I have a question about transparent gifs. Since the jpg Format doesn't have a transparency, is there a way to do this?
Can change de bootscreen of NEMO in m5stick plus 2? to a gif animation??
can you make a tutotial how to upload a gif to esp32 by bluetooth or wifi?
your APP is freezing after selecting a folder
i've tried folder even with 3 files, each with "easy name" such as 01.jpg , 02.jpg - didn't helped.
it just freezes (not crushing), tried 5 times - always the same
windows 11
Dude you are amazing 💐 Love it
Great!!! Would it be possible to apply the same code in ESP32 but with a separate screen, as for example with a ST7735s? How?
Hi Volo, great tutorial and I have one question what is the size limit because I run into "Image size too big" issues. Regards and keep up the great work 🙂
it depends on board, yo need to keep in mind that each pixel needs 2 bytes in memory, so number of pixels x 2 x number of frames. After compiling you can see size of sketch and amount of free memory.
The esp32 S3 can't handle more than 2 MB archives? I was thinking the esp can handle up to 16 mb archives. Im wrong?
Followed all your instructions when using your AnimationTFT. Green line reaches the end but can not find the .h file. Thanks Fleck.
Does your custom software work on Mac OS X?
Good, but better if you explain how make that, the source code of your program maybe have more impact in your followers and possible viewers. For example for many people that use GNU-Linux or Mac for development. Thanks from Berlin.
A partner of mine read this message and he made an open source python program that does the same. It is an alternative for GNU-Linux, Mac and Windows, more info in this video:
ua-cam.com/video/oDvRfWHtdpM/v-deo.html
It isn't lettimg me download your file converter :(
How can I still make it happen ?
The conversion software doesn't seem to work anymore. it just creates an empty header file.
Is there any chance you can update it or find an alternative?
Other than that, awesome channel and projects! Looking forward for your future videos!
This old software is pretty old and slow, maybe you meed to give it more time. Also your files in folder need to be in jpg format
@@VolosProjects i’ve tried all your suggestions and at least for me it doesn’t seem to work anymore.
Thank you for this tutorial! Very great
Work! Keep going!
How did you make the very cool black hole animation? It looks awsome
Exactly what I needed !
I am glad😃
Hi I d like to count on your assistance....I m a begginer with ESP32, your application seems so cool, unfortunately I tried in several ways to download and no sucess so far....is there a way to "rename it" I mean at least an extension in order to allow us download....
Great job. The software works but it's really slow. Why? Is it possible to speed it up? It takes only about 0.1% CPU time.
Can we get source code of the program to convert images into c code?
Where did you find the 'Space' animation? Or better still can you post the data file?
Can it play any gif with the right format without issues? There are mini gif player that i have tried to make and it has so many limitations for what gifs, it can open and which not.
Thanks for making this video
Hello,
Thank you for this video. I have question about the GUI Editor for TFT Display (Lilygo T-Watch 2020). I want design Apps in Micropython. Do you know Editor for develop apps with Micropython ? I am newbeginner in this section and i need sometime help 🙂
With some codes from GitHub, I have initializied the Display and connected with Wifi and get the time. I want to show the time on display. Have you expirience in this area ? I hope you can help me
Thank you very much for sharing this and your knowledge, I am an absolute beginner btw!
I am glad that you finded somethin useful for you. Cheers!
Hello..I want to draw many animations on my OLED..but my UNO hasnot enough space to store so-many animation-frames..how i can store the animation frames(converted to C code) at a SD card..and source it to the main arduino code?
Hello. I have error.
In file included from C:\Users\ADMIN\Desktop\aNIMATIONS-main\Ani\Ani.ino:1:
C:\Users\ADMIN\Desktop\aNIMATIONS-main\Ani\walk.h:1:1: error: stray '\357' in program
int frames=29;
^
C:\Users\ADMIN\Desktop\aNIMATIONS-main\Ani\walk.h:1:2: error: stray '\273' in program
int frames=29;
^
C:\Users\ADMIN\Desktop\aNIMATIONS-main\Ani\walk.h:1:3: error: stray '\277' in program
int frames=29;
^
exit status 1
Compilation error: stray '\357' in program
You didn't give us the connection between esp32 and a tft display
Hello! So cool! Thanks for sharing man! :) Do you think we can turn transparent one of your little screens?
There is no such thing as transparency on a display. It is actually just changing pixels to a different color. I believe the formula is transparency percent times the top object RGB plus 1-transparency percentage*bottom object.
@@RobertLugg I didn't understand anything... And I'm not asking for an electronics course, but thank you anyway dear friend ^:^
We "ALL" know that a screen can be transparent, so anyone else?
@@RobertLugg On UA-cam, we can see TRANSPARENT SCREEN 😏: ua-cam.com/video/qieYhhLOKts/v-deo.html&ab_channel=CrystalfontzAmerica%2CInc.
@@BRAD-ROTT there are many people where English isn’t their first language. 95%of displays are not transparent. The video was talking about 5-6-5 RGB so I assumed you meant transparency channel.
Hi how can i play films with sounds, that would be a great project. Cheers
Hi Volo, nice Project! Unfortunately, I've only now managed to test it. 1 year after your release :D But I have no success with your gif to header converter.
It always generates only the last frame for me. Do you know the problem maybe do you already have the solution? Best regards Torsten
hey man, do you have a method to make it using a sd card?
You'r accent makes me wonder - do you also like A.I. papers ?
is the foam used for mini hdm monitors?
is there a way to use one of the ones that have the sd card on the back of them to stor the gif on and play it
Sadly your Picture to Code Tool only creates a file with "int frames=0;
" in first line of code.. thats all !
while using your linked files, Arduino made some errors.. after copying the walk.h code manually from git it worked compiling and uploading it to a M5StickC, but it restarts into a black Screen..
worked!! thank you!!
Can you upload the application to some other location ?
Hey Volos Projects, can i use your software in a project post, I will mention you in that post. please let me know
Yes, please post my video also
@@VolosProjects thanks! Will do that 👍
Very nice.. Thank you for sharing knowledge
how to fix error: expected primary-expression before 'class'
class SPISettings
, with ttgo t-camera plus ?
If I buy the M5 Stack (not Stick) up to what size of Gif can I put in MegaByte? Thanks
Hi, realy simple explanation. Did you try to use it on bigger screen with ili9341 controler?
Thanks for sharing
Hvala :)
Jesam, na 240x320, isto radi mozda malo sporije al neprimjetno za oko.
@@VolosProjects E super, hvala ti na odgovoru.
Sretni Božićni i Novogodišnji praznici, pozdrav iz Beograd.
Hello, what about an AVI file fron an SD Card instead of a GIF?? Can you make a tutorial??
Using a 320×240 ILI9341 screen, with all of those pixels in use for the gif frames, what would be the expected amount of frames that could be stored on the ESP32, and would it be possible to read this from a SD Card instead to reduce the memory required from the ESP32?
Just do the math. (320 * 240 * 2) = 153,600 bytes per frame. Take number of bytes of flash you have available and divide it by that. Lets say you have 2MBytes flash, that's 2,000,000 bytes. 2,000,000 / 153,600 = 13~. You probably need a few kB for your code etc. so maybe 12 frames.
And yes it's possible to load from an SD card, but be aware that reading from an SD card over SPI will likely be about 50MBit/sec. Fastest you can drive an ILI over single SPI is around 60Mbit/s, which means around 30ms each to 1. get data from SD, then 2. drive it to display. So you're looking at 60ms, not counting any cost of going round trip through RAM (you could in theory DMA this). That means your max framerate is around 15fps, and that's with an *ideally optimized* code. With even a bit slower code, you could be looking at 5fps or less.
Very good job!
Too strong, but the JPG to HEX conversion is a little slow
Hi, I tried your programm and it seems its stuck. the header file is named correctly, in the file is just int frames=0;
is there anything i can do?
thx
could it be that png's arent supported?
Yes, png is not suported. Just fallow instructions from video
excellent video! but the application freezes before finishing :(
Thanks sir. 🙏
From India.
It always freezes when i try to use it
It dont freezee, it is realy slow, givi it time
the software doesn't seem to convert anymore, no matter the size and despite the file containing only jpeg. nothing but empty file headers..
The sofwate have a problem to download!
Only proprietary can download the file because google say that it has a virus!
I'd like too mush to have! Without virus!
Thank you!
Thank You soo much!
ples do tutorial tu tft display 240x320 with arduino uno / esp 8266
Nice
If i use "tft 3.5 lcd shield" this monitor , How can I modify the code?
Can this animation played in other display except TTGO display without Esp32 but in Arduino Uno.
The Arduino Uno and Nano use the Atmega328P microcontroller which is not fast enough to display video in real-time. When this guy said "Arduino" in the title he was referring to the faster Arduino boards based on 32-bit processors (like the Yún, Due, and Zero). I once tried to display images in rapid succession to simulate movement (over 10 images per second can blur into smooth motion) on an Arduino Nano, but I were only able to achieve 2.1 frames per second. Oh yeah, and you can buy an ESP8266 for $5 on eBay.
Make a video on hard ware
Does anyone have one of these for sale I have been looking everywhere for one of these already made with gifs in it or with requested gifs from me!?
Is it possible to run the animation on a seperate screen, not the ttgo? Thanks 😊
Check ttgo display pinout it is a st 7789 display connect it the same way to your esp 32 It will Work fine(◠‿◕)
I used your program to make 10 frame animation. Each frame is around 20kb, and with the program i got around 2mb .h file. Then I used caesium to compress those jpg and got them down to 5-7kb, however when I tried to make .h file again, size was the same, around 2mb. Why is that so?
size of jpg is not important, it is number of pixels. each pixel need two bytes in esp32 memory.
This work for car stereos?
Give some solution for frames convert to the header file because software is not working correctly it give not responding
can you update it so it can go a lot faster?
Would you mind helping me with a project? I am very new to this but interested in learning - i just wanted to ask some questions to maybe help me get in the right direction. Thank you
Sure, i am listening.
@VolosProjects hey thank you. Im working on a project where id like to have a 3x3x6" container to work with. Put a screen, speaker, a small led strip, rechargeable battery and an on off switch. The screen would play a short 5 to 10 second video on loop. Everything would mount inside via screw. Just no idea what to buy or where to start. Ive also requested you on instagram.
The TFT program from your get hub keeps locking up. Any suggestions?
Locking up or just taking a very long time to run? I had 2 mbs of jpgs and it took over an hour to complete.
Can I control it to play or stop the animation??
cool project
not working :/ the software