富芮坤fr8008gp lvgl图片:lv_img_conv生成bin文件格式；在代码中直接引用图片；合并成一个bin给代码引用；LvglImgTool转换图片lvgl_image生成C文件

lv_img_conv生成bin文件格式

我们使用这个exe生成lvgl使用的bin文件(注意:这个工具生成图片时间很长):

这里其实使用的是lvgl官方提供的lv_img_conv工具(可以从这里看到更多说明:https://github.com/lvgl/lv_img_conv)运行log如下:

git后台:
Administrator@cd MINGW64 /f/picture/Image_Conver_Tool
$  ./lv_img_conv.js ./Output/home/home.bmp -f -c CF_TRUE_COLOR -t bin --binary-format 565
Beginning conversion of ./Output/home/home.bmp
240x280
OK

exe前台:
MINGW64:/f/picture/Image_Conver_Tool
F:\picture\Image_Conver_Tool\Output
当前文件夹的个数=1
LV_IMG_DECLARE(home);

原图和生成的bin文件前后两段为:

如果单纯只有图片像素资料,那么bin文件大小应该为:134,400(0x20D00),结合上面两张图可以猜测lv_img_conv生成的bin文件的头部加了4个byte的声明,结合lvgl的代码这里猜测这4个byte就是lv_img_header_t的定义:

这里验证如下:


可以看到宽高是符合原图定义的,所以生成的bin确实增加了lv_img_header_t结构体在文件开始的地方.

lv_img_header_t中的cf的定义

0x04为真彩色,0x05为带透明度的真彩色,枚举如下:

/*Image color format*/
enum {
    LV_IMG_CF_UNKNOWN = 0,

    LV_IMG_CF_RAW,              /**< Contains the file as it is. Needs custom decoder function*/
    LV_IMG_CF_RAW_ALPHA,        /**< Contains the file as it is. The image has alpha. Needs custom decoder
                                   function*/
    LV_IMG_CF_RAW_CHROMA_KEYED, /**< Contains the file as it is. The image is chroma keyed. Needs
                                   custom decoder function*/

    LV_IMG_CF_TRUE_COLOR,              /**< Color format and depth should match with LV_COLOR settings*/
    LV_IMG_CF_TRUE_COLOR_ALPHA,        /**< Same as `LV_IMG_CF_TRUE_COLOR` but every pixel has an alpha byte*/
    LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED, /**< Same as `LV_IMG_CF_TRUE_COLOR` but LV_COLOR_TRANSP pixels
                                          will be transparent*/

    LV_IMG_CF_INDEXED_1BIT, /**< Can have 2 different colors in a palette (always chroma keyed)*/
    LV_IMG_CF_INDEXED_2BIT, /**< Can have 4 different colors in a palette (always chroma keyed)*/
    LV_IMG_CF_INDEXED_4BIT, /**< Can have 16 different colors in a palette (always chroma keyed)*/
    LV_IMG_CF_INDEXED_8BIT, /**< Can have 256 different colors in a palette (always chroma keyed)*/

    LV_IMG_CF_ALPHA_1BIT, /**< Can have one color and it can be drawn or not*/
    LV_IMG_CF_ALPHA_2BIT, /**< Can have one color but 4 different alpha value*/
    LV_IMG_CF_ALPHA_4BIT, /**< Can have one color but 16 different alpha value*/
    LV_IMG_CF_ALPHA_8BIT, /**< Can have one color but 256 different alpha value*/

    LV_IMG_CF_RESERVED_15,              /**< Reserved for further use.*/
    LV_IMG_CF_RESERVED_16,              /**< Reserved for further use.*/
    LV_IMG_CF_RESERVED_17,              /**< Reserved for further use.*/
    LV_IMG_CF_RESERVED_18,              /**< Reserved for further use.*/
    LV_IMG_CF_RESERVED_19,              /**< Reserved for further use.*/
    LV_IMG_CF_RESERVED_20,              /**< Reserved for further use.*/
    LV_IMG_CF_RESERVED_21,              /**< Reserved for further use.*/
    LV_IMG_CF_RESERVED_22,              /**< Reserved for further use.*/
    LV_IMG_CF_RESERVED_23,              /**< Reserved for further use.*/

    LV_IMG_CF_USER_ENCODED_0,          /**< User holder encoding format.*/
    LV_IMG_CF_USER_ENCODED_1,          /**< User holder encoding format.*/
    LV_IMG_CF_USER_ENCODED_2,          /**< User holder encoding format.*/
    LV_IMG_CF_USER_ENCODED_3,          /**< User holder encoding format.*/
    LV_IMG_CF_USER_ENCODED_4,          /**< User holder encoding format.*/
    LV_IMG_CF_USER_ENCODED_5,          /**< User holder encoding format.*/
    LV_IMG_CF_USER_ENCODED_6,          /**< User holder encoding format.*/
    LV_IMG_CF_USER_ENCODED_7,          /**< User holder encoding format.*/
};
typedef uint8_t lv_img_cf_t;

可以从如下网页得到如下内容:https://docs.lvgl.io/master/overview/image.html#color-format

Various built-in color formats are supported:

LV_IMG_CF_TRUE_COLOR Simply stores the RGB colors (in whatever color depth LVGL is configured for).

LV_IMG_CF_TRUE_COLOR_ALPHA Like LV_IMG_CF_TRUE_COLOR but it also adds an alpha (transparency) byte for every pixel.

LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED Like LV_IMG_CF_TRUE_COLOR but if a pixel has the LV_COLOR_TRANSP color (set in lv_conf.h) it will be transparent.

LV_IMG_CF_INDEXED_1/2/4/8BIT Uses a palette with 2, 4, 16 or 256 colors and stores each pixel in 1, 2, 4 or 8 bits.

LV_IMG_CF_ALPHA_1/2/4/8BIT Only stores the Alpha value with 1, 2, 4 or 8 bits. The pixels take the color of style.img_recolor and the set opacity. The source image has to be an alpha channel. This is ideal for bitmaps similar to fonts where the whole image is one color that can be altered.

The bytes of LV_IMG_CF_TRUE_COLOR images are stored in the following order.

For 32-bit color depth:

Byte 0: Blue

Byte 1: Green

Byte 2: Red

Byte 3: Alpha

For 16-bit color depth:

Byte 0: Green 3 lower bit, Blue 5 bit

Byte 1: Red 5 bit, Green 3 higher bit

Byte 2: Alpha byte (only with LV_IMG_CF_TRUE_COLOR_ALPHA)

For 8-bit color depth:

Byte 0: Red 3 bit, Green 3 bit, Blue 2 bit

Byte 2: Alpha byte (only with LV_IMG_CF_TRUE_COLOR_ALPHA)

You can store images in a Raw format to indicate that it's not encoded with one of the built-in color formats and an external Image decoder needs to be used to decode the image.

LV_IMG_CF_RAW Indicates a basic raw image (e.g. a PNG or JPG image).

LV_IMG_CF_RAW_ALPHA Indicates that an image has alpha and an alpha byte is added for every pixel.

LV_IMG_CF_RAW_CHROMA_KEYED Indicates that an image is chroma-keyed as described in LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED above.

这里上传本章节使用到的资料:https://download.csdn.net/download/cheng___yi/87380525

直接把图片放到代码钟引用

在上面的章节中有说怎么生成图片的bin和bin的格式,这里测试一下直接把图片放到代码中编译运行,这里把bin变成数组,注释掉头部后直接写到代码钟:

const uint8_t time06_home_map[] = {
	/*0x04,0xc0,0x03,0x23,*/0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,
	0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,
	0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,
	0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,
	0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,
	0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,
	0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,
	0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,
	0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,
	0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,0x45,0x29,
	...............................................................................
	};
	const lv_img_dsc_t time06_nackground = {
	.header.always_zero = 0,
	.header.w = 240,
	.header.h = 280,
	.data_size = 67200 * LV_COLOR_SIZE / 8,
	.header.cf = LV_IMG_CF_TRUE_COLOR,
	.data = time06_home_map,
	};

下载代码运行后,机器上面的图片和原图对比如下:

可以看到这样做是可行的!

合并成一个bin然后在代码引用

上面的做法是直接把图片放在代码中,如果要这样做的话要一张一张图片来拷贝复制,过于麻烦,所以正常的做法是把所有图片合并到一个bin中,代码通过偏移量引索所有的图片!
按照Image_Conver_Tool工具中的说明文档"工具说明.doc"可以知依次执行下图中的1,2,3,4一个四个步骤就能够在"Output_flash_bin"生成一个合并的"UI.bin",在"Output_c"目录中会生成代码使用到的.c和.h文件以引索"UI.bin":



经过对比可知"UI.bin"只是所有图片的bin的合集,并没有修改原来bin的内容:

这里把"home.bmp"这张图片放到工程里面的Image_Conver_Tool工具目录中,如下:

define.h有如下变化:


picture.c有如下变化:

picture.h有如下变化:

可以看到插入了"home.bmp"这张图片,对于这张图片之后的图片的位置全部影响到了,之前的应该还是可以正常显示,所以这样看来还是要更新整个文件才行!
这里修改"time06_nackground "这个图片对象如下:

const lv_img_dsc_t time06_nackground = {
.header.always_zero = 0,
.header.w = 240,
.header.h = 280,
.data_size = 67200 * LV_COLOR_SIZE / 8,
.header.cf = LV_IMG_CF_TRUE_COLOR,
.data = home_map,//time06_nackground_map,
};

编译烧录(同时烧录flash)可以看到界面如下:

LVGL修改主页背景图_20230112151035

LvglImgTool转换图片lvgl_image.exe生成C文件

在上面的例子中使用的转换工具为lv_img_conv,这个转换工具最大的问题是转换速度太慢,对于项目的进度有很大的限制,并不适合当下我所需要的,最后找到LvglImgTool转换工具,速度很快,但是也引发了好多其他的bug,请从如下地址下载LvglImgTool:http://dz.lfly.xyz/forum.php?mod=viewthread&tid=19&extra=page%3D1

这个工具支持一次选择多张图片的功能,类似于批量转换.这个工具只是替换了本文"lv_img_conv生成bin文件格式"章节的第一步,也就是单单生成图片资源bin文件的功能,那剩下的2,3,4这3步依旧要其他工具来转换,没办法这里写了lvgl_image工具来实现2,3,4这三个步骤,也就是给LvglImgTool工具生成适配的.c,.h文件!
相对于原来的转图方式,这里引入LvglImgTool和lvgl_image后,图片资源文件Image_Conver_Tool文件夹如下:

这时候从图片到bin只要做如下两步:
1.使用LvglImgTool工具对"Output"文件夹机器子文件夹的所有图片进行转换
2.双击lvgl_image.exe在Output_c中生成想过代码
引入LvglImgTool和lvgl_image看起来即简化了文件夹目录,也提升了处理速度,同时还节省了操作步骤,但是其实也是有缺点的,这里的缺点就是对透明度的处理做得还不够好,因为LvglImgTool的缺点是对于有些jpg图片识别不到,所以这里只能够相关工具把所有的jpg和bmp等图片转换成png:


因为转换工具选择的是真彩色,他不会根据图片的格式来自动变成带透明度的,所以就造成对所有图片都转换出非透明度的图片,所以对于需要透明度图片的地方就会产生锯齿:

如下界面锯齿就很明显(左图为之前的显示效果,右图为现在的):

所以下来可能还要深入处理工具才行!
目前所使用的的工具请从如下地址下载:https://download.csdn.net/download/cheng___yi/87384616
上面的图片转换方式有一个很致命的问题,就是在太空人界面会发现图片异常:

LvglImgTool和lvgl_image太空人图片异常

这里如果选择真彩色带透明度的来转换图片:

使用这种方式PNG转换为透明色,JPG为真彩色,通过图片的格式来控制了是否透明:



但是这时候就跑不开上面说到的LvglImgTool有些jpg不能够识别的bug,这里看到如下两张图片,左边的LvglImgTool能够转换,右边的不行:

看来是颜色位宽的原因造成LvglImgTool识别异常.,这里尝试用python增加上透明度,发现加透明度后图片显示有很大的差异(如下左图为加透明度后,右图为加透明度前):

这样看用python来增加透明度不是很合理!