LVGL

LubanCat-RV06板卡集成了LVGL图形库，可以方便的进行图形开发。

有两个版本的LVGL库：

• LVGL v8.3.11 : 位于 $SDK_PATH/project/app/lvgl_app

• LVGL v9.2.2 : 位于 $SDK_PATH/project/app/lvgl_app_v9

注解

在2025年3月27号后的镜像会集成 LVGL v9.2.2 版本的demo，如果需要使用 LVGL v8.3.11 版本的demo，需要自行编译

demo使用方法

LVGL v8.3.11

lvgl_app -> usr
lvgl_app 0 -> lv_demo_widgets
lvgl_app 1 -> lv_demo_music
lvgl_app 2 -> lv_demo_benchmark
lvgl_app 3 -> lv_demo_stress
lvgl_app 4 -> usr

lvgl_app 有四种模式

• lvg_app 和 lvg_app 4 : 运行 usr 模式，就是默认开启的模式

• lvg_app 0 : 运行 lv_demo_widgets 模式, lvgl 的官方示例

• lvg_app 1 : 运行 lv_demo_music 模式, lvgl 的官方示例

• lvg_app 2 : 运行 lv_demo_benchmark 模式, lvgl 的官方示例

• lvg_app 3 : 运行 lv_demo_stress 模式, lvgl 的官方示例

LVGL v9.2.2

lvgl_app_v9 -> usr
lvgl_app_v9 -M 0 -> usr
lvgl_app_v9 -M 1 -> lv_demo_widgets
lvgl_app_v9 -M 2 -> lv_demo_music
lvgl_app_v9 -M 3 -> lv_demo_benchmark
lvgl_app_v9 -M 4 -> lv_demo_stress

lvgl_app_v9 有五种模式：

• lvgl_app_v9 和 lvgl_app_v9 -M 0 : 运行 usr 模式，就是默认开启的模式

• lvgl_app_v9 -M 1 : 运行 lv_demo_widgets 模式, lvgl 的官方示例

• lvgl_app_v9 -M 2 : 运行 lv_demo_music 模式, lvgl 的官方示例

• lvgl_app_v9 -M 3 : 运行 lv_demo_benchmark 模式, lvgl 的官方示例

• lvgl_app_v9 -M 4 : 运行 lv_demo_stress 模式, lvgl 的官方示例

模式介绍

usr

可以看到有三个滑块，从上到下分别是R,G,B三个通道，可以调节颜色的值，然后点击 set 按钮，可以看到屏幕的显色框颜色会变化, 如图像下所示，将红色通道调成最大

lv_demo_widgets

lv_demo_music

lv_demo_benchmark

lv_demo_stress

构建自己的LVGL应用

构建LVGL应用有几种方法：

1. 参考 lvgl 官方示例和API，手搓一个LVGL应用。

2. 使用可视化的 lvgl 构建工具，生成代码，然后使用

手搓

下面是一些手搓的资料：

• LVGL官方文档

• LVGL官方示例

• LVGL中文文档

使用可视化工具

可视化工具有很多，这里介绍一个使用起来比较方便的工具 Gui Guider

目前该工具在持续更新中，包含比较新的lvgl v9的界面编辑

下面以一个例子教大家如何使用 Gui Guider 创建自己的应用，以LVGL v9为例

下载软件

下载地址： https://www.nxp.com/design/design-center/software/development-software/gui-guider:GUI-GUIDER

进入页面后，点击 Download 按钮，会跳转到下载目录，如下图所示

• 需要注意的是本教程的 lvgl 版本是和 GUI Guider v1.9.0 相配合的， 如果使用新版本需要注意 lvgl 版本是否支持

• 这里小编使用的是 windows版本，点击红框内容选择 GUI Guider v1.9.0 Installer for Windows 下载

• 下载需要账户验证，可以创建账号或者登录账号获取下载权限

安装软件

该部分跳过，这里就不过多描述

打开软件

打开软件后，会提示账号登录，需要把账号登录上才能正常使用， 登录完账号可以看到下面内容

创建应用

• 点击红框创建一个新项目

• 选择 v9.2.1 然后点击 next

• 点击 simulator ,然后选择 simulator 页面，然后点击 next

• 然后就会进入创建项目内容的界面

• 需要注意的是例子里面的程序有很多因为版本问题没办法直接跑通，最好是自己建应用

• 这里我选择空白应用进行选择，然后点击 next

• 然后会进入工程的配置信息，配置好程序后，点击 creat

• 创建后会自动打开工程，如下图所示

• 然后就可以在 simulator 页面进行操作了，这里小编就创建一个简单的应用，如下图所示

• 下载完后就可以点击调试，使用C语言运行应用,运行时间有点久，需耐心等待

• 运行成功后，可以看到模拟器上显示的内容，如下图所示，可以用鼠标模拟触摸屏操作

导出代码

应用能正常操作了，可以导出代码了

点击 project -> Export code -> RT-thread ,然后选择路径，点击 打开

• 导出成功后，会自动打开导出的文件夹，如下图所示，会有两个文件夹，分别是 custom 和 generated

• 然后可以把sdk中的 project/app/lvgl_app_v9/gui-guider 下的 custom 和 generated 文件夹替换成导出的文件夹

然后在sdk里执行下面代码重新编译程序

./build.sh clean app
./build.sh app

• 如果程序没错的话就会看到 project/app/lvgl_app_v9/out/lvgl_app_v9 这就是我们的程序

可以把程序放到板卡上运行