目录

概述

1 软硬件环境

1.1 UI开发版本

 1.2 MCU开发环境

1.3 注意点

2  GUI Guider开发UI

2.1 使用GUI Guider创建UI

2.2 GUI Guider编译项目和测试

2.2.1 GUI Guider编译项目

2.2.2 编译

2.3  了解GUI Guider生成代码

3  移植项目

3.1 Keil中加载代码

3.2 调用GUI接口

4 编译项目

5 运行代码 

---

源代码下载地址：

stm32-f407-lcd-lvgl-proj-MusicPlayer资源-CSDN文库

lvgl-demo-MusicPlayer资源-CSDN文库

概述

本文主要介绍使用GUI Guider工具创建一个MusicPlayer的应用程序，并且该程序在GUI Guider上模拟UI的功能，然后将GUI Guider生成的代码移植到基于STM32F407主控MCU的控制板卡上。并测试了UI的功能。

1 软硬件环境

1.1 UI开发版本

软件信息	版本信息
MinGW-w64	MinGW-W64 GCC-8.1.0
Simple Directmedia Layer(SDL)	V2.30.3
CMake	3.30.0-rc2
LVGL	V8.4.0
GUI Guider	1.7.2

 1.2 MCU开发环境

软硬件信息	版本信息
STM32 MCU	STM32F407IGTx
Keil	MDK ARM 5.38
STM32CubeMX	V6.8.1
调试工具：st-link	ST-LINK/V2-1

1.3 注意点

在使用GUI Guider开发UI之前，必须保证lvgl库已经移植完成，并且该库相关的UI能正常工作。相关移植的文档可参看：

基于STM32移植lvgl(V8.2)（SPI接口的LCD）_lvgl lcd-CSDN博客

2  GUI Guider开发UI

2.1 使用GUI Guider创建UI

1) 创建Project

打开GUI Guider，创建项目，选择应用模版，这里选择MusicPlarer，并选择LCD的屏幕大小，笔者使用480X320大小尺寸。

2）设置项目路径和工程名称

3）完成以上配置后，点击下一步完成创建项目步骤，此时可以预览UI

2.2 GUI Guider编译项目和测试

2.2.1 GUI Guider编译项目

点击代码编译，可以看见GUI Guider生成的和项目UI相关的代码，其中最重要的两个目录，分别为：

Custom目录： 包括UI Steup函数、事件相关操作函数

Generate目录：UI相关的数据，包括各个Pannel使用的图片数据、字体数据、页面项目的接口等。

2.2.2 编译

1） 生成代码

出现如下信息，说明生成代码已经完成

2）生成代码后，就可以进行编译

 3）编译代码完成后，系统会生成一个.exe文件。系统此时会自动运行该文件

完成以上步骤，说明生成的代码可以正常工作，此时就可以准备接下来的移植工作。

2.3  了解GUI Guider生成代码

点击工程目录，进行到代码目录中

重点关注custom和generate目录

 在custom目录下生成和UI逻辑关系处理相关的代码

  在generate目录下生成和UI数据关系处理相关的代码

3  移植项目

3.1 Keil中加载代码

在lvgl_project下创建GUI目录，然后将如下两个目录从GUI Guider中copy到GUI目录中。

 1）将custom目录和generate目录中的.c文件全部添加到GUI目录中。

 2）配置项目路径

 3）添加代码后的系统架构

3.2 调用GUI接口

在项目中添加一个User/test目录，编写调用代码

代码5~7行： 添加UI相关的头文件

代码9行： 创建UI对象

代码12行：setup UI，此时相关UI的页面已经被创建出来

代码13行：初始化用户自定义UI，包括创建事件函数

4 编译项目

编写完成调用代码后，此时就可以编译程序，然后下载代码到板卡中。

根据编译信息可知：

此项目需要消耗520K左右的Flash空间，所以必须保证MCU有足够多的空间烧写数据。

Build started: Project: stm32_f407_lcd_proj
*** Using Compiler 'V5.05 update 1 (build 106)', folder: 'd:\Keil_v5\ARM\ARMCC\Bin'
Build target 'stm32_f407_lcd_proj'
compiling lv_mainstart.c...
linking...
Program Size: Code=189488 RO-data=318372 RW-data=816 ZI-data=75480  
FromELF: creating hex file...
"..\..\..\build\stm32_f407_lcd_lvgl_proj\stm32_f407_lcd_proj.axf" - 0 Error(s), 0 Warning(s).
Build Time Elapsed:  00:00:06

5 运行代码 

播放歌曲页面

 切换歌曲页面

 播放新的歌曲页面