本帖最后由 wuttttt 于 2024-4-1 11:26 编辑
在上位机中创建的图像控件区别于标准的LVGL图像（image）控件，我们称之为高性能图像（imgex），本文将着重讲解如何在程序中创建一个高性能图像控件，如何利用imgex-conv将图片转换为imgex可以识别的文件并从磁盘中加载显示。 高性能图像区别于标准的LVGL图像，无需提前将图片转换为数组或者位图的形式，可以直接加载经imgex-conv转换后的jpg/png图片，大大降低存储容量的需求。因此我们在代码中创建图像控件时，可以优先考虑创建高性能图像（imgex）。值得注意的是，我们使用的图片大小不能超过屏幕的大小，否则可能会显示异常。
硬件平台：SWDM-QFP100-34SVEA3、JLT4301A（480x272） 仿真器：Jlink V9 软件平台：MDK5.33及以上
先用UI_Creator_v2.3.0创建一个480x272的工程界面，不放置任何控件，模拟仿真后将其导入SWDM-QFP100-34SVEA3平台，此时平台只有白屏显示，如下图：
接着准备好想要显示的图片，将其拖拽到UI_Creator\imgex-conv.exe后松开，会在图片路径下生成对应的同名*.bin文件，如下图：
转换完毕后，将生成的img.bin文件与ui.bin和SynwitManifest.cfg文件一同拷贝至SPI Flash中，如下图：
接着编写程序，打开screen001.c添加如下代码： - lv_obj_t *img_test = lv_imgex_create(synwit_ui_find_lv_obj(SCREEN001), NULL); /* 在SCREEN001创建高性能图像imgex控件 */
- img_src = synwit_ui_load_image_file("S:spi:img.bin"); /* 加载imgex-conv转换出的图片 */
- lv_imgex_set_src(img_test, img_src); /* 设置imgex的源数据 */
- lv_obj_set_pos(img_test, 0, 0); /* 设置imgex的位置 */
由于改图片资源加载是用户手动加载的，并非UI框架调度，因此用完时需要及时释放该内存 - synwit_ui_unload_image(img_src); /* 退出时释放资源 */
添加代码后编译下载，效果如下图所示
至此，我们通过代码创建了高性能图像（imgex），同样地，在上位机中创建的图像控件，也可以按照此方法换源文件，这里不再赘述。
附件：测试图片、该Demo的UI Creator工程以及Keil工程
| 
发表于 2024-4-1 11:15:50
