Load PNG data into memory and display

How-to
1

Description

I’d like to be able to draw a png to the display from a plain pixel array. I am using lodepng (specifically lodepng_decode32_file) to put the decoded png into memory and creating a lv_img_dsc_t variable to pass to lv_image_set_src. It is somewhat working (image displays but it is very distorted) but there seems to be an issue with the colour format and I may be missing some post processing that needs to be done before passing the buffer to lvgl.

What LVGL version are you using?

v9.1

Code to reproduce

The code block(s) should be formatted like:

unsigned char* png_decoded;
    unsigned w;
    unsigned h;
    lodepng_decode32_file(&png_decoded, &w, &h, "A:/path/to/image.png");

    static lv_img_dsc_t png_dsc =
        {
            .header = {
                .magic = LV_IMAGE_HEADER_MAGIC,
                .cf = LV_COLOR_FORMAT_RGB565A8,
                .w = w,
                .h = h,
            },
            .data_size = w * h * 3,
            .data = png_decoded};

    lv_image_set_src(lv_image_create(lv_screen_active()), &png_dsc);

I have used the image converter and it is displaying fine but this is not my use case. I’m using a png file as the source of the png buffer for testing. Here is a screenshot of the distorted image:

Screenshot from 2024-09-30 16-35-58

Let me know if you need any more info

2

I have a working implementation now with the following updated code:

    lv_draw_buf_t* decoded = nullptr;
    uint32_t width, height;
    lodepng_decode32_file((unsigned char**)&decoded, &width, &height, "A:/path/to/image.png");

    static lv_img_dsc_t png_dsc =
        {
            .header = {
                .magic = LV_IMAGE_HEADER_MAGIC,
                .cf = LV_COLOR_FORMAT_ARGB8888,
                .w = w,
                .h = h,
            },
            .data_size = width * height * 4,
            .data = decoded->data};

    lv_image_set_src(lv_image_create(lv_screen_active()), &png_dsc);

It still feels like I am not implementing this correctly, I was hoping the built in png decoder functions would be called when lv_image_set_src is called. Anybody any ideas how I can utilise the existing png decoder when loading an image from memory and not a file?

3

@embeddedt @kisvegabor I was wondering if you had any ideas on this?

Updated code below for decoding from memory instead of file:

lv_draw_buf_t* decoded = nullptr;
    uint32_t width, height;
    lodepng_decode32((unsigned char**)&decoded, &width, &height, png_data);

    static lv_img_dsc_t png_dsc =
        {
            .header = {
                .magic = LV_IMAGE_HEADER_MAGIC,
                .cf = LV_COLOR_FORMAT_ARGB8888,
                .w = width,
                .h = height,
            },
            .data_size = width * height * 4,
            .data = decoded->data};
4

Hi,

I think the safest and the least hacky way of doing it is rendering to a canvas and keeping the buffer. See lv_example_canvas_6 as a reference.