简体中文

English

简体中文

English

外观

​

AiUIBuilder 是匠芯创自研的LVGL设计软件，这个软件在24年11月中旬刚刚发布，最近会更新的很频繁。

该文档将会教会大家将AiUIBuilder生成的代码对接SDK

教程的软件版本：1.0.0

一、安装AiUIBuilder ​

百度网盘链接中的工具文件夹中

软件安装包路径：点击跳转🚀

二、衡山派前期准备 ​

  1. 环境搭建（点击跳转🚀）

  2. SDK获取（点击跳转🚀）

  3. SDK编译（点击跳转🚀）

  4. 镜像烧录（点击跳转🚀）

我们走完整个流程之后，把镜像烧录到开发板中，点亮 RGB4.3寸（480*272）屏幕，这样验证下整个环境是否OK！

三、UI设计 ​

1、打开软件 ​

2、点击保存 ​

等待项目创建完成

会自动在保存目录中生成工程文件夹

3、拖动控件进行设计 ​

上传图片资源

4、运行仿真 ​

5、生成代码结构说明 ​

其中我们只需要关注 ui_builder 文件夹即可，该文件夹中存放着的是生成的LVGL代码，其结构一般是下面这种：

txt
ui_builder ----> 		# 软件生成的代码文件夹
|		├─assets --->		# 资源文件夹，导入的资源全在这里
|			├─font  --->	# 字体资源
|			└─image --->	# 图片资源
|		├─custom --->		# 用户代码文件夹，生成代码之后可以在该文件夹中添加自己写的代码。
|			├─custom.c
|			└─custom.h
|		├─lv_conf_custom.h
|		├─screen.c
|		├─ui_init.c
|		├─ui_init.h
|		├─ui_objects.h
|		├─ui_util.c
|		└─ui_util.h
└─

注意：修改代码之后重新导入AiUIBuilder软件，自己修改的代码会被覆盖！！

ui_init.c文件中ui_init函数是整个lvgl的初始化函数！

四、对接SDK ​

1、复制生成的代码到SDK中 ​

将软件项目文件夹中的 ui_builder 文件夹复制到SDK中的 \luban-lite\packages\artinchip\lvgl-ui\aic_demo文件夹 中。

使用VSCode打开SDK，进行一些修改。

2、对接资源地址 ​

软件为我们自动生成的代码，因为考虑到兼容性的问题，统一的使用宏获取资源路径，而这个宏需要我们自己实现

在\luban-lite\packages\artinchip\lvgl-ui\aic_demo\ui_builder\ui_objects.h中添加下面的宏定义：

c
#define CONN(x, y) x#y

#define LVGL_UI_BUILDER_FONT    LVGL_STORAGE_PATH"/font/"
#define LVGL_UI_BUILDER_IMAGE   "L:"LVGL_STORAGE_PATH"/image/"

#define LVGL_FONT_PATH(y)  CONN(LVGL_UI_BUILDER_FONT,  y)
#define LVGL_IMAGE_PATH(y) CONN(LVGL_UI_BUILDER_IMAGE, y)

3、添加SConscript文件 ​

如果不添加SConscript文件文件，那么在编译SDK时就不会编译该文件夹中的代码！！

1）在ui_builder文件夹中添加 ​

创建SConscript文件，在文件中添加以下代码：

py
from building import *
# 导入`building`模块的所有内容，是用于构建系统的工具和配置。

import os
# 导入`os`模块，用于文件和路径操作。

cwd = GetCurrentDir()
# 获取当前工作目录路径，赋值给变量`cwd`。

group = []
# 初始化一个空列表`group`，用于存储构建的代码组信息。

src = Glob('*.c')
# 使用 `Glob` 函数查找当前目录下的所有 `.c` 文件，并将其文件路径存储到变量 `src` 中。
# `Glob` 是构建系统中的常见工具函数，用于匹配文件。

CPPPATH = [cwd]
# 定义预处理器头文件路径列表 `CPPPATH`，初始包含当前目录路径。

list = os.listdir(cwd)
# 使用 `os.listdir` 列出当前目录下的所有文件和文件夹，存储在变量 `list` 中。

for d in list:
    # 遍历目录内容 `list` 中的每一项。
    path = os.path.join(cwd, d)
    # 构造完整路径 `path`，将 `cwd` 和当前项 `d` 拼接起来。

    if os.path.isfile(os.path.join(path, 'SConscript')):
        # 检查当前路径是否包含名为 `SConscript` 的文件。

        group = group + SConscript(os.path.join(d, 'SConscript'))
        # 如果存在 `SConscript` 文件，则调用 `SConscript` 函数执行，并将返回的结果添加到 `group` 列表中。
        # `SConscript` 是 SCons 构建工具中的函数，用于加载子目录的构建脚本。

group = group + DefineGroup('LVGL-port', src, depend = ['AIC_LVGL_AIUIBUILDER_DEMO'], CPPPATH = CPPPATH)
# 定义一个新的代码组 `LVGL-port`：
# - `src`: 包含所有 `.c` 文件路径。
# - `depend`: 定义依赖项，指定该组依赖于 `AIC_LVGL_AIUIBUILDER_DEMO`。
# - `CPPPATH`: 将当前目录路径添加到编译器的头文件搜索路径。
# 最终返回的结果与 `group` 合并。

# 如果定义了 AIC_LVGL_AIUIBUILDER_DEMO 则将代码组加入编译！

Return('group')
# 返回 `group` 变量给调用者，作为最终的代码组信息供后续使用。

2）在custom文件夹中添加 ​

创建SConscript文件，在文件中添加以下代码：

py
from building import *
# 导入`building`模块的所有内容，是用于构建系统的工具和配置。

import os
# 导入`os`模块，用于文件和路径操作。

cwd = GetCurrentDir()
# 获取当前工作目录路径，赋值给变量`cwd`。

group = []
# 初始化一个空列表`group`，用于存储构建的代码组信息。

src = Glob('*.c')
# 使用 `Glob` 函数查找当前目录下的所有 `.c` 文件，并将其文件路径存储到变量 `src` 中。
# `Glob` 是构建系统中的常见工具函数，用于匹配文件。

CPPPATH = [cwd]
# 定义预处理器头文件路径列表 `CPPPATH`，初始包含当前目录路径。

list = os.listdir(cwd)
# 使用 `os.listdir` 列出当前目录下的所有文件和文件夹，存储在变量 `list` 中。

for d in list:
    # 遍历目录内容 `list` 中的每一项。
    path = os.path.join(cwd, d)
    # 构造完整路径 `path`，将 `cwd` 和当前项 `d` 拼接起来。

    if os.path.isfile(os.path.join(path, 'SConscript')):
        # 检查当前路径是否包含名为 `SConscript` 的文件。

        group = group + SConscript(os.path.join(d, 'SConscript'))
        # 如果存在 `SConscript` 文件，则调用 `SConscript` 函数执行，并将返回的结果添加到 `group` 列表中。
        # `SConscript` 是 SCons 构建工具中的函数，用于加载子目录的构建脚本。

group = group + DefineGroup('LVGL-port', src, depend = ['AIC_LVGL_AIUIBUILDER_DEMO'], CPPPATH = CPPPATH)
# 定义一个新的代码组 `LVGL-port`：
# - `src`: 包含所有 `.c` 文件路径。
# - `depend`: 定义依赖项，指定该组依赖于 `AIC_LVGL_AIUIBUILDER_DEMO`。
# - `CPPPATH`: 将当前目录路径添加到编译器的头文件搜索路径。
# 最终返回的结果与 `group` 合并。

# 如果定义了 AIC_LVGL_AIUIBUILDER_DEMO 则将代码组加入编译！

Return('group')
# 返回 `group` 变量给调用者，作为最终的代码组信息供后续使用。

4、修改aic_ui.c文件 ​

我们打开\luban-lite\packages\artinchip\lvgl-ui\aic_ui.c文件，在aic_ui_init函数中添加以下代码：

c
#ifdef AIC_LVGL_AIUIBUILDER_DEMO
    extern void ui_init(void);
    ui_init();
#endif

如果定义了 AIC_LVGL_AIUIBUILDER_DEMO，则运行 ui_init函数 ！

5、修改Kconfig文件 ​

打开\luban-lite\application\Kconfig文件，在文件中的 255 行开始添加以下代码：

ini
config AIC_LVGL_AIUIBUILDER_DEMO
    bool "LVGL AiUIBuilder demo"

我们添加的这些语句会在menuconfig菜单中出现！

6、开启freetype ​

我们LVGL里面需要使用到开源的字体引擎库（freetype），所以我们需要在代码中开启它。

打开 \luban-lite\packages\artinchip\lvgl-ui\lvgl_v8\lv_conf.h 文件，将 LV_USE_FREETYPE 定义后面的 0 改为 1

7、配置menuconfig ​

打开 env终端，lunch 3 选择衡山派配置，然后输入 scons --menuconfig 进入配置菜单

1）启用freetype ​

在按下 / 键 可以进入搜索界面，就是回车旁边的那个。

2）对接LVGL路径 ​

  • (/rodata) LVGL Resource Directory

这个定义是：LVGL_STORAGE_PATH

和之前我们在ui_objects.h中写的宏定义一样

五、编译 ​

等待编译完成

六、烧录镜像验证 ​

我们烧录刚刚编译成功的img镜像

本页面更新于: