I want to display a PNG image using LVGL on an ESP32-S3 microcontroller without using an SD card

Get started
1

I want to display a PNG image using LVGL on an ESP32-S3 microcontroller without using an SD card.

The PNG image should be stored in the microcontroller’s flash memory using SPIFFS.
I do not want to convert the image into a C array — I want to load it directly from the PNG file.
I have LVGL running, and I’m using an RGB display connected to the ESP32-S3.

I’ve enabled CONFIG_LV_USE_PNG and CONFIG_LV_USE_FS_STDIO in menuconfig. However, I’m not sure how to correctly mount SPIFFS and display the image using lv_img_set_src().
Can you provide a minimal working example that shows how to:

  1. Mount SPIFFS
  2. Use lv_img to load and display the PNG file

The image is named logo.png and is located in the /spiffs directory.
Thankyou

2

maybe this or this link will help you

1 Like
3

Thank you for your reply and for sharing the links. I took the time to check both resources carefully, but unfortunately, I wasn’t able to find a solution.
If you have any other ideas or if there’s a known workaround, I’d really appreciate your guidance.
Thanks

4

I used filesystem driver to access to my png-files. As you can see

To use files in Image Widgets the following callbacks are required:
open
close
read
seek
tell

Your driver will use configured virtual-dirve letter, as in example

drv.letter = 'S';

So you should add this letter and /spiffs dir path to your image path S:/spiffs/logo.png. During file access lvgl truncate this path - removes drive letter, so in your callback function, for example

void * my_open_cb(lv_fs_drv_t * drv, const char * path, lv_fs_mode_t mode);

you will need to use path arg value (wich wil be spiffs/logo.png - as far as I remember) to get access to spiffs-objects.

5

also you can find driver implementation example at forum

6

You may find the header-only library STB helpful for loading the image into a bytearray

In your #include section…

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image/stb_image.h"

… then in the actual file loading function you setup:

int width, height, nrChannels;
const char *  myFilePath = "pngs/test123.png";
unsigned char *data = stbi_load(myFilePath, &width, &height, &nrChannels, 4);

// now data holds the decoded bytes, width, height, and nrChannels 
// hold the values STBI detected during load.  Use that information here.

stbi_image_free(data);  // Don't forget to free the decoded data when you're done with it.