骑着蜗牛狂奔O 发表于 2025-3-19 17:21

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

本帖最后由 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”


2. 点击“我同意”


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


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


5.等待安装完成


6.点击“完成”


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


8.点击“NEXT”


9. 点击“NEXT”


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


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


12.填写完成


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


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


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


16.选择EmptyUI,点击“Next”


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


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


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


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


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


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


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


24.点击“确认”


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


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


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


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


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


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


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


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


33.编译整个工程


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


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


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


问天少年 发表于 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

这些步骤的执行效果怎么样呀,是不是很流畅,有没有卡顿或者闪退的情况

丙丁先生 发表于 2025-3-20 06:52

感谢分享。

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 生成的东西,只显示一半的?
页: [1]
查看完整版本: AT32移植LVGL V9.2.2并使用NXP GUI Guider设计UI界面