LVGL

字数统计: 8.3k字   |   阅读时长≈ 31分

LVGL API接口函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
lv_scr_act();

lv_disp_get_scr_act();

lv_obj_set_user_data();

lv_obj_get_user_data();

lv_obj_del();

lv_obj_clean(); // delete obj children except his bensheng 

lv_obj_set_top(); // 被点击后成为前台显示

lv_obj_move_foreground(); //手动置于前台

lv_obj_move_background(); //手动置于后台

lv_obj_set_parent(obj, new_parent); //obj将位于new_parent的前台

LittlevGL 使用两个名为 layer_top 和 layer_sys 的特殊层，两者在显示器的所有屏幕上都是 可见且通用的。但是，他们不会在多个物理显示器之间共享。layer_top 始终位于默认屏幕 (lv_scr_act()) 的顶部，layer_sys 则位于 layer_top 的顶部。

用户可以使用 layer_top 来创建一些随处可见的内容，例如，菜单栏，对话框。如果启用了 click 属性，layer_top 将吸收所用用户的点击并将其模态化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 创建一个父对象为 lv_layer_top 的按钮 */

*lv_obj_t* *btn3 = lv_btn_create(lv_layer_top(),NULL);

*lv_obj_t* *slider1 = lv_slider_create(scr, NULL); /* 创建一个 slider 滑动控件 */

lv_obj_set_event_cb(slider1, my_event_cb); /* 为控件设置事件的回调函数 */

case LV_EVENT_PRESSED:

printf("pressed value:%d\n", lv_slider_get_value(obj));

// 以下事件需要使能拖动后才会被触发 

lv_obj_set_drag(obj,true);

lv_obj_set_drag_throw(obj,true); // 惯性

LV_EVENT_FOCUSED 聚焦

LV_EVENT_FOCUSED 聚焦释放

LV_EVENT_REFRESH 查询以刷新对象，这个事件不会由库触发，用户可以使用

1
2
3
4
5
6
7
8
9
10
// 以在回调函数中使用 lv_event_get_data() 函数获取自定义数
lv_event_get_data();

//矩阵按钮
*lv_obj_t* *btnm1 = lv_btnm_create(scr,NULL);

//要将事件发送到对象，可以使用 
/*嵌入式设备中，我们往往可以 RTOS 获取按钮的数据然后以事件的方式发送
LittlevGL。也可以在一个对象的事件回调函数中发事件消息到另一个对象*/
lv_event_send(*lv_obj_t* * obj, *lv_event_t* event, const *void* * data)

样式

对象仅存储指向样式的指针，因此样式不能是在函数退出后销毁的局部变量。 创建样式的时候应该定义为静态变量或者全局变量。

成员 glass:不继承这种风格(为 1 的时候对象的子类不会继承这种风格，以为着自类需要重新设置风格

  • 内置样式

image-20211219192733118

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
body.border.opa//：边框不透明度（0-255）
padding//:填充
body.padding.inner//:内部填充（在内容元素或子元素之间）
text.letter_space//:字母之间的间隔
image.intense//:重新着色的不透明度（0 表示不重新着色）
    
lv_label_set_style(label1,LV_LABEL_STYLE_MAIN,&lv_style_transp);

//如果控件有多种状态，例如 btn，可以对不同状态设置不同的样式

lv_btn_set_style(btn,LV_BTN_STYLE_PR,&lv_style_transp); /* 设置 btn 释放时的样式 */

lv_btn_set_style(btn,LV_BTN_STYLE_REL,&lv_style_btn_rel); /* 设置 btn 按下时的样式 */

static *lv_style_t* style_cn_24; /* 定义一个新的样式,注意使用 static */

lv_style_copy(&style_cn_24, &lv_style_pretty_color); /* 复制 style 的属性 */

style_cn_24.text.font = &gb2312_puhui24; /* 重新设置 style 的字体 */

style_cn_24.text.color = LV_COLOR_BLUE; /* 重新设置 style 的文字颜色 */


*lv_obj_t* *label4 = lv_label_create(scr,NULL); /* 创建 label 控件 */

lv_obj_set_style(label4,&style_cn_24); /* 为控件设置新的 style */

lv_obj_set_pos(label4,0,100); /* 设置控件的坐标 */

lv_label_set_text(label4,"这是一个蓝色的中文字体的 label 控件"); /* 设置文字 */

主题 Theme

是一系列控件美化的集合，包含了所有控件的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 创建主题 */
*lv_theme_t* *theme1 = lv_theme_alien_init(10, NULL);

*lv_theme_t* *theme2 = lv_theme_night_init(10, NULL);

/* 创建按钮并设置主题 */
*lv_obj_t* *btn1 = lv_btn_create(scr, NULL);

*lv_obj_t* *label_btn1 = lv_label_create(btn1,NULL);

lv_label_set_text(label_btn1,"theme_alien");

lv_obj_set_pos(btn1, 10, 10);

lv_btn_set_style(btn1, LV_BTN_STYLE_REL,theme1->style.btn.rel);

lv_btn_set_style(btn1, LV_BTN_STYLE_PR, theme1->style.btn.pr);

/*以上方法需要为每个控件设置主题，如果我们的应用或者某一部分控件使
用同样的主题时，可以定义当前的主题，这样后面再创建控件的时候默认使用
这个主题，例如：*/
1
2
3
4
5
6
7
8
9
/* 创建主题 */

*lv_theme_t* *theme1 = lv_theme_alien_init(10, NULL);

/* 设置当前主题 */

/* 需要在 lv_conf.h 中开启 LV_THEME_LIVE_UPDATE 宏定义以实现实时刷新。*/

lv_theme_set_current(theme1);

字体

字体是文字的位图和其他信息的集合

1
2
3
4
5
6
7
8
9
10
/* 创建一个新字体的 style */
static *lv_style_t* style2;

lv_style_copy(&style2, &lv_style_plain);

style2.text.font = &gb2312_puhui32;

/*字体具有 bpp（每像素位数）属性，他表示用于描述字体中像素的位数，b
pp 越高，字体就会越平滑，抗锯齿的效果就会越好，高性能的显示带来的就是
字库的存储空间变大。*/

Unicode 支持：LittlevGL 支持 UTF-8 编码的 Unicode 字符，在使用时需要确保文件的保存格式为 UTF-8

中文字体

LittlevGL 官网有在线的字体转换工具，可以将 ttf 的字体文件转换为 LittlevGL 支持的字体文件，字体可以保存在内部数组，也可以保存在外部 flash 或者文件系统。显示中文的 c 文件必须使用 UTF8 编码。

LittlevGL 内置了几种 ASCII 字体，可以在 lv_conf.h 中启用：

  • LV_FONT_ROBOTO_12
  • LV_FONT_ROBOTO_1
  • LV_FONT_ROBOTO_22
  • LV_FONT_ROBOTO_28

内置字体是全局变量，使用时只需调用即可，内部字体是 4bpp除了 ASCII 范围的字体，内置字体还支持符号字体，例如：

image-20211219192821904

1
2
3
4
5
6
//符号字体可以直接使用
lv_label_set_text(label,LV_SYMBOL_AUDIO);
//也可以配合字符串一起使用
lv_label_set_text(label,LV_SYMBOL_AUDIO "AUDIO");
//或者两个符号一起使用
lv_label_set_text(label,LV_SYMBOL_AUDIO LV_SYMBOL_BELL);

添加新字体

有几种方法可以向项目中添加新字体以及本地化的字体

  • 利用官方提供的 在线字体转换 ，可以在浏览器上传您的 ttf 字体文件并可以选择范围和文字，然后生成 c 字体文件并添加到项目中（这种方法对于国内用户往往较慢）
  • 利用论坛网友 【阿里】 提供的免费字体转换软件，该软件可以将中文转化为 C 数组文件或者 XBF 的 bin 文件存储在外部 Flash 或者文件系统。

要使用汉字，需要将文件保存为 UTF-8 格式， 然后将字体文件加入到工程，在需要显示中文的文件里面声明新字体 LV_FONT_DECLARE(gb2312_puhui32)

存储图像

可以将图像存储在两个位置：

  • 内部 flash 或者 ram中的变量
  • 外部 flash 或者文件系统

变量方式存储

存储在内部变量的图像由 lv_img_dsc_t 结构体保存，该结构体具有以下内容：

1
2
3
4
5
6
7
8
9
10
lv_img_dsc_t 
{
    cf; //图像格式
    always_zero; //始终为 0
    reserver; //保留
    w; //图像宽度 <=2048
    h; //图像高度 <=2048
    data_size; //数据长度
    data; //图像数据的指针
};

文件方式存储

要使用文件的方式处理图片， 需要注册 LittlevGL 的文件接口， 实现打开、读取、关闭等功能。也可以自行将转换后的 bin 格式的图片放到外部文件系统，上电后加载到 RAM，这种方式后面再进行讲解。

颜色格式

LittlevGL 内置多种颜色格式：
  • LV_IMG_CF_TRUE_COLOR
  • LV_IMG_CF_TRUE_COLOR_ALPHA
  • LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED
  • LV_IMG_CF_INDEXED_1/2/4/8BIT
  • LV_IMG_CF_ALPHA_12/4/8BIT
除了内置的颜色格式外，用户可以使用 Raw 格式存储，这种颜色格式需要使用外部图像解码器来解码图像：
  • LV_IMG_CF_RAW
  • LV_IMG_CF_RAW_ALPHA
  • LV_IMG_CF_RAW_CHROMA_KEYED

转换图像

用户可以通过两种方式将图像添加到 LittlevGL :
  • 使用图像转换器（在线图像转换或者离线图像转换工具）
  • 手动创建图像

可以将图像转换成 c 格式的数组存储在内部 Flash，也可以转换为 bin文件存储在外部 Flash 或者文件系统。

使用图像

在创建图像后将 c 文件添加到工程或者将 bin 文件复制到文件系统，然后使用以下方法显示图像：

1
2
3
4
5
6
7
8
9
// 内部数组或flash中
LV_IMG_DECLARE(tupian) /* 声明一个全局图像变量 */
...
lv_obj_t *img1 = lv_img_create(scr, NULL); /* 创建 img 控件 */
lv_img_set_src(img1, &tupian); /* 设置 img 的数据 */
lv_obj_align(img1, NULL, LV_ALIGN_IN_TOP_MID, 0, 0); /* 设置位置 */

// 如果实现了文件系统接口并且把图像以 bin 文件格式存储在了外部，则应该使用这种方式显示图像：
lv_img_set_src(img1, "P:/lv_examples/tiaotu.bin");

文件系统 File system

LittlevGL 具有文件系统抽象模块，用户可以附加任何类型的文件系统，只需要注册对应的接口即可。文件系统由驱动器的 letter 标识。例如，如果SD 卡与字母关联，则可以用 ‘S’ 访问文件，例如 “S:/ui/yupian.bin”。

添加文件系统驱动程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
lv_fs_drv_t my_fs_drv; /* 定义一个文件驱动 */
lv_fs_drv_init(&my_fs_drv); /* 初始化 */
my_fs_drv.letter = 'S'; /* 驱动器标识 */
my_fs_drv.file_size = sizeof(my_file_obj); /* 文件对象大小 */
my_fs_drv.file_size = sizeof(my_dir_obj); /* 目录对象大小 */
my_fs_drv.ready_cb = my_fs_ready_cb; /* 文件是否准备就绪 */
my_fs_drv.open_cb = my_fs_open_cb_cb; /* 打开文件 */
my_fs_drv.close_cb = my_fs_close_cb; /* 关闭文件 */
my_fs_drv.remove_cb = my_fs_remove_cb; /* 删除文件 */
my_fs_drv.read_cb = my_fs_read_cb; /* 读取文件 */
my_fs_drv.write_cb = my_fs_write_cb; /* 写入文件 */
my_fs_drv.seek_cb = my_fs_seek_cb; /* 移动读写指针 */
my_fs_drv.tell_cb = my_fs_tell_cb; /* 汇报读写指针位置 */
my_fs_drv.trunc_cb = my_fs_trunc_cb; /* 从读写指针处删除文件 */
my_fs_drv.size_cb = my_fs_size_cb; /* 获取文件大小 */
my_fs_drv.rename_cb = my_fs_rename_cb; /* 重命名文件 */
my_fs_drv.free_space_cb = my_fs_free_space_cb; /* 获取可用空间 */
my_fs_drv.dir_open_cb = my_fs_dir_open_cb; /* 打开目录 */
my_fs_drv.dir_read_cb = my_fs_dir_read_cb; /* 读取目录 */
my_fs_drv.dir_close_cb = my_fs_dir_close_cb; /* 离开目录 */
my_fs_drv.user_data = my_fs_user_data; /* 用户数据 */
lv_fs_drv_register(&pcfs_drv); /* 注册一个文件驱动 */

1.以上回调函数并不是每一个都需要实现的，根据用户的需求，把用户暂时没有使用的回调函数赋值为 NULL 即可。
2.如果我们需要打开一个文件，可以用以下方式：lv_fs_open(&file, “S:/ui/font.bin”, LV_FS_MODE_RD);其中路径以驱动器标识 ‘S’ 开头。

任务 Task

LittlevGL 内置任务系统，可以注册一个函数以使其被定期调用。任务是在 lv_task_handler() 中进行处理。任务是非抢占式的，意味这一个任务无法中断另一个任务，因此可以在任务中安全调用 LittlevGL 相关功能。

1
2
3
4
5
6
7
8
9
lv_task_create(task_cb, period, LV_TASK_PRIO_OFF/LOWEST/LOW/MID/HIGH/HIGHEST, user_data);
lv_task_ready(task);
lv_task_reset(task);
lv_task_once(task);

// 仅测量lvgl任务的空闲
lv_task_get_idle(); 
// 异步执行
lv_async_call(func,data_p);

如果只想删除一个对象，而无需清理 my_screen_cleanup 中的任何内容，则可以使用 lv_obj_del_async，它将在下次调用 lv_task_handler 时删除该对象。

绘图

缓冲类型

共有三种缓冲配置：

  • 一个缓冲区 ：LittlevGL 将内容绘制到缓冲区，然后由硬件送到显示器。在这种情况下，较大的区域分多次绘制。如果只有很小的区域发生变化（例如按下按钮），则只会刷新那一部分区域。
  • 两个小缓冲区 ：LittlevGL 首先将内容绘制到某一个缓冲区，然后由DMA 或者其他硬件加速器将这个缓冲区的内容在后台送到显示器，而 CPU 可以同时对另一个缓冲区进行绘制，这样使得显存的填充和内存缓存的绘制变得并行，加快速度。 如果缓冲区小于要刷新的区域，LittlevGL 将以类似于单缓冲区的块形式绘制显示内容。
  • 两个屏幕大小的缓冲区 ：与两个小缓冲区相反，LittlevGL 将始终提供整个屏幕的内容，而不仅仅是块。这样，驱动程序可以简单地将帧缓冲区的地址更改为从 LittlevGL 接收的缓冲区。因此，当 MCU 具有 LCD / TFT 接口且帧缓冲区只是 RAM 中的一个位置时，此方法最有效。但是这种方法需要的 RAM 非常大，在嵌入式系统中不一定可取。
三种绘制缓冲区之间的区别
  1. 单缓冲 LittlevGL 需要等待当前绘制完成，也就是等待 lv_disp_flush_ready 后才能绘制下一部分。
  2. 两个小缓冲 LittlevGL 在绘制第一个缓冲区的时候，可以调用硬件的DMA 或者其他加速器在后台进行绘制，库同时进行填充缓冲区的操作，DMA 绘制完成后调用 lv_disp_flush_ready 如果此时填充缓冲区完成，再进行下一次的绘制。
  3. 两个屏幕大小的缓冲区 在调用第一个缓冲区 flush_cb 之后，如果显示为帧缓冲区的话。它的内容被复制到第二个缓冲区，所有的更改都被绘制在上面。

中文显示

位图字体介绍

位图字体，顾名思义，就是文字是通过位图绘制出来的，字体的存储方式就是一个单色的位图，在 GUI 需要显示对应字体的时候，调用对应的数组或者读取文字的存储地址，来将位图绘制到屏幕，用户看到的就是文字。

利用 LvglFontTool 生成字体文件

1.将汉字转换为LittlevGL可用的C文件格式的字体和XBF格式的bin文件字体。

2.支持选择本地字体， 可以加入 GB2312 常用字体和 GBK 全中文字体， 支持抗锯齿。

1.需要确保 c 文件是 UTF-8 编码，

2.因c 文件保存为 UTF-8编码后，MDK 编译可能出错，打开配置工程，切换 C/C++选项卡，在 Misc Controns里面追加–locale=english 即可。

.c文件的字体使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//第一步 引入字体定义
/* 引入字体,等同于 extern */
LV_FONT_DECLARE(font1)
    
//第二步 定义一个带有中文字体的样式
static lv_style_t style_cn; /* 定义新的样式,请注意使用 static 或者全局变量 */
lv_style_copy(&style_cn, &lv_style_pretty_color); /* 复制 style 的属性 */
style_cn.text.font = &font1; /* 设置新字体 */
style_cn.text.color = LV_COLOR_BLACK; /* 设置文字颜色 */

//第三步 创建一个 label 控件并设置中文样式
lv_obj_t *label1 = lv_label_create(scr,NULL); /* 创建 label 控件 */
lv_obj_set_style(label1,&style_cn); /* 为控件设置新的 style */
lv_obj_set_pos(label1,0,0); /* 设置控件的坐标 */
lv_label_set_text(label1,"你好世界"); /* 设置文字 */
lv_obj_align(label1,NULL,LV_ALIGN_IN_TOP_MID,0,100); /* 设置控件的对齐方式-相对坐标 */

现在用的是UCS-2，即2个字节编码，而UCS-4是为了防止将来2个字节不够用才开发的.

Unicode（统一码、万国码、单一码）是一种在计算机上使用的字符编码。它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。1990年开始研发，1994年正式公布。随着计算机工作能力的增强，Unicode也在面世以来的十多年里得到普及。

Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案。Unicode用数字0-0x10FFFF来映射这些字符，最多可以容纳1114112个字符，或者说有1114112个码位。码位就是可以分配给字符的数字。UTF-8、UTF-16、UTF-32都是将数字转换到程序数据的编码方案。

  • UTF-8

例1：“汉”字的Unicode编码是0x6C49。0x6C49在0x0800-0xFFFF之间，使用用3字节模板了：1110xxxx 10xxxxxx 10xxxxxx。将0x6C49写成二进制是：0110 1100 0100 1001，用这个比特流依次代替模板中的x，得到：1110 0110 1011 0001 1000 1001，即E6 B1 89。

  • Unicode字符集可以简写为UCS（Unicode Character Set）

UCS-2用两个字节编码，UCS-4用4个字节编码。

对象坐标

  • 绝对坐标
1
2
3
lv_obj_set_x(obj, new_x); //设置对象的 X 轴坐标
lv_obj_set_y(obj, new_y); //设置对象的 Y 轴坐标
lv_obj_set_pos(obj, new_x, new_y);//设置对象的坐标
  • 相对坐标(align)
1
2
lv_obj_align(obj, base, LV_ALIGN_..., x_mod, y_mod); //base 是参考对象，如果为NULL，就是用父对象
lv_obj_align_origo();//以对象的原点对齐

image-20211225202225110

1.如果对象的尺寸有变化，只需要调用 lv_obj_realign(obj) 就可以重新对齐对象，等效于 lv_obj_align 使用相同参数再次调用。

2.如果使用 lv_obj_set_auto_realign(obj, true) 进行自动对齐，那么在对象的大小发生变化时，将会自动重新对齐对象。

层

库会自动生成两个层

1
2
3
lv_layer_top() ; lv_layer_sys(); // 可以获取顶层和系统层。
lv_obj_move_foreground(obj); // 可以将对置于前景
lv_obj_move_background(obj); //将对象置于背景

样式

基础对象都会有一个MAIN样式， 使用 lv_obj_set_style(obj,&new_style);果设置为 NULL ，将会继承父对象的样式。这个函数只能用于基础对象的样式修改。

控件都有自己独立的样式设置函数，例如：lv_btn_set_style()；

1
2
lv_obj_refresh_style(obj); //以使用的样式修改后刷新，已对使用了该样式的obj刷新
lv_obj_report_style_mod(&style) //如果函数的参数为 NULL，则会通知所有对象。

事件

函数 lv_obj_set_event_cb(obj,event_cb) 可以为对象设置事件回调函数。
函数 lv_event_send(obj,LV_EVENT_…,data) 可以手动发送事件给对象，例如可以将实体按键等输入设备以事件的方式发送到对象。

使用对象，事件和数据调用事件函数 lv_res_t lv_event_send_func(lv_event_cb_t event_xcb, lv_obj_t * obj, lv_event_t event, const void * data);

属性

1.hidden 隐藏对象，他将不会被绘制，输入焦点也不会聚集在上面。他的子对象也会被隐藏。
2.click 允许单击对象，如果禁用，则单击事件将会传递到此事件后面的对象。例如，在按钮上添加label，label 默认不可单击，单击事件传递给按钮。
3.top 如果启动，则单击此对象或者其任何子对象是，此对象将进入前台。
4.drag 拖动。
5.drag_dir 仅在特定方向上启用拖动，例如 LV_DRAG_DIR_HOR/VER/ALL。
6.drag_throw 启用后，拖动后释放，还会有一个惯性移动的效果。
7.drag_parent 如果启用，拖动对象的时候，父级也会被拖动。递归检查，拖动也会传递给父对象的父对象。
8.parent_event 将事件传递给父对象，递归检查，事件也会传递给父对象的父对象。
9.opa_scale_enable 启用不透明度。可以使用函数 lv_obj_set_…(obj,true/false) 来启用或者禁用某个属性。

Group

利用函数 lv_group_add_obj(group,obj) 将对象添加到组中以后，则可以通过函数 lv_obj_get_group(obj) 获取对象的当前组。
函数 lv_obj_is_focused(obj) 获取对象当前是否有添加到某个组中，如果没有将对象添加到组中，则返回 false。

6.1.12 样式

基础对象使用 style.body 属性，屏幕默认的样式为 lv_style_scr 和 lv_style_plain_color；

6.2 API

创建和删除
lv_obj_create() 创建对象
lv_obj_del() 删除对象
lv_obj_del_async() 异步删除对象
lv_obj_clean() 清除所有子对象
lv_obj_invalidate() 将对象标记为无效
设置函数
lv_obj_set_parent() 设置新的父对象
lv_obj_move_foreground() 将对象移至前台
lv_obj_move_background() 将对象移至后台
lv_obj_set_pos() 设置对象坐标
lv_obj_set_x() 设置对象 X 坐标
lv_obj_set_y() 设置对象 Y 坐标
lv_obj_set_size() 设置对象尺寸
lv_obj_set_width() 设置对象宽度
lv_obj_set_height() 设置对象高度
lv_obj_align() 将一个对象与另一个对象对齐,左上角为原点
lv_obj_align_origo() 将一个对象与另一个对象对齐,中心为

lv_obj_realign() 重新对齐对象
lv_obj_set_auto_realign() 启用/禁用对象自动对齐
lv_obj_set_ext_click_area() 设置扩展点击区域大小
lv_obj_set_style() 设置样式
lv_obj_refresh_style() 通知对象样式已更改
lv_obj_report_style_mod() 修改样式后通知所有使用该样式对象
lv_obj_set_hidden() 启用/禁用隐藏对象
lv_obj_set_click() 启用/禁用可点击
lv_obj_set_top() 启用/禁用对象置于顶层
lv_obj_set_drag() 启用/禁用对象可拖动
lv_obj_set_drag_dir() 设置拖动方向
lv_obj_set_drag_throw() 启用/禁用拖动后是否有惯性移动
lv_obj_set_drag_parent() 启用/禁用父对象可拖动
lv_obj_set_parent_event() 启用/禁用将事件传递给父级
lv_obj_set_opa_scale_enable() 启用/禁用 opa 比例
lv_obj_set_opa_scale() 设置对象 opa 比例
lv_obj_set_protect() 设置对象保护
lv_obj_clear_protect() 清除对象保护
lv_obj_set_event_cb() 设置对象的事件回调函数
lv_event_send() 向对象发送事件
lv_event_send_func() 使用对象，事件和数据调用事件函数
lv_event_get_data() 获取当前事件的 data 参数

lv_obj_set_signal_cb() 设置对象的信号功能。由库内部使用
lv_signal_send() 向对象发送信号
lv_obj_set_design_cb() 为对象设置新的设计回调函数
lv_obj_allocate_ext_attr() 分配一个新的 ext
lv_obj_refresh_ext_draw_pad() 向对象发送 LV_SIGNAL_REFR_EXT_SIZE 信号
lv_obj_set_user_data() 设置对象的用户数据
参数获取函数
lv_obj_get_screen() 获取对象的屏幕
lv_obj_get_disp() 获取对象的显示
lv_obj_get_parent() 获取父对象
lv_obj_get_child() 获取子对象
lv_obj_get_child_back() 遍历对象的子对象
lv_obj_count_children() 计算对象的子级数量
lv_obj_count_children_recursive() 递归计算对象的子级
lv_obj_get_coords() 复制对象的区域
lv_obj_get_inner_coords() 获取对象的图形可用区域

lv_obj_get_x() 获取对象的 X 轴坐标
lv_obj_get_y() 获取对象的 Y 轴坐标
lv_obj_get_width() 获取对象的宽度
lv_obj_get_height() 获取对象高度
lv_obj_get_width_fit() 获取填充宽度
lv_obj_get_height_fit() 获取填充高度
lv_obj_get_auto_realign() 获取对象的自动重新对齐属性
lv_obj_get_ext_click_pad_left() 获取扩展的可点击区域的左侧填充
lv_obj_get_ext_click_pad_right() 获取扩展的可点击区域的右侧填充
lv_obj_get_ext_click_pad_top() 获取扩展的可点击区域的上侧填充
lv_obj_get_ext_click_pad_bottom() 获取扩展的可点击区域的下侧填充
lv_obj_get_ext_draw_pad() 获取对象的扩展尺寸属性
lv_obj_get_style() 获取对象的样式
lv_obj_get_hidden() 获取对象是否隐藏的属性
lv_obj_get_click() 获取对象是否可点击的属性
lv_obj_get_top() 获取对象是否置于顶层的属性
lv_obj_get_drag() 获取对象是否可拖动的属性
lv_obj_get_drag_dir() 获取对象的拖动方向
lv_obj_get_drag_throw() 获取对象是否有拖动惯性移动的属性
lv_obj_get_drag_parent() 获取对象是否有父对象拖动的属性
lv_obj_get_parent_event() 获取对象是否发送事件到父对象
lv_obj_get_opa_scale_enable() 获取对象是否设置 opa
lv_obj_get_opa_scale() 获取对象 opa
lv_obj_get_protect() 获取对象的保护

lv_obj_is_protected() 获取对象是否设置保护
lv_obj_get_signal_cb() 获取对象的信号回调函数
lv_obj_get_design_cb() 获取对象的设计回调函数
lv_obj_get_event_cb() 获取对象的事件回调函数
lv_obj_get_ext_attr() 获取 ext 指针
lv_obj_get_type() 获取对象类型
lv_obj_get_user_data() 获取对象的用户数据
lv_obj_get_user_data_ptr() 获取指向对象的用户数据的指针
lv_obj_get_group() 获取对象的组
lv_obj_is_focused() 获取对象是否聚焦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//获取对象实际可用区域
void lv_obj_get_inner_coords(const lv_obj_t * obj, lv_area_t * coords_p);
//获取发送事件到父对象的属性
bool lv_obj_get_parent_event(const lv_obj_t * obj);
// 获取对象扩展数据 void * ext_attr;            /**< Object type specific extended data*/
void * lv_obj_get_ext_attr(const lv_obj_t * obj);

//获取对象及其父级对象的类型
//其他说明：从当前类型开始，将其名称放入`type_buf`中。例如 buf.type [0]
//=“ lv_btn”，buf.type [1] =“ lv_cont”，buf.type [2] =“ lv_obj”
void lv_obj_get_type(lv_obj_t * obj, lv_obj_type_t * buf);

//判断对象是否是组的聚焦对象
//true：对象已聚焦
//false：对象未聚焦或不在组中
bool lv_obj_is_focused(const lv_obj_t * obj);

文本

1
2
3
lv_label_set_text(label,"New text") //lv库分配内存
lv_label_set_static_text(label,char_array) //用户分配内存
lv_label_set_array_text(label4, char_array,num)//用户使用数组，不必是‘/0’结尾

7.1.2 长模式

label 控件的大小可以自动扩展为文本大小， 也可以根据几种长文本模式来进行处理。

  • LV_LABEL_LONG_EXPAND将对象大小扩展为文本大小（默认）
  • LV_LABEL_LONG_BREAK 保持对象的宽度，折断（包裹）太长的线并扩大对象的高度
  • LV_LABEL_LONG_DOT 保持对象大小，中断文本并在最后一行写点
  • LV_LABEL_LONG_SROLL保持大小并来回滚动标签
  • LV_LABEL_LONG_SROLL_CIRC 保持大小并循环滚动标签
  • LV_LABEL_LONG_CROP 保持大小并裁剪文本。可以通过以下函数来设置长模式lv_label_set_long_mode(label,LV_LABEL_LONG_…)

创建 label 并且设置文本和长模式后，控件的大小已经扩展到文本大小，因此需要先设置长模式，然后设置控件尺寸。

1
2
3
4
5
6
7
8
9
10
11
void lv_label_set_align(lv_obj_t * label, lv_label_align_t align);
void lv_obj_align(lv_obj_t * obj, const lv_obj_t * base, lv_align_t align, lv_coord_t x_ofs, lv_coord_t y_ofs);
lv_label_set_body_draw(label,en); //允许设置label的背景
//设置 label 选择开始索引
void lv_label_set_text_sel_start/end(lv_obj_t * label, uint16_t index);
//获取 label 某个字符的相对坐标
void lv_label_get_letter_pos(const lv_obj_t * label, uint16_t index, lv_point_t * pos);
//在 label 上追加文本
void lv_label_ins_text(lv_obj_t * label, uint32_t pos, const char *txt);
//从 label 中删除字符
void lv_label_cut_text(lv_obj_t * label, uint32_t pos, uint32_t cnt);

API

lv_label_create() 创建 label 控件
设置函数
lv_label_set_text() 设置 label 的文本
lv_label_set_array_text() 设置 label 的数组文本
lv_label_set_static_text() 设置 label 的静态文本
lv_label_set_long_mode() 设置 label 的长模式
lv_label_set_align() 设置 label 的对齐方式
lv_label_set_recolor() 启用/禁用 label 的文字重新着色
lv_label_set_body_draw() 启用/禁用 label 的背景绘制
lv_label_set_anim_speed() 设置 label 动画速度
lv_label_set_style() 设置 label 的样式
lv_label_set_text_sel_start() 设置 label 选择开始索引
lv_label_set_text_sel_end() 设置 label 选择结束索引
参数获取函数
lv_label_get_text() 获取 label 的文本
lv_label_get_long_mode() 获取 label 的长模式
lv_label_get_align() 获取 label 的对齐方式
lv_label_get_recolor() 获取 label 的重新着色使能
lv_label_get_body_draw() 获取 label 的背景绘制使能
lv_label_get_anim_speed() 获取 label 的动画速度
lv_label_get_letter_pos() 获取 label 某个字符的相对坐标
lv_label_get_letter_on() 获取 label 指定坐标上的字符的索引
lv_label_is_char_under_pos() 检查 label 是否在某个坐标下绘制
lv_label_get_style() 获取 label 的样式
lv_label_get_text_sel_start() 获取 label 选择开始索引
lv_label_get_text_sel_end() 获取 label 选择结束索引
其他函数
lv_label_ins_text() 在 label 上追加文本
lv_label_cut_text() 从 label 中删除字符

void * ext_attr; 即用来指向各个不同空间自己的结构体的指针。

每个空间的ext_attr属性都不一样，例如：label：lv_label_ext_t

btn

如果需要使用 lv_obj_set_pos()来设置子对象的位置，需要使用禁止布局，函数 lv_btn_set_layout(btn, LV_LAYOUT_OFF)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
LV_LAYOUT_OFF //没有布局
LV_LAYOUT_CENTER //中心对齐
LV_LAYOUT_COL_L //列左对齐
LV_LAYOUT_COL_M //列中间对齐
LV_LAYOUT_COL_R //列右对齐
LV_LAYOUT_ROW_T //行顶部对齐
LV_LAYOUT_ROW_M //行中间对齐
LV_LAYOUT_ROW_B //行底部对齐
LV_LAYOUT_PRETTY //将尽可能多的对象放在行中并开始新
LV_LAYOUT_GRID //将相同大小的对象对齐到网格中
  
/*
LV_FIT_NONE //不自动更改大小
LV_FIT_TIGHT //收缩到子对象大小
LV_FIT_FLOOD //将尺寸与父对象的边缘对齐
LV_FIT_FILL //与父对象边缘对齐
*/
lv_btn_set_fit/fit2/fit4(btn,LV_FIT_..);
8.1.5 事件

除了通用事件以外，按钮还发送以下事件
LV_EVENT_VALUE_CHANGED 切换按钮时发送

API

lv_btn_create() 创建 btn 控件
设置函数
lv_btn_set_toggle() 设置 btn 的切换使能
lv_btn_set_state() 设置 btn 的状态
lv_btn_toggle() 切换 btn 的状态
lv_btn_set_layout() 设置 btn 的布局
lv_btn_set_fit4() 设置 btn4 个方向的自动调整策略
lv_btn_set_fit2() 设置 btn2 个方向的自动调整策略
lv_btn_set_fit() 设置 btn 的自动调整策略
lv_btn_set_ink_in_time() 设置 btn 进入墨水动画效果的时间
lv_btn_set_ink_wait_time() 设置 btn 保持墨水动画效果的时间
lv_btn_set_ink_out_time() 设置 btn 退出墨水动画效果的时间
lv_btn_set_style() 设置 btn 的样式

lv_btn_get_state() 获取 btn 状态
lv_btn_get_toggle() 获取 btn 的切换使能状态
lv_btn_get_layout() 获取 btn 的布局
lv_btn_get_fit_left() 获取 btn 左边的调整策略
lv_btn_get_fit_right() 获取 btn 右边的调整策略
lv_btn_get_fit_top() 获取 btn 顶部的调整策略
lv_btn_get_fit_bottom() 获取 btn 底部的调整策略
lv_btn_get_ink_in_time() 获取 btn 进入墨水动画效果的时间
lv_btn_get_ink_wait_time() 获取 btn 保持墨水动画效果的时间
lv_btn_get_ink_out_time() 获取 btn 退出墨水动画效果的时间
lv_btn_get_style() 获取 btn 的样式

arc弧形控件

image-20211226154547998

image-20211226154736478

API

函数 描述
创建和删除
lv_arc_create() 创建 arc 控件
设置函数
lv_arc_set_angles() 设置 arc 的角度
lv_arc_set_style() 设置 arc 的样式
参数获取函数
lv_arc_get_angle_start() 获取 arc 的起始角度
lv_arc_get_angle_end() 获取 arc 的结束角度
lv_arc_get_style() 获取 arc 的样式

btnm按钮阵列控件

image-20211226155730352

lv_btnm_set_btn_width(btnm,btn_id,width); /* 设置按钮的宽度 */

image-20211226160237063

image-20211226160330730

image-20211226160442572

API

函数 描述
创建和删除
lv_btnm_create() 创建 btnm 控件
设置函数
lv_btnm_set_map() 设置 btnm 的 map
lv_btnm_set_ctrl_map() 设置 btnm 的控制 map
lv_btnm_set_pressed() 设置 btnm 的某个按钮按下
lv_btnm_set_style() 设置 btnm 的样式
lv_btnm_set_recolor() 启用/禁用 btnm 的文本重新着色
lv_btnm_set_btn_ctrl() 设置 btnm 某个按钮的控制属性
lv_btnm_clear_btn_ctrl() 清除 btnm 某个控件的控制属性
lv_btnm_set_btn_ctrl_all() 设置 btnm 所有按钮的控制属性
lv_btnm_clear_btn_ctrl_all() 清除 btnm 所有控件的控制属性
lv_btnm_set_btn_width() 设置 btnm 某个按钮的比例宽度
lv_btnm_set_one_toggle() 启用/禁用 btnm 的单按钮 toggle
参数获取函数
lv_btnm_get_map_array() 获取 btnm 的 map 数组
lv_btnm_get_recolor() 获取 btnm 的文本重新着色使能状态
lv_btnm_get_active_btn() 获取 btnm 用户最后一次操作的按钮的
索引（按下、释放等）
lv_btnm_get_active_btn_text() 获取 btnm 用户最后一次操作的按钮的
文本（按下、释放等）
lv_btnm_get_pressed_btn() 获取 btnm 按下按钮的索引
lv_btnm_get_btn_text() 获取 btnm 某一个按钮的文本
lv_btnm_get_btn_ctrl() 获取 btnm 某个按钮的控制属性使能状
态
lv_btnm_get_style() 获取 btnm 的样式
lv_btnm_get_one_toggle() 获取 btnm 的单按钮 toggle 使能状态

bar 进度条控件

bar 控件的构造非常简单，主要有两部分：

  • 一个固定的背景
  • 一个可以调节的指示器

bar控件多用来显示进度等信息。

image-20211226162201836

image-20211226162607925

API

函数 描述
创建和删除
lv_bar_create() 创建 bar 控件
设置函数
lv_bar_set_value() 设置 bar 控件的值
lv_bar_set_range() 设置 bar 控件的范围
lv_bar_set_sym() 启用/禁用 bar 控件的从 0 开始对称绘
制
lv_bar_set_anim_time() 设置 bar 控件的动画时间
lv_bar_set_style() 设置 bar 控件的样式
参数获取函数
lv_bar_get_value() 获取 bar 控件的值
lv_bar_get_min_value() 获取 bar 控件的最小值
lv_bar_get_max_value() 获取 bar 控件的最大值
lv_bar_get_sym() 获取 bar 控件的对称使能状态
lv_bar_get_anim_time() 获取 bar 控件的动画时间
lv_bar_get_style() 获取 bar 控件的样式

sw 开关控件

image-20211226163537240

image-20211226163556414

API

函数 描述
创建和删除
lv_sw_create() 创建 sw 控件
设置函数
lv_sw_on() 设置 sw 控件状态为打开
lv_sw_off() 设置 sw 控件状态为关闭
lv_sw_toggle() 切换 sw 控件的状态
lv_sw_set_style() 设置 sw 控件的样式
lv_sw_set_anim_time() 设置 sw 控件的动画时间
参数获取函数
lv_sw_get_state() 获取 sw 控件的状态
lv_sw_get_style() 获取 sw 控件的样式
lv_sw_get_anim_time() 获取 sw 控件的动画时间

calendar 日历控件

image-20211226164247126

API

函数 描述
创建和删除
lv_calendar_create() 创建 calendar 控件
设置函数
lv_calendar_set_today_date() 设置 calendar 控件的当前日期
lv_calendar_set_showed_date() 设置 calendar 控件的显示日期
lv_calendar_set_highlighted_dates
()
设置 calendar 控件的突出显示日期
lv_calendar_set_day_names() 设置 calendar 控件的日期名称
lv_calendar_set_month_names() 设置 calendar 控件的月份名称
lv_calendar_set_style() 设置 calendar 控件的样式
参数获取函数
lv_calendar_get_today_date() 获取 calendar 控件的当前日期
lv_calendar_get_showed_date() 获取 calendar 控件的显示日期

lv_calendar_get_pressed_date() 获取 calendar 控件按下的日期
lv_calendar_get_highlighted_dates
()
获取 calendar 控件的突出显示日期
lv_calendar_get_highlighted_dates
_num()
获取 calendar 控件的突出显示日期的
数量
lv_calendar_get_day_names() 获取 calendar 控件的日期名称
lv_calendar_get_month_names() 获取 calendar 控件的月份名称
lv_calendar_get_style() 获取 calendar 控件的样式

canvas 控件基础知识

image-20211226164921167

image-20211226164903645

image-20211226165056645

API

函数 描述
创建和删除
lv_canvas_create() 创建 canvas 控件
设置函数
lv_canvas_set_buffer() 设置 canvas 控件的缓冲区
lv_canvas_set_px() 填充 canvas 的像素点
lv_canvas_set_palette() 使用索引格式设置 canvas 的调色板颜
色
lv_canvas_set_style() 设置 canvas 控件的样式
参数获取函数
lv_canvas_get_px() 获取 canvas 控件的像素点颜色
lv_canvas_get_img() 获取 canvas 的整个画布的图像
lv_canvas_get_style() 获取 canvas 的样式
绘制函数
lv_canvas_copy_buf() 复制缓冲区内容到 canvas 控件上
lv_canvas_rotate() 旋转图像并将其绘制在 canvas 控件上
lv_canvas_fill_bg() 填充 canvas 的背景
lv_canvas_draw_rect() 绘制矩形区域到 canvas 控件
lv_canvas_draw_text() 绘制文字到 canvas 控件
lv_canvas_draw_img() 绘制图像到 canvas 控件
lv_canvas_draw_line() 绘制线条到 canvas 控件
lv_canvas_draw_polygon() 绘制填充区域到 canvas 控件
lv_canvas_draw_arc() 绘制圆到 canvas 控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//其他宏定义，这些宏定义用于根据颜色格式和尺寸计算缓冲区大小
#define LV_CANVAS_BUF_SIZE_TRUE_COLOR(w, h) ((LV_COLOR_SIZE / 8) * w * h)
#define LV_CANVAS_BUF_SIZE_TRUE_COLOR_CHROMA_KEYED(w, h) ((LV_COLOR_SIZE / 8) * w * h)
#define LV_CANVAS_BUF_SIZE_TRUE_COLOR_ALPHA(w, h) (LV_IMG_PX_SIZE_ALPHA_BYTE * w * h)
/*+ 1: to be sure no fractional row*/
#define LV_CANVAS_BUF_SIZE_ALPHA_1BIT(w, h) ((((w / 8) + 1) * h))
#define LV_CANVAS_BUF_SIZE_ALPHA_2BIT(w, h) ((((w / 4) + 1) * h))
#define LV_CANVAS_BUF_SIZE_ALPHA_4BIT(w, h) ((((w / 2) + 1) * h))
#define LV_CANVAS_BUF_SIZE_ALPHA_8BIT(w, h) ((w * h))
/*4 * X: for palette*/
#define LV_CANVAS_BUF_SIZE_INDEXED_1BIT(w, h) (LV_CANVAS_BUF_SIZE_ALPHA_1BIT(w, h) + 4 * 2)
#define LV_CANVAS_BUF_SIZE_INDEXED_2BIT(w, h) (LV_CANVAS_BUF_SIZE_ALPHA_2BIT(w, h) + 4 * 4)
#define LV_CANVAS_BUF_SIZE_INDEXED_4BIT(w, h) (LV_CANVAS_BUF_SIZE_ALPHA_4BIT(w, h) + 4 * 16)
#define LV_CANVAS_BUF_SIZE_INDEXED_8BIT(w, h) (LV_CANVAS_BUF_SIZE_ALPHA_8BIT(w, h) + 4 * 256)

韦东山image-20220108201732160

我们的控件对象创建在活动屏幕，顶层是用来弹出对话框（称为模态对话框）的，只有按了对话框才能继续操作活动屏幕，系统层是不受限制的，通常是鼠标触摸等的坐标表示。

image-20220108203701811

image-20220108204422927

LVGL的盒子模型

image-20220108205900758

LVGL参考CSS的盒子模型来编写的

image-20220108210246050

边界：盒子占用的实际空间大小。

边框：月饼盒的纸箱厚度。

填充：用来保护盒子里的内容的，月饼缓冲泡沫。

轮廓（外边距）：盒子和盒子之间连续摆放时的距离。table是选中foucs一个空间就是选中这个围合边框。就是如果没有触摸，要切换选中对象是就是通过这个边框来选择当前foucs哪个对象。

outline：不占据空间不包括在盒子里面。

LVGL的盒子对象是不会被撑破的：盒子可以弹性扩充，需要装多大空间的东西盒子就会自动扩大。但是受限与物理屏幕的可见区是固定的，所以可以拖动屏幕的可视区来观看整个盒子中的内容。arc也是一个盒子。

image-20220108212224839

样式

image-20220108213236695

image-20220108213420035

image-20220108213457111

样式API：https://docs.lvgl.io/8.1/overview/style-props.html

样式链表

image-20220108215045857

样式数组

image-20220108215612087

image-20220108215639164

本地样式（v8）

image-20220108220831575

本地样式的优先级高于普通样式。

样式是可以继承的，默认继承父类。

image-20220108221441107

image-20220108221456557

事件

image-20220108222027567

image-20220108222050452

image-20220108224908410

事件冒泡

image-20220108224323428

当一个对象收到一个事件，会把这个事件发送给它的父对象，它的父对象会在发送这个事件给它的父对象，从下网上一直传递（冒泡）。

image-20220108230737579

image-20220108230903777

image-20220108231021678

事件一级一级网上传，中间的对象不会处理回调，只有触发事件的对象和最终的父对象会处理事件，中间的对象只传递。

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

从事嵌入式开发