Add GIF Player UI extension (/gifplayer.htm)

[Manut38]

I wrote a little UI extension page for the new GIF support and I would love to have it included in this project.

Thanks to @ajotanc, whose PixelMagicTool I used as a base for my layout and structure!

I also included a "GIF" button right next to the pxmagic.htm button.
This is merely an idea and of course I'm happy to take suggestions about the placement or about the implementation in general.

Source: https://github.com/Manut38/WLED-GifPlayer-html

Thank you all so much for your work on WLED, it's honestly amazing!!
I've been using it for the last couple of years now and I love to see how it developed over that time. GIF support finally being added is all I that dreamed about 🔥

---

A WLED UI extension for an easy control of the awesome new "Image" effect, capable of displaying animated GIFs on your LED matrix.

It is using the ESP filesystem editor at /edit to list and change files on the local ESP storage.

Features

• Responsive layout
• Click to change currently displayed image
• Upload/Delete image files
• Save images as presets
• Forced caching of images and request limiting (ESP crashes when there are too many concurrend HTTP requests)
• Button to refresh all images, useful when an image was replaced with another one of the same name

Limitations

Warning

Only upload images in your matrix native resolution! (e.g. 16x16)

Due to the limited flash storage space and processing power, .gif files of larger dimensions will make the effect lag and kill WLED performance

• Currently the "Image" effect only supports .gif files
• All image files will be uploaded to/read from the root path of WLEDs LittleFS because it does not support subfolders
• SD card support untested

Screenshots

[dosipod]

Works okay with one note ( may be not related directly to the html page ) is that the storage size reported of 241/983 KB is not accurate and it will only report the correct number once you reboot the esp which is the same behavior on the filesystem info page .

[softhack007]

@Manut38 Does your PR build on top of the PR from Aircoookie for GIF support, or is it independent?

• Image effect (GIF support) #3835

[Manut38]

@dosipod Yes, I did notice that behavior too. I'm just getting this info straight from the /json/info endpoint. I don't know of any other way to check for the current values.

@softhack007 This is essentially a separate interface, specialized in controlling the new "Image" effect, added by Aircoookie in the gif branch. So it is built on top of that functionality.
Right now it is using the FX ID 53 for sending the requests.
const FX_MODE_IMAGE = 53; // set effect mode "Image"
This needs to be adjusted, if the ID is changed before the gif branch is merged to main

[Manut38]

I made a few changes to the code since I took the screenshots that I would love to hear your opinion on.

1. I added a pause and stop button to the UI
   My reasoning for this is that it allows for a much faster control the displayed image, without having to go back to the main WLED UI. My intention for this page is to basically build an clean interface specialized for the new "Image" effect, so I felt that it made sense to include this functionality; Especially if displaying images is the primary use of your LED matrix.
2. The image buttons are now aware of already existing presets that hold the same image filename in their segment config. Users can now e.g. customize the playback speed of the gif using a preset and still expect GifPlayer to load the correct preset.

Another thing I want to note is that I am very aware that this is building on top of a feature that is still currently in-development. Especially because of that I would be interested in @Aircoookie's opinion, because as far as I know he was the one mostly working on the "Image" effect.
I could also see how adding more and more isolated htmls (pixart.htm, pxmagic.htm, gifplayer.htm) might not be the way to go forward with this, however I'm very curious about your all of your vision here.

[Manut38]

Updated the images to reflect the changes to the button layout.
Any news on this? 😄

[dosipod]

@Manut38 I am personally not in favor of adding such external tools to wled at build time just from the points that future updates to wled might break things( this has been seen with other tools a lot ) and if your tool is separate then it could be updated faster which we also seen first hand . Does not harm to maintain your page though , please post about the same on wled discord 2D channel

At the moment we use a lot of tools like that and we just download the latest version and copy under edit , i am not sure what is wrong with that if any . That is beside the fact that gif is not merged yet

[Manut38]

@dosipod I kind of agree with this honestly. This pull request was motivated by the fact that there are some other tools that have been integrated into the source directly and also got mentioned on the official wiki.
Of course this way additional tools like this would get a lot more exposure and users.

I saw that the "older" WLED-PixelArtConverter [pixartmin.htm] got a separate entry in the wiki at https://kno.wled.ge/features/pixel-art-converter/
Maybe this could be a way to present some links to tools like this on the official wiki?
Because I remember that I found these extensions pretty much randomly on GitHub rather than on an official post.
What is your take on this?
Thanks for all the amazing work btw 👍

[blazoncek]

@Manut38 when (or if) GIF player gets merged and @Aircoookie decides that this UI extension is usable and merges this PR you can make a PR for WLED documentation so that it gets attention of users.

[ajotanc]

The idea was really good, huh? hahah! I'll test it and let you know what I think, I'm out of date... I didn't even know it had gif support already. It looks very promising.

If possible @Manut38 , can I adapt what you did to my project? Looking at yours gave some very interesting ideas!

[Manut38]

@ajotanc Oh I'm sorry, I missed this reply!
Yeah, your idea definitely was great, and I've been using your solution before I found the on-the-fly decoder that they wrote here.
Thank you a lot for your pioneering on this!

However I'm pretty sure, that whenever the gif branch will be merged it will be the more versatile and faster solution for animations.
I'm honestly still super stoked about this 😁

Of course you can take any inspiration you like from my code, it's open source after all and it's also the exact same thing I did with your code before 😄