文章目录
前言
最近买了一款匠芯创的D13X带屏幕的开发板,查了一下支持的功能,发现SDK中默认支持LVGL。最近也在玩Gui Guider,就想着能不能移植到匠芯创的平台上面,看了一下代码结构和Gui Guider导出的文件,发现是支持的,就把移植的过程记录了下来。其他芯片也可以参考这个移植过程,核心是导出编译文件的添加和编译脚本的设置。我这里用的Gui Guider 的版本是V1.6,V1.7的配置导出的文件和V1.6基本是一致的。
后续有时间应该还会写一个python
脚本,自动把移植的处理的工作省略掉。
1、PC 模拟Gui Guider 使用简单步骤
- 创建项目,选择v8的版本,并选择模拟器,选择空模板。LVGL 版本一定要选择v8的,匠芯创的SDK仅支持
v8
版本。
- 重点来了,需要配置一下屏幕分辨率,其他参数配置可以参考下面或者默认配置。D13x开发板默认配置是屏幕分辨率是1024*600,模拟器的width和Height也要保持一致。
- 简单加个应用:加个背景和按钮
添加图片资源:
进行简单的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);
}
测试运行:
至此,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);
}
至此,我们已经知道了下面基本关系:
- 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
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;
}
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);
}
创建的 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
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;
}
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));
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) --->
3.3 运行结果
4. 参考代码
点击下面链接下载参考代码: