LVGL入门（基于ESP32-IDF）

主要参考资料：
B站up主 工科男孙老师《花了4天时间学习LVGL，学习笔记分享给你~》
B站up主 菜大毛QAQ《lvgl8学习笔记》系列
B站up主 第九个下弦月《esp32 s3 spiffs 文件系统 解码 gif》
LVGL8.3 --lv_label 标签：https://blog.csdn.net/smicd/article/details/135823775
ESP32驱动1.28寸GC9A01播放视频（一、视频分辨率的调整和视频格式的转换）: https://blog.csdn.net/qq_42250136/article/details/129884601
【Windows & Esp32】基于 libjpeg-9e 编解码库的视频播放器： https://blog.csdn.net/weixin_42258222/article/details/126446040
LVGL官网：https://lvgl.io/

B站up主工科男孙老师总结地很好，其实LVGL也就做三件事，显示图标、接入按键操作和动作响应。
下面就可以一步一步玩起来了。

1.LVGL任务框架

习惯上会分成LVGL底层调度任务 和 GUI显示任务，调度任务只需要lv_task_handler()一句话就可以，GUI显示任务就是在屏幕上放置组件了。

2.显示

显示标签

（1） Set text（设置文本）
标签设置文本LVGL共提供了3中方式：
① 将动态分配一个缓冲区，并且提供的字符串将被复制到该缓冲区中。
② 类似printf 格式通过传递参数来设置文本。
③ 显示来自静态字符缓冲区的文本。

lv_label_set_text(label, "New text");
lv_label_set_text_fmt(label, "Value: %d", 15);
lv_label_set_text_static(label, "Text");

（2）Newline（新行）
换行符由标签对象自动处理。 您可以使用 \n 来换行。 例如：“line1\nline2\n\nline4”
（3）Long modes（长模式）

enum {
    LV_LABEL_LONG_WRAP,            /**< 保持对象宽度，换行过长的行，展开对象高度*/
    LV_LABEL_LONG_DOT,             /**< 保持大小，如果文本太长，在末尾写圆点*/
    LV_LABEL_LONG_SCROLL,          /**< 保持文本大小并来回滚动*/
    LV_LABEL_LONG_SCROLL_CIRCULAR, /**< 保持大小并循环滚动文本*/
    LV_LABEL_LONG_CLIP,            /**< 保持大小并剪辑文本*/
};
typedef uint8_t lv_label_long_mode_t;
/*使用接口*/
void lv_label_set_long_mode(lv_obj_t* obj, lv_label_long_mode_t long_mode);

（4） Text recolor（文本重新着色）
在文本中，想要设置部分文本为特定的颜色，需要用到的接口 void lv_label_set_recolor(lv_obj_t obj, bool en);
使用步骤如下：

 /*使能recolor*/
 lv_label_set_recolor(label,true);
 /*设置对应文本颜色*/
 lv_label_set_text(label,"#0000ff color# my test");

注：必须先使能recolor重新着色才能生效，使用“# # ”中间要有字体颜色参数和显示内容 其中“0000FF”表示Hex格式的RGB值。

（5） Text selection（文本选择）
如果通过LV_LABEL_TEXT_SELECTION(lv_conf.h中选择) 启用，可以选择部分文本。 这与在 PC 上使用鼠标选择文本时类似。使用接口。

void lv_label_set_text_sel_start(lv_obj_t* obj, uint32_t index); //选择起始索引
void lv_label_set_text_sel_end(lv_obj_t* obj, uint32_t index);//选择结束索引

（6）Very long texts（超长文本）
LVGL 可以通过保存一些额外的数据（~12 字节）来有效地处理很长（例如 > 40k 个字符）的标签以加快绘图速度。 要启用此功能，请在“lv_conf.h”中设置“LV_LABEL_LONG_TXT_HINT 1”。

显示图片

有三种方式显示JPG图片，这里我们先说 从文件系统加载图片文件解码显示。
以esp-box-0.3.0\examples\image_display为例，显示图片仅需三行代码

lv_obj_t *img = lv_img_create(lv_scr_act());
lv_img_set_src(img, "/spiffs/emoji_u1f60f.png");
lv_obj_align(img, LV_ALIGN_CENTER, 80, 0);

不过需要注意两点
（1）从文件系统直接加载并解码需要较大的显存，需要在menuconfig/LVGL configuration/Memory settings中打开自定义分配堆空间。

（2）如果使用spiffs，需要在menuconfig/3rd Party Libraries中打开文件系统的API接口和解码库，spiffs需要选择posix API。

其他两种方式可以参考链接: https://blog.csdn.net/cnicfhnui/article/details/119377567

显示视频

GIF

(1)显示代码
spiffs初始化省略了。

在lvgl/examples/libs/gif/lv_example_gif_1.c中，找到下面的代码

LV_IMG_DECLARE(img_bulb_gif);
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, "A:lvgl/examples/libs/gif/bulb.gif");
lv_obj_align(img, LV_ALIGN_RIGHT_MID, -20, 0);

（2）menuconfig选择解码库

FFMPEG

（1）转换视频分辨率
以ESP32-BOX为例，分辨率是320x240，所以需要把视频分辨率改成320x240的。可以通过格式工厂进行转换
（2）将MP4格式的视频转换成mjpeg形式
打开FFmpeg官网：https://ffmpeg.org，点击Download。
（3）在下载目录打开poweshell，执行命令
格式： ./ffmpeg -i [你的mp4文件路径] -vf “fps=30,scale=-1:240:flags=lanczos,crop=240:in_h:(in_w-240)/2:0” -q:v 9 [输出路径]
比如：
./ffmpeg -i D:\FFOutput\240x240\1.mp4 -vf “fps=30,scale=-1:240:flags=lanczos,crop=240:in_h:(in_w-240)/2:0” -q:v 9 D:\FFOutput\ffmpeg-240\240_30fps.mjpeg
1.mp4是视频名字，需要手动输入，输出的文件名240_30fps.mjpeg也是自己手动输入的
3、点击回车，出现下图表示成功

3.动作响应

在lvgl中有两种动作响应，一是在wigets中添加事件，自动响应；另一种是手动发送事件，手动响应。

4.ESP-IDF下menuconfig配置LVGL

esp-box-0.3.0使用了lvgl8.3.0组件（可以在lvgl.h中查看），lvgl8.2以后，ESP-IDF就舍弃掉了lv_config.h配置文件，改用Kconfig进行一些基本配置，这里简单做个介绍。

1.Memory settings

在Memory settings配置下是默认使用的32kB的SRAM大小，在解析gif动图、png图片的时候就会不够用，加载不出来，这种情况下可以改成自定义分配。

2.HAL Settings

这里涉及抽象层的一些设置，屏幕刷新频率、输入设备读取频率、每英寸内的像素点数。

3.Feature configuration
这里面是一些杂七杂八的，比如可以选择外置GPU、打开/关闭log、others里面可以显示CPU使用率和刷新频率。

4.3rd Party Libraries

第三方库里主要是一些文件系统的接口和常用的解码库。

文件系统需要配置一些参数，这里以spiffs的posix API为例。
第一个参数是选择盘符，当然也可以按照spiffs扁平化的习惯，就填 ‘/’ 或者 47不另外设盘符，直接“/spiffs/xxx.x”访问。
第二个参数是选择当前工作目录，如果工作目录设置为/spiffs，就可以直接"/xxx.x”访问。
第三个参数是读取文件时的缓存。