Application Solution Series: HMI Scenarios

HMI Capability Highlights

Compared with ESP32-S3, ESP32-S31 delivers several upgrades in HMI-related capabilities:



Image Processing

Building on ESP32-S3, ESP32-S31 further strengthens hardware-accelerated image processing. It adds a hardware JPEG decoder and, together with PPA and 2D-DMA, forms a complete image processing pipeline.

JPEG images are decoded directly by dedicated hardware. Compared with a pure software approach, decode speed improves by more than 10×, with a significant reduction in CPU load. PPA handles pixel operations such as scaling, rotation, and alpha blending, while 2D-DMA manages frame buffer data transfer. Most of the path from decode to display output can therefore run in hardware.

For full-screen rotation—a common requirement on RGB displays—PPA performs the rotation directly and 2D-DMA handles data movement, so performance overhead is negligible.


Multi-Display Rendering

ESP32-S31 runs at 320 MHz and supports PSRAM up to 250 MHz DDR, providing higher graphics rendering performance and memory bandwidth. Compared with ESP32-S3, it handles multi-layer UIs, animations, and large graphical assets more comfortably in HMI applications.

The higher clock speed and bandwidth also leave more headroom for dual-display applications, where two screens can refresh and render independent interfaces in parallel—suitable for primary/secondary control panels, smart appliances, and industrial HMI.


Color Depth

ESP32-S3 display output is limited to RGB565. ESP32-S31 natively supports RGB888 output, delivering smoother visuals in scenarios sensitive to color accuracy, such as gradients and wide-gamut rendering.

RGB565 uses 16 bits per pixel, for roughly 65,000 color levels; RGB888 uses 24 bits per pixel, for more than 16 million color levels.

The difference is most visible in gradients and large solid-color areas: RGB565 tends to show visible banding, while RGB888 produces smooth, continuous color transitions.


1. Linear Gradient Comparison

线性渐变_RGB565.jpg

RGB888


线性渐变_RGB888.jpg

RGB565


2. 2D Color Gamut Comparison

二维色域_RGB888.jpg

RGB888


二维色域_RGB565.jpg

RGB565


3. Radial Glow Comparison

径向光晕_RGB888.jpg

RGB888


径向光晕_RGB565.jpg

RGB565


The sections below present measured performance across several HMI form factors on ESP32-S31.


10.1-Inch Large Display

Both scenarios below run on a 10.1-inch display at 1024 × 600 resolution.

ScenarioFrame Rate
LVGL Benchmark43 FPS
Digital Photo Album (with JPEG decode)20+ FPS
EV Charger Animated UI15 FPS

Digital Photo Album

The photo album supports browsing JPEG and PNG images and playback of MP4, AVI, MOV, and MJPEG video. The UI supports touch-based page turning and automatic slideshow playback.


电子相册.gif


电子相册2.gif


EV Charger UI

The EV charger UI continuously renders multi-frame animation assets to simulate a real charging-station interaction interface.


充电桩.gif


Dual Circular Displays

This scenario renders an eye animation on two 360 × 360 circular displays. Two independent demos validate different rendering paths.

With both displays running at 30 FPS, rendering load stays on Core 0 only; Core 1 utilization is near 0%, leaving the second core fully available for networking, touch handling, and application logic.


MetricValue
Single-display resolution360×360
Dual-display frame rate30 FPS each
Core 0 CPU utilization~50%
Core 1 CPU utilization~0%

EAF Animation Playback

Pre-rendered animation sequences are packaged as .eaf files for direct playback. The rendering pipeline is fixed and straightforward to implement.


双圆屏1.gif


Real-Time Layer Compositing

Iris, pupil, and eyelid are composited as independent layers in real time. The demo supports gaze direction control, emotion state switching (calm / happy / drowsy / surprised / angry / sad), blink triggers, and pupil theme replacement, and can respond to external control commands at runtime.


双圆屏2.gif


Central Control Display

This group of scenarios runs three UIs on a display with a physical resolution of 800 × 480:

  • The coffee machine control panel and electric vehicle dashboard use a native 800 × 480 landscape layout for direct output;
  • The mixer console is designed for 480 × 800 portrait orientation and requires real-time rotation of the full frame buffer before output.

Measured results show no noticeable performance difference between rotated and non-rotated RGB output on ESP32-S31, indicating that full-screen LVGL rotation adds almost no overhead.


MetricValue
Physical resolution800 × 480
LVGL Benchmark50 FPS


1. Coffee Machine Control Panel

咖啡机.gif


2. Electric Vehicle Dashboard

电动车.gif


3. Audio Mixer Control Console

混音器.gif


Resources

For next-generation HMI applications, Espressif will soon release a complete software development toolkit and a rich set of application examples. Stay tuned. Follow the Espressif website for the latest development resources and technical support, and use ESP32-S31 to build the next generation of standout interactive products.