LVGL Pro使用指南[12] LVGL XML 图片

在 XML 中,图片是外部资源。需要在XML中命名后才能被引用。

注册图片 链接到标题

从文件加载图片 链接到标题

如果图片作为文件使用(例如,从文件系统加载的 PNG 图片),在 globals.xml 中添加:

<images>
    <file name="avatar" src_path="images/avatar1.png"/>
    <file name="logo" src_path="images/path/to/my_logo.png"/>
</images>

使用file加载图片时,系统启动时需要从文件系统加载图片文件,即调用lv_xml_register_image,该函数会根据参数自动判断从文件系统加载图片。LVGL Pro Editor在导出代码时会自动生成调用lv_xml_register_image的代码来注册图片。最后只需要在调用<project_name>_init时指定资源路径即可。例如下面是生成的代码:

void ui_assets_init(const char * asset_path)
{
    ui_assets_init_gen(asset_path);

    /* Add your own custom code here if needed */
}

从数据加载图片 链接到标题

使用data加载图片时,LVGL Pro Editor会将图片导出为 C 数组 并直接编译进固件,例如:

<data src_path="images/orange-flower.png" name="flower_data" color_format="rgb565" />

在导出C代码时会生成:

static const
LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_LARGE_CONST LV_ATTRIBUTE_FLOWER_DATA_DATA
uint8_t flower_data_data_map[] = {

    0x00,0x00,0x00,0x00,0x00,0x00,...
};
const lv_image_dsc_t flower_data_data = {
  .header = {
    .magic = LV_IMAGE_HEADER_MAGIC,
    .cf = LV_COLOR_FORMAT_RGB565,
    .flags = 0,
    .w = 48,
    .h = 48,
    .stride = 96,
    .reserved_2 = 0,
  },
  .data_size = sizeof(flower_data_data_map),
  .data = flower_data_data_map,
  .reserved = NULL,
};

生成的代码中同样使用lv_xml_register_image注册数据形式的图片,该函数会自动识别:

flower_data = &flower_data_data;
lv_xml_register_image(NULL, "flower_data", flower_data);

在XML中使用图片 链接到标题

注册后,在XML文件中通过名称引用图片:

<lv_image src="flower_data" align="center"/>

Editor注意事项 链接到标题

LVGL Pro Editor中通过 <data> 标签将图像添加到 globals.xml 文件中时,将自动生成对应的C数组(lv_image_dsc_t 结构体)并生成用于注册图片数组的代码。

需要根据屏幕驱动支持的颜色格式设置图像的目标颜色格式 color_format="..."。所有典型的颜色格式均被支持,例如 i1i8a1a8rgb565rgb888argb8888 等。

参考 链接到标题

https://docs.lvgl.io/master/xml/assets/images.html