STM32第二十二课：LVGL的移植和屏幕创建(7.11版本)

于 2024-07-28 11:51:45 发布
阅读量351 收藏 6
点赞数 9
文章标签： stm32 嵌入式硬件 单片机 LVGL移植 mcu
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jokerblank/article/details/140720643
版权

目录

需求

1.将LVGL7.11移植到项目工程中。
2.创建一个LVGL任务，在任务中创建两个屏幕，开始运行时加载第一个屏幕。
3.设计一个按键控制，通过按压不用的按键来切换不同的屏幕。

一、LVGL概要

  LVGL就是一款免费开源的嵌入式图形库，可为任何MCU、MPU和显示器类型设计好看的用户界面。其实本质上就是一个图形库。开发者通过代码编写调用LVGL库来创建GUI界面。它包含一个HAL（硬件抽象层）接口，用于注册显示和输入设备驱动程序。
  驱动程序除特定的驱动程序外，它还有其他的功能，可驱动显示器到GPU(可选)、读取触摸板或按钮的输入。

Lvgl官网：官网地址
Lvgl官方文档：官方文档
Lvgl源码网址：源码地址

个人理解：
  LVGL屏幕交互设计就是制作PPT，每个屏幕的创建就是每页PPT的创建。在PPT中你可以制作多个PPT页面，但显示的屏幕只有一个，所以我们通过鼠标进行页面切换。在LVGL中也一样，你可以创建多个屏幕，但给客户显示的屏幕只有一个，所以可以通过代码逻辑来进行按需切换。

二、移植步骤

移植前准备：
1.想要移植的目标工程。
2.下载好的LVGL源码(版本按需选择，版本越高功能越多，占用空间也就越大)，本例由于芯片资源有限，所以选择的是LVGL7.11版本。

1.源码复制

在想要移植的目标工程中创建一个LVGL文件夹
在这里插入图片描述

在建好的LVGL文件夹中新建app，porting，src文件夹
app：放置以后自己编写的LVGL工程
porting：LVGL接口文件
src：LVGL源码文件
在这里插入图片描述
打开下载好的LVGL源码文件夹，将LVGL源码文件夹中的src文件夹中的内容全部copy到上图目标工程的src文件夹中。
在这里插入图片描述
打开LVGL源码文件中的examples文件夹
在这里插入图片描述
找到该文件夹中的porting接口文件，将该文件中的内容同样复制到目标工程中我们自己创建的porting文件夹中。
在这里插入图片描述
在源码文件中找到lvgl/lvgl.h文件以及lvgl/lv_conf_template.h文件，将其复制到目标工程中的LVGL文件中
在这里插入图片描述
复制过来后改个名字，将lv_conf_template.h文件更名为lv_conf.h
在这里插入图片描述
将porting文件夹中的显示接口文件改名
lv_port_disp_template为屏幕驱动。
lv_port_fs_template为文件系统驱动。
lv_port_indev_template为输入驱动
本项目中我们只使用了屏幕的显示功能，因此我们只修改屏幕驱动的文件名字。
在这里插入图片描述

2.添加到工程中

用keil5打开目标工程项目。
在工程目录下新建三个分组，分别为Lvgl/app、Lvgl/porting、Lvgl/src三个目录。
在这里插入图片描述
添加文件到工程目录中
porting目录下只添加lv_port_disp.c，以及Lvgl目录下的lv_conf.h文件，这两个文件后面需要修改。
src目录下，添加Lvgl/src目录下除去gpu文件夹外的所有文件夹内的c文件。
在这里插入图片描述
之后，点击配置选择
在这里插入图片描述
点击C/C++添加头文件路径，把Lvgl文件夹下所有包含h文件的路径全部添加。
在这里插入图片描述

3.配置文件的修改

打开lv_port_disp.c/.h文件，将所有的#include "lvgl\lvgl.h"替换为#include “lvgl.h”。
将if置1，开启屏幕接口和lcd初始化
在这里插入图片描述
修改lv_conf.h文件如下图所示
在这里插入图片描述
编译修改后的代码，如果没有error就代表以上配置，配置成功了。

4.适配屏幕接口

  修改lv_conf.h内的宏定义，通过它可以设置库的基本行为，裁剪不需要模块和功能，在编译时调整内存缓冲区的大小等等。

修改屏幕分辨率
在这里插入图片描述
修改屏幕DPI
DPI 是将屏幕分辨率与屏幕尺寸结合起来的度量，用于描述在每英寸上的像素密度。
屏幕分辨率：指的是屏幕上横向和纵向像素的总数，通常表示为宽×高的像素数。
屏幕尺寸：指的是屏幕的对角线长度，通常以英寸（inch）为单位。
在这里插入图片描述
设置占用内存，最少也要2kb，根据芯片的内存来决定，越大越好。
本例使用的芯片：STM32F103ZET6
512 KB闪存（用于程序存储）。
64 KB SRAM（用于数据存储）
在这里插入图片描述
由于该芯片没有GPU，所以还需要把GPU选项关掉
在这里插入图片描述
继续适配屏幕接口到lvgl上、修改lv_port_disp.c文件中的显示接口函数，用于适配我们的屏幕与lvgl，包含lcd屏幕显示的头文件。
在这里插入图片描述
修改屏幕显示初始化函数lv_port_disp_init，我们用方法一显示，同时修改屏幕的大小。
在这里插入图片描述
  修改disp_init函数，该函数一般将我们的屏幕初始化放进去，也可以在硬件层初始化屏幕，这里就可以不写底层屏幕的初始化。
在这里插入图片描述
修改disp_flush函数，该函数是lvgl绘制界面的关键函数，是用于绘制界面的最基本的函数，也是lvgl与底层屏幕的绘制适配接口函数。

LVGL给的例程中是想让我们使用画点方式进行实现，但画点方式效率比较低，所以此处我们使用LCD_Color_Fill函数实现，该函数通常支持一次性填充整个屏幕或者特定区域，可以大大提高cpu的运行效率。
在这里插入图片描述

三、需求实现

1.初始化LVGL

为了给LVGL提供时间基准，告诉LVGL现在过了多久，我们需要写一个系统心跳钩子函数。
如果使用的是裸机开发，那么直接将这个函数放到硬件定时器的1ms中断服务函数内。
此时我们使用的是操作系统，所以我们可以放到系统基础节拍的钩子函数内。
在这里插入图片描述
为了使屏幕定期刷新我们还需要每隔x毫秒调用lv_task_handler()用以处理与lvgl相关的任务。
如果是裸机开发，那么我们可以在while(1)中做一个时间点，1ms或者10ms的调用一次这个函数。
此时我们使用的是操作系统，那么我们可以将lv_task_handler()函数放到任务中的while(1)中定期调用。
在这里插入图片描述
搞定LVGL时间基准和定期刷新屏幕后，想要进行屏幕的创建和编写，此时我们还需要进行LCD初始化，LVGL初始化以及LVGL接口的初始化。
在这里插入图片描述

2.创建屏幕

子类和父类的概念
在LVGL中，有子类和父类的概念，简单来说就是，一个屏幕上的所有部分都是这个屏幕的子类。
在LVGL中，所有的屏幕都没有父类，不需要依赖任何东西。
可以同时创建多个屏幕，在LVGL初始化中，会在后台加载所有的屏幕。想要那个屏幕显示时，只需调用屏幕加载函数调用即可。
了解以上概念后，我们就可以开始创建屏幕了。

先创建lv_obj_t类型的变量。
lv_obj_t类型用来表示图形界面库中的各种对象，如屏幕（screen）、按钮（button）、标签（label）等。

lv_obj_t * scr1;
lv_obj_t * scr2;
lv_obj_t * obj;
lv_obj_t * obj1;
lv_obj_t * label1;

进行屏幕的创建以及其他部件的创建。

	//测试代码--显示一个label
	scr1 = lv_obj_create(NULL, NULL);
	obj = lv_obj_create(scr1, NULL);
	obj1 = lv_obj_create(obj, NULL);
	lv_obj_set_size(obj, 50, 50);	 /*Button size*/
	lv_obj_set_pos(obj, 0,0);
	//
	scr2 = lv_obj_create(NULL, NULL);
	label1 = lv_label_create(scr2, 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);
	lv_scr_load(scr1);

3.按键控制

void KEY_Task(void *p)
{
	while(1)
	{
		switch(key_getvalue())
		{
			case 1:lv_scr_load_anim(scr2,LV_SCR_LOAD_ANIM_MOVE_LEFT,1000,0,0);break;
			case 2:lv_scr_load_anim(scr1,LV_SCR_LOAD_ANIM_MOVE_LEFT,1000,0,0);break;
			case 3:;break;
			case 4:break;
		}
		vTaskDelay(10);//MS级别的延时，带有阻塞性质，任务会从运行态变为阻塞态
	}
}

本质上就是通过代码控制不同屏幕的加载，后加载的屏幕会覆盖掉前面加载的屏幕。可以理解为PPT的幻灯片。
lv_scr_load()和lv_scr_load_anim()函数都是屏幕加载，只不过前者是直接加载，后者是动画加载。

完整代码

main.c

#include "stm32f10x.h"
#include "led.h"
#include "delay.h"
#include "delay.h"
#include "string.h"
#include "pwm.h"
#include "adc.h"
#include "su03t.h"
#include "dht11.h"
#include "kqm.h"
#include "usart.h"
#include "key.h"
#include "aliot.h"
#include "lvgl.h"
#include "lv_port_disp.h"
//使用FreeRtos相关头文件之前，一定要先包含这个#include "FreeRtos.h"
#include "FreeRtos.h"
#include "task.h"
#include "semphr.h"
#include "queue.h"
#include "bsp_lcd.h"
#include "RTC.h"
#include "time.h"

TaskHandle_t Deal_TaskHandle;//数据处理
TaskHandle_t Su03_TaskHandle;//语音播报
TaskHandle_t Ali_pub_TaskHandle;//阿里发布
TaskHandle_t Lcd_TaskHandle;
TaskHandle_t Lvgl_TaskHandle;
TaskHandle_t KEY_TaskHandle;//按键任务

char D_wen[20];
char D_shi[20];
char D_time[20];
struct tm *info;
extern const unsigned char gImage_hengliu[153600];
uint32_t sec=0;
lv_obj_t * scr1;
lv_obj_t * scr2;
lv_obj_t * obj;
lv_obj_t * obj1;
lv_obj_t * label1;
void Lvgl_Task(void *p)
{
  LCD_Init();
	lv_init();
	lv_port_disp_init();
	//测试代码--显示一个label
	scr1 = lv_obj_create(NULL, NULL);
	obj = lv_obj_create(scr1, NULL);
	obj1 = lv_obj_create(obj, NULL);
	lv_obj_set_size(obj, 50, 50);	 /*Button size*/
	lv_obj_set_pos(obj, 0,0);
	//
	scr2 = lv_obj_create(NULL, NULL);
	label1 = lv_label_create(scr2, 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);
	lv_scr_load(scr1);
	//
	while(1) 
	{
		lv_task_handler();
		vTaskDelay(5);
	}
}

void KEY_Task(void *p)
{
	while(1)
	{
		switch(key_getvalue())
		{
			case 1:lv_scr_load_anim(scr2,LV_SCR_LOAD_ANIM_MOVE_LEFT,1000,0,0);break;
			case 2:lv_scr_load_anim(scr1,LV_SCR_LOAD_ANIM_MOVE_LEFT,1000,0,0);break;
			case 3:;break;
			case 4:break;
		}
		vTaskDelay(10);//MS级别的延时，带有阻塞性质，任务会从运行态变为阻塞态
	}
}	

int main()
{
	RGBpwm_Config();
  Kqm_U4Config();
  Usart1_Config();
  Su03t_U5Config();
	DHT11_Config();	 
	Adc_Config();
	Led_Init();
	key_Init();
	BaseType_t Ret = pdPASS;
	Ret = xTaskCreate(Lvgl_Task,"Lvgl_Task",500,NULL,2,&Lvgl_TaskHandle);	
	if(Ret==pdPASS)
	{
		printf("Lvgl运行成功！\r\n");
	}
	Ret = xTaskCreate(KEY_Task, //创建任务的任务函数名
                    "KEY_Task",//任务名字
                    100,//任务栈深度。32位单片机*4
                    NULL,//创建任务时传递参数,没有就给NULL
                    2,//任务优先级
										&KEY_TaskHandle);//任务的句柄，用于后边删除，挂起任务
	if(Ret == pdPASS){
	printf("KEY_Task创建完成\r\n");
	}
	printf("开始调度！\r\n");
	vTaskStartScheduler();
	while(1)
	{
		
	}
}

void vApplicationStackOverflowHook( TaskHandle_t xTask,char *pcTaskName )
{
	printf("任务：%s->栈溢出\r\n",pcTaskName);
	printf("任务剩余空间：%d\r\n",(int)uxTaskGetStackHighWaterMark(xTask));
	while(1)//栈溢出时卡死到钩子函数中
	{}
}

//系统心跳钩子函数
void vApplicationTickHook(void)
{
	lv_tick_inc(1);//告诉LVGL时间过了1Ms
}
小白橘颂
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
嵌入式：LVGL移植到STM32F407ZE的实现
GongmissYan的博客
04-22 2644
实现环境 硬件：基于正点原子探索者stm32f407ze 软件：LVGL 7.11 / 407实验28 触摸屏/407定时器文件 lvgl 7.11 gitee下载 https://gitee.com/linyuehai/stm32-f103-rc/tree/master/LVGL 项目文件： 参考资料：https://www.eefocus.com/embedded/484678 操作流程 基本准备 1.源文件获取 LVGL 7.11地址： https://gitee.com/linyuehai/st
STM32移植LittleVgl(LVGL)嵌入式开源图形库
qq_44062900的博客
05-06 8873
STM32移植LittleVgl(LVGL)嵌入式开源图形库 目录STM32移植LittleVgl(LVGL)嵌入式开源图形库一、硬件及软件准备二、移植.c和.h到工程 一、硬件及软件准备 1、硬件：正点原子STM32F103战舰开发板、4.3寸TFT彩屏 大家可以根据自己的硬件来移植，以下是官方给出的最小硬件要求，只要满足以下条件就可以运行LVGL，显示屏可以是任意一种，这里不作要求。 2、软件：LVGL开源库、正点原子 《实验27 触摸屏实验》实验代码 LVGL开源库下载地址：https://gith
LVGL|基于lvgl 7.11.0 编写的 STM32F103 GUI
挨踢民工的博客
05-07 3095
文章目录项目预览项目源码获取LVGL中文手册 项目预览 基于lvgl实现了以下功能： 模仿 windows10 风格的文件浏览器 时钟 二维码生成器 系统说明 温湿度采集 2048小游戏 音乐播放器 贪吃蛇小游戏 计算器 寄存器位查看工具 系统主题切换 板载硬件测试 项目源码获取 http://download.100ask.org/boards/St/100ask_stm32f103/index.html LVGL中文手册 lvgl官方的教程是英文的，这个是我在做项目时顺便做出来的中文教程站点(持续
小熊派 LVGL 移植文件系统
嵌入式学习记录站点
01-18 4706
本节的教程基于上一节配置好的工程，使用 STM32CubeMX 进一步配置 SDIO 总线接口，同时移植 FATFS 文件系统
STM32+RTThread Nano+LVGL避坑指南
qq_47736089的博客
09-28 894
这个屏幕为320*240的，驱动芯片为ST7789V，驱动是厂家提供的，我做了一点修改，成功的跑起来了，但是最初的时候跑来卡的跟PPT一样，还没PPT流畅，根本不能用，仔细研究了一下驱动，发现厂家提供的这个驱动只能使用SPI发送数据，我的意思是无法使用DMA发送数据，这点我在上篇文章里解释了原因，大家自行移步查阅，这点也是坑了我好久，最中ST7789V的手册上的一句话点醒了我。至此，内存小的问题得到了明显改善，我的LVGL也开启了双缓冲区，同时还分给了它64KB的RAM，用不完，根本用不完。
LVGL移植到STM32——之GUI GUIDER
YU20211221的博客
12-27 5339
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、准备工作二、创建一个简单的工程三、添加文件1.创建路径2.复制gui生成的文件到stm32工程中四、修改stm32工程实现界面显示1.添加C文件路径2.添加头文件路径3.修改头文件4.修改源文件5.添加应用到主程序5.添加lvgl“心跳”6.修改堆栈7.编译下载五、添加事件实现对触控的响应1.移植触摸驱动2.触控移植到lvgl3.添加触控事件六、添加事件实现对按钮的响应1.添加按键对应的控件的坐标2.添加按钮初始化总结 前
lvgl移植
csdnMercury的博客
08-09 386
还可以配置数据堆的大小(LV_MEM_SIZE),是否使用GPU(LV_USE_GPU,单片机一般没有GPU,所以改为0不使用)、是否使用文件系统(LV_USE_FILESYSTEM)。在这个文件中,可以根据自己的屏幕配置屏幕的水平像素、垂直像素、颜色色深等(查找 LV_HOR_RES_MAX、LV_VER_RES_MAX、LV_COLOR_DEPTH进行修改)。将lvgl v7.11.0的目录下的src文件夹、lv_conf_template.h、lvgl.h文件复制到lvgl文件夹,
ESP32 LVGL开发一 移植与例程
03-11 5648
LVGL(轻量级和通用图形库)是一个免费和开源的图形库，是可提供UI通信元素的构建接口与较低资源实现的源码； 官方已经适配了ESP32硬件平台，版本为v7.11，开箱即用
ESP32_esp-idf_lvgl_V8环境搭建移植
叶子丶de花 博客
09-03 3103
ESP32移植LVGL8，把Demo例程中的main.c中的代码复制到ESP-IDF工程的main.c中，包括代码和头文件的包含都要挪过来。出错的过程可能不一样，有的错误在前面，有的在后面，可以朝后看是不是有相同错误。准备一个esp-idf的工程，路径无所谓，esp-idf的官方例程也可以。下面是具体使用的引脚配置，可以根据自己具体使用的配置，并且需要参考。打开设置按照上面的运行Demo例程中的设置，一样设置即可。的可能不会有这个问题。
正点原子STM32F429移植 lvgl 7.11版本
07-08
STM32F429移植lvgl 7.11版本是将开源图形库LittleV Graphics Library（简称lvgl）应用到正点原子的STM32F429微控制器上的过程。lvgl是一个轻量级、高效且功能丰富的GUI库，适用于嵌入式系统，尤其适合资源有限的微...
STM32 LVGL-基于100ASK-STM32-F103ZET6开发板的lvgl(v7.11.0)综合例程
03-31
1. 基于100ASK_STM32_F103ZET6开发板的lvgl(v7.11.0)综合例程。 2. 效果展示： https://www.bilibili.com/video/BV1im4y1X7g4 3. 使用的开发板：https://item.taobao.com/item.htm?id=638072392313 4. lvgl中文文档...
GD32F450_LVGL7.11.zip
04-20
4. **创建窗口和控件**：LVGL提供了丰富的控件类型，如按钮、滑块、文本框等。根据需求创建并布局这些控件，定义它们的事件回调函数。 5. **更新与渲染**：在主循环中调用LVGL的更新函数，处理用户的输入事件，并...
lv_sim_eclipse_sdl:LVGL嵌入式GUI库的PC模拟器项目。 在Linux和Mac上推荐
05-03
LVGL嵌入式GUI库的模拟器项目主要是为微控制器和嵌入式系统编写的，但是您也可以在PC上运行该库，而无需任何嵌入式硬件。 使用嵌入式系统时，可以简单地复制PC上编写的代码。 使用PC模拟器而不是嵌入式硬件具有以下...
lvgl7.11 二维码控件补丁
06-22
3. **二维码生成**：LVGL现在需要有能力根据输入的数据生成二维码图像。这可能涉及到引入QR编码算法，如QRCode Generator库，将其与LVGL的绘图系统整合。 4. **控件设计**：创建一个新的LVGL对象类型，如`lv_obj_t`...
STM32智能医疗监控系统教程
stm32d1219的博客
07-21 1198
本教程详细介绍了如何在STM32嵌入式系统中实现智能医疗监控系统，从硬件选择、软件实现到系统配置和应用场景都进行了全面的阐述。通过合理的技术选择和系统设计，可以构建一个高效且功能强大的智能医疗监控系统。
韦东山嵌入式linux系列-具体单板的按键驱动程序(查询方式)
最新发布
StudyWinter的博客
07-24 885
button_operations 结 构 体 中 有 init 函 数 指 针 ， 它 指 向board_stm32mp157_button_init 函数，在里面将会初始化 LED 引脚：使能、设置为 GPIO 模式、设置为输出引脚。该寄存器共32位，涉及16个GPIO，每个GPIO对应 2 位。button_operations 结 构 体 中 还 有 有 read 函 数 指 针 ， 它 指 向board_stm32mp157_button_read 函数，在里面将会读取并返回按键引脚的电平。
STM32嵌入式人工智能边缘计算应用教程
2401_84204806的博客
07-23 769
本教程详细介绍了如何在STM32嵌入式系统中实现嵌入式人工智能边缘计算系统，从硬件选择、软件实现到系统配置和应用场景都进行了全面的阐述。通过合理的技术选择和系统设计，可以构建一个高效且功能强大的嵌入式人工智能边缘计算系统。
我在高职教STM32——串口通信（5）
gmc832002的博客
07-20 2090
本文是串口通信的第五部分，也是最后一部分，我们来详细解读一下串口收发的工程源码。
LVGL7.11版本
08-25
LVGL 7.11版本是一个开源的嵌入式图形库，用于创建图形用户界面（GUI）。它提供了丰富的功能和灵活的定制选项，可以在各种嵌入式平台上运行，包括微控制器、单片机和嵌入式Linux系统。LVGL 7.11版本引入了许多新功能和改进，包括： 1. 新的小部件：包括表格、数据视图、滑动开关等，为用户界面提供更多样化的选项。 2. 改进的动画引擎：支持更多种类的动画效果，如平移、旋转、缩放等。 3. 支持多语言和本地化：可以轻松地将应用程序本地化为不同的语言。 4. 支持触摸屏和物理按钮：可以轻松地与外部输入设备进行交互。 5. 更好的性能和内存管理：优化了内存使用和渲染速度，提高了应用程序的响应性。 这只是一些主要的改进和功能，LVGL 7.11版本还有许多其他方面的改进和修复。你可以访问LVGL官方网站获取更多信息和文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值