GUI Optimization Summary

[中文]

This document mainly summarizes how to optimize GUI effects

LVGL Frame Rate Optimization Configuration

LVGL Frame Rate Optimization Configuration

LVGL Image Too Large, Insufficient Memory

If the .c file exported by LVGL (encoding the texture as a C array) is too large, causing insufficient Flash space, the following alternative solutions can be adopted:

Comparison of Alternative Solutions

Method	Flash Occupancy	Loading Method	Performance & Advantages
.c file	High (all original encoding)	Embedded at compile time	Fast loading, but large resource occupancy
JPEG/PNG + FS	Medium, more optimal	Loaded from the file system (SPIFFS, FATFS) at runtime	Saves Flash, rendering efficiency affected by decoding capability
MMAP + LVGL decoding	Low (compressed binary form)	Load resources in mmap mode	High Flash utilization, good decoding efficiency

Optimization Suggestions

1. Prefer JPEG/PNG format Store the material in JPEG or PNG in SPIFFS or FATFS to reduce Flash occupancy. Consider using JPEG/QOI format for no transparency requirements, and PNG format for transparency requirements.

2. Further recommend MMAP + LVGL decoding method Use the esp_mmap_assets component, preprocess the material into binary format, map it through mmap and hand it over to LVGL for decoding and display, thereby effectively reducing Flash and RAM occupancy. The optimized decoder esp_lvgl_decoder can effectively speed up image decoding.

• Reference example: perf_benchmark

LVGL UI Screen Tearing

• Tearing Phenomenon

Screen tearing effect diagram

• Detailed Explanation of LCD Screen Tearing

• Reference optimization examples:

  • v8: rgb_avoid_tearing

  • v9: mipi_dsi_avoid_tearing

• Note: If the tearing phenomenon is not obvious, it is recommended not to enable anti-tearing. Also, if there is sufficient SRAM margin, it is suggested to open the rendering buffer in SRAM to optimize the frame rate.

Random black lines in the image

• Phenomenon: When ESP32-P4 uses the hardware JPEG decoder to decode images, random black lines appear.

• Cause: Cache is not synchronized – CPU reads data to cache, hardware JPEG decoder reads data from psram. Due to the cache not being synchronized in time, the data read by the hardware is inconsistent with what the CPU sees, resulting in black lines.

• Solution:

  1. Key 1: Input data synchronization – Before hardware decoding, ensure that the original JPEG data has been written back to PSRAM from the cache:

     safe_cache_sync(rgb_data, jpeg_size, ESP_CACHE_MSYNC_FLAG_DIR_M2C)

  2. Key 2: Output buffer preparation – Clear old cache data to prevent the hardware from reading outdated pixels:

     safe_cache_sync(rgb565_ptr, rgb_output_size, ESP_CACHE_MSYNC_FLAG_DIR_M2C | ESP_CACHE_MSYNC_FLAG_INVALIDATE)

  3. Hardware decoding – Call the decoder interface:

     jpeg_decoder_process(jpgd_handle, &rgb_cfg, ...);
     

  4. Key 3: Result synchronization – After decoding is complete, write the new pixels in PSRAM back to the cache for CPU access:

     safe_cache_sync(rgb565_ptr, rgb_output_size, ESP_CACHE_MSYNC_FLAG_DIR_C2M)