该文章工程是基于裸机情况下运行的LVGL,通过GUI-Guider-1.4.0进行页面布局配置。
一、介绍
GUI Guider是恩智浦为LVGL开发了一个上位机GUI设计工具,可以通过拖放控件的方式设计LVGL GUI页面,加速GUI的设计。设计完成的GUI页面可以在PC上仿真运行,确认设计完毕之后可以生成C代码,再整合到MCU项目中。
GUI Guider(Version: 1.3.0-GA)的主要特征:
支持Windows 10和Ubuntu 20.04。
支持中文、英文。
兼容LVGL V7和LVGL V8版本。
支持拖放的所见即所得(WYSIWYG)用户界面设计。
多种字体支持及第三方字体导入。
可定制的中文字符范围。
小部件对齐方式:左、中、右。
自动产生LVGL 的C语言源代码。
支持默认样式和自定义样式。
演示应用程序集成。
实时日志显示。
集成上位机仿真器。
注意!!GUI-Guider会依赖javaJDK,因此需要安装jdk.
接线:
![](https://i-blog.csdnimg.cn/blog_migrate/5ae001f88f1b02424d8d880bb45f76ef.jpeg)
二、安装
2.1安装Java-JDK
安装JDK,我使用的JDK见下图(如果你已经安装有JDK,则忽略这里。)
JDK安装我这里就不写了,外面很多大佬关于JDK的安装非常详细。
![](https://i-blog.csdnimg.cn/blog_migrate/c78a6e8c1555c7b2e524f3d659ce1719.png)
2.2安装GUI-Guider
下图为安装包。(我的电脑是64位 WIN10)
![](https://i-blog.csdnimg.cn/blog_migrate/cb7d09ec2e7201313e23d5a9504063e5.png)
2.2.1 选择中文(简体)
![](https://i-blog.csdnimg.cn/blog_migrate/afa86cacfacc99513afb2665cf95f34e.png)
2.2.2选择同意协议
![](https://i-blog.csdnimg.cn/blog_migrate/b4a3ec1f4829dd0754ec20f9f8ccebaa.png)
2.2.3 选择安装路径
![](https://i-blog.csdnimg.cn/blog_migrate/ae7a66e3b05ff64777f39752e90763b5.png)
2.2.4等待安装完成
![](https://i-blog.csdnimg.cn/blog_migrate/a9e9d99f12318babce23554fe496f604.png)
2.2.5安装完成
![](https://i-blog.csdnimg.cn/blog_migrate/c093f7f535a70f9d5dac7437c2874973.png)
三、创建工程
使用的是立创梁山派的屏幕扩展板,4.3寸,高清的480*800分辨率加5点的电容触摸屏。
详情界面链接:立创·梁山派-屏幕扩展板
![](https://i-blog.csdnimg.cn/blog_migrate/4cc615616c495f798cbe2cff189abfcd.png)
3.1选择创建新工程
打开软件后,创建新工程。
![](https://i-blog.csdnimg.cn/blog_migrate/186b57950ce7e6187d5a1efafd6c8bf2.png)
3.2选择LVGL版本
这里使用的是V8版本的LVGL。
![](https://i-blog.csdnimg.cn/blog_migrate/96a62e31f29f74496608d83f361113d0.png)
3.3选择设备模板
![](https://i-blog.csdnimg.cn/blog_migrate/c97a5cf1e6229bd034f71f6496d0a16e.png)
3.4选择应用模板
这里选择了一个空白模板,如果感兴趣可以试一试官方的模板。
![](https://i-blog.csdnimg.cn/blog_migrate/10ccb796190b1c684fd3e0421a878b20.png)
3.5工程配置
屏幕的像素是480x800,我这里选择的16位彩色,面板尺寸自定义为480x800(竖屏显示)。工程路径请务必放在英文路径
![](https://i-blog.csdnimg.cn/blog_migrate/a222548567469f374d03a88dbbbb46f2.png)
3.6创建完成
创建完成之后,就是这样啦。
![](https://i-blog.csdnimg.cn/blog_migrate/d450a82e57509c08bf6307e0b674f934.png)
四、常用组件的应用
4.1标签
点击标签然后拖拽到我们的显示界面上。
![](https://i-blog.csdnimg.cn/blog_migrate/29bac316ac07af7b3e690cf4e7841af5.png)
4.1.1标签属性设置
这里主要设置显示的文本内容,和字体。注意:你使用一个字体,它就会生成一个字库给你,所以请慎重考虑内存问题,或者将生成的字库保存至外部FLASH里。
![](https://i-blog.csdnimg.cn/blog_migrate/2177fec0c2a7e55bf532fc1c1520f15e.png)
4.2按钮
点击按钮然后拖拽到我们的显示界面上。
![](https://i-blog.csdnimg.cn/blog_migrate/17cc3c9ef5cf40dd2aa7316fda41b918.png)
4.2.1按钮属性设置
![](https://i-blog.csdnimg.cn/blog_migrate/379e63a6f465b5a85e2f700b6844edb2.png)
4.2.2按钮事件添加
事件是按钮的灵魂,涉及到我们后继代码如何判断按键是否点击
![](https://i-blog.csdnimg.cn/blog_migrate/e9ae11cdc7a31c50fa754d2830260492.png)
事件配置里,如果不随便点一个动作,则软件不会生成按钮事件的C代码,所以我选择修改背景色。后面生成代码后再把这个动作的代码删除。
![](https://i-blog.csdnimg.cn/blog_migrate/17670dfeda142bb6f5940eb94947242d.png)
4.3图片
点击图片组件然后拖拽到我们的显示界面上。
![](https://i-blog.csdnimg.cn/blog_migrate/3bb1d61b0eab87d7a825fb272c8bf39b.png)
4.3.1添加图片资源
点击我们拉出来的图片组件,在属性设置里,添加我们的图片资源。
![](https://i-blog.csdnimg.cn/blog_migrate/36dc76a7b20d82b7f974f8d66d0119d4.png)
在弹出的界面选择添加。
![](https://i-blog.csdnimg.cn/blog_migrate/c43568c41eb74fbc53b7058f57e8083b.png)
这里我选择了一张蓝牙的图标。
![](https://i-blog.csdnimg.cn/blog_migrate/323ae568fc89fa7c050df55fa715ed02.png)
添加完成之后,选择这个图片。
![](https://i-blog.csdnimg.cn/blog_migrate/4eeb00fdf1acabe26d8a60be1807f6a8.png)
这样就显示出来了。注意,每使用一张图片,都会生成C代码,注意内存问题,或保存至外部FLASH。
![](https://i-blog.csdnimg.cn/blog_migrate/5590dd399e864d899fcd4ad374eb206f.png)
4.4生成第二个界面
![](https://i-blog.csdnimg.cn/blog_migrate/e90e893a3262d412d046f22aed9e8aa1.png)
返回之后,点击+号,生成第二个界面。
![](https://i-blog.csdnimg.cn/blog_migrate/0cf172f02d3583e7184837daf8a3f491.png)
点击生成的第二个界面,就可以进行编辑了。
![](https://i-blog.csdnimg.cn/blog_migrate/2e02d948a9628c32cf1b272a98533f89.png)
4.5图片按钮(界面切换)
这个图片按钮我们用来进行界面跳转。回到界面一,拉出图片按钮。
![](https://i-blog.csdnimg.cn/blog_migrate/7cd573855c51407de7f50f7c4081f913.png)
这里推荐一个图标网站,对大多数的图标都可以免费下载。
网站链接:iconfont-阿里巴巴矢量图标库
我下载了返回图标和前进图标。
![](https://i-blog.csdnimg.cn/blog_migrate/b4d3a6d0d3c41f97fbb3a921b34ff0de.png)
将图片加载到我们的图片按钮
![](https://i-blog.csdnimg.cn/blog_migrate/8c66ba39656b810e5ed492df4d41d196.png)
设置图片按钮的事件为界面切换事件
![](https://i-blog.csdnimg.cn/blog_migrate/1d79fbba83dd6ec1b3f54f99cffb6eb1.png)
去到第二个界面,设置返回键。
![](https://i-blog.csdnimg.cn/blog_migrate/3f8d6650672e6c3379adb3934c9621a6.png)
在返回键添加界面切换事件,让其可以切换到第一个界面
![](https://i-blog.csdnimg.cn/blog_migrate/89669f46be668acce001cefa3d60f5b9.png)
五、进行模拟并生成代码
点击绿色按键,选择C。开始模拟运行。(会比较慢)
![](https://i-blog.csdnimg.cn/blog_migrate/21b274617fe7f3bb3dbafac36cbedb2c.png)
运行效果。视频效果见链接:
![](https://i-blog.csdnimg.cn/blog_migrate/5c2d51b17ea286d10130cc55ec39a6fa.png)
六、生成代码并且移植
点击生成代码
![](https://i-blog.csdnimg.cn/blog_migrate/ce08ca4ec8eb2915a6bc3782a065a6f9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/79e6a184cae705e4fe56df81d06368ab.png)
去到这个Demo工程目录下,找到生成的代码。
我之前创建工程时的路径
![](https://i-blog.csdnimg.cn/blog_migrate/1bcc3a1420efb221347192dce5a784a8.png)
代码就在工程目录的generated和custom文件夹下。将两个文件夹复制到我们的GD32LVGL工程文件夹里。
![](https://i-blog.csdnimg.cn/blog_migrate/a3a590ed168aa9152c1ddc142a292cf9.png)
将我们之前复制的文件夹替换GD32LVGL工程里之前的文件夹。
![](https://i-blog.csdnimg.cn/blog_migrate/842ceab32f8650dfda498012e756a627.png)
打开我们替换后的GD32LVGL工程。删除之前生成的代码。
![](https://i-blog.csdnimg.cn/blog_migrate/eb724805829fa72707d6fcdf455fea39.png)
添加我们配置的界面代码。
![](https://i-blog.csdnimg.cn/blog_migrate/7d59a2226bae6c47163db7277cc1754b.png)
添加custom文件夹下的.c文件
![](https://i-blog.csdnimg.cn/blog_migrate/7b9970439395c162cd3c8a0de4d01f6b.png)
添加generated文件夹下的.c文件。(界面和配置文件)
![](https://i-blog.csdnimg.cn/blog_migrate/4de61ecd3e170ca56fb10c8328a4cb1b.png)
添加generated文件夹里的guider_fonts文件夹下的所有.c文件。(字库文件)
![](https://i-blog.csdnimg.cn/blog_migrate/22c4cbc0cb606d460b6dafc0934dbc1c.png)
添加generated文件夹里的images文件夹下的所有.c文件。(图片资源文件)
![](https://i-blog.csdnimg.cn/blog_migrate/809de37f5abe6742c37a70648b98e23b.png)
最后是这样的。(注意我的字体和图片不一定和你一样,所以不一定是和我添加的文件是完全一样的)
![](https://i-blog.csdnimg.cn/blog_migrate/f2b1f82607ac3bd3cac59730f000a476.png)
添加完成后,编译。编译完成发现有错误。
![](https://i-blog.csdnimg.cn/blog_migrate/62d0a13b0f1a05cc728e3a16ca880003.png)
错误主要是头文件错误。跳转到错误的地方
![](https://i-blog.csdnimg.cn/blog_migrate/d556526bbc4335f44bab0fe16a45479a.png)
将原先错误的地方注释,换成我图片中的样子。
#include "../../lvgl.h"
![](https://i-blog.csdnimg.cn/blog_migrate/bab89bf23a8706a7c02852569a2274f9.png)
重新编译,发现还有一个错误。这个错误是在events_init.c文件查找不到guider_ui。
![](https://i-blog.csdnimg.cn/blog_migrate/950e21ee5f84f137c889aa1558a31265.png)
guider_ui是在main.c中定义的一个全局变量,我是定义为ui,所以要将main.c的变量ui,通过extern连接至events_init.c文件。
![](https://i-blog.csdnimg.cn/blog_migrate/0bddeb489e8fada4faf19d32ef634449.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fcc2f4640978a620ee3c9fd5dc772b12.png)
连接至events_init.c文件后,需要将events_init.c文件里的所有guider_ui替换为ui。
替换操作见下图。
![](https://i-blog.csdnimg.cn/blog_migrate/e9309853f2ad0d00c3fa4995255a0794.png)
替换完成后,进行编译,没有错误。
![](https://i-blog.csdnimg.cn/blog_migrate/b827d31672ee75d7ad2e129a16ea179b.png)
七、下载验证
初始界面
![](https://i-blog.csdnimg.cn/blog_migrate/8864080f5b675cdc7fb68cdc98c33f3c.jpeg)
按下按钮
![](https://i-blog.csdnimg.cn/blog_migrate/d21c9ff2a189e1bc59540a14949c687f.jpeg)
界面切换
![](https://i-blog.csdnimg.cn/blog_migrate/e03aacff3356db7df26cb6cfbdc59191.jpeg)
八、事件代码修改
这里只讲解btn_sw这个按钮的事件。
![](https://i-blog.csdnimg.cn/blog_migrate/c72db740634c98b7389619dc23a09726.png)
如果需要按钮按下时灯亮,再按时灯灭的效果,只需在事件中断里,添加即可。
![](https://i-blog.csdnimg.cn/blog_migrate/c5f12698489fc393b862e99c3dbb701f.png)
最后注意事项
1、有一些组件的代码是不一样的,需要注意。(我发现时钟就不行)
2、当使用到事件时,需要给事件扫描一个心跳,即多少时间去扫描一次是否有事件发生。
我放在定时器里固定时间扫描一次。
![](https://i-blog.csdnimg.cn/blog_migrate/a453a82decee168c9a5d0335922398e6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7b25002fffbc8de918a9486442f67bda.png)
代码百度网盘连接:
链接:https://pan.baidu.com/s/1Px2P43xuQtCciZlBzeJXOQ?pwd=1234
提取码:1234