快速概述
在这里,你可以学到关于LVGL最重要的东西。你应该先读一读,才能得到一般的印象,然后再看详细的内容。移植和概述在那之后。
从模拟器开始
与其将LVGL移植到嵌入式硬件上,不如先在模拟器中开始。
LVGL被移植到许多IDE,以确保您会找到您的福维亚蒂之一。去模拟器准备使用的项目,可以在您的电脑上运行。这样您就可以暂时保存移植,并立即体验LVGL。
将LVGL添加到项目中
以下步骤演示如何在带有显示器和触摸屏的嵌入式系统上设置LVGL。
• 下载或者从GitHub克隆图书馆git clone https://github.com/lvgl/lvgl.git
• 复制 lvgl 文件夹到您的项目中
• 复制 lvgl/lv_conf_template.h 如 lv_conf.h 紧挨着 lvgl 文件夹,更改第一个#if 0到1以启用文件的内容并至少设置 LV_HOR_RES_MAX, LV_VER_RES_MAX 和 LV_COLOR_DEPTH 定义。
• 包括lvgl/lvgl.h您需要使用与LVGL相关的函数。
• 打电话lv_tick_inc(x)每个x毫秒在计时器或任务中 (x应该在1到10之间)。这是必要的内部时间的LVGL。
• 打电话lv_init()
• 为LVGL创建一个显示缓冲区。LVGL将首先在这里呈现图形,并将呈现的图像添加到显示中。缓冲区大小可以自由设置,但1/10屏幕大小是一个很好的起点。
static lv_disp_buf_t disp_buf;
static lv_color_t buf[LV_HOR_RES_MAX * LV_VER_RES_MAX / 10];
/*声明1/10屏幕大小的缓冲区*/
lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * LV_VER_RES_MAX / 10);
/*初始化显示缓冲区*/
• 实现并注册一个可以复制呈现的图像显示的区域:
lv_disp_drv_t disp_drv; /*显示驱动程序的描述符*/
lv_disp_drv_init(&disp_drv); /*基本初始化*/
disp_drv.flush_cb = my_disp_flush; /*设置您的驱动程序功能*/
disp_drv.buffer = &disp_buf; /*将缓冲区分配给显示器*/
lv_disp_drv_register(&disp_drv); /*最后注册驱动程序*/
void my_disp_flush(lv_disp_drv_t * disp, const lv_area_t * area, lv_color_t * color_p)
{
int32_t x, y;
for(y = area->y1; y <= area->y2; y++) {
for(x = area->x1; x <= area->x2; x++) {
set_pixel(x, y, *color_p); /* 在显示屏上放置一个像素。*/
color_p++;
}
}
lv_disp_flush_ready(disp); /* 表明您已准备好刷新*/}
• 实现并注册一个可以读取输入装置。例如用于触控板:
lv_indev_drv_t indev_drv; /*输入设备驱动程序的描述符*/
lv_indev_drv_init(&indev_drv); /*基本初始化*/
indev_drv.type = LV_INDEV_TYPE_POINTER; /*触摸板是一个类似指针的设备*/
indev_drv.read_cb = my_touchpad_read; /*设置您的驱动程序功能*/
lv_indev_drv_register(&indev_drv); /*最后注册驱动程序*/
bool my_touchpad_read(lv_indev_t * indev, lv_indev_data_t * data)
{
data->state = touchpad_is_pressed() ? LV_INDEV_STATE_PR : LV_INDEV_STATE_REL;
if(data->state == LV_INDEV_STATE_PR) touchpad_get_xy(&data->point.x, &data->point.y);
return false; /*返回`False`,因为我们没有缓冲,没有更多数据要读取*/}
• 使lv_task_handler()周期性地每隔几毫秒在主while(1)循环,在计时器中断中或在操作系统任务中。如果需要,它将重新绘制屏幕,处理输入设备等。
有关更详细的指南,请访问移植部分。
学习基本知识
Widgets小部件
图形元素如按钮、标签、滑块、图表等在LVGL中称为对象或小部件。去小部件若要查看可用小部件的完整列表,请执行以下操作。
每个对象在创建的地方都有一个父对象。例如,如果在按钮上创建了标签,则该按钮是标签的父级。子对象与父对象一起移动,如果父对象被删除,子对象也将被删除。
子对象只能在他们的父对象身上可见。换句话说,子对象离开父对象的部分被剪掉了。
屏幕是“根”父级。你可以有任意数量的屏幕。若要获取当前屏幕调用,请执行以下操作lv_scr_act(),并加载屏幕使用lv_scr_load(scr1).
您可以使用lv__create(parent, obj_to_copy)。它将返回一个lv_obj_t *变量,该变量应用作对对象的引用,以设置其参数。第一个参数是所需的父对象,第二个参数可以是要复制的对象(NULL未使用)。例如:
lv_obj_t * slider1 = lv_slider_create(lv_scr_act(), NULL);
设置一些基本属性 lv_obj_set_<paramters_name>(obj, )函数可以使用。例如:
lv_obj_set_x(btn1, 30);
lv_obj_set_y(btn1, 10);
lv_obj_set_size(btn1, 200, 50);
对象也具有特定类型的参数,这些参数可以由 lv_set<paramters_name>(obj, )设置。例如:
lv_slider_set_value(slider1, 70, LV_ANIM_ON);
要查看完整的API,请访问小部件的文档或相关的头文件(例如,Lvgl/src/LV_widget/LV_slder.h).
Event事件
事件用于通知用户,如果对象发生了某些事情。您可以为对象分配一个回调,如果对象被单击、释放、拖动、删除等,该对象将被调用。它应该如下所示:
lv_obj_set_event_cb(btn, btn_event_cb); /*为按钮分配回调*/
...
void btn_event_cb(lv_obj_t * btn, lv_event_t event)
{
if(event == LV_EVENT_CLICKED) {
printf("Clicked\n");
}
}
中了解更多有关事件的信息。事件概述部分。
零件
小部件可以由一个或多个部件构建。例如,按钮只有一个名为LV_BTN_PART_MAIN。然而,页有LV_PAGE_PART_BG, LV_PAGE_PART_SCROLLABLE, LV_PAGE_PART_SCROLLBAR和LV_PAGE_PART_EDGE_FLASG.
有些零件是虚拟(它们不是真实的对象,只是动态地绘制,例如页面的滚动条),但其他部分是真品(它们是真实的对象,例如页面中可滚动的部分)。
当您想要设置对象的给定部分的样式和状态时,部件就会发挥作用。(见下文)
States状态
对象可以是以下状态的组合:
• LV_STATE_DEFAULT 正常,释放
• LV_STATE_CHECKED 切换或检查
• LV_STATE_FOCUSED 通过键盘或编码器聚焦,或通过触摸屏/鼠标点击
• LV_STATE_EDITED 由编码器编辑
• LV_STATE_HOVERED 鼠标悬停(现在不支持)
• LV_STATE_PRESSED 按下
• LV_STATE_DISABLED 禁用或不活动
例如,如果按下一个对象,则自动获取LV_STATE_PRESSED状态,当您释放时,它将被移除。若要获取当前状态使用,请执行以下操作lv_obj_get_state(obj, part)。它将返回ORed状态。例如,它是checkbox复选框的有效状态:LV_STATE_CHECKED | LV_STATE_PRESSED | LV_STATE_FOCUSED
Styles样式
可以将样式分配给部件对象以更改其外观。例如,样式可以描述背景颜色、边框宽度、文本字体等。见完整列表这里.样式可以级联(类似于CSS)。这意味着您可以向对象的一部分添加更多的样式。例如style_btn可以设置默认按钮外观,以及style_btn_red可以覆盖一些属性使按钮变红-您设置的每个样式属性都是特定于状态的。
例如,您可以设置不同的背景色。LV_STATE_DEFAULT和LV_STATE_PRESSED。库在给定部件的状态和可用的样式属性之间找到最佳匹配。例如,如果对象处于按下状态,并且为按下状态指定边框宽度,则将使用它。但是,如果没有为按下状态指定它,则LV_STATE_DEFAULT将使用边框宽度。如果边框宽度未定义为LV_STATE_DEFAULT或者,将使用默认值。
某些属性(通常是与文本相关的属性)可以继承。这意味着如果一个属性没有在对象中设置,那么它也将在其父对象中被搜索。例如,您可以在屏幕样式中设置一次字体,默认情况下,每个文本都会继承它。还可以将本地样式属性添加到对象中。
Themes主题
主题是对象的默认样式。在创建对象时,主题的样式将自动应用。
可以选择要在其中使用的主题。lv_conf.h.
实例
带标签的按钮
#include "../../lv_examples.h"
static void btn_event_cb(lv_obj_t * btn, lv_event_t event)
{
if(event == LV_EVENT_CLICKED) {
static uint8_t cnt = 0;
cnt++;
/*获取作为标签的按钮的第一个子项并更改其文本*/
void lv_obj_t * label = lv_obj_get_child(btn, NULL);
lv_label_set_text_fmt(label, "Button: %d", cnt);
}
}
/**
* Create a button with a label and react on Click event.
*/
void lv_ex_get_started_1(void)
{
lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL); /*在当前屏幕上添加按钮*/
lv_obj_set_pos(btn, 10, 10); /*设置其位置*/
lv_obj_set_size(btn, 120, 50); /*设置其大小*/
lv_obj_set_event_cb(btn, btn_event_cb); /*为该按钮分配回调*/
lv_obj_t * label = lv_label_create(btn, NULL); /*向按钮添加标签*/
lv_label_set_text(label, "Button"); /*设置标注文本*/
}
造型按钮
#include "../../lv_examples.h"
/**
* 从头开始为按钮创建样式。
*/
void lv_ex_get_started_2(void)
{
static lv_style_t style_btn;
static lv_style_t style_btn_red;
/*创建简单的按钮样式*/
lv_style_init(&style_btn);
lv_style_set_radius(&style_btn, LV_STATE_DEFAULT, 10);
lv_style_set_bg_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_style_set_bg_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_SILVER);
lv_style_set_bg_grad_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_GRAY);
lv_style_set_bg_grad_dir(&style_btn, LV_STATE_DEFAULT, LV_GRAD_DIR_VER);
/*在按下状态下交换颜色*/
lv_style_set_bg_color(&style_btn, LV_STATE_PRESSED, LV_COLOR_GRAY);
lv_style_set_bg_grad_color(&style_btn, LV_STATE_PRESSED, LV_COLOR_SILVER);
/*添加边框*/
lv_style_set_border_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE);
lv_style_set_border_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_70);
lv_style_set_border_width(&style_btn, LV_STATE_DEFAULT, 2);
/*聚焦状态下的不同边框颜色*/
lv_style_set_border_color(&style_btn, LV_STATE_FOCUSED, LV_COLOR_BLUE);
lv_style_set_border_color(&style_btn, LV_STATE_FOCUSED | LV_STATE_PRESSED, LV_COLOR_NAVY);
/*设置文本样式*/
lv_style_set_text_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE);
/*按下按钮时使其变小*/
lv_style_set_transform_height(&style_btn, LV_STATE_PRESSED, -5);
lv_style_set_transform_width(&style_btn, LV_STATE_PRESSED, -10);
#if LV_USE_ANIMATION
/*向大小更改添加过渡*/
static lv_anim_path_t path;
lv_anim_path_init(&path);
lv_anim_path_set_cb(&path, lv_anim_path_overshoot);
lv_style_set_transition_prop_1(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_HEIGHT);
lv_style_set_transition_prop_2(&style_btn, LV_STATE_DEFAULT, LV_STYLE_TRANSFORM_WIDTH);
lv_style_set_transition_time(&style_btn, LV_STATE_DEFAULT, 300);
lv_style_set_transition_path(&style_btn, LV_STATE_DEFAULT, &path);
#endif
/*创建红色样式。只更改一些颜色。*/
lv_style_init(&style_btn_red);
lv_style_set_bg_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_RED);
lv_style_set_bg_grad_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_MAROON);
lv_style_set_bg_color(&style_btn_red, LV_STATE_PRESSED, LV_COLOR_MAROON);
lv_style_set_bg_grad_color(&style_btn_red, LV_STATE_PRESSED, LV_COLOR_RED);
lv_style_set_text_color(&style_btn_red, LV_STATE_DEFAULT, LV_COLOR_WHITE);
#if LV_USE_BTN
/*创建按钮并使用新样式*/
lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL); /*在当前屏幕上添加按钮*/
lv_obj_set_pos(btn, 10, 10); /*设置其位置*/
lv_obj_set_size(btn, 120, 50); /*设置其大小*/
lv_obj_reset_style_list(btn, LV_BTN_PART_MAIN); /*删除来自主题的样式*/
lv_obj_add_style(btn, LV_BTN_PART_MAIN, &style_btn);
lv_obj_t * label = lv_label_create(btn, NULL); /*向按钮添加标签*/
lv_label_set_text(label, "Button"); /*设置标注文本*/
/*Create a new button*/
lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), btn);
lv_obj_set_pos(btn2, 10, 80);
lv_obj_set_size(btn2, 120, 50); /*设置其大小*/
lv_obj_reset_style_list(btn2, LV_BTN_PART_MAIN); /*删除来自主题的样式*/
lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style_btn);
lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &style_btn_red);/*将红色样式添加到当前*/
lv_obj_set_style_local_radius(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE); /*添加本地样式*/
label = lv_label_create(btn2, NULL); /*向按钮添加标签*/
lv_label_set_text(label, "Button 2"); /*设置标注文本*/
#endif
}
滑块和对准
#include "../../lv_examples.h"
static lv_obj_t * label;
static void slider_event_cb(lv_obj_t * slider, lv_event_t event)
{
if(event == LV_EVENT_VALUE_CHANGED) {
/*刷新文本*/
lv_label_set_text_fmt(label, "%d", lv_slider_get_value(slider));
}
}
/**
*创建滑块并将其值写在标签上.
*/
void lv_ex_get_started_3(void)
{
/* 在显示屏中央创建滑块 */
lv_obj_t * slider = lv_slider_create(lv_scr_act(), NULL);
lv_obj_set_width(slider, 200); /*设置宽度*/
lv_obj_align(slider, NULL, LV_ALIGN_CENTER, 0, 0); /*与父级(屏幕)中心对齐*/
lv_obj_set_event_cb(slider, slider_event_cb); /*分配事件函数*/
/* 在滑块下方创建标签 */
label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(label, "0");
lv_obj_set_auto_realign(slider, true); /*要在文本宽度更改时保持居中对齐,请执行以下操作*/
lv_obj_align(label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 20); /*在滑块下方对齐*/
}
Micropython微蟒
了解更多关于微蟒.
#Create a Button and a Label
scr = lv.obj()
btn = lv.btn(scr)
btn.align(lv.scr_act(), lv.ALIGN.CENTER, 0, 0)
label = lv.label(btn)
label.set_text("Button")
#Load the screen
lv.scr_load(scr)
2020年版权所有,LVGL有限责任公司最后更新于2020年11月3日。
Built with Sphinx using a theme provided by Read the Docs.