【匠芯创D133CBS KunLun Pi开发板试用体验】4、新建LVGL应用--控制显示屏亮度

匠芯创AiUIBuilder简介

AiUIBuilder 是基于 LVGL(Light and Versatile Embedded Graphics Library) 开发的 UI 设计工具，可以通过拖拽的方式进行 UI 界面的设计，能够加速基于 ArtInChip 嵌入式平台的图形应用的开发。

使用UiBuilder进行设计的流程如下

（1）用 AiUIbuilder 在电脑上进行 UI 设计，并模拟运行，可以反复的对设计进行修改

（2）AiUIbuilder 设计导出的代码也可以在 VS Code 环境下进行代码的修改，并可以在电脑上单步调试

（3）AiUIbuilder 导出的 UI 代码或者经过在 VS Code 环境下修改过的 UI 代码，放在 SDK 编译环境相应目录下进行编译，然后烧录固件，在真实硬件环境下运行

下载安装AiUIbuilder

前往官网https://aicdoc.artinchip.com/topics/product/download-doc-tool-zip.html 下载安装

创建UI工程

在UiBuilder工具中，新建一个名为test1的项目

注意选择颜色深度为 16bit，分辨率为480*272

设计UI

这个实验是为了通过UI调整屏幕亮度，所以需要一个滑动条组件，如下图

调整滑动条的范围为10~100，默认值70

还要两个标签组件

label_2标签是用于显示滑动条的数值

滑动条事件设置

滑动条组件介绍

参考LVGL文档滑动条部分

滑动条对象看起来像是在 进度条 增加了一个可以调节的旋钮，使用时可以通过拖动旋钮来设置一个值。 就像进度条(bar)一样，Slider可以是垂直的或水平的(当设置进度条的宽度小于其高度，就可以创建出垂直摆放的滑动条)。

使用事件LV_EVENT_VALUE_CHANGED，它是在拖动滑块或使用按键更改滑块时，会发送事件，拖动滑块时，会连续发送事件。

设置滑动事件

右键点击滑动条，选择设置事件

打开的窗口中，选择事件 Value changed -- 自定义代码 -- 勾选方法名右侧的复选框

设置screen加载事件

右键screen，选择设置事件

事件名为 load start，方法名右侧的复选框打勾

编写自定义代码

打开项目文件夹下的 ui_builder/custom/custom.c文件，新增代码如下：

#ifndef SIMULATOR
#include "lv_tpc_run.h"

void backlight_pwm_config(unsigned int channel, unsigned int level)
{
    struct rt_device_pwm *pwm_dev;

    pwm_dev = (struct rt_device_pwm *)rt_device_find("pwm");
    /* pwm frequency: 1KHz = 1000000ns */
    rt_pwm_set(pwm_dev, channel, 1000000, 10000 * level);
}
#endif

void screen_slider_1_custom_value_changed()
{
    screen_t *scr = screen_get(&ui_manager);
    int value = lv_slider_get_value(scr->slider_1);
    char buf[8];
    snprintf(buf, sizeof(buf), "%d%%", value);
    lv_label_set_text(scr->label_2, buf);
#ifndef SIMULATOR
    backlight_pwm_config(2, value);
#endif
}

void screen_custom_load_start()
{
    screen_t *scr = screen_get(&ui_manager);
    int value = lv_slider_get_value(scr->slider_1);
    char buf[8];
    snprintf(buf, sizeof(buf), "%d%%", value);
    lv_label_set_text(scr->label_2, buf);
}

其中 screen_slider_1_custom_value_changed 是滑动条事件回调函数，screen_custom_load_start是屏幕加载回调函数。它们都先获取了屏幕的对象，然后读取滑动条当前值，再将该数值格式化为字符串，设置为标签label_2的显示文本。

backlight_pwm_config用于设置背光的 PWM（脉宽调制）参数，实现调节屏幕亮度的功能。

#ifndef SIMULATOR ... #endif，在模拟器环境下，是找不到lv_tpc_run.h头文件及其他函数的，这些是在luban-lite SDK中使用的，因此需要注释掉，避免编译报错，在模拟器下只需要关心UI设计和基本逻辑是否正确即可。

导出AiUiBuilder生成的代码

在UiBuilder的右上角，点击生成代码

代码生成在项目目录下的ui_builder目录内

先记住该路径，这部分文件代码等会要用到

搭建VSCode编译仿真环境

在VSCode中，安装如下插件:

• C/C++
• C/C++ Extension Pack
• CMake
• CMake Tools

使用VSCode打开UiBuilder项目工程test1文件夹下的simulator.code-workspace文件，这是vscode的工作区文件

编译时，会让我们选编译器，这里选择未指定，因为在工作区配置文件中已经自动指定好了

点击工具栏的build按钮，进行编译

完成后点击调试或运行，即可查看仿真效果，如下动图

新增LVGL应用配置

首先需要在application/Kconfig 中下方所示部分添加代码：

...

config AIC_LVGL_USB_OSD_DEMO
    bool "LVGL usb osd demo"
    select LPKG_LVGL_USING_DEMOS
    select LPKG_USING_CJSON
    select AIC_PWM_BACKLIGHT_BYPASS if AIC_PWM_BACKLIGHT

config AIC_LVGL_IMAGE_DEMO
    bool "LVGL image demo"

config AIC_LVGL_TEST1_DEMO          # 添加 AIC_LVGL_TEST1_DEMO，以便在 menuconfig 菜单中选择
    bool "LVGL demo of test1"

...

在项目配置中，select LVGL Demo 选择刚刚的LVGL demo of test1，保存

导入代码

在packages\artinchip\lvgl-ui\aic_demo下新建test_demo_1文件夹，将导出的代码全部复制到这里。

配置SConscript

在test_demo_1目录下新建SConscript文件，添加如下代码

from building import *
import os

cwd = GetCurrentDir()
group = []
# 源文件路径
src = Glob('*.c')
src += Glob('./custom/*.c') 
# 头文件路径
CPPPATH = [cwd]
CPPPATH.append(cwd+ '/custom')

list = os.listdir(cwd)
for d in list:
    path = os.path.join(cwd, d)
    if os.path.isfile(os.path.join(path, 'SConscript')):
        group = group + SConscript(os.path.join(d, 'SConscript'))

# 资源安装的目标路径
ins_dst='rodata/lvgl_data'

# 资源安装的源路径为当前SConscript所在路径的相对路径
ins_src = 'assets'
install = [(ins_src + '/font/', ins_dst + '/font/'),]

# AIC_LVGL_TEST1_DEMO 宏需要与 application/Kconfig 中添加的宏一致
group = group + DefineGroup('LVGL-port', src, depend = ['AIC_LVGL_TEST1_DEMO'], CPPPATH = CPPPATH,
        INSTALL = install)

Return('group')

实验结果

通过触摸屏拉拽滑动条，实现了屏幕亮度的调节。详见顶部视频