Introduction: GIF Animation Clock
This instructables show how to use a tiny display dev device to build a simple GIF animation clock.
Supplies
One of a tiny display dev device:
Step 1: How Does It Work?
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:
- Draw the current time
- Play the animated GIF from start to end
- Rewind GIF file to the beginning
Step 2: GIF Source
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.:
Step 3: Software Preparation
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.
Step 4: Download Source
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.
Step 5: Compile & Upload
Compile and Upload Program
- Open miss_minutes_clock.ino in Arduino IDE
- Select correct port and board options in tools menu
- 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:
Step 6: Enjoy!
It's time to show off your favor GIF animation clock on your desk ;)
