GUI 优化总结

[English]

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

LVGL 帧率优化配置

LVGL 帧率优化配置

LVGL 图片过大，内存不足

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

替代方案对比

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

优化建议

1. 首选 JPEG/PNG 格式 将素材以 JPEG 或 PNG 存储在 SPIFFS 或 FATFS 中，减少 Flash 占用。无透明度需求考虑使用 JPEG/QOI 格式，有透明度需求考虑使用 PNG 格式。

2. 进一步推荐 MMAP + LVGL 解码方式 使用 esp_mmap_assets 组件，将素材预处理为二进制格式，通过 mmap 方式映射并交由 LVGL 解码显示，从而有效降低 Flash 和 RAM 占用。配置优化后的解码器 esp_lvgl_decoder，可有效加速图像解码。

• 参考示例： perf_benchmark

LVGL UI 画面撕裂

• 撕裂现象

出现屏幕撕裂的效果图

• LCD 屏幕撕裂详解

• 参考优化示例：

  • v8: rgb_avoid_tearing

  • v9: mipi_dsi_avoid_tearing

• 注意：如果撕裂现象不明显，建议不开防撕裂。同时，如果 SRAM 余量充足，建议将渲染 buffer 开在 SRAM 中以优化帧率。

图像存在随机黑线

• 现象：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)