Managing Large Background Images on ESP32-S3 Using Filesystem without SD Card Due to Memory Constraints

How to
, ,
1

What do you want to achieve?

I want to add more background images for my 10 screens, each with a resolution of 800x480. When I add these images directly in the Arduino file, I encounter a space error. I’d like to load the images using the filesystem (FS) instead of an SD card. I’ve been struggling with this issue for the past 13 days, so any examples or help would be greatly appreciated.

Let me know if you’d like suggestions on handling this issue as well!

What have you tried so far?

Screenshot or video

image
image1861×361 39.9 KB

Others

2

Try store and use images in raw png format. Activate and use PSRAM for decode .

3

Whether it’s loaded from your SD coard or internal flash filesystem is the matter of the filesystem and storage driver you use, it’s lower level than what LVGL does. LVGL provides the means to use that driver instead, which you should configure first to be able to load the images as file-based assets.

4

First of all, thank you for replying to me. I’m actually a newbie to this technology, and I’ve been watching some YouTube tutorials while working on this project. However, I haven’t been able to find any tutorials or examples for this specific project. Are there any examples available for this?

5

I can’t give you an example right now, but it’s best if you try a well-supported, well-documented filesystem first, like FAT32. There’s a more detailed in-depth description at LVGL site for LittleFS too. If your internal storage has a very special filesystem and driver, you’ll need to take the simple FATFS working scenario as a base, but it will probably need patience and reading to do it for your special filesystem. It’s essentially an LVGL question, maybe they’ll be able to give you examples at LVGL forum.

6

Simple 3 step test:

  1. Squareline generate asset files … xxxx.c from one image 800x480
    set same file into online Image Converter — LVGL and choice RAW store c file and replace (backup for next use
  2. In lvconf enable png
  3. In lvconf setup memcustom 1 for use PSRAM
    Rebuild

original files from SQ is (example for s1 car charger png)

const lv_img_dsc_t ui_img_s1_png = {
    .header.always_zero = 0,
    .header.w = 1280,
    .header.h = 800,
    .data_size = sizeof(ui_img_s1_png_data),
    .header.cf = LV_IMG_CF_TRUE_COLOR,
    .data = ui_img_s1_png_data
};

after online change to

const lv_img_dsc_t s1 = {
  .header.cf = LV_IMG_CF_RAW_ALPHA,
  .header.always_zero = 0,
  .header.reserved = 0,
  .header.w = 1280,
  .header.h = 800,
  .data_size = 613337,
  .data = s1_map,
};