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

【 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 screenevents_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 screenui->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);//设置图表外框颜色为黑色

GUI GUIDER 应用笔记相关推荐

1. GUI guider学习笔记1

   1.GUI Guider概述 GUI Guider是恩智浦新近推出的一个PC端开发工具,专门用于LVGL(light and Versatile Graphics Library)GUI开发. 同其他 ...

2. 【LVGL】学习笔记--(2)GUI Guider的使用

   基于上一篇[LVGL]学习笔记--(1)Keil中嵌入式系统移植LVGL,已经成功地移植了LVGL到我们的嵌入式板子上,并配合磁控旋钮编码器(或者诸如触摸屏.按键.键盘等其他输入设备均可),实现了简单 ...

3. Python GUI编程(Tkinter)笔记

   Python GUI编程Tkinter笔记 1 显示任意格式图片 2 固定框架Frame大小 3 选择文件夹或文件 4 展示菜单栏 5 展示选择的图片 1 显示任意格式图片 Tkinter只支持显示G ...

4. python的messagebox的用法_Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解...

   本文实例讲述了Python GUI编程学习笔记之tkinter中messagebox.filedialog控件用法.分享给大家供大家参考,具体如下: 相关内容: messagebox 介绍 使用 fi ...

5. STM32+GUI Guider+Littlevgl

   目录 准备 硬件平台: 仓库地址: 建立工程and移植 移植文件 配置keil 添加demo文件 头文件包含 修改文件 修改lv_conf.h文件 修改lv_port_disp_template.c文 ...

6. LVGL GUI GUIder使用教程

   本篇以按钮为例进行介绍 1-创建项目工程程 1.1-打开 打开软件,创建一个新的工程,如下图所示: 2版本选择 点击创建项目后会弹出LVGL版本选择.NXP开发的gui guider中目前有两种LVG ...

7. GUI Guider与lvgl联合仿真（结合stm32实验进行演示，含触摸屏实验计数器与计算器）

   GUI Guider与lvgl联合仿真 文章目录 @[toc] 1 guiguider文件安装与下载 2 gui_ guider模拟器相关操作 2.1 guiguider界面介绍 2.2 guigui ...

8. 一文跟我玩转lvgl Gui guider

   LVGL8移植中文教程 1 前言(文章持续更新中) 2 移植LVGL 3 给LVGL添加中文字库 3.1准备工作 3.11 字库生成 4 GUI guider 图形化界面按照 4.1 准备工作 4.1 ...

9. GUI Guider设计UI界面移植到STM32

   GUI Guider设计UI界面移植到STM32 一.什么是GUI Guider 什么是 GUI-Guider? GUI Guider 是恩智浦为 LVGL 开发了一个上位机GUI 设计工具,可以通过 ...

10. LVGL移植到STM32——之GUI GUIDER

    文章目录 前言 一.准备工作 二.创建一个简单的工程 三.添加文件 1.创建路径 2.复制gui生成的文件到stm32工程中 四.修改stm32工程实现界面显示 1.添加C文件路径 2.添加头文件路径 ...

最新文章

1. [剑指Offer] 59.按之字形顺序打印二叉树
2. 【tool】firewall防火墙
3. 刘光聪 | TensorFlow：揭示多语言编程的奥秘
4. laravel 先排序后分组怎么写_希尔排序算法拆解解析
5. 10万辅导老师困境：上半年被抢，下半年被裁
6. java可视化插件_java的WindowBuilder可视化插件
7. TensorFlow神经网络（一）前向传播
8. vue可编辑div_Vue实现MakeDown编辑器
9. RAC安装时,报The specified nodes are not clusterable 的解决方法
10. 可视化神器Scikit-plot实践入门
11. linux crontab文件位置,linux crontab at 文件目录
12. 电脑公司ghost win8 64位家庭克隆版v2020.05
13. VS code 尝试在目标目录创建文件时发生一个错误
14. 京东万能转链API接口 含商品信息优惠券转链 京东线报如何转链？
15. 没有U盘纯硬盘安装linux之Ubuntu22.04
16. word图文打印排版
17. 不要和陌生人说话，消息中间件之 Topic
18. UE4加载Excel表格CSV数据及解决中文乱码问题
19. ubuntu设置共享文件夹成功后却不显示找不到
20. cpm、cpc、cps和cpa分别是什么意思

热门文章

1. 阿里云服务器操作系统怎么选择？
2. WMTS服务及地图瓦片原理
3. 国内那些靠谱些的招聘网站
4. Centos 8 安装 Openbravo 之安装 postgresql
5. distinct效率更高还是group by效率更高？
6. Error: Network Error
7. 彻底解决[未识别的网络][公共网络]的问题
8. mysql vga怎么使用,mysql explain 详解
9. 2021年危险化学品经营单位安全管理人员报名考试及危险化学品经营单位安全管理人员考试资料
10. Mac必备软件之程序员、设计师、产品经理