立创梁山派GD32F450ZGT6--屏幕扩展板LVGL应用

这篇具有很好参考价值的文章主要介绍了立创梁山派GD32F450ZGT6--屏幕扩展板LVGL应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

该文章工程是基于裸机情况下运行的LVGL,通过GUI-Guider-1.4.0进行页面布局配置。

一、介绍

GUI Guider是恩智浦为LVGL开发了一个上位机GUI设计工具,可以通过拖放控件的方式设计LVGL GUI页面,加速GUI的设计。设计完成的GUI页面可以在PC上仿真运行,确认设计完毕之后可以生成C代码,再整合到MCU项目中。

GUI Guider(Version: 1.3.0-GA)的主要特征:

  1. 支持Windows 10和Ubuntu 20.04。

  1. 支持中文、英文。

  1. 兼容LVGL V7和LVGL V8版本。

  1. 支持拖放的所见即所得(WYSIWYG)用户界面设计。

  1. 多种字体支持及第三方字体导入。

  1. 可定制的中文字符范围。

  1. 小部件对齐方式:左、中、右。

  1. 自动产生LVGL 的C语言源代码。

  1. 支持默认样式和自定义样式。

  1. 演示应用程序集成。

  1. 实时日志显示。

  1. 集成上位机仿真器。

注意!!GUI-Guider会依赖javaJDK,因此需要安装jdk.

接线:

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

二、安装

2.1安装Java-JDK

安装JDK,我使用的JDK见下图(如果你已经安装有JDK,则忽略这里。)

JDK安装我这里就不写了,外面很多大佬关于JDK的安装非常详细。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
2.2安装GUI-Guider

下图为安装包。(我的电脑是64位 WIN10)

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
2.2.1 选择中文(简体)
lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
2.2.2选择同意协议
lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
2.2.3 选择安装路径
lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
2.2.4等待安装完成
lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
2.2.5安装完成
lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

三、创建工程

使用的是立创梁山派的屏幕扩展板,4.3寸,高清的480*800分辨率加5点的电容触摸屏。

详情界面链接:立创·梁山派-屏幕扩展板

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
3.1选择创建新工程

打开软件后,创建新工程。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
3.2选择LVGL版本

这里使用的是V8版本的LVGL。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
3.3选择设备模板
lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
3.4选择应用模板

这里选择了一个空白模板,如果感兴趣可以试一试官方的模板。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
3.5工程配置

屏幕的像素是480x800,我这里选择的16位彩色,面板尺寸自定义为480x800(竖屏显示)。工程路径请务必放在英文路径

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
3.6创建完成

创建完成之后,就是这样啦。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

四、常用组件的应用

4.1标签

点击标签然后拖拽到我们的显示界面上。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
4.1.1标签属性设置

这里主要设置显示的文本内容,和字体。注意:你使用一个字体,它就会生成一个字库给你,所以请慎重考虑内存问题,或者将生成的字库保存至外部FLASH里。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
4.2按钮

点击按钮然后拖拽到我们的显示界面上。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
4.2.1按钮属性设置
lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
4.2.2按钮事件添加

事件是按钮的灵魂,涉及到我们后继代码如何判断按键是否点击

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

事件配置里,如果不随便点一个动作,则软件不会生成按钮事件的C代码,所以我选择修改背景色。后面生成代码后再把这个动作的代码删除。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
4.3图片

点击图片组件然后拖拽到我们的显示界面上。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
4.3.1添加图片资源

点击我们拉出来的图片组件,在属性设置里,添加我们的图片资源。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

在弹出的界面选择添加。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

这里我选择了一张蓝牙的图标。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

添加完成之后,选择这个图片。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

这样就显示出来了。注意,每使用一张图片,都会生成C代码,注意内存问题,或保存至外部FLASH。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
4.4生成第二个界面
lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

返回之后,点击+号,生成第二个界面。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

点击生成的第二个界面,就可以进行编辑了。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
4.5图片按钮(界面切换)

这个图片按钮我们用来进行界面跳转。回到界面一,拉出图片按钮。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

这里推荐一个图标网站,对大多数的图标都可以免费下载。

网站链接:iconfont-阿里巴巴矢量图标库

我下载了返回图标和前进图标。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

将图片加载到我们的图片按钮

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

设置图片按钮的事件为界面切换事件

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

去到第二个界面,设置返回键。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

在返回键添加界面切换事件,让其可以切换到第一个界面

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

五、进行模拟并生成代码

点击绿色按键,选择C。开始模拟运行。(会比较慢)

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

运行效果。视频效果见链接:

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

六、生成代码并且移植

点击生成代码

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

去到这个Demo工程目录下,找到生成的代码。

我之前创建工程时的路径

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

代码就在工程目录的generated和custom文件夹下。将两个文件夹复制到我们的GD32LVGL工程文件夹里。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

将我们之前复制的文件夹替换GD32LVGL工程里之前的文件夹。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

打开我们替换后的GD32LVGL工程。删除之前生成的代码。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

添加我们配置的界面代码。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

添加custom文件夹下的.c文件

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

添加generated文件夹下的.c文件。(界面和配置文件)

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

添加generated文件夹里的guider_fonts文件夹下的所有.c文件。(字库文件)

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

添加generated文件夹里的images文件夹下的所有.c文件。(图片资源文件)

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

最后是这样的。(注意我的字体和图片不一定和你一样,所以不一定是和我添加的文件是完全一样的)

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

添加完成后,编译。编译完成发现有错误。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

错误主要是头文件错误。跳转到错误的地方

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

将原先错误的地方注释,换成我图片中的样子。

#include "../../lvgl.h"

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

重新编译,发现还有一个错误。这个错误是在events_init.c文件查找不到guider_ui。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

guider_ui是在main.c中定义的一个全局变量,我是定义为ui,所以要将main.c的变量ui,通过extern连接至events_init.c文件。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

连接至events_init.c文件后,需要将events_init.c文件里的所有guider_ui替换为ui。

替换操作见下图。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

替换完成后,进行编译,没有错误。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

七、下载验证

初始界面

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

按下按钮

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

界面切换

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

八、事件代码修改

这里只讲解btn_sw这个按钮的事件。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

如果需要按钮按下时灯亮,再按时灯灭的效果,只需在事件中断里,添加即可。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

最后注意事项

1、有一些组件的代码是不一样的,需要注意。(我发现时钟就不行)

2、当使用到事件时,需要给事件扫描一个心跳,即多少时间去扫描一次是否有事件发生。

我放在定时器里固定时间扫描一次。

lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档
lvgl上位机,立创梁山派GD32,stm32,单片机,Powered by 金山文档

代码百度网盘连接:

链接:https://pan.baidu.com/s/1Px2P43xuQtCciZlBzeJXOQ?pwd=1234

提取码:1234 文章来源地址https://www.toymoban.com/news/detail-543160.html

到了这里,关于立创梁山派GD32F450ZGT6--屏幕扩展板LVGL应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • GUI——LVGL移植+STM32f407zgt6(正点原子最小系统板+GUI Guider

    首先是GUI Guider的介绍 GUI Guider是NXP公司开发的一个图形化软件,对于初学GUI或者写ui界面的小白们非常合适,也非常方便,现在就示例写一个demo  首先是初始化界面,在相应的位置填写相关信息(文件名,是否使用模板,以及数据位,最重要的 是大小),这个显示的大小要和

    2023年04月24日
    浏览(58)
  • STM32F407ZGT6正点原子F4探索者开发板 -- 跑马灯例程

    LED0 - PF9 LED1 - PF10 PF9 = 0, LED0 亮,PF9 = 1,LED0 灭 PF10 = 0, LED1 亮,PF10 = 1,LED1 灭

    2024年02月15日
    浏览(56)
  • STM32F407ZGT6控制ESP8266与OV2640下的百度智能图片识别

    前言: STM32F407ZGT6控制OV2640下采集到JPG图片格式的二进制数据,然后对二进制数据进行BASE64编码,接着通过串口将数据传输给ESP8266并上传至训练好的EASYDL的AI算法识别平台进行识别并返回垃圾种类与边缘信息。 STM32与ov2640 ov2640简绍 stm32f407zgt6之dcmi stm32f407zgt6代码 main.c main.h l

    2024年02月04日
    浏览(55)
  • 在Proteus中添加元件库所没有的单片机芯片(STM32F407ZGT6为例)

    今天在画仿真图时发现proteus元件库里的stm32系列并没有我所需要的。通过百度才到了官网下载相应的元件,后自己导入到元件库! 1、官网链接为:https://componentsearchengine.com/part-view/STM32F407ZGT6/STMicroelectronics 先注册账号后下载相应的元件即可。 2、解压元件的压缩包 3、打开p

    2024年02月16日
    浏览(59)
  • 十四.EtherCAT开发之ST MCU STM32F407ZGt6+ AX58100的开发FOE应用

    STM32F407ZGt6与AX58100是 SPI连接,工作在SPI模式。 FoE(File Access over EtherCAT)可实现EtherCAT节点之间的文件传输。 boot mode与FOE支持 FOE 说是要在状态机的boot mode下运行,实际测试了在OP模式也能收数据。可能是为了稳定,减少出错把,毕竟是升级固件。 14.1.1 XML支持字段 XML名称—AX58

    2024年02月10日
    浏览(41)
  • EFR32xG21烧录_自己购买扩展板

    最近有用到EFR32xG21,新的开发板好像是不带之前的扩展板了,想要采用开发板扩展烧录的话 ,最好自己购买一个扩展板,淘宝就有,注意排针pin脚和间距。 原理 原理上还是通过jlink 烧录的 过程 1.设置开发板为OUT模式 2.通过转接板,接线到模板,原理还是通过开发板自带jl

    2024年02月13日
    浏览(43)
  • 论如何零基础stm32手搓出来一个多传感时间同步板(基于STM32F407ZGT6+um982+mti300)

    时间同步是组合导航里不得不解决的问题,为什么要做时间同步,用我自己的理解来说就是:不做时间同步,那就是用从前的A传感器信息来校正当前的B传感器信息,两者都不是描述的同一个时间点的物体,融合出来的结果能对才是见了鬼了。 (ps:以工程经验来说,其实不少

    2024年01月25日
    浏览(65)
  • 基于STM32的pca9535、pca9555IO扩展板开发

    之前使用的pca9535由于芯片本身有些中断问题和采购问题,目前换成了pca9555的IO扩展芯片来使用,本文章适用于这两款芯片。 编译器: keil5 工程库: HAL库 芯片型号:STM32F072 pca9535和pca9555基本一样,这里我就主要说9535的手册了。 手册下载地址网上有很多,直接去百度搜索就行

    2024年02月11日
    浏览(43)
  • 关于STM32F407ZGT6的USB损坏后使用ST-Link和USART1实现串口功能

    开发板:STM32F407ZGT6; 目标:想使用软件“串口调试助手” 情况:开发板上的USB_UART口所在器件损坏或者直接没有;   解决办法:查看该开发板的原理图,可得:串口1的RX接TXD,串口1的TX接RXD,那么按如下步骤操作: 1、现在使用USB转TTL模块,将串口1的RX接USB转TTL模块的TXD,

    2024年02月08日
    浏览(49)
  • STM32F407ZGT6单片机连接ST_LINK和USB转TTL的接线方法+舵机接线方法

    目录 1.STM32F407ZG单片机连接ST_LINK 2.STM32F407ZG单片机连接USB转TTL(用于串口通信) 3  舵机 单片机             ST_LINK      9--------------------6      7--------------------2      20------------------3/4      1--------------------7/8  这里附上具体的接线图片: 单片机      USB转TTL TX————

    2024年02月02日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包