How to display an Indexed 2 colors image with backgroup transparent?

How-to
1

20210201023830

see the figure,the "-26C"is showing by image,but it has a white backgroud,i want to make the “-26C” 's backgroud transparent . How? and the C array code is below.

const uint8_t two_map[] = {
0x0e, 0x0c, 0x0e, 0xff, /Color of index 0/
0xfb, 0xfd, 0xfb, 0xff, /Color of index 1/

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0,
.
.some data …
.
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0,
};

lv_img_dsc_t two = {
.header.always_zero = 0,
.header.w = 52,
.header.h = 80,
.data_size = 568,
.header.cf = LV_IMG_CF_INDEXED_1BIT,
.data = two_map,
};

2

Are your numbers mutable, and if they are, why not use fonts.

the first your image has a transparent layer, the white part of your image should be transparent in the original,then When converting images, the Color Format is set to True Color with Alpha,the data struct of img mybe like this:

const lv_img_dsc_t icon_heart = {
    .header.always_zero = 0,
    .header.w = 64,
    .header.h = 64,
    .data_size = 4096 * LV_IMG_PX_SIZE_ALPHA_BYTE,
    .header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA,
    .data = icon_heart_map,
};

anther way is to set the transparent color in lv_conf.h

/*Images pixels with this color will not be drawn (with chroma keying)*/
#define LV_COLOR_TRANSP    LV_COLOR_LIME         /*LV_COLOR_LIME: pure green*/
3

I think the easiest solution is to make the background transparent in the original image (and ensure the original only has two colors before converting).

4

So whether this way should set the conversion format to Alpha only shades