多张图片打包机制

多张图片打包机制简称pkg_img_seq。

1. 介绍

当资源放在文件系统中时，一些应用会使用很多小图标，每个小图标经过eZIP压缩之后非常小，此时会存在以下问题：

  • 由于存在文件系统中，因此每个图标至少需要要一个page对齐，此时可能会造成大量的空间浪费；

  • 在访问图片的时候，需要先打开文件，但由于一个应用下的图片过多，因此打开文件的速度会非常慢

  • 表盘/应用在推送的时候，图片作为资源是单独推送的，因此会造成推送效率低下

为解决以上的问题（空间浪费、访问速度慢、推送慢）的问题，Solution提供了多张图片的打包机制（pkg_img_seq)，将一组图片通过eZIP转换并生成到一个 bin 文件内，同时扩展了LVGL设置图片的函数lv_img_set_src为lv_img_set_src_seq，实现对打包文件的单张图片访问机制。

2. 多张图片打包机制（pkg_img_seq）的实现

「多张图片打包（pkg_img_seq）」与常规图片资源相比主要有以下区别：

2.1 资源存放方式

在图片资源的存放目录 中，在ezip目录下新建一个单独子文件夹，该子文件夹名需遵守为以下三种（注意3个下划线）命名：

  • name + ___seq （从序号0开始）

  • name + ___seq___ （同name + ___seq）

  • name + ___seq___xxx （从序号xxx开始）

fishy

2.2 图片名命名规范

「多张图片打包」的图片需要使用序列号排序。 命名需按前缀+序列号的方式命名（其中前缀可选），序列号的位数要相等，位数不够的左边补零。 如图片总数有一百多张时，序列号的位数要有3位数才满足要求。 eZIP工具转换时会按最后的序列号依次排列成一个单独的bin文件。案例如下图会按序列号处理并依次填充成为一个bin文件。案例如下图

fishy

2.3 访问图片的方式

访问经「多张图片打包」处理后的图片资源，方法与常规图片访问一致，仅需将设置图片资源的接口从lv_img_set_src替换为扩展接口lv_img_set_src_seq，具体使用规则如下：

接口原型：

  • void lv_img_set_src_seq(lv_obj_t * obj, const void * src, uint16_t no)。

接口参数：

参数名

说明

obj

图片控件实例，通过lv_img_create创建

src

序列帧路径，通过APP_GET_IMG(img_seq_name)获取。
其中img_seq_name为去掉___seq后缀的文件夹名（参见文件名命名规范）

no

图片在序列中的索引值

举例：

lv_obj_t *img_seq = lv_img_create(p_clk_simple->bg);
lv_img_set_src_seq(img_seq, APP_GET_IMG(cool_num_24), 0);
lv_obj_align(img_seq, LV_ALIGN_CENTER, 0, 0);

3. 举例

具体例程可参见solution\examples\_dynamic_app\c\wf\wf_simple\src\wf_simple.c中on_init中lv_img_set_src_seq的调用。

    p_clk_simple->bg     = lv_img_create(WF_GET_NODE_PARENT);
    //lv_img_cache_invalidate_src(CLOCK_GET_BG);
    lv_img_set_src(p_clk_simple->bg, CLOCK_GET_BG);
    rt_kprintf("wf_simple CLOCK_GET_BG %s \n", CLOCK_GET_BG);
    lv_obj_align(p_clk_simple->bg, LV_ALIGN_CENTER, 0, 0);
    lv_obj_add_flag(p_clk_simple->bg, LV_OBJ_FLAG_SCROLL_CHAIN | LV_OBJ_FLAG_EVENT_BUBBLE);


    lv_obj_t *demo107 = lv_img_create(p_clk_simple->bg);
    lv_img_set_src_seq(demo107, APP_GET_IMG(blue_number), 107);
    lv_obj_t *demo112 = lv_img_create(p_clk_simple->bg);
    lv_img_set_src_seq(demo112, APP_GET_IMG(blue_number), 112);
    lv_obj_t *demo116 = lv_img_create(p_clk_simple->bg);
    lv_img_set_src_seq(demo116, APP_GET_IMG(blue_number), 116);
    lv_obj_align(demo107, LV_ALIGN_TOP_LEFT, 0, 0);
    lv_obj_align(demo112, LV_ALIGN_TOP_MID, 0, 0);
    lv_obj_align(demo116, LV_ALIGN_TOP_RIGHT, 0, 0);

    lv_obj_t *demo0 = lv_img_create(p_clk_simple->bg);
    lv_img_set_src_seq(demo0, APP_GET_IMG(green_number), 0);
    lv_obj_t *demo1 = lv_img_create(p_clk_simple->bg);
    lv_img_set_src_seq(demo1, APP_GET_IMG(green_number), 5);
    lv_obj_t *demo2 = lv_img_create(p_clk_simple->bg);
    lv_img_set_src_seq(demo2, APP_GET_IMG(green_number), 9);
    lv_obj_align(demo0, LV_ALIGN_BOTTOM_LEFT, 0, 0);
    lv_obj_align(demo1, LV_ALIGN_BOTTOM_MID, 0, 0);
    lv_obj_align(demo2, LV_ALIGN_BOTTOM_RIGHT, 0, 0);

4. 注意事项

  • 文件夹名的后缀___seq的下划线为三个

  • 文件夹下图片序列的编号位数要一致，不够的左边补零

  • lv_img_set_src_seq访问的是去掉___seq后缀的文件夹名，不是图片名