Use external image file as source

Previously we only support image variable as source for image widget, which requires all the referenced images to be converted and hardcoded into the app.

But in some cases you might want to use extental image file as source for your image widget. One of the common cases is to replace images without rebuilding the app.

Starting from v0.28.0, we've supported this.

Enable config

Go to Project - Project config..., then enable Use External Image File, and configure Path prefix.

Define decoder support in lv_conf.h.

#define LV_USE_FS_STDIO 1 // Enable file system support

#define LV_USE_PNG 1      // Enable PNG decoder
#define LV_USE_JPEG 1     // Enable JPEG decoder
#define LV_USE_BMP 1      // Enable BMP decoder

Implement and register file system driver for file I/O

We have an implementation for simulator, you can refer to it and implement your own.

/* 1️⃣
 * File system callbacks for LVGL
 */
static void *fs_open(lv_fs_drv_t *drv, const char *path, lv_fs_mode_t mode) {
  LV_UNUSED(drv);
  const char *flags = (mode == LV_FS_MODE_WR) ? "wb" : "rb";
  return fopen(path, flags);
}

static lv_fs_res_t fs_close(lv_fs_drv_t *drv, void *file) {
  LV_UNUSED(drv);
  fclose((FILE *)file);
  return LV_FS_RES_OK;
}

static lv_fs_res_t fs_read(lv_fs_drv_t *drv, void *file, void *buf,
                           uint32_t btr, uint32_t *br) {
  LV_UNUSED(drv);
  *br = fread(buf, 1, btr, (FILE *)file);
  return (*br > 0) ? LV_FS_RES_OK : LV_FS_RES_UNKNOWN;
}

static lv_fs_res_t fs_seek(lv_fs_drv_t *drv, void *file, uint32_t pos,
                           lv_fs_whence_t whence) {
  LV_UNUSED(drv);
  int origin = (whence == LV_FS_SEEK_SET)   ? SEEK_SET
               : (whence == LV_FS_SEEK_CUR) ? SEEK_CUR
                                            : SEEK_END;
  fseek((FILE *)file, pos, origin);
  return LV_FS_RES_OK;
}

static lv_fs_res_t fs_tell(lv_fs_drv_t *drv, void *file, uint32_t *pos) {
  LV_UNUSED(drv);
  *pos = ftell((FILE *)file);
  return LV_FS_RES_OK;
}

/* 2️⃣ Register the file system */
void register_fs() {
  static lv_fs_drv_t fs_drv;
  lv_fs_drv_init(&fs_drv);
  fs_drv.letter = 'S'; // Drive letter
  fs_drv.open_cb = fs_open;
  fs_drv.close_cb = fs_close;
  fs_drv.read_cb = fs_read;
  fs_drv.seek_cb = fs_seek;
  fs_drv.tell_cb = fs_tell;
  lv_fs_drv_register(&fs_drv);
}

Call register_fs() in main()

int main() {
  ...
  register_fs();
  ...
}

Define USE_SIMULATOR in lv_conf.h under simulator folder to enable simulation.
```
#define USE_SIMULATOR
```

info

If the image cannot be opened due to memory allocation failure, try to increase LV_MEM_SIZE in lv_conf.h.

#  define LV_MEM_SIZE    (? * 1024U * 1024U)          /*[bytes]*/

warning

All the images should be placed in the directory of Path prefix of your device.
The size of img widget should be consistent with size of the image, because the original image will be displayed.

Enable config​

Enable config