GIF Animation Clock

This instructables show how to use a tiny display dev device to build a simple GIF animation clock.

One of a tiny display dev device:

1. Waveshare ESP32-C6 LCD 1.47
2. Waveshare ESP32-S3 LCD 1.47

ESP32 family MCU is strong enough to playback infinite loop Animated GIF and print current time simultaneously.

This project started from the Arduino_GFX ImgViewerAnimatedGIF example and added ESP32 SimpleTime example feature. The current time is synced from the Internet NTP server, so we also need WiFi Connection. Connect WiFi and sync NTP time require waiting period, at the mean time it will play a loading animation. Then enter the main loop indefinitely.

For every loop:

1. Draw the current time
2. Play the animated GIF from start to end
3. Rewind GIF file to the beginning

This project I selected Miss Minutes in Loki as my theme, you can select your favor GIF animation instead.

It is very easy to find animated GIF on the web, select infinite loop one is recommended. I selected 3 animations in GIPHY, one for splash animation, one for initial loading and one for infinite loop playback.

Most downloaded GIF files are oversized for a tiny display, so it is required shrink the dimension to fit the 172 pixels width display. It is also easy to do with online tools, e.g. Ezgif.

Ref.:

1. https://giphy.com/stickers/marvelstudios-loki-miss-minutes-season-2-VTwDfhNOmMxZMm2iYf
2. https://giphy.com/stickers/disneylatino-transparent-gmdKBCklQ7ElxAN7oH
3. https://giphy.com/stickers/disneylatino-transparent-Qws7iZXulBsBvyUTiQ

Arduino IDE

Download and install Arduino IDE latest version if not yet:

https://www.arduino.cc/en/software

Arduino-ESP32

Follow installation steps to add Arduino-ESP32 support if not yet:

https://docs.espressif.com/projects/arduino-esp32/en/latest/installing.html

Arduino_GFX Library

Open Arduino IDE Library Manager by selecting "Tools" menu -> "Manager Libraries...". Search "GFX for various displays" and press "install" button.

You may refer my previous instructables for more information about Arduino_GFX.

Dev Device Pins

Open Arduino IDE Library Manager by selecting "Tools" menu -> "Manager Libraries...". Search "Dev Device Pins" and press "install" button.

arduino-littlefs-upload

Follow installation steps to add the arduino-littlefs-upload:

https://github.com/earlephilhower/arduino-littlefs-upload?tab=readme-ov-file#installation

Note:

You may refer to Arduino Documentation for the details on how to install/import library to Arduino IDE.

Please download the source code at GitHub:

https://github.com/moononournation/animation_clock.git

The settings are all placed at the beginning, around line 14-23, please fill your own values here.

Compile and Upload Program

1. Open miss_minutes_clock.ino in Arduino IDE
2. Select correct port and board options in tools menu
3. Press upload button

Upload LittleFS file system

The GIF files are copied to the "data" folder, the folder can compiled to LittleFS and upload to the dev device. Please follow the instruction to do it:

https://github.com/earlephilhower/arduino-littlefs-upload?tab=readme-ov-file#usage-uploading-a-filesystem-to-the-device

It's time to show off your favor GIF animation clock on your desk ;)