lvgl

lvgl

目录

lvgl

Lvgl移植到STM32

-- 1、下载LVGL源码

-- 2、将必要文件复制到工程目录

-- 3、修改配置文件

将lvgl与底层屏幕结合到一块

-- lvgl也需要有定时器，专门给自己做了一个函数，告诉lvgl经过了多长时间（ms（毫秒）级别）

编写代码

lvgl的中文教程手册网站

lvgl的基础知识

-- 重点是lvgl基础控件的使用

-- 如何用lvgl去制作软件

更改错误

-- 8、只要使用汉字，都按照下面这种方式修改

屏幕显示调用

如何实现界面刷新（界面中的数据如何变化）

总结

---

• 主要用于界面设计

-- 我们在做的项目是空气质量检测仪，下面这些是项目在开发阶段分的模块

• 分为项目硬件，项目软件，项目结构（产品外壳），UI（界面设计）,APP，测试

-- 对于界面开发，有很多，如qt，但是qt开发出来的程序比较大，占用内存比较多，所以选择了lvgl

-- GUI:LVGL，emwin，qt，touchgfx,minigui,simplegui(嵌入式开发阶段的界面开发工具)

---

-- LVGL(轻巧而多功能的图形库)是一个免费的开放源代码图形库，它提供创建具有易于使用的图形元素，精美的视觉效果和低内存占用的嵌入式GUI所需的一切。

• Lvgl官网：LVGL — Light and Versatile Embedded Graphics Library
• Lvgl官方文档：LVGL: Light and Versatile Graphics Library — LVGL documentation
• Lvgl源码网址：https://github.com/lvgl/lvgl

-- lvgl官方网站 

---

-- 硬件要求：
基本上，每个现代控制器(肯定必须要能够驱动显示器)都适合运行LVGL。LVGL的最低运行要求很低： 16、32或64位微控制器或处理器
最低 16 MHz 时钟频率
Flash/ROM:：对于非常重要的组件要求 >64 kB(建议 > 180 kB)

-- Lvgl系统框架

-- 应用程序创建 GUI 并处理特定任务的应用程序。 -- LVGL 本身是一个图形库。我们的应用程序通过调用 LVGL 库来创建 GUI 。它包含一个 HAL （硬件抽象层）接口，用于注册显示和输入设备驱动程序。 驱动程序除特定的驱动程序外，它还有其他的功能，可驱动显示器到 GPU (可选)、读取触摸板或按钮的输入。

Lvgl移植到STM32

-- 1、下载LVGL源码

• 我们使用的是Lvgl7.11版本，因此在Github上找到对应版本源码下载：https://github.com/lvgl/lvgl/tree/v7.11.0

-- 其中lvgl/src文件夹内存放的是LVGL的核心源码，lvgl/examples/porting文件夹内存放的是lvgl与底层的接口函数，这些函数需要我们根据自己的项目进行修改。

-- 源码在文件夹中可以找到

-- 2、将必要文件复制到工程目录

-- 1、在个人的工程目录下创建一个名为Lvgl的文件夹，并将lvgl/src目录复制到Lvgl目录下，将lvgl/examples/porting文件夹复制到Lvgl目录下，同时将lvgl/lvgl.h文件以及lvgl/lv_conf_template.h文件复制到Lvgl目录下。如下图所示：

-- 2、将lv_conf_template.h文件更名为lv_conf.h，如下图所示：

-- 3、修改port目录下所需要的文件名字，我们只使用了屏幕的显示功能，因此我们只修改显示接口的文件名字，将lv_port_disp_template.c/.h更名为lv_port_disp.c/.h如下图所示：

-- 4、在Lvgl目录下再创建一个app目录，用于存放我们后期自己写的应用层界面代码，具体操作如下图所示：

-- 5、打开工程，在工程目录下新建三个分组，分别为Lvgl/app、Lvgl/porting、Lvgl/src三个目录，具体操作如下图所示：

-- 6、添加文件到工程目录中，porting目录下只添加lv_port_disp.c，以及Lvgl目录下的lv_conf.h文件，这两个文件后面需要修改。 

 在src目录下，添加Lvgl/src目录下除去gpu文件夹外的所有文件夹内的c文件。

-- 7、配置头文件路径，把Lvgl文件夹下所有包含h文件的路径，在工程属性中进行配置，具体操作如下图： 

-- 3、修改配置文件

-- 1、打开lv_port_disp.c/.h文件，修改如下内容

-- 2、修改lv_conf.h文件如下图所示，修改后编译代码，这个时候代码就没有错误了。

-- 3、接下来适配屏幕接口到lvgl上，先修改lv_conf.h内的宏定义，通过它可以设置库的基本行为，裁剪不需要模块和功能，在编译时调整内存缓冲区的大小等等，我们先修改一些必须修改的定义，后期的功能我们在具体项目中再做裁剪。

-- 注:

-- 竖屏和横屏可以自己选择

-- 更改单片机分给lvgl的空间大小 

-- 是否要适配v6版本，我们这里选择v7版本，就不适配v6了，将宏定义改为0 

将lvgl与底层屏幕结合到一块

-- 更改初始化函数，进入初始化函数中

-- 将lcd初始化加进来，以后就不用lcd初始化了，直接调用lvgl的初始化函数即可

-- 绘制缓冲区，屏蔽其他两种方法

-- 更改参数

-- 找到lcd中的指定区域内填充指定颜色快的函数

-- 并在.h中声明

-- 将lv_port_disp.c中的函数进行修改

-- lvgl也需要有定时器，专门给自己做了一个函数，告诉lvgl经过了多长时间（ms（毫秒）级别）

• 先将操作系统中的宏定义改变 

  

• 我们要写一个时钟节拍钩子函数 

  

• 参考我们之前写的任务栈溢出函数

编写代码

-- 创建任务句柄

TaskHandle_t xLvglTaskHandle = NULL;

-- 创建任务主题函数

void vLvglTaskFunction( void * pvParameters )
{
	TickType_t xLastWakeTime;
	const TickType_t xPeriod = pdMS_TO_TICKS( 5 );//5ms的延时
	xLastWakeTime = xTaskGetTickCount();  
	for(;;)
	{		
		lv_task_handler();//在裸机里放在while循环中即可
		vTaskDelayUntil( &xLastWakeTime, xPeriod );//绝对延时
	}
}
 

-- 创建任务（放在main函数中）

			
		xTaskCreate(vLvglTaskFunction, "lvgl_task", 512, NULL, 2, &xLvglTaskHandle);

-- 启动任务

 
if(xReturn == pdPASS)
					vTaskStartScheduler();//任务调度器			//当程序执行完这句话之后，正常情况下下面的代码不会再运行，只会运行任务主题函数

-- 上述内容我们就已经成功配置了lvgl的环境，下面我们写入一个测试代码，看看是否能够正常显示。写在初始化函数后面即可。

-- 完整代码

#include "lvgl.h"
#include "lv_port_disp.h"
 
TaskHandle_t xLvglTaskHandle = NULL;
 
void vLvglTaskFunction( void * pvParameters )
{
	TickType_t xLastWakeTime;
	const TickType_t xPeriod = pdMS_TO_TICKS( 5 );//5ms的延时
	xLastWakeTime = xTaskGetTickCount();  
	for(;;)
	{		
		lv_task_handler();//在裸机里放在while循环中即可
		vTaskDelayUntil( &xLastWakeTime, xPeriod );//绝对延时
	}
}
 
 
int main(void)
{
 
    lv_init();
	lv_port_disp_init();
 
	//测试代码--显示一个label
	lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);
	lv_label_set_long_mode(label1, LV_LABEL_LONG_BREAK);     
	lv_label_set_recolor(label1, true);                      
	lv_label_set_align(label1, LV_LABEL_ALIGN_CENTER);
	lv_label_set_text(label1, "#0000ff Re-color# #ff00ff words# #ff0000 of a# label "
																										"and  wrap long text automatically.");
	lv_obj_set_width(label1, 150);
	lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, -30);
 
    BaseType_t xReturn  = pdPASS;
 
    xTaskCreate(vLvglTaskFunction, "lvgl_task", 512, NULL, 2, &xLvglTaskHandle);
    //xTaskCreate(arc_loader, "lvgl_task", 512, NULL, 2, &xLvglTaskHandle);
            
    if(xReturn == pdPASS)
                vTaskStartScheduler();//任务调度器			//当程序执行完这句话之后，正常情况下下面的代码不会再运行，只会运行任务主题函数
}
 

-- 注意：这里用了lvgl的初始化函数，不用再用lcd的初始化了，前面已经把lcd初始化函数写在了lvgl的初始化函数里面了。

-- 测试效果图

lvgl的中文教程手册网站

-- 该网站包含各种事例代码和图形库

-- 英文 Layers — LVGL documentation

-- 中文 基础对象(lv_obj) — 百问网LVGL中文教程手册文档 1.0 文档

lvgl的基础知识

-- lvgl是一个图形库

-- 那么什么叫做图形库呢？

-- 这些就是一个一个的图形

-- 每个图形又可以称为对象

-- 对象的属性：假如要绘制一个仪表盘，那么他的大小设置多大，位置放在哪里。能不能拖动呢？是否被拖动？

-- 对象的层级：父子，小介面基于大介面的基础上创建出来的，例如在大介面上点击一个按钮导致小介面生成。

-- 事件：点击，拖动，长按，松开，滚动等等

-- 这个事件怎么处理呢？

• 当事件发生时，lvgl会跟根据提前定义好的回调函数进行处理，回调函数可以自己定义，也可以使用lvgl提供的回调函数。

• 不同的对象所对应的事件也不同

-- 还有特殊的事件，键盘或者事件编码

-- 输入设备：触摸屏，键盘，鼠标，编码器等等

-- 显示：

-- 字体：LVGL 支持 UTF-8 编码的 Unicode 字符。需要配置的编辑器，以将的代码/文本保存为 UTF-8 （通常是默认值）

-- 在lvgl里面，只要显示汉字，一定要在UTF-8格式下写汉字

-- lvgl是有自己的一个操作系统的，只是目前我们还没有使用

-- 重点是lvgl基础控件的使用

-- 例子：圆弧展示进度条

-- 首先将代码复制到咱们的程序里面

static void arc_loader(lv_task_t * t)
    {
            static int16_t a = 270;
 
            a+=5;
 
            lv_arc_set_end_angle(t->user_data, a);
 
            if(a >= 270 + 360) {
                    lv_task_del(t);
                    return;
            }
    }
 
int main()
{
 
    lv_init();
	lv_port_disp_init();
 
    //显示一个圆弧（进度条）
/*Create an Arc*/
    lv_obj_t * arc = lv_arc_create(lv_scr_act(), NULL);
    lv_arc_set_bg_angles(arc, 0, 360);
    lv_arc_set_angles(arc, 270, 270);
// lv_obj_align(arc, NULL, LV_ALIGN_CENTER, 0, 0);//改变了对象的位置
    lv_obj_set_pos(arc,20,60);//设置起点位置
    lv_obj_set_size(arc,200,200);//设置对象大小
 
    /* Create an `lv_task` to update the arc.
* Store the `arc` in the user data*/
    lv_task_create(arc_loader, 20, LV_TASK_PRIO_LOWEST, arc);
	
}

-- 结果图太小了，需要找个能改变自身大小的

• 相关api

• 设置位置

lv_obj_set_pos(arc,20,60);//设置起点位置

• 设置对象大小

lv_obj_set_size(arc,200,200);//设置对象大小

-- 至此就可以添加一个圆弧图形了，但是这个圆弧是静态的，需要添加一个定时器，让圆弧动起来。所以前面写的时钟钩子函数就可以派上用场了。

-- 如何用lvgl去制作软件

-- 安装软件

-- 1、先安装Java环境（注意一定要先安装java环境）

-- 2、安装软件

-- 3、打开软件，点击创建，选择v7

-- 4、工程的名字和路径都不能出现中文，屏幕的类型如果选项中没有的话，可以自己定义

-- 5、创建成功后，会跳转新的界面，将右上角英文切换成中文，界面的颜色也可以选择，可以改为深蓝色或者其他颜色

-- 6、可以先选择一个图片当作背景，将图片拖拽过来，可以通过更改参数让它显示在全屏

-- 7、新增界面 

-- 8、可以更改背景的颜色

-- 9、也可以更改图片的透明度，255是不透明，0是完全透明

-- 10、设置文本

-- 11、将表格拖进界面

-- 12、有些是不能用的 

-- 13、将图形界面设计完之后，点击编译，编译成功后就会将配置好的界面显示出来

-- 14、注意：这个编译默认编译的是第一个界面，如果向编译其他界面。

-- 都编译成功后，开始将代码放到工程中

-- 15、先找到工程所在地方

-- 16、

-- 17、了解这些文件的作用

-- 18、在工程中新建文件夹

-- 19、添加头文件路径

-- 20、之后编译，出现错误 

更改错误

-- 1、修改界面文件

-- 2、更改图模文件

-- 3、更改字模文件

-- 4、修改系统自带文件

-- 5、之后编译，然后有的电脑还会出现错误，有的没有

-- 6、添加一个定义

-- 7、修改错误，一般就是中文汉字编码的错误

• 只要有汉字，就会报两个错

-- 8、只要使用汉字，都按照下面这种方式修改

-- 解决方案一：显示的字符串，最后不能以汉字结束。在字符串结束，加一个空格

• 点击错误跳转到出错的地方，将字符串最后加一个空格
• 其中这个摄氏度就是中文的。

-- 解决方案二：将keil的编码格式修改为utf-8，然后在这种编码格式下重新输入汉字

-- 然后在这个格式下重新输入汉字，为了保险起见，后面也加上空格

屏幕显示调用

-- 将代码复制到main函数中

-- 加上头文件

-- 这两个代码分别是创建和显示

-- 只有创建函数的话，只会创建，创建完之后不会显示

-- 要想在屏幕中显示，必须要调用显示函数

-- 此时显示的界面是screen1，如果想要显示其他界面，如screen，只需要将screen1改为screen即可

-- 但是如果两个显示函数都调用的话，只会显示后面调用的那个

-- 那么如何实现切换界面

• 1、将创建函数写在main函数中

• 2、然后在按键任务中调用显示函数

• 3、加一个标志位，防止多次点击同一按键，导致界面反复切换同一个界面无意义

• 3、代码

uint8_t GUI_flag = 0;
//2
void KETTaskCreat(void *pvParameters)
{
	uint8_t keyflag = 0;
	uint8_t buff[10]={0};
    while(1)
    {
				keyflag = get_key();
				switch(keyflag)
				{
					case 1:
						
					
						if(GUI_flag!=2)
						{
								lv_scr_load(guider_ui.screen);	//显示
							GUI_flag=2;
						}
 
					break;
					case 2: 
 
					if(GUI_flag!=1)
					{
						GUI_flag =1;
						lv_scr_load(guider_ui.screen_1);	//显示
					}
					break;
				}  
			vTaskDelay(50);				//在任务周期时可以释放cpu
    }
}
 

如何实现界面刷新（界面中的数据如何变化）

-- 1、实现文本数据刷新

-- 要想实现数据更新，必须要找到对应的对象，然后调用对应的赋值函数

-- 例如界面一的温度数值，先找到界面一对应的赋值函数，复制

-- 将函数复制到lcd显示任务函数中，直接将数值更改为变量，就可以实现动态更新数值了。

void LCDTaskCreat(void *pvParameters)//函数名称不固定，参数格式是固定的（任务一定是一个while循环,每个任务一定要有自己的任务周期）//设置任务周期的目的就是可以让任务可以主动释放cpu（指的是任务能够自动释放cpu）
{
	//BaseType_t xReturn = pdPASS;//有没有获取成功，再显示LCD
	EventBits_t r_event;
	while(1)
	{
		r_event = xEventGroupWaitBits(Event_Handle, /* 事件对象句柄 */
																	0x07,/* 接收任务感兴趣的事件 */
																	pdTRUE,/* 退出时清除事件位 */
																	pdFALSE,/* 满足感兴趣的所有事件 *///逻辑或
																	500);/* 指定超时事件,一直等 */
		//dht
		if(r_event &(0x1<<0))//判断这个数中的位0是否为真
		{
 
			sprintf(D_wen, "tem: %.2d鈩?",(int)dht.tem);
			
			 //实现数据更新
                        
       //找到对应对象的赋值函数
			
			lv_label_set_text(guider_ui.screen_1_label_1, D_wen);
			
		}
 
    }
    }

-- 2、实现表格数据刷新（折线图）

-- 找到对应的赋值函数

-- 在lcd函数中调用

将值改为变量

-- 效果图

总结

-- 1、进行界面设计，注意先考虑好布局（做几个界面，每个界面显示什么内容，如何规划）

-- 2、保证每个界面在屏幕上都能显示出来

-- 3、保证界面相互切换不会卡死

-- 4、界面刷新