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="..."。所有典型的颜色格式均被支持,例如 i1…i8、a1…a8、rgb565、rgb888、argb8888 等。