prenticedavid / AnimatedGIFs_SD

Display GIFs from Flash, SD or SPIFFS
64 stars 14 forks source link

Feature Request #7

Open dallen98 opened 3 years ago

dallen98 commented 3 years ago

Could your library include a version to recieve raw code and output it to the tft as explained in this video that I see you commented upon... https://www.youtube.com/watch?v=-h9Vm0Ow_Is The pros and cons as I perceive them are that whilst the file size in raw is say 10 times larger than the gif the speed of the code can get onto the tft much quicker eg 25-30 fps a video on the tft as opposed to a fastish slide show. To overcome the file size this would need to sit in spiffs or sd card and I dont know what effect this would have on the FPS. Let me know your thoughts thanks dave

prenticedavid commented 3 years ago

Sorry, I still have not updated the master branch yet.

But the example already supports : GIF file on SD, GIF file on SPIFFS, GIF array in PROGMEM.

Life is much simpler with copying regular GIF files from your PC to SD card or /data folder in your sketch for SPIFFS.

But you can take any GIF file and create a C array for PROGMEM. e.g. with a utility like bin2C or bin_to_C Look at "wrong_gif.h" to see two arrays. Hint. Search for PROGMEM Look at "mad_race_gif.h" to see one array.

From memory, the sketch looks at SD / SPIFFS to see if there are any GIF files. If it does not find any it displays GIFs from the C arrays stored in PROGMEM. I think that it shows a different background colour for SD, SPIFFS or PROGMEM.

You just need to replace my PROGMEM arrays with your C arrays. Please let me know how you get on.

David.

dallen98 commented 3 years ago

thanks for getting back so quick, i,m using an esp32 conected to an ILI9341 tft, i look in the USE_TFT_LIB.h and get lost in the complexity of it, is there some lines ineed to comment/uncomment ? any pointers would be appreciated thanks dave

prenticedavid commented 3 years ago

If you just select 0xE8266 it will use the regular TFT_eSPI library. i.e. default. I presume that you have already set up your ILI9341 display User_Setup.h Hint. Run all of TFT_eSPI library examples first.

If you use Adafruit_ILI9341 you need to select 0xA9341 on line 3 of AnimatedGIFs_SD.ino Edit these lines in USE_TFT_LIB.h to suit your display wiring

#elif defined(ESP32)
#define TFT_CS  5
#define TFT_DC  13
#define TFT_RST 12
#define SD_CS 17

I strongly recommend that you use Bodmer's TFT_eSPI.h library for your ESP32 but Adafruit_ILI9341 should work too.

David.

dallen98 commented 3 years ago

Looking good, I have removed the contents of the data folder, I have removed the sd card and I have disabled psram so what i believe i,m seeing is the various .h files playing, on a purpleish background, how do I get the lama_gif and mad_man_gif to play ?

this is my output... rst:0x1 (POWERON_RESET),boot:0x13 (SPI_FAST_FLASH_BOOT) configsip: 0, SPIWP:0xee clk_drv:0x00,q_drv:0x00,d_drv:0x00,cs0_drv:0x00,hd_drv:0x00,wp_drv:0x00 mode:DIO, clock div:1 load:0x3fff0018,len:4 load:0x3fff001c,len:1216 ho 0 tail 12 room 4 load:0x40078000,len:9720 ho 0 tail 12 room 4 load:0x40080400,len:6352 entry 0x400806b8

AnimatedGIFs_SD No GIF files on SD card teakettle_128x128x10_gif bottom_128x128x17_gif globe_rotating_gif mad_race_gif horse_128x96x8_gif Animated GIF files Found: 5 Flash: teakettle_128x128x10_gif size: 21155 10 frames @ 80ms 100% [ 33] typ: 120x86 avg: 17.0ms draw: 14.0ms 71% Flash: bottom_128x128x17_gif size: 51775 17 frames @ 70ms 100% [ 54] typ: 106x97 avg: 14.6ms draw: 11.1ms 71% Flash: globe_rotating_gif size: 90533 30 frames @110ms 100% [ 93] typ: 170x110 avg: 19.8ms draw: 15.9ms 0% Flash: mad_race_gif size: 173301 119 frames @ 70ms 100% [360] typ: 116x107 avg: 14.5ms draw: 11.3ms 0% Flash: horse_128x96x8_gif size: 7868 8 frames @ 80ms 100% [ 27] typ: 119x71 avg: 9.8ms draw: 7.7ms 0% Flash: teakettle_128x128x10_gif size: 21155 10 frames @ 80ms 100% [ 33] typ: 120x86 avg: 17.0ms draw: 14.0ms 71% Flash: bottom_128x128x17_gif size: 51775 17 frames @ 70ms 100% [ 54] typ: 106x97 avg: 14.6ms draw: 11.1ms 71%

Many thanks dave

dallen98 commented 3 years ago

just to clarify, its the lama_gif.h and mad_man_gif.h I want to play ? thanks

prenticedavid commented 3 years ago

Surely you download the ZIP. Just move the files from /data to a new /data2 folder leaving an empty /data Then you ESP32 sketch data upload to SPIFFS. Effectively creating an empty SPIFFS.

Run the existing .INO sketch. It should display the GIFs from PROGMEM.

If you only want to see llama and mad_man, edit the .INO file. There is a list of PROGMEM pointers. Uncomment, comment the existing PROGMEM arrays. You will need 759k + 711k + xx kB for the executable code. i.e. more than the default ESP32 PROGMEM.

Yes, it runs PROGMEM is slightly faster than SPIFFS which is faster than SD card. Obviously an SD card can contain an unlimited size of GIF.

Oh, my name is David.

dallen98 commented 3 years ago

Hello David, I,ll tell you what my ultimate aim is, I want to create a 360 wide x 180 high led matrix, I would idealy like three slots each 7 seconds long of full motion video, the fps would need to be 25-30 fps, attached to my single esp32 is a raspberry pi that i can remote desktop into this rpi will have the arduino ide installed and attached to the sp32.

I,m told that if I can make it happen on a tft then It should translate onto leds.. somehow, so i,m just exploring options, i saw Bodmers https://github.com/Bodmer/TJpg_Decoder/tree/master/examples/ESP32_Dual_Core_Flash_Jpg the dual core stuff sounded good but its only capable of a jpeg slide show, I need video. thanks dave

prenticedavid commented 3 years ago

My name is David.

dallen98 commented 3 years ago

when i write "thanks dave" i,m signing off as dave because my name is dave allen, yes yes you wish to be called David, i have created a 180x360 gif that i,m now running, its called "9secs" here is the output.. Pathname: /gifs/llama_driver.gif 108 frames @ 40ms 40% [327] typ: 316x160 avg: 98.7ms draw: 37.5ms 27% Pathname: /gifs/9secs.gif 111 frames @ 70ms 100% [336] typ: 308x105 avg: 61.4ms draw: 20.5ms 65%

prenticedavid commented 3 years ago

Apologies. You dave, me David.

70ms is a pretty slow Frame Rate. I see that it is managing 61ms. So you have no chance of achieving 33ms (30 FPS)

What does your animation look like? Can you attach the GIF ? EZGif might be able to simplify the Frames. Get a better Frame rate.

David.

dallen98 commented 3 years ago

`` 9secs

dallen98 commented 3 years ago

what i,m doing is creating a web publication in microsoft publisher and previewing the website in firefox then with screentogif programme i record 14 seconds, remove frames with 95% similarity, load onto ezigif, reduce colours to 20,, maximum compression and there it is above thanks dave meaning me

dallen98 commented 3 years ago

secs9

thats the gif before i did ezigif

dallen98 commented 3 years ago

it doesnt need to be 30fps, 25 fps might suffice

dallen98 commented 3 years ago

secs7

this ones 185kb, 25fps 7 seconds long, 23 colours in ezgif, maximum lossy gif compression

prenticedavid commented 3 years ago

Cartoon animations don't care about FPS.I suspect that the top-left section only has about 12 frames. But the glowing Sales Message will use all 57 frames.

I loaded into EZGif. I see that it has different delays between each frame. I can't remember whether I handle that properly in the "debug output". But it is certainly practical to embed a 185kB GIF into PROGMEM.

It is surprising how much compression you can "get away with"

David.

I might try your GIF on a 320x480 screen this evening.
You can always increase the "verbosity" of the Serial Output. e.g. check whether the 5ms delay Frames get drawn within 5ms.

dallen98 commented 3 years ago

i,m thinking if to lower the fps to 24 ?? below is my exchanges with my fastled friends which might shed some light, Yves hasn't replied to me yet....

4mb circular ring buffer on psram is discussed on this video https://youtu.be/6BK4fzRaFGY?t=555 not sure if its relevant ?

Would it be true to say that anything i can get on the ili9341 tft 240x320 pixels would automatically work via fastled onto a ws2812b matrix of the same dimensions ? and do i lose or gain by having the gifs on sd card over spiffs ?

Yves-bazin SnoovatarYves-bazin15:58

the issue with PSRAM it's his speed. for what we need is too slow. 240x320 pixels is 230Kb almost all the ram. it would require a very tricky stuff to do

dallen9862 Snoovatardallen986217:07

this is a very detailed look at esp32 video..

https://www.instructables.com/Play-Video-With-ESP32/

Today dallen9862 Snoovatardallen986211:24

when you say above "PSRAM it's his speed. for what we need is too slow" does this still apply if the gif was converted into a .h file of c code array using this converter.. http://tomeko.net/online_tools/file_to_hex.php?lang=en or if the gif was converted to raw as demonstrated here... https://www.youtube.com/watch?v=-h9Vm0Ow_Is as a array ????

prenticedavid commented 3 years ago

I can imagine a 240x320 or a 320x480 colour TFT.

To display full-colour images on a discrete LED array is big and expensive. You are talking about the big displays at Music Festivals. Lots of expensive LED panels requiring lots of electrical power.

Which means that you don't want to play about with a $5 ESP32. You could use a proper PC or perhaps a RaspberryPi.

dallen98 commented 3 years ago

cannot be done on a rpi due to it having only having 2 unique pwm pins 5700 leds is the limit on the rpi, 360 px wide x 180px high = 64800 leds, this in theory can be done from a esp32 and have a working code to do this, so i,m trying to simulate this on a ili9341 what i,m going to do is create a animated gif 320px wide x 203px high = 64960px total this will of course visibly fit on my ili9341, i would ideally like 2 or 3 videos 7 seconds long running at minimum 24fps, to this end i,ll do this in due course and seek your advice on optimization, i see that my 185kb gif when converted to c .h file seems to be 283kb

dallen98 commented 3 years ago

dpi72

177kbs Number of frames: 63 Duration: 6.52 seconds Colours 23 (I think) I dont know if the file size can be improved without losing quality ??

prenticedavid commented 3 years ago

In practice the animation runs at almost perfect speed on ILI9341.

You can edit GifDecoder_Impl.h line 29 GIFDEBUG = 0 is default GIFDEBUG = 1 is the original author's gross debug setting. it is not very useful GIFDEBUG = 2 displays some of the important parameters. GIFDEBUG = 3 shows info for each individual Frame.

You can see that some Frames are fairly small. And only take about 30ms to render. The larger Frames take longer e.g. Frame #1 is the full 360x180. Designed for 70ms delay but takes 144ms to render. Frame #21 is only 351x32. Designed for 100ms but rendered in 32ms e.g.

Frame 21: [= 75334 P:0x00 B:2 F:100ms] @ 2,108 351x32 ms:32

Your 17.32 GMT GIF is different colours to the 00.23 GMT Gif

Everything will obviously go much faster on an STM32 or Teensy4.0. But it should be possible to get adequate performance from the ESP32.

My bedtime !!

David.

prenticedavid commented 3 years ago

Please can you give names or numbers to your GIFs. The "red" GIF does not display properly on my ILI9341

What do you really want to display? i.e. red or black. 360x180 or 320x203, ...

There are several strategies in EZGif for size, optimisation, ... I doubt if you really need to go down to 23 colours. You might want a single global Palette or perhaps different Palettes for different Frames.

First off. We need to get a suitable GIF that is acceptable for your application.

Secondly. I would like to resolve the problems in the "red" GIF But I need to have a way to identify which GIF we are discussing.

David.

dallen98 commented 3 years ago

Thanks for all this David, my end game is 360x180 black 185 kbs

dallen98 commented 3 years ago

...7 seconds long

dallen98 commented 3 years ago

blk360x180.zip blk360x180_files.zip

this is the html where i use screentogif to record 7 secs of it

dallen98 commented 3 years ago

360x180.zip

this is my microsoft publisher 2007 file

dallen98 commented 3 years ago

Bombjack.zip

this is my fastled sketch

prenticedavid commented 3 years ago

Ah-ha. So you run 5 different GIF animations and capture the result. Then use EZGif to scale and optimise the result.

Personally, I think that the original Green pulsing text is not too bad. But the snowy effect on the TFT looks horrible. The Red scrolling message could use a larger font. And take up the whole width of the screen.

Only you know how you want everything to look. And a TFT is very different to a massive RGB panel.

I would still like you to edit your previous posts and attach a suitable name to each GIF e.g. dallen4.gif Then we can reference a specific GIF and comment on any rendering problem(s).

Regarding practicalities. You could print the scrolling text in the regular way. i.e. separate from the running GIFs.

David.

dallen98 commented 3 years ago

360x180px recorded at 24fps using screento gif Result: Duration 7.052, Frame count 172 In Image/Resize reduce dpi from 96 to 72 using fant high quality save as d1 1.91mb In Image/Cinemagraph covered all active areas save as d2 1.77mb so what we have below is this d2, frame count 164, duration 6.880, average duration delay 42ms all the above actions were done using screentogif, I have not used the ezgif optimizations because I thought it better to give you an unadulterated file to look at thanks

d2

prenticedavid commented 3 years ago

I configured the IDE for "No OTA (1MB APP, 3MB SPIFFS)" I copied the 1.7MB GIF to /data folder. Uploaded to SPIFFS.

The motor car video looks pretty good on the TFT. The static Components Image looks bad. Since it is static, you could use full colour pixels. "YOUR SALES MESSAGE HERE" looks good. Note that the video might render but it is about half the design speed.

I also created a PROGMEM array. But this would require at least 2MB APP space.

David.

dallen98 commented 3 years ago

re the "I also created a PROGMEM array. But this would require at least 2MB APP space." that would be resolved by "Huge APP (3mb no ota 1mb spiffs) ???? thanks for your help

also which array converter is best... http://tomeko.net/online_tools/file_to_hex.php?lang=en //https://retro-esp32.github.io/Convert-Image-To-Byte-Array/ //https://www.skaarhoj.com/FreeStuff/GraphicDisplayImageConverter.php

prenticedavid commented 3 years ago

I used the first one. But first I had to write the

const unsigned char PROGMEM dallen7_gif[] = {

};

So that I could paste the HEX lines inside.

I still reckon that you need to design a "better" animation.

David.

dallen98 commented 3 years ago

could you paste here that progmem array you made just for my verification, are you in the UK ?

dallen98 commented 3 years ago

my sketch size including libraries will likely be smaller than your animatedgifs-sd so with that in mind what do you think the max size/kbs of progmem array could i get on esp32 ??

dallen98 commented 3 years ago

this is d7 where just the quarter car video is active..

d7

d4 360x180px recorded at 24fps using screento gif Result: Duration 7.052, Frame count 172 In Image/Resize reduce dpi from 96 to 72 using fant high quality save as d4 1.7mb In Image/Cinemagraph covered all active areas (quarter of screen active save as d7 1.66mb remove duplicates to 90%, duration now 6.880 secs, 1.59mb save as d7

ezygif 20 colours 696kb lossygif 468kb lower speed by to 80% = 8.6 secs

prenticedavid commented 3 years ago

Yes, I am in the UK.

There is not much point in me pasting here.

Create a new tab called dallen7_gif.h in your sketch.

You just go to http://tomeko.net/online_tools/file_to_hex.php?lang=en and either drag-drop or browse for the GIF file. Then copy-paste from the online tool to your dallen7_gif.h tab.

Seriously. I suggest that you think carefully about your animation and design for attractiveness. Upload to SPIFFS is the most convenient way to test your ideas. There is no need to recompile the sketch. It will display whatever GIF(s) you have uploaded to SPIFFS.

When you have designed and tested the "best" GIF, we can create an array. And attempt to draw it fast enough.

David.

dallen98 commented 3 years ago

About the attractiveness, it is likely local advertisers so its all a bit Pearl and Dean but yes it needs reworking, I need to make sure I can get all this onto the leds, right i,m off to see my very nice support bubble thanks again