返回列表 发新帖我要提问本帖赏金: 50.00元(功能说明)

[GUI] 使用RTE在Keil MDK中快速移植LVGL

[复制链接]
 楼主| yuyy1989 发表于 2025-7-21 09:40 | 显示全部楼层 |阅读模式
<
@21小跑堂 #申请原创#
RTE(Run-Time Environment)是Keil官方针对Keil出的一个快速配置项目工程的一个运行时环境,其包含了常用外设的驱动、常用的实时操作系统以及常用的一些库和协议栈,它最大的好处在于不用添加杂七杂八的库文件,用它能简化创建工程的过程。
LVGL是一个轻量级通用型图形库,很适合为资源受限的处理器创建漂亮的UI,以前移植LVGL要在Keil中手动创建分组并手动添加LVGL的源代码,后来在RTE中发现了LVGL不用再手动导入代码文件了,很简单就能完成LVGL的移植,下面来分享一下移植过程
首先需要一个可以正常驱动屏幕的工程,打开工程后点击这个按钮打开包管理器
微信截图_20250720144251.png
找到LVGL,这里列出了支持RTE的LVGL版本,可以选择你熟悉的版本进行安装
微信截图_20250720142808.png
点击install可以直接在线安装,不过安装文件是从github下载的需要一些上网技巧才能正常安装
如果你下载过源码包也可以在env_support\cmsis-pack中找到这个安装包,双击安装即可,这里放一份有需要可以直接下载 LVGL.lvgl.8.3.10.pack.zip (4.66 MB, 下载次数: 7)
微信截图_20250720185944.png
安装完成后,点击这个按钮打开RTE配置
微信截图_20250720144740.png
找到LVGL
微信截图_20250720144802.png
这里可以按照需要勾选需要的组件,Essential是必选的,对于简单应用来说只勾选这个也就足够了,另外建议勾选上最后这个Porting,如果以前移植过LVGL也可以直接用原来的port源码就不用勾选这个了
微信截图_20250720190514.png
点击OK后LVGL的代码就会以RTE的形式加入到工程中
微信截图_20250720145120.png
对于移植来说需要修改的就是这几个文件,在Keil中是可以修改的,那些左上角有小黄钥匙的是只读的
微信截图_20250720190728.png
文件位于工程目录的RTE\LVGL文件夹中
微信截图_20250720190929.png
那几个template文件可以就这样直接用,也可以像以前移植的时候一样将它们拷贝出来重命名再使用,这里为了省事就直接使用了
先打开lv_conf_cmsis.h这个文件,这个实际就是以前的lv_conf.h,如果开头是#if 0改成#if 1,添加屏幕的宽高定义,并将LV_COLOR_DEPTH修改成和屏幕驱动一致的,这里是16表示RGB565的数据格式
微信截图_20250720191228.png
接下来修改显示接口,如果之前移植过,可以跳过这部分直接用原来的lv_port_disp代码,把代码中的#include "lvgl/lvgl.h"改成#include "lvgl.h"就行了,第一次移植的请继续看
打开lv_port_disp_template.h和lv_port_disp_template.c,这是屏幕显示的接口文件,把#if 0改成#if 1,并且注意如果头文件是#include "lvgl/lvgl.h"改成#include "lvgl.h"
微信截图_20250720145827.png
找到lv_port_disp_init这个方法,注释掉用不到的
微信截图_20250720150629.png
找到disp_flush这个方法,这个方法是在一个矩形范围内按顺序填充指定的颜色,在其中添加屏幕显示的方法
微信截图_20250720192449.png
由于我的屏幕驱动初始化方法放在了main函数中,这里就不用改其他的了,需要的话也可以将屏幕驱动初始化方法放在disp_init中
打开startup_xxxxxxx.s修改堆栈,LVGL官方的建议大小如图,如果你的界面比较复杂需要适当加大堆栈
微信截图_20250720184439.png
微信截图_20250721092628.png
最后打开main.c,先写一个测试方法,在屏幕上显示一个滚动的字符串
  1. void LvglTest()
  2. {
  3.     lv_obj_t * label1 = lv_label_create(lv_scr_act());
  4.     lv_label_set_long_mode(label1, LV_LABEL_LONG_SCROLL_CIRCULAR);
  5.     lv_label_set_recolor(label1, true);
  6.     lv_label_set_text(label1, "#0000ff Hello World# STM32L562E LVGL #ff0000 code by yuyy1989#");
  7.     lv_obj_set_width(label1, 240);
  8.     lv_obj_set_style_text_align(label1, LV_TEXT_ALIGN_CENTER, 0);
  9.     lv_obj_align(label1, LV_ALIGN_CENTER, 0, 0);
  10. }
在main函数中调用lv_init和lv_port_disp_init初始化LVGL,在循环中周期调用lv_task_handler和lv_tick_inc,也可以把lv_tick_inc放到定时器的中断中

微信截图_20250720201550.png
编译后烧录到板子中,正常的话能看到这样的界面
WeChat_20250720193353.gif
至此LVGL的显示部分就移植完了,接下来移植输入部分,同样的如果之前移植过,可以跳过这部分直接用原来的lv_port_indev代码,把代码中的#include "lvgl/lvgl.h"改成#include "lvgl.h"就行了,第一次移植的请继续看
打开lv_port_indev_template.h和lv_port_indev_template.c,把#if 0改成#if 1,并且注意如果头文件是#include "lvgl/lvgl.h"改成#include "lvgl.h"

lvgl支持以下5种输入方式
微信截图_20250720194450.png
这里用的屏幕支持触控,所以只保留touchpad相关的,其余都注释掉
在touchpad_is_pressed中返回屏幕是否被触摸,在touchpad_get_xy中返回触摸的xy坐标
微信截图_20250720195748.png
在主函数中调用lv_port_indev_init初始化
微信截图_20250720203251.png
接下来用GUI-Guider做个简单地交互界面来检查触摸是否正常工作,如何用GUI-Guider制作LVGL交互界面这里就先不介绍了,最终运行效果如下
WeChat_20250720202927.gif
至此一个可以通过触摸交互的LVGL就移植完成了



打赏榜单

21小跑堂 打赏了 50.00 元 2025-07-29
理由:恭喜通过原创审核!期待您更多的原创作品~~

评论

使用RTE在Keil MDK中快速移植LVGL的方法介绍,文章步骤清晰,过程完整,移植效果展示较好。  发表于 2025-7-29 14:27
jiekou001 发表于 2025-7-22 10:02 | 显示全部楼层
学习一下如何移植。
dffzh 发表于 2025-7-31 09:06 | 显示全部楼层
这个方法确实不错。
高广睿 发表于 2025-8-6 15:25 | 显示全部楼层
请问为什么我添加后编译,会提醒我lv_demo.o:no such file or directory
 楼主| yuyy1989 发表于 2025-8-7 10:14 | 显示全部楼层
高广睿 发表于 2025-8-6 15:25
请问为什么我添加后编译,会提醒我lv_demo.o:no such file or directory

不清楚,我这里没用到demo
您需要登录后才可以回帖 登录 | 注册

本版积分规则

认证:同飞软件研发工程师
简介:制冷系统单片机软件开发,使用PID控制温度

161

主题

815

帖子

10

粉丝
快速回复 在线客服 返回列表 返回顶部