【LVGL-编程指南】
LVGL-（Light and Versatile Graphics Library）
- ■ LVGL简介
- ■ LVGL源码移植
- ■ 工作机制
- ■ 顶层和系统层
- ■ 函数
- ■ 位置，大小，布局
- ■ Event 事件
- ■ styles 样式
- ■ 动画效果
- ■ 输入设备
- ■ 字体
- ■ 特殊符号
■ LVGL简介
官网
github仓库
博客站点
sim 在线模拟器网站
嵌入式GUI框架对比
■ LVGL源码移植
LVGL源码移植
■ 工作机制
- 亲子结构
父对象可以作为其子对象的容器。每个对象只能一个父对象（屏幕除外），但是一个父对象可以有无限多个子对象。
父对象的类型没有限制，但是有特殊的父对象（例如，按钮）和特殊的子对象（例如，标签）。 - 子对象仅在父对象的范围内可见
- 子对象的位置是相对于父对象的位置，父对象移动时，两者相对位置不变。
■ 顶层和系统层
顶层：layer_top
系统层：layer_sys
两者在显示器的所有屏幕上都是可见且通用的，但是，它们不会在多个物理显示器之间共享。
位置：layer_top始终位于默认屏幕的顶部， layer_sys则位于layer_top的顶部。
获取活动屏幕
lv_scr_act()
返回指向顶层
lv_layer_top()
系统层的指针
lv_layer_sys()
■ 函数
屏幕是没有父对象的特殊对象。所以它们可以像这样创建：
lv_obj_t * scr1 = lv_obj_create(NULL);
创建对象
lv_obj_t * lv_<widget>_create(lv_obj_t * parent, <other paramaters if any>);
删除对象
void lv_obj_del(lv_obj_t * obj);
lv_layer_top() 和 lv_layer_sys() 函数分别返回指向顶层和系统层的指针。
■ 位置，大小，布局
//位置
lv_obj_set_x(obj, 10);
lv_obj_set_y(obj, 20);
lv_obj_set_pos(obj, 10, 20); //Or in one function
//大小
lv_obj_set_width(obj, 200);
lv_obj_set_width(btn, lv_pct(50)) //lv_pct(value) 将值转换为百分比
lv_obj_set_width(btn, LV_SIZE_CONTENT) //设置对象的宽度/高度以涉及所有子项的特殊值
lv_obj_set_height(obj, 100);
lv_obj_set_height(obj, lv_pct(100)); //百分比值是根据父内容区域的大小计算的。例如将对象的高度设置为屏幕高度：
lv_obj_set_size(obj, 200, 100); //Or in one function
lv_obj_update_layout(obj) //如果您需要获取对象的任何坐标并且坐标刚刚更改，则需要强制 LVGL 重新计算坐标。
//对齐
lv_obj_set_align(obj, align); //lv_obj_set_align(obj, align);
lv_obj_align(obj, align, x, y); //更改对齐方式并设置新坐标：
■ Event 事件
- 多个对象可以使用一个回调函数
多个对象可以使用一个回调函数
void my_event_cb(lv_obj_t * obj, lv_event_t event)
{
switch(event){
case LV_EVENT_PRESSED: /* 对象被按下 */
printf("Pressed\n");
break;
case LV_EVENT_SHORT_CLICKED: /* 对象被短点击 */
printf("Short clicked\n");
break;
case LV_EVENT_CLICKED: /* 对象被点击 */
printf("Clicked\n");
break;
}
}
/* 指定一个事件回调函数 */
lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL);
lv_obj_set_event_cb(btn, my_event_cb);
■ styles 样式
位置、大小和对齐属性是样式属性
使用样式设置对象大小的示例：
static lv_style_t style;
lv_style_init(&style);
lv_style_set_width(&style, 100);
lv_obj_t * btn = lv_btn_create(lv_scr_act());
lv_obj_add_style(btn, &style, LV_PART_MAIN);
■ 动画效果
- 使用动画在开始值和结束值之间自动更改变量的值。
/* 初始化动画 */
lv_anim_t a;
lv_anim_init(&a);
/* --- 必选设置 --- */
/* 设置“动画制作”功能 */
lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_x);
/* 设置“动画制作”功能 */
lv_anim_set_var(&a, obj);
/* 动画时长[ms] */
lv_anim_set_time(&a, duration);
/* 设置开始和结束值。例如。 0、150 */
lv_anim_set_values(&a, start, end);
/* --- 可选设置 --- */
/* 开始动画之前的等待时间[ms] */
lv_anim_set_delay(&a, delay);
/* 设置路径（曲线）。默认为线性 */
lv_anim_set_path(&a, &path);
/* 设置一个回调以在动画准备好时调用。 */
lv_anim_set_ready_cb(&a, ready_cb);
/* 设置在动画开始时（延迟后）调用的回调。 */
lv_anim_set_start_cb(&a, start_cb);
/* 在此持续时间内，也向后播放动画。默认值为0（禁用）[ms] */
lv_anim_set_playback_time(&a, wait_time);
/* 播放前延迟。默认值为0（禁用）[ms] */
lv_anim_set_playback_delay(&a, wait_time);
/* 重复次数。默认值为1。LV_ANIM_REPEAT_INFINIT用于无限重复 */
lv_anim_set_repeat_count(&a, wait_time);
/* 重复之前要延迟。默认值为0（禁用）[ms] */
lv_anim_set_repeat_delay(&a, wait_time);
/* true（默认）：立即应用开始值，false：延迟设置动画后再应用开始值。真正开始。 */
lv_anim_set_early_apply(&a, true/false);
/* 应用动画效果 */
lv_anim_start(&a);
路径设置
lv_anim_path_linear // 线性动画
lv_anim_path_step // 一步到位
lv_anim_path_ease_in // 渐进效果
lv_anim_path_ease_out // 渐退效果
lv_anim_path_ease_in_out // 渐进和渐退效果
lv_anim_path_overshoot // 超出最终值
lv_anim_path_bounce // 从最终值反弹一点(就像撞墙一样)
/* 初始化路径 */
lv_anim_path_t path;
lv_anim_path_init(&path);
lv_anim_path_set_cb(&path, lv_anim_path_<type>);
lv_anim_path_set_user_data(&path, &foo); /* 自定义数据(可选) */
/* 在动画中设置路径 */
lv_anim_set_path(&a, &path);
速度设置
/* 将速度转换为时间再赋值 */
lv_anim_set_time(&a, lv_anim_speed_to_time(speed, start, end));
删除动画
lv_anim_del(var，func)
■ 输入设备
■ 字体
- 字体属于是对象属性其中之一，可以通过设置对象样式的形式改变文本的字体样式。
- 有几种不同大小的内置字体，可以通过 LV_FONT _… 定义在 lv_conf.h 中启用。
/* Create a label on the second button */
lv_obj_t * label = lv_label_create(btn, NULL);
lv_style_t my_style;
lv_style_init(&my_style);
/*Set a larger font*/
lv_style_set_text_font(&my_style, LV_STATE_DEFAULT, &lv_font_montserrat_28);
/* Add style to the objct */
lv_obj_add_style(label, LV_LABEL_PART_MAIN, &my_style);
lv_label_set_text(label, "Button");
■ 特殊符号
/* 直接调用 */
lv_label_set_text(my_label, LV_SYMBOL_OK);
/* 与字符一起用 */
lv_label_set_text(my_label, LV_SYMBOL_OK "Apply");
/* 多个符号一起用 */
lv_label_set_text(my_label, LV_SYMBOL_OK LV_SYMBOL_WIFI LV_SYMBOL_PLAY);