esp32-idf LVGL使用spiffs显示图片和GIF

最新推荐文章于 2025-06-02 14:01:30 发布

原创最新推荐文章于 2025-06-02 14:01:30 发布 · 2.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#java #android #javascript

不使用文件系统显示GIF和图片

我们打开官方的例程，LVGL文件目录下的components\lvgl-8.3.10\examples\libs\gif这个文件，这个是官方存放gif的例程，我们打开看看

#include "../../lv_examples.h"
#if LV_USE_GIF && LV_BUILD_EXAMPLES

/**
 * Open a GIF image from a file and a variable
 */
void lv_example_gif_1(void)
{
    LV_IMG_DECLARE(img_bulb_gif);
    lv_obj_t * img;

    img = lv_gif_create(lv_scr_act());
    lv_gif_set_src(img, &img_bulb_gif);
    lv_obj_align(img, LV_ALIGN_LEFT_MID, 20, 0);

   // img = lv_gif_create(lv_scr_act());
    /* Assuming a File system is attached to letter 'A'
     * E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */
   // lv_gif_set_src(img, "A:lvgl/examples/libs/gif/bulb.gif");
    //lv_obj_align(img, LV_ALIGN_RIGHT_MID, -20, 0);
}

#endif

现在我们只关心上面段，下面那段是使用文件系统来显示图片的。
首先，我们要先将GIF转换成c语言数组，我们可以去官网网站上转换
在这里插入图片描述
接着，我们使用 LV_IMG_DECLARE(img_bulb_gif);去声明这个gif的数组，然后调用lv_gif_set_src(img, &img_bulb_gif);去设置图片源就可以显示GIF了。
注意，这个函数需要配置LV_USE_GIF 为1才行

在这里插入图片描述
图片也是同理，将图片转换成c语言数组就进行上面步骤即可。

使用文件系统显示GIF和图片（重点）

在使用文件系统时显示图片时和GIF我踩了很多坑，这次就来总结一下。

第一步，移植LVGL文件系统

我使用的是ESP32-S3片外Flash，用的时官方spiffs文件系统，具体这个文件系统的配置，可以看我之前的文章。我一开始是使用lv_post_template_fs.h这个文件来自己实现移植，后来一直移植不成功，无法正常显示图片。后来我发现，esp32官方提供的spiffs文件系统的api接口函数和stdio标准库里的接口函数使用方式是一模一样的，所以我就使用了lvgl里自带的文件系统（stdio的文件系统库）。

首先我们打开配置文件（注意，这里我没有使用sdk进行配置，因为我设置了使用自己lv_font.h进行配置，所以在sdk里配置并不会生效）
在这里插入图片描述
将LV_USE_FS_STDIO 置为1，如果你想使用别的文件系统，你也可以找到对应的文件系统打开就行。

LV_FS_STDIO_LETTER这个是驱动标识符，在文件系统中，通常会使用字母来标识不同的驱动器（如 Windows 系统中的“C:”、“D:”等），我们这里就使用，在spiffs里一般都是使用/来作为标识符。
LV_FS_STDIO_PATHLV_FS_STDIO_PATH 被用来设置文件系统的工作目录。
LV_FS_STDIO_CACHE_SIZE缓存大小：LV_FS_STDIO_CACHE_SIZE 被设置为 1024，这意味着在进行文件读取操作时，文件系统可以缓存最多 1024 字节的数据。

在这里插入图片描述
我们通过源码可以看到，LV_FS_STDIO_PATH这个通常是设置一个系统目录，这里我们就不设置了，我们手动输入一个系统目录

在这里插入图片描述
我们打开这个文件夹可以，查看我们文件系统的源码，

第二步，初始化文件系统

分为两步，第一步初始化我们的spiffs
第二部，调用lv_fs_stdio_init();绑定文件操作函数

void my_gui()
{
    lv_init();
    lv_port_disp_init();
    //初始化spiffs
    spiffs_init("storage","/spiffs",5);
    lv_fs_stdio_init();

}

第三步，调用gif函数显示gif动画

首先，我们将我们要显示的gif存入文件系统中，如果是图片，就先去转换成.bin文件

//gif动画
 void lv_example_gif_1(void)
{
    lv_obj_t * img;

    img = lv_gif_create(lv_scr_act());
    /* Assuming a File system is attached to letter 'A'
     * E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */
    lv_gif_set_src(img, "/spiffs/bulb.gif");
    lv_obj_align(img, LV_ALIGN_LEFT_MID, 20, -30);
}