GUI Optimization Summary

This document primarily summarizes how to optimize GUI effects.

If you are developing based on LVGL, it is recommended to use the esp_lvgl_adapter component to optimize the GUI effect. This component has deeply optimized screen tearing and frame rate, and seamlessly integrated advanced features such as image decoding, FreeType font rendering, and Dummy Draw.

LVGL Frame Rate Optimization Configuration

LVGL Frame Rate Optimization Configuration

It is recommended to use the esp_lvgl_adapter component to optimize the frame rate of LVGL.

Reference example: lvgl_common_demo

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

It is recommended to use the esp_lv_fs and esp_lv_decoder features of the esp_lvgl_adapter component to optimize decoding efficiency and manage LVGL’s image resources.

Reference example: lvgl_decode_image

LVGL UI Screen Tearing

Tearing Phenomenon

Detailed Explanation of LCD Screen Tearing

It is recommended to use the esp_lvgl_adapter component to optimize screen tearing issues.

Reference optimization examples:
- v8: rgb_avoid_tearing
- v9: mipi_dsi_avoid_tearing

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)