Gui Guider 生成代码移植到匠芯创平台

---

---

前言

介绍Gui Guider V1.7 移植到匠芯创平台

---

1、PC 模拟Gui Guider 使用简单步骤

1. 创建项目，选择v8的版本，并选择模拟器，选择空模板。
   
   
   
   
   
2. 重点来了，需要配置一下屏幕分辨率，其他参数配置可以参考下面或者默认配置。D13x开发板默认配置是屏幕分辨率是1024*600，模拟器的width和Height也要保持一致。
   
3. 简单加个应用：加个背景和按钮

添加图片资源：

进行简单的UI配置，生成C项目：

在 custom/custom.c 添加下面代码
添加的代码：

static void btn_label_time_add_cb(lv_event_t * e)
{
    static int times = 0;
    lv_obj_t *label = lv_event_get_user_data(e);
    lv_event_code_t code = lv_event_get_code(e);

    if (code == LV_EVENT_CLICKED) {
        times++;
        lv_label_set_text_fmt(label, "Clike me time %d", times);
    }
}

void custom_init(lv_ui *ui)
{
    /* Add your codes here */
    lv_obj_add_event_cb(ui->screen_btn_1, btn_label_time_add_cb, LV_EVENT_ALL, ui->screen_btn_1_label);
}

测试运行：

---

2、Gui Guider 目录结构介绍

2.1 Gui Guider 导出的文件目录结构简单介绍

Gui Guider 导出一个完整的项目文件包含下面这些内容：

• custom/ --> 你编写的代码，不会被gui guider覆盖掉
• generated/ --> gui guider 生成的代码
• import/ --> gui guider 导出的资源文件
• linux/ --> pc 运行的环境和 main 入口函数
• lvgl/ --> lvgl 源码，无需关注
• lib/ --> pc 模拟运行的库文件，无需关注
• lvgl-simulator/ --> pc 模拟器，无需关注
• CMakeLists.txt --> pc 上的CMAKE 文件，无需关注
• LICENSE.txt --> 版权文件,无需关注
• migration_testing.guiguide --> gui guider 的配置文件,无需关注

上面的文件，我们关注custom、generated、import还有linux/main.c 即可，移植其他无需关注。下面重点介绍这几个目录。

---

2.1.1 custom 目录

你的代码编写入口函数在 void custom_init(lv_ui *ui)；，这个需要被调用的。

如果有额外的LVGL 的配置lv_conf_ext.h这个里面的宏定义也是需要拿到。复制到lv_config.h中。因为模拟器的lv_config.h引用了这个配置。大部分情况并不需要修改这个配置，就无需添加。

2.1.2 generated 目录

这个是Gui Guider 自动生成的代码，都放这里面了，这里面几乎全部文件都是需要用到的。

下面是目录介绍:

• guider_customer_fonts：用户字体文件，需要
• guider_fonts：gui guider 用到的字体
• images：图片数组文件
• event_init.*： 事件初始化
• gui_guider.*：ui 初始化入口
• setup_scr_screen.c：screen ui 初始化实现
• widgets_init.*：某些控件初始化实现

2.1.3 import 目录

导进Gui Guider 生成的资源文件和本身自带的资源文件

• font：ttf 字体所在文件
• image：图片源文件

2.1.4 模拟器main函数

mian.c 中有我们需要用到的全局变量和入口函数需要我们关注，这里仅贴出关键代码，其他代码并未贴出

lv_ui guider_ui; /* 全局变量 */

int main(int argc, char ** argv)
{
    /* APP入口初始化函数 */
    setup_ui(&guider_ui);
    events_init(&guider_ui);
    custom_init(&guider_ui);
}

---

至此，我们已经知道了下面基本关系：

• LVGL 自己编写的APP是在main 里面初始化
• lv_conf_ext.h 的配置文件一般不用管
• custom 和 generated 都是APP的实际实现，需要被编译
• 可能会用到的资源文件放在import 目录下

下面将简单介绍一下Luban-lite lvgl部分的目录，以方便移植。

3、将代码移植到Luban-lite 中

3.1 luban-lite lvgl 目录简单介绍结构

下面是 lvgl 目录介绍：

• aic_demo --> demo 实现
• aic_widgets -> aic 私有控件
• aic_ui.c --> demo 入口
• lv_demo.c -> lvgl 线程入口
• aic_ui.h --> 一些自定义的宏
• lvgl --> lvgl 源码和驱动
• SConscript --> 编译文件

我们重点关注 aic_demo、aic_ui.c 即可

3.1.1 lv_demo.c 简单介绍

这里系统跑到是RT-THREAD实时操作系统，lvgl 作为一个线程单独运行。

LVGL 线程入口函数：

void lv_user_gui_init(void)
{
    aic_ui_init(); /* 用户应用初始化在这里 */ 
}

#ifdef KERNEL_RTTHREAD
extern int lvgl_thread_init(void);

INIT_APP_EXPORT(lvgl_thread_init); /* 导出LVGL 函数符号表，自动调用初始化函数 */
#endif

lv_user_gui_init 这里的作用就类似于PC 的main函数，所有lvgl的调用都在这个函数里面了

3.1.2 aic_ui.c

用户应用的入口函数，所有APP都是在 aic_ui.c 里面初始化。

void aic_ui_init()
{
#ifdef AIC_LVGL_METER_DEMO
    extern void ui_init();
    ui_init();
#endif

#ifdef AIC_LVGL_MUSIC_DEMO
    extern void lv_demo_music(void);
    lv_demo_music();
#endif

    return;
}

3.1.3 aic_demo 目录

应用APP 存放的目录，所有应用都放在这个目录下。

• meter_demo: 仪表盘demo
• gif_demo: gif demo
• base_demo：base demo
• …

至此，我们已经知道了下面基本关系：

• LVGL 自己编写的APP是在 aic_ui_init 里面初始化
• aic_demo 都是APP的实际实现，需要被编译
• aic_demo/子目录 下都是应用的实际实现和需要的资源文件

---

移植的核心就是将源文件添加进去编译，将资源文件放到开发板中

3.2 文件添加和修改

3.2.1 修改 aic_demo/ui_builder 目录

3.2.2 源文件复制

• 将gui guider 生成的 C 项目文件的 custom、generated 复制到ui_builder目录下。

• 并将gui guider 生成的 C 项目文件的import下的文件拉到assets 下面。

• 修改ui_builder/ui_init.c并添加入口函数和相关头文件。

创建的 ui_init.c 内容如下：

#include <unistd.h>
#include <time.h>
#include <stdio.h>
#include <stdlib.h>
#include <sys/time.h>
#include "lvgl.h"
#include "aic_ui.h"

/* gui guider head file */
#include "custom.h"
#include "gui_guider.h"
#include "events_init.h"

lv_ui guider_ui;

void ui_init()
{
	/* 用户APP 入口 */
    setup_ui(&guider_ui);
    events_init(&guider_ui);
    custom_init(&guider_ui);
}

3.3 Luban-lite SDK 配置

命令行运行：scons --menuconfig

配置LVGL 版本和编译demo选择。

[*] LVGL (official): powerful and easy-to-use embedded GUI library
	Select LVGL Version (LVGL V8)  ---> 

[*] ArtInChip LVGL demo  --->
    select LVGL demo (LVGL Support AiUiBuilder)  --->

4、将代码移植到Luban 中

4.1 luban lvgl 目录简单介绍结构

下面是 lvgl 目录介绍：

• aic_demo --> demo 实现
• main.c --> demo 入口
• aic_ui.h --> 一些自定义的宏
• lvgl --> lvgl 源码和驱动
• CMakeLists.txt–> 编译文件

我们重点关注 aic_demo即可

4.1.1 main.c 简单介绍

int main(void)
{
	...
#if LV_USE_DEMO_MUSIC == 1
	void lv_demo_music(void);
	lv_demo_music();
#else
	void ui_init(void);
	ui_init();
#endif
	...
}

ui_init 就是demo 的入口函数啦，我们把入口函数定义为这个名字即可。

4.1.2 aic_demo 目录

应用APP 存放的目录，所有应用都放在这个目录下。

• base_demo
• hu_demo
• …

至此，我们已经知道了下面基本关系：

• LVGL 自己编写的APP是在 ui_init 里面初始化
• aic_demo 都是APP的实际实现，需要被编译
• aic_demo/子目录 下都是应用的实际实现和需要的资源文件

---

4.2 文件添加和修改

4.2.1 创建 aic_demo/ui_builder 目录

在ui_builder 下添加 ui_init.c 、assets 目录

4.2.2 源文件复制

• 将gui guider 生成的 C 项目文件的 custom、generated 复制到 ui_builder目录下。

• 并将gui guider 生成的 C 项目文件的import下的文件拉到assets 下面。

• 创建ui_init.c 并添加入口函数和相关头文件。

• 创建空头文件lv_conf_custom.h

创建的 guider_demo_ui.c 内容如下：

#include <unistd.h>
#include <time.h>
#include <stdio.h>
#include <stdlib.h>
#include <sys/time.h>
#include "lvgl.h"
#include "aic_ui.h"

/* gui guider head file */
#include "custom.h"
#include "gui_guider.h"
#include "events_init.h"

lv_ui guider_ui;

void ui_init()
{
    setup_ui(&guider_ui);
    events_init(&guider_ui);
    custom_init(&guider_ui);
}

4.2.3 编译文件修改

修改编译文件CMakeLists.txt

.....
# set app folder
#set(APP_FOLDER ${DEMO_FOLDER}/base_demo)
#set(APP_FOLDER ${DEMO_FOLDER}/hub_demo)
set(APP_FOLDER ${DEMO_FOLDER}/ui_builder) # 设置入口
....

# add include path
# 添加guider_demo 所有头文件
file(GLOB_RECURSE GUIDER_DEMO_SUBDIRS LIST_DIRECTORIES true ${CMAKE_CURRENT_SOURCE_DIR}/${APP_FOLDER})

set(GUIDER_DEMO_INCLUDE_DIRS "")
foreach(subdir ${GUIDER_DEMO_SUBDIRS})
    if(IS_DIRECTORY ${subdir})
        list(APPEND GUIDER_DEMO_INCLUDE_DIRS ${subdir})
    endif()
endforeach()

target_include_directories(${APP_OUT_NAME} PRIVATE ${INCLUDE_PATH} ${GUIDER_DEMO_INCLUDE_DIRS})

5、资源文件读取方式修改（可选）

这里的源文件修改只是把LVGL 图片文件的方式进行修改，将其改成动态读取图片，而不是都以数组的形式编译进代码。这样做的好处就是，代码量更小，能存放更多的图片。缺点就是，不支持图片的部分操作，比如recolor，resize。如果图片比较多的情况，建议修改一下源文件。

修改generated/setup_scr_screen.c:

• 修改和添加头文件 ，图片读取方式替换。
• 并将：&_i_am_bg_alpha_1024x600 替换为 LVGL_PATH(imge/i_am_bg.png)，让lvgl 从文件系统读取图片数据，因为原图没有编译进来。

#include "../custom/custom.h"

#include "aic_ui.h"

lv_img_set_src(ui->screen_img_1, LVGL_PATH(image/i_am_bg.png));

6、运行结果

7、拓展控件移植

NXP 有可能用到一些拓展控件，而官方标准版本没有，需要自己手动移植。注意NXP的video 控件是不支持使用的，里面有NXP的硬件操作。

对比lvgl/src/extra/widgets/lv_widgets.h差异：

然后将相关的拓展控件复制到lvgl/src/extra/widgets/和添加相关拓展控件头文件在lvgl/src/extra/widgets/lv_widgets.h，最后在lv_config.h打开相关宏。

// NXP
#define LV_CAROUSEL_H       1
#define LV_ZH_KEYBOARD_H    1
#define LV_USE_ANALOGCLOCK  1
#define LV_RADIOBTN_H       1
#define LV_USE_TEXTPROGRESS 1
#define LV_USE_DCLOCK       1

8、 参考代码

点击下面链接下载参考代码：

gitee 开源链接