大家好,我是杂烩君。
嵌入式大杂烩周记主要是一些实用项目学习分享,每周一篇,每篇一个主题。
内容主要来源于我们之前收集的资料:
https://gitee.com/zhengnianli/EmbedSummary
本期主角:LingLongGUI
玲珑GUI是高效的界面开发解决方案。
-
代替串口屏、组态,降低产品成本,产品软硬件自主可控。
-
配套界面开发软件,图形化编辑界面,生成C代码,直接和用户产品代码结合。
-
配套下载升级软件和bootloader,解决产品升级功能和图片下载问题。
玲珑GUI源码地址:
https://gitee.com/gzbkey/LingLongGUI
license:Apache License, Version 2.0 + 附加协议。
关于开源软件协议相关文章:常用的开源协议有哪些?
教程链接:
https://www.yuque.com/books/share/3317aaa7-f47f-4bfd-a4c2-7e64e7f1c4be
LingLongGUI的使用
下面,我们通过一步一步地实践来认识认识LingLongGUI。
其实我们可以不下载源码,仅下载LingLongGuiBuilderTool工具即可,LingLongGuiBuilderTool是LingLongGUI配套的界面开发软件,通过拖拽控件的方式设计界面并生成代码。
注意:以下操作基于LingLongGuiBuilderTool_2022.1.18版本,不同的LingLongGuiBuilderTool版本可能操作不一样。
1、LingLongGuiBuilderTool里自定义屏幕分辨率
LingLongGui的作者有自己设计了几款开发板:
![007f1df85ff75221e892aa0f86d7340b.png](https://i-blog.csdnimg.cn/blog_migrate/733bd219658fbff50df683b29eae03df.png)
其LingLongGuiBuilderTool工具默认只支持这几款开发板。LingLongGuiBuilderTool安装路径中的配置文件deviceType.ini中的内容如:
![a94052dbf4d4e7d50fa7ef970ab3255f.png](https://i-blog.csdnimg.cn/blog_migrate/ffc619eaf1b1a74be3ce0a1d1d19b113.png)
温馨提示:ini配置文件相关推文可转至嵌入式开发小记,实用小知识分享
下面的操作中,我们没有使用官方开发板来做实验,所以需要在配置文件里新增我们开发板的配置。我们使用小熊派IOT开发板来做实验,添加的内容如:
![d2e15877f81e17ff78ce476a5001df4c.png](https://i-blog.csdnimg.cn/blog_migrate/1069122f9e6245c771b39e1707605099.png)
2、实践
实践步骤,上面的教程写得很清楚,下面跟着走一遍:
(1)准备一份LCD显示的例程。
(2)keil设置
-
keil Options for Target -- C/C++ -- 勾选C99
-
keil Options for Target -- C/C++ -- Misc Controls 填入
--no-multibyte-chars --locale=english
![3aeb4a1d266ff034930efae78d28f7cf.png](https://i-blog.csdnimg.cn/blog_migrate/7355ebc69bebeac594ffe7ac09700457.png)
AC5必须填入--no-multibyte-chars,AC6则不需要
(3)启动gui builder,keil -- tools --LingLongGuiBuilder
![e7c9efae16461324fb1cc8a048c481d1.png](https://i-blog.csdnimg.cn/blog_migrate/11c9afd3063346601d5f49f978912d8c.png)
![f09101e29f513f751cb3d1f3a08b7270.png](https://i-blog.csdnimg.cn/blog_migrate/46b54f21a637bf862c2d805d613d39d1.png)
![90c19eed6259ce88ed8025b8756bebf0.png](https://i-blog.csdnimg.cn/blog_migrate/858263e6e0d505d8848e2f4e0bb50219.png)
新建一个UI File,然后拖动控件设计我们的界面:
![78bf14b1d7da80372c753c00f96b8ebe.png](https://i-blog.csdnimg.cn/blog_migrate/7729bb5512812e6e02f5e22b767a4b69.png)
设计完成后 保存文件及工程
,然后点击左上角绿色三角形按钮或者点击Tool->Generate可生成对应GUI代码源文件存放于我们的工程目录下及自动添加到工程里:
![99f1c628c6998ebaa01d4ee268e313b0.png](https://i-blog.csdnimg.cn/blog_migrate/aa4c674f7a273a06e9cab7de87776a2b.png)
![bb3fb66b202169e17a4912ff7b717f0c.png](https://i-blog.csdnimg.cn/blog_migrate/8d818456b360b63941bc936f41ceffc1.png)
编译看看有没有报错:
![d2bc2e010123f444771b700cb18f3690.png](https://i-blog.csdnimg.cn/blog_migrate/8f79236912eb2d8911d638eda7e7aaef.png)
如果报大量错误的话看看keil Options for Target是否按照上面的步骤进行修改。如果报如下错误:
![c841eb92b6c501ead443f44819e8fce9.png](https://i-blog.csdnimg.cn/blog_migrate/5e35adb2fd29576649f2b19a2a49e3e3.png)
把LL_Config.h里的宏 USE_LLGUI_EX
屏蔽掉即可:
![e7849e7ce2fc31fc281f2d4d69694691.png](https://i-blog.csdnimg.cn/blog_migrate/48926b5e927852cda932344f0818393e.png)
编译报了一些警告,这些警告是LLGUI相关的,一些变量定义未使用等警告,我们这里不管它们,也可以在keil Options for Target -- C/C++ -- Misc Controls加入如下内容屏蔽相关警告编号的警告:
--diag_suppress=xxx (这里的xxx表示警告的编号)
比如屏蔽掉550号警告:
--diag_suppress=550
相关内容可参考文章:
https://www.cnblogs.com/svchao/p/13917877.html
编译未报错我们再往下看。
(4)修改llGui\User下的LL_Config.c文件
![d2974914e1ef9c3b123843103ff74433.png](https://i-blog.csdnimg.cn/blog_migrate/27bf9816f511a84c4c5b40230b03e27c.png)
修改如:
![4114e54a56f6a9805d85ea2f6bd61061.png](https://i-blog.csdnimg.cn/blog_migrate/a6c8774d2692948eb4edcece98ec92b5.png)
LL_Config.c添加lcd.h包含:
![72f27bca02be6d53e9d94b257c3f8e35.png](https://i-blog.csdnimg.cn/blog_migrate/1514b51944b4e7d0be37271a18797aa1.png)
(4)修改LL_Config.h中的屏幕参数
![0e8d7b0a149d9fe9257e80c6714c7a05.png](https://i-blog.csdnimg.cn/blog_migrate/1a61eb288cf24343e0109337f8020973.png)
(5)增大堆的大小
![70e05eae464f8f48592491c22c01ab55.png](https://i-blog.csdnimg.cn/blog_migrate/a3a6d007cfa4fe8abe9b3ae7772a995e.png)
否则可能无法正常显示:控件无法显示或显示不全。
(5)在main.c中添加如下内容
#include "ui_test.h"
int main(void)
{
ui_testInit();
while(1)
{
}
}
![1ee61ba8bf680d8422ab060c9637a1ef.png](https://i-blog.csdnimg.cn/blog_migrate/0f3bc1074ce9cdecf4bf1bc0c3bb746c.png)
![d97ec5c86303ed8b23d2c4f3cb7d33c7.png](https://i-blog.csdnimg.cn/blog_migrate/57a3d2e263b877c111378020b01f66e7.png)
编译、下载即可看到我们刚才在LingLongGUIGuilderTool里设计的界面了:
通过上面的操作,我们发现LingLongGUI很容易地移到我们的工程里。
对比其它GUI,我们移植其它GUI时,可能需要自己新建、复制一些文件夹/文件到我们的工程目录下,再手动添加到keil工程里,再挨个添加头文件包含路径,这些操作挺烦人的。
而使用LingLongGUI时,通过LingLongGUIGuilderTool可以很方便地设计我们的UI界面、生成代码并自动添加到keil工程工程中,省了不少事!
另外,还有很方便的一点:
当LingLongGUI远程仓库有更新时,可以直接在生成的LingLongGUI文件夹下通过git来拉取最新代码:
![d35ac00b9ad7681f0bb88a0e1f0cf820.png](https://i-blog.csdnimg.cn/blog_migrate/de5a990eb70847c8e86864c4d96f0f28.png)
![de5f938d71a009b851a164db52a6ad39.png](https://i-blog.csdnimg.cn/blog_migrate/26b0ce085789cc4f84a7b5acc607e303.png)
LingLongGUI现在还处于起步阶段,还在不断完善优化中,势头还可以,大家可持续关注。
以上就是本次的分享,我们下期见~