Load small images from ESP32 LittleFS LVGL 9.3

How-to
,
1

What do you want to achieve?

I’d like to load some images from ESP32 flash using LittleFS and need some guidelines / examples which image format is recommended for my application:

  • Max image size: 320x240 pixels.
  • Lower quality images (max color depth 16 RGB565).
  • No transparency.
  • Small image size in flash and small RAM usage.
  • Longer load time is not an issue.

What have you tried so far?

What is a suitable file format for this application? I’ve tried to convert 320x240 images with:

  1. Online LVGL 9 imageconvert tool:
    • This can generate a C-binary files for LVGL 9 and is intended to place in RAM. Can it generate files to place in LittleFS data directory?
  2. scripts\LVGLImage.py:
    • Command LVGLImage.py --ofmt BIN --cf I4 --name image src/image.png:
      Generated image.bin is around 40KB, can be loaded with LittleFS and is displayed correctly.
    • Command LVGLImage.py --ofmt PNG --cf I4 --name image src/image.png:
      Generated image.png is around 19KB, can be loaded with LittleFS, but generates errors:
Setup done
ERROR: [Error]  (0.359, +359)    lv_realloc: couldn't reallocate memory lv_mem.c:162
ERROR: [Error]  (0.363, +4)      lv_realloc: couldn't reallocate memory lv_mem.c:162
WARNING: [Warn] (0.364, +1)      decoder_open: Error decoding PNG lv_lodepng.c:175
ERROR: [Error]  (0.374, +10)     lv_draw_image_normal_helper: Failed to open image lv_draw_image.c:236
ERROR: [Error]  (0.426, +52)     lv_realloc: couldn't reallocate memory lv_mem.c:162
...

It looks like out of memory? Is there any PNG optimization possible?

  1. Loading a image.jpg 19KB 320x240 without conversion from LittleFS results in error:
WARNING: [Warn] (0.327, +327)    lv_image_set_src: failed to get image info: A:/image.jpg lv_image.c:193

Is a configuration required in order to load JPG files from LittleFS?

Code to reproduce

lv_conf.h:

#define LV_USE_LODEPNG 1

/** API for Arduino LittleFs. */
#define LV_USE_FS_ARDUINO_ESP_LITTLEFS 1
#if LV_USE_FS_ARDUINO_ESP_LITTLEFS
    #define LV_FS_ARDUINO_ESP_LITTLEFS_LETTER 'A'  /**< Set an upper-case driver-identifier letter for this driver (e.g. 'A'). */
    #define LV_FS_ARDUINO_ESP_LITTLEFS_PATH ""      /**< Set the working directory. File/directory paths will be appended to it. */
#endif

Screenshot and/or video

N.A.

Environment

  • MCU/MPU/Board: ESP32 Cheap Yellow Display 520KB SRAM, 4MB flash
  • LVGL version: 9.3

Any suggestions which image format can be used with LittleFS? Examples are also welcome.