Edit online

常见问题

4 Dec 2024

Read time: 3 minute(s)

UI 图片未加载

现象

UI 界面未显示要加载的图片。

原因分析

逐步排除以下原因：

Using File System Image 0 与 Using File System Image 1 中打包的资源文件路径是否正确。
Using File System Image 0 与 Using File System Image 1 在 image_cfg.json 中对应的分区表配置是否正确。
所需要的文件系统的编译选项是否打开，例如：Using File System Image 0 使用 fatfs。

LVGL 线程 TIMEOUT

现象

通过 ps 命令查看线程运行状况， LVGL 显示 TIMEOUT，但 UI 依然在正常运行。

原因分析

通常情况下是因为 TIMEOUT 的显示是因为查看线程状态时， LVGL 刚好休眠，多次使用 ps 命令查看，即可看到 LVGL 线程 OK 的状态。

如何优化性能

如需优化 LVGL 库界面开发的性能，可以按照以下建议执行：

增加图片缓存。
LVGL 内部的图片缓存机制，可以设置图片缓存张数，缓存越多速度越快，但是占用的内存也会越多，只要没有达到图片缓存张数的上限，新的图片就会在内存中缓存下来，LVGL 在下次使用同样图片时候，就不需要重复解码，加快了显示速度。合理设置图片缓存可以显著提升性能。在内存有限的情况下，可以通过以下方式进一步优化：
- 根据实际需求动态调整图片缓存的大小。例如，在需要频繁切换的场景中增加缓存数量，而在其他场景中减少缓存数量。
- 释放不必要的缓存在确定某些图片不再需要时，及时释放其缓存。例如，可以在场景切换时调用lv_img_cache_invalidate_src(NULL)来释放所有缓存。
```
// 释放对象 img_obj 的图片缓存
lv_img_cache_invalidate_src(lv_img_get_src(img_obj));

// 释放所有的图片缓存，在场景切换时候，确定不需要已有的图片缓存可以这么调用
lv_img_cache_invalidate_src(NULL);
```
如下配置中设置了八张图片缓存：
```
Application options  --->
    *** Filesystem related ***
    [*] Using File System Image 0  --->
    [ ] Using File System Image 1  ----
    *** lvgl demo select related ***
    -*- LVGL (official): powerful and easy-to-use embedded GUI library  --->
    -*- ArtInChip lvgl demo
        select lvgl demo (lvgl demo with basic function)  --->
            (X) lvgl demo with basic function
            ( ) lvgl demo of meter
        (16)  LVGL color depth(32/16)
        (8)   LVGL image cached number
    (/rodata/lvgl_data) LVGL Resource Directory
```

选择合适的颜色深度和图片格式可以有效减少处理的数据量，例如 rgb565 格式，从而提升 UI 的处理速度。

显示采用 rgb565 格式和 argb8888 相比减少了处理的数据量，可以提升 UI 的处理速度。以下示例中，LVGL color depth 为 16，并且配置 framebuffer 为 rgb565：

Application options  --->
    *** Filesystem related ***
    [*] Using File System Image 0  --->
    [ ] Using File System Image 1  ----
    *** lvgl demo select related ***
    -*- LVGL (official): powerful and easy-to-use embedded GUI library  --->
    -*- ArtInChip lvgl demo
        select lvgl demo (lvgl demo with basic function)  --->
            (X) lvgl demo with basic function
            ( ) lvgl demo of meter
        (16)  LVGL color depth(32/16)
        (8)   LVGL image cached number
    (/rodata/lvgl_data) LVGL Resource Directory

对于不透明的图片，可以选择采用 JPEG 格。JPEG 图片的解码速度通常比 PNG 速度快。
在定时器或动画回调函数中，避免执行耗时过长的函数，以免影响 UI 的流畅性。可以考虑以下方法：
- LVGL 的 UI 绘制是单线程的，将耗时操作放到后台线程中执行，避免阻塞主线程。
- 将大任务拆分成多个小任务，通过多次调用来完成，每次只处理一小部分工作。