GUI GUIDER 应用笔记

MR_Promethus

已于 2023-06-26 16:55:06 修改

阅读量7.8k

点赞数 18

分类专栏： LVGL 嵌入式图形库文章标签： stm32

于 2021-07-07 18:33:04 首次发布

本文链接：https://blog.csdn.net/qq_44431690/article/details/118553260

版权

LVGL 嵌入式图形库专栏收录该内容

3 篇文章 8 订阅

订阅专栏

文章目录

【 0. GUI GUIDER的运行环境】
【 1. GUI GUIDER 生成代码的版本】
【 2. 移植问题】
【 3. 中文显示部分代码报错】
【 4. GUI GUIDER里的微调框不能使用】
【 5. 输入框卡死】
【 6. 生成代码的解析】
【 7. 多次进入屏幕页面导致的卡死问题】
【 8. 程序运行流程】
【 9. 图表组件不显示线上的点】
【 10. 设置主屏幕背景】
【 11. 设置图表外框线为指定颜色】

GUI GUIDER 是恩智浦公司基于 Little VGL 的图形界面开发工具，第一个版本于2021年5月14日推出，这也是目前最新的版本。
这个几月时间，我在使用GUI GUIDER的时候遇到了一些问题，也有一些解决办法，现在分享给大家。
整理的在STM32F4上运行LVGL7.10.1源码下载链接：STM32F4运行LVGL7.10.1的源码

【 0. GUI GUIDER的运行环境】

如果是WINDOWS，还需要下载一个JAVA插件，不然会报错

【 1. GUI GUIDER 生成代码的版本】

GUI GUIDER 兼容 LVGL 7.10.1 版本。
在这里插入图片描述

【 2. 移植问题】

我是将LVGL移植到STM32F407ZET6上进行开发的，有关移植的教程可以参考嵌入式大杂烩这篇文章，但是这篇文章里没有做到完全移植（部分小部件还不能用）。其只修改了lv_port_disp.c这个文件，而 lv_port_fs.c 和 lv_port_indev.c 没有修改，想要修改的同学可以参考正点原子资料下载中心中正点原子的LVGL移植文档。
此外，想要移植外部SRAM加速那一部分的伙伴也可以参考正点原子的移植文档。

【 3. 中文显示部分代码报错】

移植成功后，如果有部分中文，可能会报错。这算是第一个BUG了。
解决办法就是：魔术棒里这个位置输入这行代码：

--locale=english

在这里插入图片描述

【 4. GUI GUIDER里的微调框不能使用】

也就是图中这个东东。
在这里插入图片描述

在我将其拖入界面中后，生成的代码总是报错说重复定义 h 这个标识，可是我整个工程里都没有 h 这个单独的变量…这算是第2个BUG了。
所以建议大家不用这个控件。

【 5. 输入框卡死】

在用这个东东时，

当多次在屏幕中切换这个输入框时，会卡死。这…无解。

2021/10/9
经过多次测试，每次使用完输入框这个功能后，应当将其关闭，即点击键盘右下角的“√”表示结束，再退出，即可解决上述问题。
在这里插入图片描述

【 6. 生成代码的解析】

使用 GUI GUIDER 生成的代码，层次清晰，函数接口封装性好。
例如下面的：设置了4个屏幕：Screen_Home、Screen_Test、Screen_History、Screen_Set。每个界面下都有相应的控件。
在这里插入图片描述
然后来看一下生成的代码：

events_init.c中包含所有触摸事件的初始化函数、回调函数。
gui_guider.c中包含了主屏幕(启动看到的第一个屏幕)的配置函数。
以下这4个函数包含了各个屏幕的样式配置。
其他的.c文件都是有关字体、图片，不需关注。

【 7. 多次进入屏幕页面导致的卡死问题】

-----------------------------------2021/7/20 更新-----------------------

之前有学长拿 LVGL 做毕设，但是多次进入触摸屏次级页面后，会出现卡死的问题。
这几天我也在拿 LVGL 做课设，时不时也会出现上述问题（有时候我当做没看见，重新复位就过去）。但是，这不是做科研的态度！
于是咨询了老学长当时是怎么解决的，他说，当时出现这个问题后，放弃了LVGL，，这怎么可以？！

今天在经过不断的尝试后，终于解决了这个问题，下面分享一下我的探索历程。

首先我在KEIL中进入调试，开启全速运行，然后多次触摸屏幕进入次级页面，进而引发屏幕卡死。屏幕卡死后，我点击结束全速运行，然后程序就跳到了这一行代码中：

Out of memory,can't allocate a new buffer (increase your LV_MEM_SIZE/heap size)

内存溢出，不能分配一块新的缓冲区（增大你的LV_MEM_SIZE/堆大小）
在这里插入图片描述
不过我这是多次点击屏幕重复加载页面后才出现的屏幕卡死问题，所以和硬件本身的内存大小无关，而是说每次进入页面，对内存的使用是累加型的，每进入一次，内存就少一点，直至报错（即经典的内存泄漏问题）。

带着这行代码，我进入百度搜索，搜不到相关解释…
于是在想是否是 task 任务的问题，因为我设置了两个全局的 task 变量，但是在注释后，并未发现明显变化。。

于是，带着疑问，进入 LVGL官方论坛，搜索我的报错警告，发现了这个和我相同情况的帖子Turn the whole page，帖子下的大佬是这么回应的：
在这里插入图片描述
大致意思是：你每次都重新初始化这个样式，在第一次初始化之后，应该调用lv_style_reset而不是，继续调用lv_style_init，这将导致内存泄漏。

回去查看 GUI GUIDER 生成的代码，果然！在每次进入另一个屏幕页面时，就会重新调用样式初始化函数！

对此，我尝试在第二次或以后多次进入屏幕页面时，调用 lv_style_init 这个函数，但是样式都会回归初始配置，不好看…
于是经过多次尝试后，解决了这个问题！

下面附上代码参考：

#include "lvgl/lvgl.h"
#include "gui_guider.h"
#include "events_init.h"

unsigned int buka_home=1;

void setup_scr_Screen_Home(lv_ui *ui)
{
	/*
	这里放下面注释掉的样式创建函数行。
	*/
	if(buka_home==1)
	{
		buka_home=0;
		/*
		这里放下面注释掉的样式初始化函数。
		*/
	}
	else ;
	
 	/*
 	生成的相关代码
	记住：要把这里的所有 样式创建函数行static lv_style_t xxx 和样式初始化函数lv_style_init(&xxx)  注释掉！！！
	*/


	//Init events for screen
	events_init_Screen_Home(ui);
}

【 8. 程序运行流程】

------------------------------------------2021/01/12 更新----------------------------------
基于STM32F4 以及 GUI GUIDER 1.2.1
在这里插入图片描述

8.1 lv_ui guider_ui;

可见，lv_ui 这个类型的结构体包含了界面内所有的小部件。
所以，首先第一步就先创建了一个结构体变量。
在这里插入图片描述

8.2 setup_ui(&guider_ui);

该行代码的定义位于 gui_guider.c 文件中，是对初始屏幕的定义和加载。
在这里插入图片描述

LV_THEME_DEFAULT_INIT(…);
首先第一行代码对所有的部件进行主题的默认初始化。
setup_scr_screen(ui);
该行代码的定义位于 setup_scr_screen.c 文件中，是对screen屏幕下的所有部件的创建和主题的定义。
lv_scr_load(ui->screen);
加载screen屏幕。

8.3 events_init(&guider_ui);

该行代码的定义位于 events.c 文件中，是对所有事件的初始化。

【 9. 图表组件不显示线上的点】

------------------------------------------2021/01/15更新，基于LV7.10.1----------------------------------
如下，官方 V7 给的demo中的 chart 显示的是图表均是点连线。
在这里插入图片描述
实际上，很多情况下我们只需要显示个波形，线上的点是多余的。经过参考官方论坛上这个How to make the chart widget of lvgl display pure line instead of the connection between lines and points? 帖子，可以通过下行代码实现不显示图标上线上的点：

//第一个参数是 图表对象
//其余参数无需改动，即可实现此功能。
lv_obj_set_style_local_size(chart, LV_CHART_PART_SERIES, LV_STATE_DEFAULT, 0);

最后，官方论坛 yyds！

【 10. 设置主屏幕背景】

------------------------------------------2021/02/17 修订----------------------------------

 	//Write codes screen
	ui->screen = lv_obj_create(NULL, NULL);
	// 1. 首先 增加下行代码。
	lv_obj_set_style_local_bg_color(ui->screen, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLACK);//【设置背景颜色为黑色】
	
	// 2. 最后仅注释下部分代码即可。
//	//Write style LV_OBJ_PART_MAIN for screen
//	static lv_style_t style_screen_main;
//	lv_style_reset(&style_screen_main);

//	//Write style state: LV_STATE_DEFAULT for style_screen_main
//	lv_style_set_bg_color(&style_screen_main, LV_STATE_DEFAULT, lv_color_make(0xff, 0xff, 0xff));
//	lv_style_set_bg_opa(&style_screen_main, LV_STATE_DEFAULT, 0);
//	lv_obj_add_style(ui->screen, LV_OBJ_PART_MAIN, &style_screen_main);

-如果我们想在主屏幕用黑色背景即可选中DARK，不用另导入黑色图片做背景。可修改setup_scr_screen.c中部分代码即可：

【 11. 设置图表外框线为指定颜色】

//第一个参数是 图表对象
//最后一个参数是 指定的颜色
//其余参数无需改动，即可实现此功能
lv_obj_set_style_local_border_color(your_chart, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLACK);//设置图表外框颜色为黑色