lvgl的应用:移植MusicPlayer(基于STM32F407)

2024-06-20 08:36

本文主要是介绍lvgl的应用:移植MusicPlayer(基于STM32F407),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

概述

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-w64MinGW-W64 GCC-8.1.0
Simple Directmedia Layer(SDL)V2.30.3
CMake3.30.0-rc2
LVGLV8.4.0
GUI Guider1.7.2

 1.2 MCU开发环境

软硬件信息版本信息
STM32 MCUSTM32F407IGTx
KeilMDK ARM 5.38
STM32CubeMXV6.8.1
调试工具:st-linkST-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 运行代码 

播放歌曲页面

 切换歌曲页面

 播放新的歌曲页面

这篇关于lvgl的应用:移植MusicPlayer(基于STM32F407)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1077628

相关文章

Python使用Tkinter打造一个完整的桌面应用

《Python使用Tkinter打造一个完整的桌面应用》在Python生态中,Tkinter就像一把瑞士军刀,它没有花哨的特效,却能快速搭建出实用的图形界面,作为Python自带的标准库,无需安装即可... 目录一、界面搭建:像搭积木一样组合控件二、菜单系统:给应用装上“控制中枢”三、事件驱动:让界面“活”

如何确定哪些软件是Mac系统自带的? Mac系统内置应用查看技巧

《如何确定哪些软件是Mac系统自带的?Mac系统内置应用查看技巧》如何确定哪些软件是Mac系统自带的?mac系统中有很多自带的应用,想要看看哪些是系统自带,该怎么查看呢?下面我们就来看看Mac系统内... 在MAC电脑上,可以使用以下方法来确定哪些软件是系统自带的:1.应用程序文件夹打开应用程序文件夹

Python Flask 库及应用场景

《PythonFlask库及应用场景》Flask是Python生态中​轻量级且高度灵活的Web开发框架,基于WerkzeugWSGI工具库和Jinja2模板引擎构建,下面给大家介绍PythonFl... 目录一、Flask 库简介二、核心组件与架构三、常用函数与核心操作 ​1. 基础应用搭建​2. 路由与参

Spring Boot中的YML配置列表及应用小结

《SpringBoot中的YML配置列表及应用小结》在SpringBoot中使用YAML进行列表的配置不仅简洁明了,还能提高代码的可读性和可维护性,:本文主要介绍SpringBoot中的YML配... 目录YAML列表的基础语法在Spring Boot中的应用从YAML读取列表列表中的复杂对象其他注意事项总

电脑系统Hosts文件原理和应用分享

《电脑系统Hosts文件原理和应用分享》Hosts是一个没有扩展名的系统文件,当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从Hosts文件中寻找对应的IP地址,一旦找到,系统会立即打开对应... Hosts是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》:本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细,详细内容请阅读本文,希望能对你有所帮助... 一、外部 css(推荐方式)定义:将 CSS 代码保存为独立的 .css 文件,通过 <link> 标签

Python使用Reflex构建现代Web应用的完全指南

《Python使用Reflex构建现代Web应用的完全指南》这篇文章为大家深入介绍了Reflex框架的设计理念,技术特性,项目结构,核心API,实际开发流程以及与其他框架的对比和部署建议,感兴趣的小伙... 目录什么是 ReFlex?为什么选择 Reflex?安装与环境配置构建你的第一个应用核心概念解析组件

C#通过进程调用外部应用的实现示例

《C#通过进程调用外部应用的实现示例》本文主要介绍了C#通过进程调用外部应用的实现示例,以WINFORM应用程序为例,在C#应用程序中调用PYTHON程序,具有一定的参考价值,感兴趣的可以了解一下... 目录窗口程序类进程信息类 系统设置类 以WINFORM应用程序为例,在C#应用程序中调用python程序

Java应用如何防止恶意文件上传

《Java应用如何防止恶意文件上传》恶意文件上传可能导致服务器被入侵,数据泄露甚至服务瘫痪,因此我们必须采取全面且有效的防范措施来保护Java应用的安全,下面我们就来看看具体的实现方法吧... 目录恶意文件上传的潜在风险常见的恶意文件上传手段防范恶意文件上传的关键策略严格验证文件类型检查文件内容控制文件存储

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2