我在前面一篇文章《基于APM32F427的LVGL的UI界面开发——移植LVGL一》完成了LVGL的移植了下面我们基于这个工程进行LVGL的UI界面开发。进行UI界面开发我们不需要自己编写绘制界面的代码因为那样的代码很繁琐下面我将介绍如何使用 NXP 的 GUI Guider 软件绘制图形界面然后把生成的LVGL界面代码添加到工程实现绘图。1. GUI Guider软件的介绍和安装GUI Guider就是NXP的一款LVGL UI界面设计软件设计的界面可以生成LVGL代码然后导入我们的项目中也可以在他这个软件模拟开发。最重要的事这个软件免费使用。可以到下面官网下载和安装这个软件。官网https://www.nxp.com.cn/design/design-center/software/development-software/gui-guider:GUI-GUIDER下载完之后根据提示安装即可。2. GUI Guider软件使用和界面设计首次打开GUI Guider软件需要登陆NXP的账号到官网注册一下。2.1 新建GUI Guider工程1、打开GUI Guider。2、选择LVGL版本这里选择V8版本。3、选择模拟器运行当然也可以选择NXP已经做好的各种开发板运行的环境。4、选择空白的UI界面。也有NXP做好的各种界面示例供我们选择学习这个软件的UI开发那些NXP的示例也是很好的学习资料。5、设置工程名称保存路径还有显示屏的像素深度和分辨率等参数。2.2 整体界面介绍新建工程进入之后整体界面如下。最主要的恩就是常用的各种控件。2.3 添加控件进行界面设计1、点击左侧的控件栏可以拖拽各种控件的。我们拖拽一个按钮。2、添加标签调整屏幕背景颜色等等。3、支持中文字体。GUI Guider默认支持的中文字体是思源黑体。如果我们需要支持其他字体可以自己导入字体文件到这个软件。下面比如支持按钮的中文显示。以上就是一些简单的控件界面设计介绍其他控件使用大家可以自行摸索。2.4 如何添加事件每个控件都有他对应的各种LVGL事件的比如按钮有按下事件聚焦事件等等控件有什么事件可以查看LVGL对于各个控件的介绍。下面我们介绍下如何在GUI Guider软件对按钮控件添加事件。1、打开事件添加界面。2、添加按钮控件事件。以上就是添加了一个按钮的按下事件事件的响应代码可以是针对其他控件的呃也可以是自己自定义的代码。这里我示范演示按钮按下事件则改变标签1显示的内容。2.5 仿真运行设计的LVGL界面前面把界面设计和事件添加玩之后一个简单的界面就完成设计了。下面我们运行模拟器模拟界面的运行。1、生成C代码。2、模拟器运行结果。3. 把生成的界面代码移植到APM32F427显示3.1 生成的代码介绍前面模拟器运行之后就好生成LVGL绘图的代码。我们可以找到刚刚保存的目录如下生成的LVGL绘图代码主要时generated目录然后custom目录是用户绘图时的自定义代码。我们移植GUI Guider生成的代码主要就是把这两个目录的代码添加到我们的工程项目即可。下面我们介绍如何移植和添加到工程项目。3.2 复制生成的代码以及Keil工程配置1、把GUI Guider生成的绘图代码复制到自己的工程项目以便备用。2、打开自己的Keil工程项目添加文件。3、添加Keil编译路径。4、编译解决报错问题。编译结果如下可以看到有很多报错问题这个需要自己根据报错信息一一解决。解决过程我不记录了都是少了什么头文件啊或者啥根据报错提示解决即可。3.3 主函数代码的移植添加完成代码之后我们最重要的就是在主函数调用刚刚添加生成的代码的入口主函数代码如下复制#include main.h/* Private includes *******************************************************/#include apm32f4xx_device_cfg.h#include string.h#include stdbool.h#include log.h#include lvgl.h#include gui_guider.h#include events_init.h/* External variables *****************************************************/extern UART_HandleTypeDef huart1;/* External functions *****************************************************//***brief Main program** param None** retval None*/int main(void){/* Device configuration */DAL_DeviceConfig();setup_ui(guider_ui);events_init(guider_ui);/* Infinite loop */while (1){lv_task_handler();DAL_Delay(5);}}实际上最主要的就算在主函数调用UI界面代码的入口函数 setup_ui(guider_ui); 以及事件代码的初始化函数 events_init(guider_ui); 。调用了这两个函数之后生成的界面代码就运行起来了。以后添加的其他代码我们根据自己的项目情况添加界面控件或者其他事件的自定义代码等。4. 下载到APM32F427的运行效果前面移植添加完代码之后就可以烧录到板子进行运行代码了。我们这个工程是基于前面文章介绍已经把LVGL移植好了的工程。烧录代码至板子运行结果如下可以看到移植到具体的硬件项目我们运行的效果和在GUI Guider运行的效果是一模一样的。所以我们使用这个软件进行 LVGL 的 UI 界面设计是非常方便的不需要我们编写绘制界面的代码。下面的附件是生成的工程源码以供大家参考。Gui_Guider_Demo.zip(51.85 KB, 下载次数: 0)---------------------作者luobeihai链接https://bbs.21ic.com/icview-3501528-1-1.html来源21ic.com此文章已获得原创/原创奖标签著作权归21ic所有任何人未经允许禁止转载。