How to display image file on a display

[Dan1476]

From reading these discussions I can tell this is going to be a dumb question but how do I display an image file. My display is a esp32-3248s035c st7796 display and gt911 touch

[kdschlosser]

You want to use the lv.image widget

[asherevan]

You can use:

def loadimg(filename):
    with open(filename, 'rb') as f:
        imgdata = f.read()
    imgdsc = lv.image_dsc_t({'data_size':len(imgdata), 'data':imgdata})
    return imgdsc
image = lv.image(lv.screen_active())
image.set_src(loadimg(YOURIMAGEFILENAME))

[kdschlosser]

@asherevan

You have to be very careful doing that kind of a thing because of ending up with a possible memory leak or an issue because of garbage collection.

You need to hold a reference to the image data buffer. It is best to do this...

def get_image_data(filename):
    with open(filename, 'rb') as f:
        imgdata = f.read()

    return imgdata
    
def create_img_dsc(imgdata):
    imgdsc = lv.image_dsc_t({'data_size':len(imgdata), 'data':imgdata})
    return imgdsc
    

some_image_data = get_image_data(YOURIMAGEFILENAME)
some_image_data_mv = memoryview(some_image_data)
some_img_dsc = create_img_dsc(some_image_data_mv)

image = lv.image(lv.screen_active())
image.set_src(some_img_dsc)

The reason why this is a better way is because the image data is now stored in the global namespace of the module and is not going to get garbage collected when the function exits. and instead of passing a copy of the image data when creating the lvgl image descriptor you are passing the memory address of where the image data is located in RAM. That is what memoryview is all about. If you are wanting to pass bytes, bytearray or array.array objects to function calls it is always best to create a memoryview object of it and pass that instead. This way a copy is not made which eats up stack memory and also heap memory.

It is also best practice to reuse buffers if possible... as an example.. If I know that I am going to be sending 10 bytes or less of data over and over again while the program is running. Then create a 10 byte buffer object (bytes, bytearray or array.array) and create a memoryview of it and pass the memoryview object. if the amount of data you need to send is smaller than the 10 bytes then simply slice the memoryview object when passing it.

Because of the limited amount of memory available on an MCU you can run out of RAM even if there is enough free memory available. There may not be enough free contiguous memory available to create your buffer. This is called memory fragmentation, and to reduce the amount of fragmentation you need to reduce the number of buffers that are being allocated and reuse buffers when possible.

[otosan-maker]

I have to display an png file, it worked with imagetools in old micropython (lvgl 8), but now I have transformed to .bin file, no problem (no mesaagfe error) but I cannot display it (it shows nothing on the screen) If I replace image.set_src(some_img_dsc) with image.set_src(lv.SYMBOL.OK) I see the image on the screen, so I think the problem may be with the .bin format. Any guide?
Any way to decoder .png images ??

[kdschlosser]

A PNG decoder is already built in...

Open the PNG file and read it as bytes. Pass the data to an LVGL image descriptor leaving the header unpopulated. Pass the descriptor to the image widget and away you go.

[kdschlosser]

Use this code

def get_image_data(filename):
    with open(filename, 'rb') as f:
        imgdata = f.read()

    return imgdata
    
def create_img_dsc(imgdata):
    imgdsc = lv.image_dsc_t({'data_size':len(imgdata), 'data':imgdata})
    return imgdsc
    

some_image_data = get_image_data(YOURIMAGEFILENAME)
some_image_data_mv = memoryview(some_image_data)
some_img_dsc = create_img_dsc(some_image_data_mv)

image = lv.image(lv.screen_active())
image.set_src(some_img_dsc)

as it is seen replacing YOURIMAGEFILENAME with the filename of your PNG file... an actual PNG file and not a PNG that you converted to an LVGL binary file.

You cannot use the binary file because it is not going to be compatible with LVGL v9+

[otosan-maker]

Ok, it is working. I did not think about using .png files ....

But it works slowly, I will study the docs for the cache info, it may help.

Thank you very much, you are always very helpful.

[kdschlosser]

It is best to use the canvas widget and render the PNG files to the canvas widget this way the decoding of the PNG only takes place a single time. There is going to b more ram use when doing it this way. You also want to load all of the images when you start up the MCU. Ideally that is what you want to do. Dynamic loading is going to be slow because of the decompression of the PNG. The LVGL binary image files are basically a dump of the image descriptor structure in LVGL of the decoded image file. using the file is going to be faster because no decoding would need to take place but there is going to be higher memory use. LVGL 9.x has an image converter built into it in the scripts older that will convert your PNG images into LVGL binary files. You will need to populate the header data in the image descriptor when creating it which is seen in this code...

def create_img_dsc(imgdata):
    imgdsc = lv.image_dsc_t({'data_size':len(imgdata), 'data':imgdata})
    return imgdsc

You will need to provide the width, height and color format in the header section of the image descriptor in order for LVGL to be able to know the data is raw binary data.