返回列表 发新帖我要提问本帖赏金: 80.00元(功能说明)

[GUI] AT32移植LVGL V9.2.2并使用NXP GUI Guider设计UI界面

[复制链接]
 楼主| 骑着蜗牛狂奔O 发表于 2025-3-19 17:21 | 显示全部楼层 |阅读模式
<
本帖最后由 muyichuan2012 于 2025-3-19 17:46 编辑

#申请原创#     
AT32移植LVGL V9.2.2并使用NXP GUI Guider设计UI界面
一、概述
本文描述了NXP GUI Guider从安装到使用的具体步骤

本文移植了LVGL V9.2.2到AT32F437和AT32F403A

具体使用的板子为AT-SURF-F437 V1.0和AT-START-F403A + TFT LCD Touch Demo Board v1.0 + ALIENTEK 4.3 TFTLCD,相关板子资料可到雅特力官网下载

二、GUI Guider简介
‌开发背景‌
针对LVGL图形库在UI工具方面的不足,恩智浦于2021年初推出GUI-Guider,主要用于帮助开发者快速创建和设计基于LVGL框架的用户界面
‌技术基础‌
基于开源LVGL框架(MIT协议),兼容C/C++语言,提供丰富的图形组件和动画效果,适用于资源受限的MCU环境‌。
软件获取
1.官网下载:打开网址搜索GUI Guider,选择适合自己的系统的版本下载安装,https://www.nxp.com.cn/
2.百度云盘:链接: https://pan.baidu.com/s/1cWSpqlga-vfcK81EyfsQXg 提取码: 5bzj

三、GUI Guider核心功能
‌可视化设计‌
提供拖拽式编辑器,支持创建多屏幕布局、调整控件属性及动画效果,开发者无需手动计算坐标位置即可完成界面设计‌
‌资源管理‌
内置资源管理器,支持导入自定义图片、字体及图标,并自动优化资源存储结构‌
‌代码生成‌
设计完成后,可一键生成与LVGL兼容的C代码,适用于模拟器和嵌入式设备‌
‌多种屏幕规格‌
用户可以根据硬件屏幕规格选择合适的设备面板,并生成相应的代码‌

三、GUI Guider安装和使用步骤
1.双击安装包,安装软件,选择“中文(简体)”,然后点击“OK”

1.png

2. 点击“我同意”

2.png

3.选择安装方式,然后再点击“下一步”

3.png

4.设置安装目录,点击“安装”

4.png

5.等待安装完成

5.png

6.点击“完成”

6.png

7.登录NXP账号,如果没有NXP账号,可以点击下方“CREATE AN ACCOUNT”申请账号

7.png

8.点击“NEXT”

8.png

9. 点击“NEXT”

9.png

10. 总共有12个调查问卷,填写好了就点击“NEXT”

10.png

11.填写完成后点击“Done”

11.png

12.填写完成

12.png

13.新建工程,点击“Createaa new project”

13.png

14.选择V9.2.1,点击“Next”

14.png

15.选择“Simulator”,点击“Next”

15.png

16.选择EmptyUI,点击“Next”

16.png

17.设置工程参数
1)Project Name:工程名字
2)Project Directory:工程保存路径
3)Color Depth:颜色深度
4)Panel Type:屏幕尺寸,我这里选的用户自定义
5)屏幕尺寸设置,根据实际设置
6)点击“Create”,完成工程设置

17.png

18.另外屏幕尺寸也可以选择软件自带的

18.png

19.工程设置好后显示此界面

19.png

20.
1)点击“English”
2)设置语言为中文
3)点击此图标,展开控件栏

20.png

21.点击此图标,完全展开控件

21.png

22.依次点击“按钮”和“滑动条”,会自动放到右边屏幕上,鼠标可以调整两个控件的位置和大小

22.png

23.代码生成:选择C编译,开始编译代码

23.png

24.点击“确认”

24.png

25.等待编译完成后,会自动弹出模拟器,然后可以通过鼠标点击按钮,拖动滑块,模拟实际操作

25.png

26.将生成的代码移植到MCU上,我们之前设置工程路径下在编译完成后会生成一个“generated”文件夹,我们需要移植此文件夹

26.png

27. 将“generated”文件整体拷贝到AT32的工程下面

27.png

28.需要将“generated”文件夹的所有.c、.h文件添加到KEIL工程里

28.png

29. 将所有.c添加到KEIL工程里

29.png

30. 将所有.h路径添加到KEIL工程里

30.png

31.屏蔽“setup_src_screen.c”如下位置代码

31.png

32.修改“main.c”如下位置代码

32.png

33.编译整个工程

33.png

34.下载程序到AT-SUFR-F437板子上,即可看到和模拟器上相同的界面

34.PNG

35. 同样的流程,配置AT32F403A工程,下载到板子上,即可看到和模拟器上相同的界面

35.PNG

36.上述代码已经打包好放入附件,具体内容介绍如下

36.png

LVGL_V9.2.2.rar

48.8 MB, 下载次数: 225

打赏榜单

21小跑堂 打赏了 80.00 元 2025-03-25
理由:恭喜通过原创审核!期待您更多的原创作品~

评论

从NXP GUI Guider的安装到简单的UI设计,快速搭建用户界面,并移植到AT3平台,实现快速的UI界面开发设计。  发表于 2025-3-25 16:14
问天少年 发表于 2025-3-19 17:35 | 显示全部楼层
雅特力有GUI设计软件吗
 楼主| 骑着蜗牛狂奔O 发表于 2025-3-19 17:48 | 显示全部楼层
问天少年 发表于 2025-3-19 17:35
雅特力有GUI设计软件吗

据我了解,应该是没有的,之前看到新闻LVGL官方今年好像会出GUI设计软件
可怜的小弗朗士 发表于 2025-3-19 17:58 | 显示全部楼层
用ST那个GUI设计软件行不行,好像是LVGL
瞌睡虫本虫 发表于 2025-3-19 21:21 | 显示全部楼层
这些步骤的执行效果怎么样呀,是不是很流畅,有没有卡顿或者闪退的情况
osesemi 发表于 2025-3-20 07:48 | 显示全部楼层
感谢分享
strang 发表于 2025-3-20 08:26 | 显示全部楼层
NXP GUI Guider没有LVGL官方的SquareLine控件样式多,SquareLine免费的有控件限制。
[鑫森淼焱垚] 发表于 2025-3-20 09:55 | 显示全部楼层
strang 发表于 2025-3-20 08:26
NXP GUI Guider没有LVGL官方的SquareLine控件样式多,SquareLine免费的有控件限制。

SquareLine Studio 已经和 LVGL 分家了
strang 发表于 2025-3-20 10:29 | 显示全部楼层
分家有点可惜了
电竞孔乙己 发表于 2025-3-20 20:39 | 显示全部楼层
这个就挺好用了,免费的这个效果。
呐咯密密 发表于 2025-3-24 11:04 | 显示全部楼层
虽然实现的界面简单,但是这个方法好用。
21小跑堂 发表于 2025-3-25 16:16 | 显示全部楼层
大佬下次申请原创也请 @21小跑堂 哦,以便更快更及时地审核您的作品~~
yiy 发表于 2025-3-26 21:05 | 显示全部楼层
没看到如何绑定该单片机到LVGL啊
ZHI123456 发表于 2025-3-30 10:50 | 显示全部楼层
为啥我移植LVGL,用guider 生成的东西,只显示一半的?
goyhuan 发表于 2025-6-14 18:00 来自手机 | 显示全部楼层
用GUI占空间大不?
您需要登录后才可以回帖 登录 | 注册

本版积分规则

55

主题

140

帖子

4

粉丝
快速回复 在线客服 返回列表 返回顶部