Gui Guider 生成代码移植到匠芯创平台系列--手动添加移植代码_gui guider 移植

---

---

前言

最近买了一款匠芯创的D13X带屏幕的开发板，查了一下支持的功能，发现SDK中默认支持LVGL。最近也在玩Gui Guider，就想着能不能移植到匠芯创的平台上面，看了一下代码结构和Gui Guider导出的文件，发现是支持的，就把移植的过程记录了下来。其他芯片也可以参考这个移植过程，核心是导出编译文件的添加和编译脚本的设置。我这里用的Gui Guider 的版本是V1.6，V1.7的配置导出的文件和V1.6基本是一致的。

后续有时间应该还会写一个python 脚本，自动把移植的处理的工作省略掉。

---

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

1. 创建项目，选择v8的版本，并选择模拟器，选择空模板。LVGL 版本一定要选择v8的，匠芯创的SDK仅支持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);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

测试运行：

至此，Gui Guider 简单使用教程结束，下面将介绍Gui Guider 生成的代码目录结构和Luban-lite（匠芯创SDK的名称）的目录结构，方便大家理解。

---

2、Gui Guider 和 luban-lite SDK lvgl 目录结构介绍

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);
}
1
2
3
4
5
6
7
8
9

---

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

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

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

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

下面是 lvgl 目录介绍：

• aic_demo --> demo 实现
• aic_ui.c --> demo 入口
• aic_ui.h --> 一些自定义的宏
• lv_conf.h --> lvgl 配置文件
• lv_demo.c --> lvgl 线程实现
• lv_driver --> aic 驱动
• lvgl --> lvgl 源码
• SConscript --> 编译文件

我们重点关注 aic_demo、aic_ui.*、lv_conf.h 即可

2.2.1 lv_demo.c 简单介绍

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

LVGL 线程入口函数：

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

#ifdef KERNEL_RTTHREAD
extern int lvgl_thread_init(void);

INIT_APP_EXPORT(lvgl_thread_init); /* 导出LVGL 函数符号表，自动调用初始化函数 */
#endif
1
2
3
4
5
6
7
8
9
10
11
12

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

2.2.2 aic_ui.c

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

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

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

    return;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.2.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、将PC 的代码移植到Luban-lite SDK中

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

3.1 源文件添加和修改

3.1.1 创建 gui_guider_demo 目录

在/luban-lite/packages/artinchip/lvgl-ui/aic_demo 下添加 gui_guider_demo 、gui_guider_dem\lvgl_src 目录

3.1.2 源文件复制

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

• 并将gui guider 生成的 C 项目文件的import下的文件拉到gui_guider_dem/lvgl_src/lvgl_data 下面。

• 将SConscript 编译脚本复制到gui_guider_demo 目录下。注意所有复制的SConscript 编译脚本都是一样的，脚本的实际内容是搜索当前路径下所有的SConscript 文件和 源文件

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

创建的 gui_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"
#include "lv_port_disp.h"
#include "mpp_fb.h"
#include "meter_ui.h"

/* gui guider head file */
#include "./custom/custom.h"
#include "./generated/gui_guider.h"
#include "./generated/events_init.h"
#include "./generated/widgets_init.h"
#include "./generated/guider_customer_fonts/guider_customer_fonts.h"
#include "./generated/guider_fonts/guider_fonts.h"

lv_ui guider_ui;

void gui_guider_demo_ui_init()
{
	/* 用户APP 入口 */
    setup_ui(&guider_ui);
    events_init(&guider_ui);
    custom_init(&guider_ui);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

创建的 gui_guider_demo_ui.h 内容如下：

#ifndef GUI_GUIDER_DEMO_UI_H
#define GUI_GUIDER_DEMO_UI_H

#ifdef __cplusplus
extern "C" {
#endif

void gui_guider_demo_ui_init();

#ifdef __cplusplus
} /*extern "C"*/
#endif

#endif
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.1.3 删除不需要的文件

删除所有目录的 generated.mk ，并将上面 ./SConscript 复制到下面几个目录下以及其子目录：

• custom
• generated
• generated/guider_customer_fonts
• generated/guider_fonts

注意，我们可以不把generated/images编译进代码中，如果不编译进代码中就不存放SConscript脚本。

删除不需要用到的矢量字体文件，实际字库文件都可以删掉。Gui Guider实际导出的字体是C文件，并没有用到矢量字库。

3.1.4 LVGL 宏配置

将 custom/lv_conf_ext.h 定义的宏复制到 lv_conf.h 中，由于这里并没有 用户定义的宏就不需要复制过去

3.1.5 入口函数修改

将AIC_LVGL_METER_DEMO的内容替换为下面

void aic_ui_init()
{
#ifdef AIC_LVGL_METER_DEMO
    extern void gui_guider_demo_ui_init();
    gui_guider_demo_ui_init();
#endif
    return;
}
1
2
3
4
5
6
7
8

3.1.6 源文件修改（可选）

这里的源文件修改只是把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));
1
2
3
4
5

3.2 Luban-lite SDK 配置

命令行运行：scons --menuconfig

配置资源存放路径和编译demo选择。

Application options  --->
    [*] Using File System Image 0  --->
        (packages/artinchip/lvgl-ui/aic_demo/gui_guider_demo/lvgl_src/) Data Directory


[*] ArtInChip LVGL demo  --->
    select LVGL demo (LVGL demo of meter)  --->
1
2
3
4
5
6
7

3.3 运行结果

4. 参考代码

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

gitee 开源链接