基于arduino的ESP32 学习笔记LVGL文件系统移植，中文字库和图片显示

Posted 2023-02-20 张竞豪

前言

本文的目的是为了给将要制作的ESP32手环做技术储备

记录移植LVGL文件系统，制作LVGL中文字库，将图片和字库放在SD卡里，通过移植好的LVGL文件系统，读取SD卡中的中文字库和图片，并显示在屏幕上

硬件准备

• ESP-WROOM-32E开发板
• ST7789 240x240 1.3寸 SPI接口LCD屏 16位色深RGB565
• SD卡插槽模块和SD卡一张

软件准备

• VSCODE+PlatformIO

各模块之间的连线可以看下我之前的博客

相关链接

文件系统移植相关

lvgl官方文件系统移植文档，已经讲的比较清楚了

https://docs.lvgl.io/master/overview/file-system.html

lvgl官方给的移植好的范例

https://github.com/lvgl/lv_fs_if/blob/master/lv_fs_fatfs.c

雉晖君的小项目，我基于雉晖君移植好的文件系统函数，但是我用的lvgl版本是8.0.0，还是要稍微改下才能用

https://github.com/peng-zhihui/HoloCubic

中文字体相关

lvgl官方文档

https://docs.lvgl.io/master/overview/font.html

lvgl官方离线字库制作软件

https://github.com/lvgl/lv_font_conv

离线字库制作软件使用方法相关博客

https://blog.csdn.net/cnicfhnui/article/details/113665913

图片相关

lvgl官方文档

https://docs.lvgl.io/master/overview/image.html

图片制作与读取只用看官方文档就够了，制作图片可以使用官方的在线图片制作工具

https://lvgl.io/tools/imageconverter

LVGL文件系统移植

为了使LVGL可以通过SD卡读取中文字体和图片，需要移植LVGL文件系统

在此之前需要建立一个已经移植好lvgl的ESP32 arduino工程，我已经移植好了一个工程

然后参考雉晖君的小项目，我也对SD卡，屏幕的等做了面向对象的封装，然后把雉晖君移植好的

lv_port_fatfs.c和lv_port_fatfs.h放到我的工程下面，尝试编译，中间发现会出错，继续查看官方文档改改之后编译就通过了，具体可以看我的代码

中文字体显示

首先要看完lvgl的官方文档，要显示中文字体首先要建立自己的中文字库，字库是一个二进制bin文件，放在SD卡里，使用的时候通过文件系统读取放在SD卡里的中文字库

所以要显示中文字体，最重要的是通过官方给的工具，制作中文字库，具体制作方法可以参考上文的相关博客，下面是对制作方法的简单介绍：

安装nodejs，然后根据github上lv_font_conv仓库的说明文档，输入命令安装lv_font_conv

https://github.com/lvgl/lv_font_conv

或者从github上clone官方的lv_font_conv工具，然后根据上文相关博客中的方法安装lv_font_conv

打开控制面板，搜索字体，查找到自己电脑字体所在的位置，然后拷贝一份你想要的字体放在方便的位置

也就是下图的STXIHEI.TTF文件

然后打开cmd，输入如下指令

lv_font_conv --no-compress --format bin --font F:\\ESP32\\font\\ttf\\STXIHEI.TTF -o F:\\ESP32\\font\\ttf\\myfont.bin --bpp 4 --size 30 --symbols 中国智造

要注意一定要加入参数–no-compress，否则生成字库会失败

–format bin是生成bin格式的字库，用来存放在SD卡中

–font F:\\ESP32\\font\\ttf\\STXIHEI.TTF是想要转化字体文件的存放位置

-o F:\\ESP32\\font\\ttf\\myfont.bin是生成字库的路径和生成字库名

–bpp 4 --size 30抗锯齿等级和字体大小

–symbols 中国智造 “中国智造”是要生成的字，你的字库里只会包含这些字

然后把生成的bin文件放在SD卡中

/* 字体测试*/
    lv_font_t *my_font;
    my_font = lv_font_load("S:/myfont.bin");
    if (my_font == NULL)
    
        Serial.println("font load failed");
    

    static lv_style_t font_style;
    lv_style_init(&font_style);
    lv_style_set_text_font(&font_style, my_font);

    lv_obj_t *label_zh = lv_label_create(lv_scr_act());
    lv_obj_align(label_zh, LV_ALIGN_BOTTOM_MID, 0, 0);
    lv_obj_add_style(label_zh, &font_style, 0);
    lv_label_set_text(label_zh, "中国智造");

然后在setup函数中输入以下代码，测试是否可以显示中文，试验成功

显示图片

显示图片主要是使用官方提供的在线图片生成工具

https://lvgl.io/tools/imageconverter

普通的png，jpg格式的图片占用空间太大，还需要编解码，最好的方式是通过在线图片生成工具转化成lvgl所需要的格式

indexed 16 colors或者indexed 4 colors是最佳的，虽然这样图片只有16种颜色或者4中颜色，但是可以大幅减少图片所占用的存储空间

图片有两种存储方式，一种是转化成.c文件存放在rom里，这种方式读取图片并显示会比较快，但是rom比较小存放不了几张，还有一种是转化成bin二进制文件存放在SD卡里，这样读取速度会比较慢，但是可以存放大一点的图片

在我的项目中，需要用到动画，也有静态的图片，计划把动画的每一帧图片都以 .c文件的形式存放在rom里，提高读取速度，静态的图片对时间的要求没有很高，就存在SD卡里

选了一张罗小黑的图片进行转化，分别转化成bin格式和c格式，进行测试，具体代码见本文附带的工程文件

二进制形式图片读取并显示

    lv_obj_t *img1 = lv_img_create(lv_scr_act());
    lv_img_set_src(img1, "S:/abc.bin");
    lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);

要注意的是在lv_conf.h文件中必须要把LV_IMG_CACHE_DEF_SIZE设为1以上的数字，这个决定了打开图片文件的数量

#define LV_IMG_CACHE_DEF_SIZE 1

c代码格式图片读取并显示

    lv_obj_t* img1 = lv_img_create(lv_scr_act());
    lv_img_set_src(img1, &abc);
	lv_obj_align(img1,LV_ALIGN_CENTER, 0, 0);

要注意的是lvgl毕竟是c语言，而arduino是c++，如果在c++里直接写上面的代码会导致编译出错，具体解决方案可以看本文附带的工程文件

最终中文显示和图片显示的效果如下