LVGL GUI GUIDER移植代码到STM32

一、安装软件

二、创建一个简单的工程

路径最好不要有中文
在这里插入图片描述
拖一个按钮
在这里插入图片描述
可以启动模拟器看看效果.

三、添加文件

1.创建路径

stm32工程新建GUI文件夹(名字任意,看你喜欢)
在这里插入图片描述
GUI文件夹内再新建如图文件夹
在这里插入图片描述

2.复制gui生成的文件到stm32工程中

文件较多,要仔细
复制LVGL源文件(图中左边目录是gui工程的路径,右边是stm32工程的路径)
在这里插入图片描述
应用文件
在这里插入图片描述
移植文件(改不改名无所谓,看个人喜欢)
在这里插入图片描述
配置文件
在这里插入图片描述
头文件
在这里插入图片描述
终于复制完了,开始修改工程啦!

四、修改stm32工程实现界面显示

同样修改的地方很多要仔细

1.添加C文件路径

创建3个文件夹
在这里插入图片描述
添加应用文件
在这里插入图片描述
添加移植文件
在这里插入图片描述
添加源文件
(当然也可根据所需添加,但是为了避免出错或懒得整理直接全部添加就行了)
在这里插入图片描述

2.添加头文件路径

在这里插入图片描述

3.修改头文件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.修改源文件

启用该文件
在这里插入图片描述
选择一个实例,如果内存够大可以将缓存改大点或用双缓存,提高刷屏速度。
在这里插入图片描述
在这里插入图片描述
填充屏幕刷新绘制
在这里插入图片描述
启用触摸等输入
在这里插入图片描述

5.添加应用到主程序

在这里插入图片描述

6.添加lvgl“心跳”

可以有很多种方式,这里简单点用了一个定时器。
在这里插入图片描述

7.修改堆栈

在这里插入图片描述
至此大功告成

8.编译下载

若编译出错,仔细看看是不是缺或错步骤了。
看效果是不是还挺不错
在这里插入图片描述
显示部分到此就结束了,后面说说事件的响应。

五、添加事件实现对触控的响应

1.移植触摸驱动

触摸接口一般是iic或spi,以正点原子的触摸为例,只需要这三个文件
在这里插入图片描述

在这里插入图片描述

2.触控移植到lvgl

观察lv_port_indev.c文件会发现触控的框架已经搭建的很完善了,我们要做的就只是将触摸屏的坐标数据给到lvgl。框架中包含了触控、鼠标、键盘、按钮、编码器,我们只用常见的触控和按钮就好。

lv_port_indev_init 函数中只保留touchpad和button相关的,其余注释掉,如下图:
在这里插入图片描述
在这里插入图片描述
添加驱动
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
到这里就移植好了驱动了,在初始化调用lv_port_indev_init后,触摸驱动会被注册到LVGL
在这里插入图片描述

注册到LVGL其实就是创建了一个受lvgl控制的任务,可以看做一个线程,而任务的时基由调用函数lv_tick_inc()实现。

3.添加触控事件

再次打开gui guider 添加如图的事件,重新生成代码,将events_init.c文件替换到工程
在这里插入图片描述
再稍作填充即可
在这里插入图片描述
这样就完成了按钮按下的事件绑定,至于如何将坐标映射到具体按钮的过程就不需要我们关心了,lvgl已经帮我们实现了,我们做的就只是绑定到控件,非常方便。

再试试,按下按钮后发现能变红色了。
在这里插入图片描述

六、添加事件实现对按钮的响应

1.添加按键对应的控件的坐标

在这里插入图片描述

2.添加按钮初始化

在这里插入图片描述

3.修改按键返回ID

在这里插入图片描述
这样就可以啦,按键是很灵活的,其实不一定要按照框架来实现,完全可以自己实现在按键按下的时候去调用某个事件会更快更直接。

七、其他

1.修改字体

修改调用即可
在这里插入图片描述
界面设计更新后直接再将生成代码的generated文件夹内容替换到lvgl_app文件夹,再稍微修改即可

2.中文显示

1).gui guider生成字体
在这里插入图片描述

2).字体添加到工程

复制文件
在这里插入图片描述
添加到工程目录
在这里插入图片描述
添加声明,名称和字体结构体名称一致
在这里插入图片描述
在这里插入图片描述
修改字符编码为utf-8(不修改的话编译出来是无效的)
在这里插入图片描述
在控件生成函数中修改显示文字及字体
在这里插入图片描述
编译下载则可显示中文了
在这里插入图片描述

3.加快刷屏速度

提高缓冲区大小或使用双缓存
在这里插入图片描述

后话

虽然lvgl宣称占用资源极少,但是对于空间紧张的单片机来说还是占用太多了,尤其是内存,稍微用复杂的控件就得分配大块的内存,否则在运行几次之后就会卡住或者直接就没法显示。如果要显示好看的复杂的界面还是得外扩内存及flash,用上更好的CPU才行,否则还是用基本的绘图吧。
另外,gui guider目前也有不足的点,生成代码稍微有点慢,不支持最新版本的库。

  • 8
    点赞
  • 72
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值