I have a 480x480 display that displays a grid of 12 buttons. Each button has a png file for active and inactive state. PNG files are stored on a flash partition. It works, the display is stable but there is a noticeable delay on button touch before the active image is displayed, presumably due to the png file decoding. I tried using the image cache, which improves performance but makes the display unstable. Sometimes pressing a button causes the display to flicker.
What MCU/Processor/Board and compiler are you using?
esp32s3
What LVGL version are you using?
v9.2
What do you want to achieve?
I want to know why enabling the image cache causes the display to flicker sometimes when responding to a button press. Also to know how to get responsive png button image generation without affecting display stability.
if RAM is of little concern the best way to go about it is to render the image to a raw buffer using the lv_canvas widget. This will decode the PNG and write the pixel data as raw RGBA values to a buffer and you can then set that buffer as the source for the image.
When loading an image from a file and having to decode that image there is quite a bit involved. LVGL doesn’t load the entire image in a single go. It reads a portion of the file and decodes that portion and then writes that portion to the frame buffer. It does this over and over again until the file is read. The issue is each time it does this it opens and closes the file and reads the header data over and over. So there is a lot of extra overhead. This is done to keep the memory consumption as low as possible. That comes at a cost which is it takes longer to do and uses more processor time to do it.
The ESP32 S3 is available with a large amount of RAM Up to 16MB I believe. That is a lot in the land of MCU’s. A lot of MCU’s have < 512k of RAM which is why this kind of a design is needed in LVGL.
I know you can also dink about with the image cache in order to get it to hold more data. I am not sure how it exactly works though.
Another thing you can do since the ESP32-S3 also comes with a lot of flash space is you can use the LVGL image converter and convert the PNG image into a raw binary file and load that instead. This will improve performance because the image is already going to be decoded into raw RGBA data. Doing that comes at a cost which is higher amounts of flash storage being used for the binary image file.
PNG on flash partition = no you cant improve without change…
Cache flicker is based on memory used for buffs. S3 have internal and external SPIRAM … Too cache have only efect on second show image, first delay time stay here.
Optimal is on app start preload decompressed images into SPIRAM an use this instead png in code. Based on module for example N16R8 have 8MB SPIRAM. Decoded png require 32 bit per pixel then one image 100x100 cost 40kB in SPIRAM …