目录
源代码下载地址：
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能正常工作。相关移植的文档可参看：
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 运行代码
播放歌曲页面
切换歌曲页面
播放新的歌曲页面
