In the previous article titled “Displaying JPG Images on ESP32 Handheld Device and Simulating Animation Effects,” we shared how to display <span>JPG</span> images on the ESP32 handheld device and simulate animation effects. This note introduces the method of directly displaying <span>GIF</span> images on the ESP32 handheld device using LVGL.
1. Development Board Introduction
This handheld device is a custom development board for the Xueersi children’s programming course, with the MCU being <span>ESP32-WROVER-B</span>. It is equipped with a casing, battery, 1.8-inch LCD screen, six buttons, a buzzer, light sensor, thermistor, etc., and supports external sensors.
For more details, see “ESP32 Development Board Under 50 Yuan, with Casing, Battery, 1.8-inch LCD, Buttons, and Other Modules”
2. LVGL-Micropython Firmware
We compiled the <span>LVGL-Micropython</span> firmware suitable for the Xiao Miao handheld device by referring to “Compiling an LVGL-Micropython Firmware in Three Simple Steps.”
Due to the complexity of the screen driver in LVGL-Micropython, we encapsulated it into a driver module <span>screen.py</span>. This module allows for easier initialization of the display, thereby simplifying the development process.
Download link: QQ group or https://gitee.com/py2012/xueersi-eps32-handheld-device
3. Displaying GIF Images
LVGL-Micropython supports direct display of images in four formats: <span>BMP, JPG, PNG, GIF</span>. However, since GIFs consume a lot of resources, it is recommended to use them only for displaying small icons, emojis, etc., and not for displaying large GIF images. For example, in the video above, displaying the Windows XP boot animation clearly showed lag.
Example code:
import screen
import lvgl as lv
import machine, os, time, fs_driver
# Get the currently active screen object
scrn = lv.screen_active()
scrn.set_style_bg_color(lv.color_hex(0x000000), 0) # Set the screen background to black
fs_drv = lv.fs_drv_t()
fs_driver.fs_register(fs_drv, 'S')
# Create image object
gif = lv.gif(scrn)
# Set the image source to test1.jpg on the SD card
try:
gif.set_src("S:./winxp.gif")
print("Successfully loaded image")
except Exception as e:
print("Failed to load image:", e)
# Align the image to the center of the screen
gif.align(lv.ALIGN.CENTER, 0, 0)
4. Displaying GIF Images from SD Card
LVGL-Micropython can place the SD card reader, display, and touch panel all on the same SPI bus, allowing for a maximum of one <span>four-channel SPI SD card, dual SPI display, and one SPI touch screen</span>, all running at different speeds.
Test code is as follows:
import screen
import lvgl as lv
import machine, os, vfs, time, fs_driver
# Initialize SD card
sd = machine.SDCard(
spi_bus=screen.spi_bus,
cs=22,
freq=20000000
)
# Mount SD card
vfs.mount(sd, "/sd")
print("SD card mounted successfully (SPI mode)")
# Get the currently active screen object
scrn = lv.screen_active()
scrn.set_style_bg_color(lv.color_hex(0x000000), 0) # Set the screen background to black
fs_drv = lv.fs_drv_t()
fs_driver.fs_register(fs_drv, 'S')
# Create image object
gif = lv.gif(scrn)
# Set the image source to bulb.gif on the SD card
try:
gif.set_src("S:sd/bulb.gif")
print("Successfully loaded image")
except Exception as e:
print("Failed to load image:", e)
# Align the image to the center of the screen
gif.align(lv.ALIGN.CENTER, 0, 0)
Recommended Reading:
- Practical ESP32C3: Implementing a Brick Breaker Game Based on LVGL-Micropython
- Practical ESP32C3: Touch Control to Adjust Screen Backlight Brightness Based on LVGL-Micropython
- Practical ESP32C3: Creating a Dynamic Temperature and Humidity Meter Based on LVGL-Micropython
-
Practical ESP32C3: Building a Simple Level Meter Based on LVGL
-
Practical ESP32S3: Creating a Simple Music Player Based on LVGL
-
Practical ESP32S3: Experiencing an AI Chatbot
-
Using AI Technology to Write Mini Games for Xiao Miao Handheld Device (Part 2)
