主要参考资料:
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”访问。
第三个参数是读取文件时的缓存。