Using canvas to draw image sometimes has mosaics

zhan · July 13, 2020, 2:40am

Description

I use canvas to draw different images. These images use lv_lodepng decode.
For example:

void Image::DrawImage(const std::string& src, double factor, int width, int height)
{
    lv_draw_img_dsc_t dsc;
    lv_draw_img_dsc_init(&dsc);
    dsc.zoom = factor * LV_IMG_ZOOM_NONE;

    /*canvas will be created when canvas is not exist*/
    CreateCanvas();
    
    auto bufSize = LV_CANVAS_BUF_SIZE_TRUE_COLOR_ALPHA(width, height);
    if (/*canvas buffer member variable*/_canvasBuf.size() < bufSize)
    {
        _canvasBuf.resize(bufSize);
        lv_canvas_set_buffer(_canvas, _canvasBuf.data(), width, height, LV_IMG_CF_TRUE_COLOR_ALPHA);
    }
    memset(_canvasBuf.data(), 0, _canvasBuf.size());
    lv_canvas_draw_img(/*canvas member variable*/_canvas, 0, 0, src.data(), &dsc);
}

If I set the LV_IMG_CACHE_DEF_SIZE to 30, canvas sometimes has mosaics.
For example:

But if set the LV_IMG_CACHE_DEF_SIZE to 1, It won’t.

Version

V7.1.0

embeddedt · July 13, 2020, 12:50pm

It looks like you’re getting the image data from src. Is that staying in scope, or being freed after this function exits? When you increase the image cache, LVGL can refer to the same region of memory later on to redraw the image.

zhan · July 13, 2020, 12:59pm

I use image file. I didn’t release the memory manually.
The canvas buffer is a member variable, I will resize it when not enough space.
There is a problem: different images may use the same block of image cache.

kisvegabor · July 17, 2020, 11:47am

You should call lv_img_cache_invalidate_src(_canvasBuf.data()) if you change the image on the fly.

zhan · July 20, 2020, 7:18am

Thanks. I use lv_img to resolve this problem.

tpt · September 24, 2023, 6:18pm

Simulator v8.3.

I got mosaics too. The image seems drawn shifted each row of pixel, so the result was skewn.

The image was drawn in the LV_EVENT_DRAW_PART_END callback of the table item.

Origin image in PNG 24x24 px format (2 images to display an USB and a screen icons):

The incorrect result when drawn in the table callback (the result are skewn):

The image code:

// IMAGE DATA: assets\usb.png
const LV_ATTRIBUTE_MEM_ALIGN uint8_t ui_img_usb_png_data[] = {
0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x75,0xAD,0x38,0xE3,0x18,0xED,0xD7,0xBD,0xED,0xFF,0xFF,0x4F,0xFF,0xFF,0x12,0xFF,0xFF,0x04,0xFF,0xFF,0x13,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x96,0xB5,0x3A,0x00,0x00,0xF2,0xA2,0x10,0xFF,0x20,0x00,0xFF,0xF7,0xBD,0xFF,0xFF,0xFF,0x58,0xFF,0xFF,0x28,0xFF,0xFF,0x19,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x96,0xB5,0x3A,
        0x00,0x00,0xF6,0xEB,0x5A,0xFF,0x7D,0xEF,0xFF,0x69,0x4A,0xFF,0x00,0x00,0xFF,0xF7,0xBD,0xFF,0xFF,0xFF,0x70,0xFF,0xFF,0x36,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x96,0xB5,0x3A,0x00,0x00,0xF6,0xEB,0x5A,0xFF,0xBE,0xF7,0xFF,0x1C,0xE7,0xFF,0xDF,0xFF,0xFF,0x69,0x4A,0xFF,0x00,0x00,0xFF,0xF7,0xBD,0xFF,0xFF,0xFF,0x75,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFB,0xDE,0x0B,0x1C,0xE7,0x06,0x00,0x00,0xF4,0xEB,0x5A,0xFF,0xDF,0xFF,0xFF,0xAA,0x52,0xFF,0xD3,0x9C,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0x69,0x4A,0xFF,0x61,0x08,0xFF,0xD7,0xBD,0xED,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,
        0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x59,0xCE,0x1E,0xE3,0x18,0xD8,0x61,0x08,0xEA,0xD3,0x9C,0xFF,0xF7,0xBD,0xFF,0xFF,0xFF,0xFF,0xBE,0xF7,0xFF,0xD7,0xBD,0xFF,0xFF,0xFF,0xFF,0x55,0xAD,0xFF,0xFB,0xDE,0xFF,0xFF,0xFF,0xFF,0xE3,0x18,0xFF,0x61,0x08,0xED,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x59,0xCE,0x1E,0xC3,0x18,0xDB,0x00,0x00,0xFF,0x00,0x00,0xFF,0x20,0x00,0xFF,0x96,0xB5,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0x38,0xC6,0xFF,0x49,0x4A,0xFF,0x9E,0xF7,0xFF,0xAE,0x73,0xFF,0x20,0x00,0xE7,0xD3,0x9C,0x48,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x59,0xCE,0x1E,0xC3,0x18,0xDB,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x20,0x00,0xFF,0x34,0xA5,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0x9E,0xF7,0xFF,0xDF,0xFF,0xFF,0xAE,0x73,0xFF,0x00,0x00,0xEB,0xF3,0x9C,0x49,0xFF,0xFF,0x00,
0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x59,0xCE,0x1E,0xC3,0x18,0xDB,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x20,0x00,0xFF,0x34,0xA5,0xFF,0xFF,0xFF,0xFF,0xDF,0xFF,0xFF,0x8E,0x73,0xFF,0x00,0x00,0xEB,0xF3,0x9C,0x49,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x59,0xCE,0x1E,0xC3,0x18,0xDB,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x20,0x00,0xFF,0x75,0xAD,0xFF,0x79,0xCE,0xFF,0x00,0x00,0xEB,0xF3,0x9C,0x49,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x59,0xCE,0x20,0xC3,0x18,0xDB,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,
0x00,0x00,0xFF,0x20,0x00,0xFF,0xB2,0x94,0xFF,0x9A,0xD6,0x16,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x59,0xCE,0x20,0xA2,0x10,0xDD,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0xFB,0xDE,0x0A,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x79,0xCE,0x1C,0xC3,0x18,0xDD,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x61,0x08,0xDE,0xDB,0xDE,0x0C,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x79,0xCE,0x1C,0xC3,0x18,0xDD,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,
0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x61,0x08,0xDA,0xD7,0xBD,0x2F,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x79,0xCE,0x1C,0xC3,0x18,0xDD,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x61,0x08,0xDA,0xD7,0xBD,0x2D,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x79,0xCE,0x18,0xC3,0x18,0xDD,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x61,0x08,0xDA,0xD7,0xBD,0x2D,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,
0x24,0x21,0xED,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x61,0x08,0xDA,0xD7,0xBD,0x2D,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x00,0x00,0xED,0x00,0x00,0xFF,0x00,0x00,0xFF,0xE3,0x18,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x61,0x08,0xDA,0xD7,0xBD,0x2D,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0x8E,0x73,0xED,0x00,0x00,0xFF,0xE3,0x18,0xFF,0xBE,0xF7,0x10,0xEF,0x7B,0xD3,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x61,0x08,0xDC,0xD7,0xBD,0x2F,0xFF,0xFF,0x00,0xFF,0xFF,0x00,
0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x45,0x2C,0x63,0xFF,0x00,0x00,0xFF,0x71,0x8C,0xFF,0xFF,0xFF,0x20,0xEF,0x7B,0xF0,0x20,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x61,0x08,0xDC,0xB6,0xB5,0x31,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x1B,0xFF,0xFF,0x7E,0x2C,0x63,0xFF,0x00,0x00,0xFF,0x51,0x8C,0xFF,0xFF,0xFF,0x10,0x45,0x29,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x61,0x08,0xDC,0xD7,0xBD,0x2D,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x11,0xFF,0xFF,0x29,0xFF,0xFF,0x47,0x2C,0x63,0xFF,0x00,0x00,0xFF,0x24,0x21,0xFF,0x20,0x00,0xFF,0x00,0x00,0xFF,
0x00,0x00,0xFF,0x61,0x08,0xDC,0xD7,0xBD,0x2D,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x01,0xFF,0xFF,0x0B,0xFF,0xFF,0x22,0xFF,0xFF,0x53,0x2C,0x63,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x00,0x00,0xFF,0x61,0x08,0xDC,0xD7,0xBD,0x2D,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x01,0xFF,0xFF,0x09,0xFF,0xFF,0x10,0xFF,0xFF,0x27,0xFF,0xFF,0x2D,0x6D,0x6B,0xED,0x20,0x00,0xED,0xE3,0x18,0xED,0xF7,0xBD,0x28,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,0xFF,0xFF,0x00,
};
const lv_img_dsc_t ui_img_usb_png = {
   .header.always_zero = 0,
   .header.w = 24,
   .header.h = 24,
   .data_size = sizeof(ui_img_usb_png_data),
   .header.cf = LV_IMG_CF_TRUE_COLOR_ALPHA,
   .data = ui_img_usb_png_data};

The drawing code:

            lv_draw_img_dsc_t img_dsc;
            lv_draw_img_dsc_init(&img_dsc);
            
            lv_area_t area;
            area.x1 = dsc->draw_area->x1;
            area.x2 = area.x1 + ui_img_usb_png.header.w;    // 24 px
            area.y1 = dsc->draw_area->y1 + int(((dsc->draw_area->y2 - dsc->draw_area->y1) - ui_img_usb_png.header.h) / 2);  // center y
            area.y2 = area.y1 + ui_img_usb_png.header.h;   // 24 px

            lv_draw_img(dsc->draw_ctx, &img_dsc, &area, row % 2 ? &ui_img_usb_png : &ui_img_machine_png);

Please can anybody shown me how to fix it? Thx.

Tinus · September 25, 2023, 6:39am

You have necro’d a 3 year old thread, I’d suggest creating a new one.

Anyway, are only these images skewed like this, or is it the entire screen?
To me it looks like either incorrect timing on your display or an incorrent lv_flush() function…

The only other thing that I can imagine would be incorrect is here the code where you set area.y1.

tpt · September 25, 2023, 8:12am

Hi I first trying to search for similar problem in the forum then trying to save same problem. I will start new thread next time.

The area.y1 is just coordinate of start draw. I set it complex formula to move the image into middle of row.

Normally I use img widget, however in order to paint into the table row as an icon, the image needs to be drawn inside a callback.

Below is the whole table. The gray “switch” in right col were drawn from rounded rects that are good. Only image has problem.

My lv_conf.h color setting:

/*====================
   COLOR SETTINGS
 *====================*/

/*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
#define LV_COLOR_DEPTH 16

/*Swap the 2 bytes of RGB565 color. Useful if the display has an 8-bit interface (e.g. SPI)*/
#define LV_COLOR_16_SWAP 0

/*Enable features to draw on transparent background.
 *It's required if opa, and transform_* style properties are used.
 *Can be also used if the UI is above another layer, e.g. an OSD menu or video player.*/
#define LV_COLOR_SCREEN_TRANSP 0

/* Adjust color mix functions rounding. GPUs might calculate color mix (blending) differently.
 * 0: round down, 64: round up from x.75, 128: round up from half, 192: round up from x.25, 254:     round up */
#define LV_COLOR_MIX_ROUND_OFS 0

/*Images pixels with this color will not be drawn if they are chroma keyed)*/
#define LV_COLOR_CHROMA_KEY lv_color_hex(0x00ff00)         /*pure green*/

I think the problem is the incorrect bit per pixel of the image that does not match the bpp of system? (The PNG header itself LV_IMG_CF_TRUE_COLOR_ALPHA). But that is only a guess.

Please can you take more look. Thanks.

Tinus · September 25, 2023, 11:11am

I think you are correct in thinking it is the wrong BPP. I would assume, since all other elements look right, you have correctly set the color depth to 16 bits. That means the images are an incorrect color depth perhaps, or just an incorrect color setting.

Try some of the other settings here: Online image converter - BMP, JPG or PNG to C array or binary | LVGL

One of the 2-bit options should be correct. I have to be honest that the images are sort of strange for me too. It’s not entirely clear what each color setting does, so try the most likely ones first to see if they produce proper output.