GUI 优化总结

[English]

本文档主要总结了如何优化 GUI 效果。

若基于 LVGL 进行开发，建议使用 esp_lvgl_adapter 组件来优化 GUI 效果。该组件针对屏幕撕裂与帧率进行了深度优化，并无缝集成了图片解码、FreeType 字体渲染和 Dummy Draw 等高级特性

LVGL 帧率优化配置

LVGL 帧率优化配置

建议使用 esp_lvgl_adapter 组件来优化 LVGL 的帧率。

• 参考示例： lvgl_common_demo

LVGL 图片过大，内存不足

如果 LVGL 导出的 .c 文件（将纹理编码为 C 数组）体积过大，导致 Flash 空间不足，可采用以下替代方案：

替代方案对比

方法	Flash 占用	加载方式	性能 & 优势
.c 文件	高（原始全部编码）	编译期嵌入	加载快，但占用资源大
JPEG/PNG + FS	中等，更优	运行期从文件系统（SPIFFS、FATFS）加载	节省 Flash，渲染效率受解码能力影响
MMAP + LVGL 解码	低（压缩二进制形式）	mmap 方式加载资源	Flash 利用率高，解码效率好

优化建议

建议使用 esp_lvgl_adapter 组件的 esp_lv_fs 功能和 esp_lv_decoder 功能来优化解码效率和管理 LVGL 的图片资源。

• 参考示例： lvgl_decode_image

LVGL UI 画面撕裂

• 撕裂现象

出现屏幕撕裂的效果图

• LCD 屏幕撕裂详解

建议使用 esp_lvgl_adapter 组件来优化屏幕撕裂问题。

• 参考优化示例：

  • v8: rgb_avoid_tearing

  • v9: mipi_dsi_avoid_tearing

图像存在随机黑线

• 现象：ESP32-P4 使用硬件 JPEG 解码器解码图片时，出现随机黑线。

• 原因：缓存不同步 – CPU 读数据到 cache，硬件 JPEG 解码器从 psram 读数据。由于缓存未及时同步，导致硬件读取的和 CPU 看到的数据不一致，从而出现黑线。

• 解决方法：

  1. 关键 1：输入数据同步 – 在硬件解码前，确保 JPEG 原始数据已经从 cache 写回到 PSRAM：

     safe_cache_sync(rgb_data, jpeg_size, ESP_CACHE_MSYNC_FLAG_DIR_M2C)

  2. 关键 2：输出缓冲区准备 – 清除旧 cache 数据，防止硬件读到过期像素：

     safe_cache_sync(rgb565_ptr, rgb_output_size, ESP_CACHE_MSYNC_FLAG_DIR_M2C | ESP_CACHE_MSYNC_FLAG_INVALIDATE)

  3. 硬件解码 – 调用解码器接口:

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

  4. 关键 3：结果同步 – 解码完成后，将 PSRAM 中的新像素写回 cache，供 CPU 访问：

     safe_cache_sync(rgb565_ptr, rgb_output_size, ESP_CACHE_MSYNC_FLAG_DIR_C2M)