Edit online

lvgl-ui

4 Dec 2024
Read time: 3 minute(s)

lvgl-ui 是 ArtInChip 开发的一款用于演示 LVGL 基本操作的一个 demo，包含 png、jpg 硬件解码和 build-in 图片使用方式：


base_demo

lvgl-ui 一共有 4 四个页面，功能包括：

  • 仪表演示第二个页面为音乐播放演示、第三个页面为菜单演示、

  • 音乐播放演示

  • 图片菜单演示

  • 播放器演示

播放器演示页面需要打开 c 中的宏定义 PLAYER，默认为打开状态

打开 lvgl-ui

在 Luban 根目录下执行 make menuconfig，进入 menuconfig

ArtInChip Luban SDK Configuration  --->
    ArtInChip packages  --->
    [*] lvgl-ui  --->

编译选择 ui 将生成 lvgl 库和相应的应用程序:test_lvgl

功能选择

  • 用户可以通过 h 中的宏定义去配置 LVGL 的功能参数

  • 在 h 中至少需要有宏定义 DEPTH，LV_COLOR_DEPTH 的值可以是 32 或者 16，分别表示 argb8888 格式和 rgb565 格式， LV_COLOR_DEPTH 的设置需要和 dts 中 framebuffer 的格式设置保持一致

  • 目前我们在 h 只是加入了最常用的宏定义，如果需要添加更多的宏定义可以参考 lvgl 库目录下 lv_conf_template.h 中的定义， 复制相关的宏定义到 h 即可

运行

在目录 luban/package/artinchip/lvgl-ui/S00lvgl 下的启动脚本，编译后会打包到系统路径/etc/init.d/S00lvgl，开机自动运行 lvgl_ui

打印输出重定向

lvgl-ui 默认日志输出到 /dev/null，不进行显示，如果要进行调试可以在 S00lvgl 中进行重定向修改
# 屏蔽打印
PID=`$DAEMON > /dev/null 2>&1 & echo $!
# 打印在控制台输出
PID=`$DAEMON > /dev/stderr 2>&1 & echo $!
需要重新编译模块，才能生效
make clean
make lvgl-ui-rebuild

LVGL 的打印宏

  • 在 h 中打开宏定义 #define LV_USE_LOG 1

  • 当打开 LOG 后，可以设置打印级别，默认打印级别设置为 LV_LOG_LEVEL_WARN

图片缓存开关

  • 通过 h 中宏定义 LV_IMG_CACHE_DEF_SIZE 来控制是否缓存图片

  • 通过 c 中的宏定义 IMG_CACHE_NUM 来控制缓存的图片的张数

代码说明

  • 界面滑动
    不同页面通过滑动操作切换，页面滑动使用了控件 tabview
    lv_obj_set_size(main_tabview, 1024, 600);
lv_obj_set_pos(main_tabview, 0, 0);
lv_obj_set_style_bg_opa(main_tabview, LV_OPA_0, 0);

lv_obj_t *main_tab0 = lv_tabview_add_tab(main_tabview, "main page 0");
lv_obj_t *main_tab1 = lv_tabview_add_tab(main_tabview, "main page 1");

lv_obj_set_style_bg_opa(main_tab0, LV_OPA_0, 0);
lv_obj_set_style_bg_opa(main_tab1, LV_OPA_0, 0);
lv_obj_set_size(main_tab0, 1024, 600);
lv_obj_set_size(main_tab1, 1024, 600);

lv_obj_set_pos(main_tab0, 0, 0);
lv_obj_set_pos(main_tab1, 0, 0);
  • 背景图片
    背景图片通过 image 控件来创建，是一个名字为 png 的 png 图片，此图片会采用注册的硬件解码器进行解码
    static lv_obj_t *img_bg = NULL;
img_bg = lv_img_create(lv_scr_act());
lv_img_set_src(img_bg, LVGL_PATH(global_bg.png));
lv_obj_set_pos(img_bg, 0, 0);
  • 菜单图片
    菜单图片也通过 image 控件来创建，是 png 图片，此图片也会采用注册的硬件解码器进行解码
    lv_obj_t *sub_image00 = lv_img_create(sub_tab0);
lv_img_set_src(sub_image00, LVGL_PATH(cook_0.jpg));
lv_obj_set_pos(sub_image00, 36, 100);
  • fake image
    fake image 不是一个真实的图片，通过此方式可以方便的对一个矩形区域进行填充：包括 alpha、red、green、blue
    static lv_obj_t *img_bg = NULL;
FAKE_IMAGE_DECLARE(bg_dark)  // 声明（bg_dark 名字可修改）

/* 最后一个参数为要设置的颜色值：bit31:24 为 alpha */
FAKE_IMAGE_INIT(bg_dark, 1024, 600, 0, 0x00000000);

lv_img_set_src(img_bg, FAKE_IMAGE_NAME(bg_dark)); // 设置 image 数据源
  • build-in image
    build-in image 是通过数组变量在程序中表示图像，图片转换成.c 文件的工具参考官网：http://lvgl.io/tools/imageconverter
    uint8_t circle_white_map[] = {
        0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0x50, 0xff, 0x7f, 0xff,
        ........................................................};

const lv_img_dsc_t circle_white = {
    .header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA,
    .header.always_zero = 0,
    .header.reserved = 0,
    .header.w = 20,
    .header.h = 20,
    .data_size = 400 * LV_IMG_PX_SIZE_ALPHA_BYTE,
    .data = circle_white_map,
};

static lv_obj_t * circle_0 = lv_img_create(img_bg);
lv_img_set_src(circle_0, &circle_white);
lv_obj_align(circle_0, LV_ALIGN_BOTTOM_MID, -16, -28);