How to display a large picture quickly

How-to
1

Important: posts that do not use this template will be ignored or closed.

Before posting

  • Get familiar with Markdown to format and structure your post
  • Be sure to update lvgl from the latest version from the master branch.
  • Be sure you have checked the relevant part of the documentation. We will not respond in detail to posts where you haven’t read the relevant documentation.
  • If applicable use the Simulator to eliminate hardware related issues.

Delete this section if you read and applied the mentioned points.

Description

As shown in the video, I click the button to open the menu interface, which is made up of a PNG image as the full-screen background and several other small PNG images as the buttons. Yes, I have added libraries to support opening PNG images, but when I click the button to enter the menu, the whole UI displays very slowly, which takes about a second to display.
Also, if I remove the PNG image from the background, it will be fast when I click the menu button!
So I want to know how to display a full screen PNG image quickly, or what is the reason for the slow display?

What MCU/Processor/Board and compiler are you using?

What LVGL version are you using?

7.4.2

What do you want to achieve?

Quickly displays a full-screen PNG image

What have you tried so far?

At present do not know how to solve

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*You code here*/

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.
video.zip (771.8 KB)

2

If you are decoding the PNG from storage, the bottleneck is either the decoder or the storage. I would suggest using an already-converted image if you want speed and space isn’t a problem.

3

Thank you very much for your answer!
We are now memory shortage, so we use PNG decoding display, so is there any way to solve this problem!
Thank you very much!

4

You would need to do some profiling to find out where the bottleneck is, but I suspect you are not going to get better performance with PNGs without changing something about the hardware.

EDIT: What is the size of your picture?

5

Yes, I need to find out what the problem is. Besides, the resolution of the picture is 854*480

6

hello i want show a button in lcd 800*480 and lvgl v7.11 my code is:

static lv_disp_buf_t disp_buf;
static lv_disp_drv_t disp_drv;
static lv_color_t buf[LV_HOR_RES_MAX * LV_VER_RES_MAX / 10];

uint16_t* LCD_FB=(uint16_t*)0xC0000000; // LCD FRAME Buffer

//**********************************************************************

lv_init();     

lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX*10);
lv_disp_drv_init(&disp_drv);

disp_drv.flush_cb = my_disp_flush;
disp_drv.buffer = &disp_buf;

disp_drv.hor_res = LV_HOR_RES_MAX; /Set the horizontal resolution of the display/
disp_drv.ver_res = LV_VER_RES_MAX; /Set the vertical resolution of the display/
lv_disp_drv_register(&disp_drv);

lv_obj_t * btn = lv_btn_create(lv_scr_act(), NULL); /Add a button the current screen/
lv_obj_set_pos(btn, 10, 10); /Set its position/
lv_obj_set_size(btn, 120, 50);

//*************************************************************

void my_disp_flush(lv_disp_drv_t * disp, const lv_area_t * area, lv_color_t * color_p)
{
int32_t x, y;
for(y = area->y1; y <= area->y2; y++) {
for(x = area->x1; x <= area->x2; x++) {
//set_pixel(x, y, color_p); / Put a pixel to the display.*/
LCD_FB[x+(y * LV_HOR_RES_MAX)]=(color_p->full);
color_p++;
}
}

lv_disp_flush_ready(disp);         /* Indicate you are ready with the flushing*/

}

//*************************************************************

but my lcd show it :

۲۰۲۱۰۹۲۱_۱۱۳۶۳۶
۲۰۲۱۰۹۲۱_۱۱۳۶۳۶3276×2000 2.22 MB

What do you think is the problem?