Add gif animations?

[serlancelot]

Hello, good morning, one question... is there any way to add gif animations and make them work without a network connection?
Thanks greetings!

[Ian Gray]

A data URI would work. It's not pretty but you can base64 encode any image directly into the URL.

[serlancelot]

ok, I saw it in another message, but I thought it was only for a static image...
I'll look at it later to see if I can get it to work... thanks! I'm sure you have some more questions

[serlancelot]

Well... I can't get it to come out.
If I put it this way, there is no problem, it loads the gif and the animation is perfectly visible.

ESPUI.label("An Image Label", ControlColor::Peterriver, "<img src='https://i.gifer.com/origin/4d/4dc11d17f5292fd463a60aa2bbb41f6a_w200.webp'>");

but if I try to put all the text in base64 it doesn't load it, besides I had to install the new version of the arduino IDE and modify the "editor.maxTokenizationLineLength" because it didn't recognize the whole line. But even so, it does not load, it does not load more than the graphic environment.
ESPUI.label("An Image Label", ControlColor::Peterriver, "<img src='data:image/gif;base64,XXXXXXXXXXXXX'>");
The X is the whole line of text in base64
And in the serial monitor it gives the following error:
ERROR: prepareJSONChunk: Control 27 is too large to be sent to the browser.

I suppose the problem is due to the length... Is there any other way to be able to use "offline" animations?
Thanks and regards!

Update!!
I have managed to make it work, it seems that even if the line limit is increased to 50,000, it does not admit more than 9,000. So if a gif takes up less space, it does work, I have tried to reduce the size and something else when it does not reach 3,000 characters works fine.
Tomorrow I'll look at something else... (it's already too late 1:40 am)
Thank you!!

[Ian Gray]

Ah yes, there will be an inherent size limit due to the way that we send the UI around that is going to cause you problems. If you look at the code which prepares the UI data for sending from the ESP to the browser, you will see that it does detect and handle overflow, but it does it by adding each control one at a time. In other words it assumes that each control is less than the total buffer size.

The proper solution is going to be to serve your image in the same way that we serve the js/css/html files. We don't have a way to extend extra files into the build process, but I'll explain how it works here and it should be pretty straightforward for you to hack in. Maybe if someone has time we could extend this properly.

prepare_static_ui_sources.py turns the HTML and Javascript files into C header files. For example, data/index.htm becomes src/dataIndexHTML.h. These header files are included at the top of ESPUI.cpp. These are then served from a set of callbacks that are created from line 1316 onwards.

Unfortunately prepare_static_ui_sources.py only handles .html, .css, and .js files, but I quickly hacked it to also handle the raw binary files of GIFs. I'm not merging that because it is a silly bodge, but you can see the edits in this gist from line 68. Use this modified script:

tools/prepare_static_ui_sources.py --nostoremini --source data/animated.gif --target src/animated.h

and it will output an animated.h that contains the GZIPped and converted GIF. Include the new header in ESPUI.cpp:

#include "animated.h"

Then add a handler to ESPUI.cpp from line 68 or so that will be something like:

    server->on("animated.gif", HTTP_GET, [](AsyncWebServerRequest* request) {
        AsyncWebServerResponse* response
            = request->beginResponse_P(200, "image/gif", GIF_ANIMATED_GZIP, sizeof(GIF_ANIMATED_GZIP));
        response->addHeader("Content-Encoding", "gzip");
        request->send(response);
    });

I've not tested all this, but it should all just work.

[serlancelot]

Hello! Thank you for your answer!!, for the moment I will leave it as I have it since it works for me. I don't have much of a level, so I'll look at it to see if I can figure out how it works (I'm sure it will be easy, but not for me, I'm not a programmer).

In any case, what you indicated to me at the beginning helped me a lot, because as I told you, I thought it was only for static images! So Thank you very much!!