LVGL8.1笔记3–运行demo（2022-0611）

文章目录

• LVGL8.1笔记3--运行demo（2022-0611）
• • @[toc]
  • 前言
  • 一、移植前准备
  • 二、lv_demo简介
  • 三、开始移植demo
  • • • 1. 首先下载demo，如果用的不是LVGL8.2可以在官方仓库里找到低一点版本的。
      • 2. 添加代码到keil工程中
      • 3. 把将widgets目录下的全部.c文件添加到工程中即可，注意是.c文件
      • 3.打开配置文件lv_conf.h中的关于使用demo的宏
      • 4.在main函数里调用lv_demo_widgets();
  • 注意

前言

LVGL能实现非常简约美观的UI界面，比如上面这张动图就是LVGL的官方demo，前面移植好显示和触摸后，就可以尝试跑一下lv_demo。

有时间还可以研究一下demo是怎么实现的。

一、移植前准备

1. 硬件（带触摸屏幕的STM32F407VE核心板）
2. 移植好LVGL-8.1显示和触摸的Keil工程，实现屏幕显示、按键或触摸等
3. lv_demo(可以从这里下载最新的demo）

二、lv_demo简介

benchmark：基准测试，用来测试硬件平台的性能，就是看看能多流畅的运行LVGL

keypad_enconder：键盘测试，里面创建了很多用按键操作的控件。方便没有触屏的来体验

music：一个音乐播放器界面，注意这个demo需要很多的flash资源，编译的程序超过1mb大小，所以我用的STM32F407根本没法运行

stress：压力测试，开辟量的空间，创建很多组件来极限测试硬件在运行LVGL的能力

widgets：组件测试，就是把大部分LVGL能实现的组件都用起来，一个比较综合的demo

三、开始移植demo

1. 首先下载demo，如果用的不是LVGL8.2可以在官方仓库里找到低一点版本的。

将整个demo文件夹中的内容复制到自己移植好lvgl的工程中，为了我们方便区分可以自己建个文件夹存放demo程序

2. 添加代码到keil工程中

这一步其实很好理解，我们想要运行demo，肯定要添加到工程中进行编译啊。上面接收过来，这个demo文件夹里有几个不同的demo。最好事在keil中建不同的组来区分，这样方便添加和删除。这里具体以widgets来演示

3. 把将widgets目录下的全部.c文件添加到工程中即可，注意是.c文件

lv_demo_widgets.c

img_clothes.c

img_demo_widgets_avatar.c

img_lvgl_logo.c

总共就以上4个文件需要添加到keil工程中，然后把路径添加一下

3.打开配置文件lv_conf.h中的关于使用demo的宏

这里其实有个不太理解的问题，我用的是LVGL8.1版本，下载后里面就没有demo文件夹，我是在官方仓库自己找的。我找到的demo仓库里面有关于demo的配置文件lv_demo_conf.h（其实就是几个宏定义用来打开和关闭demo）。但是写这个笔记是发现LVGL8.2的里面有demo文件夹，不过这里面没有配置文件，相关的配置宏都在lv_conf_template.h这个文件中。

不够无所谓了，反正我们之前移植LVGL时也用到了这个文件（lv_conf_template.h）。所以大家有哪个用哪个就行了。这里可能说的比较乱哈。

我们其实就需要明白要干什么就行了。

1. 我们想运行demo
2. 需要demo文件夹和里面的demo程序
3. 如果不管是LVGL8.x只需要找demo相关的代码就行
4. 如果目录下有就可以直接用，如果没有就去官方仓库里找到然后下载来用
5. 需要用到lv_demo_conf.h文件，如果没有就在lv_conf.h文件中搜索一下demo关键词，看有没有下面这些宏
6. 有这些宏就可以直接用，如果没有可以在官方仓库里找，也可以自己创建一个嘛。
7. 把用到的程序文件添加到工程，编译、解决一些路径头文件错误就好了
8. 调用demo函数就运行起来了

/*===================
 * DEMO USAGE
 ====================*/

/*Show some widget. It might be required to increase `LV_MEM_SIZE` */
#define LV_USE_DEMO_WIDGETS        1  // 把这个宏置成 1 ，就能用widgets了，其他的demo也类似
#if LV_USE_DEMO_WIDGETS
#define LV_DEMO_WIDGETS_SLIDESHOW  0
#endif

/*Demonstrate the usage of encoder and keyboard*/
#define LV_USE_DEMO_KEYPAD_AND_ENCODER     0

/*Benchmark your system*/
#define LV_USE_DEMO_BENCHMARK   0

/*Stress test for LVGL*/
#define LV_USE_DEMO_STRESS      0

/*Music player demo*/
#define LV_USE_DEMO_MUSIC       0
#if LV_USE_DEMO_MUSIC
# define LV_DEMO_MUSIC_SQUARE       0
# define LV_DEMO_MUSIC_LANDSCAPE    0
# define LV_DEMO_MUSIC_ROUND        0
# define LV_DEMO_MUSIC_LARGE        0
# define LV_DEMO_MUSIC_AUTO_PLAY    0
#endif

4.在main函数里调用lv_demo_widgets();

#include \"lv_demo.h\"
#include \"lv_demo_conf.h\"
#include \"lv_demo_widgets.h\"		// 用哪个demo就包含哪个的头文件

int main(void)
{
	NVIC_PriorityGroupConfig(NVIC_PriorityGroup_2);	//设置系统中断优先级分组2
	delay_init(168);  								//初始化延时函数
	uart_init(115200);								//初始化串口波特率为115200
	W25QXX_Init();									//外部Flash--W25Q16初始化
	TIM3_Int_Init(999,83);							//定时器配置1ms中断
	KEY_Init(); 									//按键初始化 
	LED_Init();										//初始化LED 
 	LCD_Init();										//LCD初始化 
	tp_dev.init();				//触摸屏初始化
	
	lv_init();					//LVGL初始化
	lv_port_disp_init(); 		//LVGL 显示接口初始化,放在 lv_init()的后面
	lv_port_indev_init(); 		//LVGL 输入接口初始化,放在 lv_init()的后面

    // lv_example_get_started_1();
    lv_demo_widgets();			// 这里是widgets的demo函数
    // lv_demo_benchmark();
    // lv_demo_stress();
    // lvgl_clock_start();
	while(1)
	{
		tp_dev.scan(0);
		lv_task_handler();
	}
}

下面是运行demo的样子，这次不做动图了，是可以触摸点击操作的哈

我的完整程序放在了gitee上，https://gitee.com/WRS0923/stm32_little-vgl/tree/dev/ 有需要的可以自行下载，注意切换到dev分支。以后分享的笔记也会在这个程序上修改。争取把LVGL玩明白

注意

这里有非常重要的一点，widgets消耗的内存比较大，需要我们再lv_conf.h文件中的空间开辟大一点，不然程序直接跑飞。

/*Size of the memory available for `lv_mem_alloc()` in bytes (>= 2kB)*/
#  define LV_MEM_SIZE (64U * 1024U)          /*[bytes]*/

music的demo需要很大的flash空间（超过1mb以上）资源不过的还是别运行了，不然编译几百个错误 怪闹心的。哈

网上的教程五花八门，其实最好的资料就是LVGL官方手册了。要知道不是所有的东西网上都会有教程，有些路还是要自己走