LVGL移植教程(超详细)——基于GD32F303X系列MCU

LVGL移植教程(超详细)——基于GD32F303X系列MCU

版本:LVGL Kernel V8.3.0,运行压力测试Demo Stress,按步骤操作百分百成功

首先放一张最终Stress Demo 运行图:
[Pasted image 20241027222809.png]

一、准备

1. GD32 Keil工程

准备任意一个可以屏幕可以正常显示的GD32工程:
[Pasted image 20241027201716.png]
[d436b884e6b1b5a000b4cf2eae2b3ba.jpg]

2. LVGL源码

最新版现在已经是V9.2了,这里我选择了常用的V8.3版本,大家选择其他版本的时候配置上可能会略有差异:
Download: LVGL Kernel

[Pasted image 20241027202338.png]
我们会得到一个压缩文件,然后解压出来备用,现在准备好了一个GD32 Keil工程和一个LVGL源码:
[Pasted image 20241027202613.png]

二、LVGL移植

1. 文件操作

对于移植使用来说,我们主要使用下面这几个LVGL的关键文件:
[Pasted image 20241027203525.png]
在Keil工程中新”LVGL“文件夹:
[Pasted image 20241027203931.png]
然后将上述文件拷贝至新建的文件夹内:
[Pasted image 20241027204029.png]
把默认的“lv_conf_template.h”改名为“lv_conf.h”
[Pasted image 20241027204327.png]
进入”.\LVGL\examples“目录,删除如下文件夹,仅保留”porting“文件夹:
[Pasted image 20241027205101.png]
修改后如下所示:
[Pasted image 20241027205328.png]
进入”.\LVGL\demos“目录,删除如下文件夹,仅保留”stress“文件夹(这里我们只跑这一个例程):
[Pasted image 20241027205241.png]
修改后如下所示:
[Pasted image 20241027205314.png]
把“.\LVGL\examples\porting“目录下的所有文件的”xxx_template“字样也删除掉:
[Pasted image 20241027204536.png]
修改后如下所示:
[Pasted image 20241027204720.png]
打开”.\LVGL\src\“文件夹,我们在Keil中把这几个文件夹的以及对应的源文件都包含进去:
[Pasted image 20241027205820.png]
首先创建同文件名的目录:
[Pasted image 20241027210324.png]
然后把对应文件夹的源文件添加进来:
[Pasted image 20241027210432.png]
Draw目录下需要注意,首先添加目录下的源文件:
[Pasted image 20241027210638.png]
然后添加”sw“目录下的所有源文件,其他子目录下的不需要:
[Pasted image 20241027210620.png]
[Pasted image 20241027210751.png]
然后是目录”extra“下的所有源文件,注意,这里的子目录很多,一定要全部添加,不要遗漏!
[Pasted image 20241027211202.png]
然后是”font“、”hal“、”misc“、”widgets“文件夹:
[Pasted image 20241027211334.png]
[Pasted image 20241027211412.png]
[Pasted image 20241027211531.png]
[Pasted image 20241027211538.png]
然后新建”LVGL_Porting“目录,添加”example\porting“下的所有源文件:
[Pasted image 20241027211756.png]
新建“LVGL_Demos”目录,存放“demos”文件夹下的所有源文件:
[Pasted image 20241027212059.png]
新建“”目录,存放“”目录下的头文件:
[Pasted image 20241027212445.png]
[Pasted image 20241027212501.png]
源文件添加完后接下来添加头文件路径,按如下内容添加:
[Pasted image 20241027212752.png]
然后回到“C/C++”标签页,勾选“C99 Mode”:
[Pasted image 20241027212841.png]
接下来就是代码操作部分

2. 代码操作

首先是启用LVGL,打开”lvgl_conf.h“文件,在第15行的条件宏处改为”1“:
[Pasted image 20241027213219.png]
然后适当调小一下内存分配:
[Pasted image 20241027222955.png]
这里可以尝试编译一下,如果没有错误就可以进行下一步,如果有,请检查源文件或头文件是否有遗漏:
[Pasted image 20241027213931.png]
然后打开”lv_port_disp.c“文件,完成屏幕接口的适配,首先启用条件宏,然后把头文件的”xxx_template“删除,因为我们已经在前面文件操作的时候重命名了,然后包含自己的屏幕驱动文件,并根据屏幕信息,调整尺寸,我的屏幕信息定义在自己的屏幕驱动文件的宏定义LCD_LENGTH和LCD_WIDTH中:

#define MY_DISP_HOR_RES		LCD_LENGTH 	//填写自己的屏幕尺寸信息
#define MY_DISP_VER_RES		LCD_WIDTH		//填写自己的屏幕尺寸信息

[Pasted image 20241027220315.png]
然后右键跳转到"lv_port_disp.h"文件,启用条件宏并修改头文件路径:
[Pasted image 20241027215603.png]
回到”lv_port_disp.c“文件,划到中间90行左右,LVGL支持多个缓冲区,MCU使用一般就用一个,我们注释掉其他两种写缓存方式:
[Pasted image 20241027215842.png]
添加自己的屏幕初始化函数和画点函数:
[Pasted image 20241027215927.png]
[Pasted image 20241027215954.png]
这时候我们编译一下,可以看到是0错误0警告:
[Pasted image 20241027220522.png]
接下来我们启用LVGL例程的播放,首先先调整堆栈空间的大小,这里根据自己MCU大小适当修改:
[Pasted image 20241027221944.png]
然后给LVGL一个系统时基,打开”gd32f30x_it.c“文件,首先添加头文件:
[Pasted image 20241027222118.png]
然后在系统滴答里添加lvgl的心跳:
[Pasted image 20241027222333.png]
然后进入"lv_config.h"文件,把例程”LV_USE_DEMO_STRESS“的宏打开:
[Pasted image 20241027220837.png]
回到main.c文件,添加如下头文件:

#include "lvgl.h"
#include "lv_port_disp.h"
#include "lv_demo_stress.h"

[Pasted image 20241027221001.png]
在系统初始化中加入LVGL初始化:

	lv_init();
	lv_port_disp_init();

[Pasted image 20241027221047.png]
在main函数中完成调用:

int main(void)
{
    /* configure systick */
    systick_config();
		System_Init();
		lv_demo_stress();
    while (1){
			lv_timer_handler();
			delay_1ms(1);
    }
}

[Pasted image 20241027221131.png]
然后我们编译运行:
[Pasted image 20241027222809.png]


到这里我们就完成了LVGL的移植,教程采用GD32但其他MCU均可参考,后续大家可以使用NXP的GUI-Guider或百问网的LVGL中文教程完成UI设计以及LVGL的交互控制等内容,LVGL应用项目展示: Bilibili: 基于GD32+FreeRTOS+LVGL的智能通用控制Demo【1-功能展示】
Licensed under CC BY-NC-SA 4.0