How to use the File Explorer with embedded FS like MicroSd

How-to
1

What MCU/Processor/Board and compiler are you using?

I’m using ESP32S3 and controlling a parallel eink display with an open-source project called epdiy. I’ve designed a custom board that adds touch and front-light LED driver so I can fully control a Kindle display.

What LVGL version are you using?

Using 9.1 with a fork that adds RGB332 since I was missing that Color Format

What do you want to achieve?

I would like to understand how I can connect the existing File Explorer to a FS template where I can fill the Open, Read, Write and directory functions with those of a Espressif MMC SD. I read the examples and understand how it works on Windows or Linux but I don’t get what is the way to add hooks so it can be used in any embedded development.

What have you tried so far?

I’ve tried starting the File Explorer and it does in fact render something but that was all.

fileExplorer
fileExplorer1956×886 194 KB

Is there any way to tell File Explorer to use callback functions to work with any device or it’s designed just to work in a PC?

2
  1. Port filesystem in esp-idf, example(I usually use fatfs): https://github.com/espressif/esp-idf/tree/master/examples/storage/ext_flash_fatfs
  2. open filesystem in lv_conf.h(idf.py menuconfig):
#define LV_USE_FS_FATFS 1
#if LV_USE_FS_FATFS
    #define LV_FS_FATFS_LETTER 'A'     /* Important! Set an upper cased letter on which the drive will accessible (e.g. 'A')*/
    #define LV_FS_FATFS_CACHE_SIZE 0    /*>0 to cache this number of bytes in lv_fs_read()*/
#endif
  1. File system test:
lv_fs_read_file("A:/lv_fs_test.txt");

static void lv_fs_read_file(char * fn)
{
	lv_fs_file_t f;
	lv_fs_res_t res;

	//   LV_FS_MODE_RD or  LV_FS_MODE_WR
	res = lv_fs_open(&f, fn, LV_FS_MODE_RD);

	if(res != LV_FS_RES_OK) {
		LV_LOG_USER("Open error! Error code: %d", res);
		return;
	}

	uint32_t read_num;
	uint8_t buf[8];

	while (1) {
		res = lv_fs_read(&f, buf, 8, &read_num);
		if(res != LV_FS_RES_OK) {
			LV_LOG_USER("Read error! Error code: %d", res);
			break;
		}

		//printf("%s", buf);
                LV_LOG_USER("%s", buf);

		if (read_num != 8)	break;
	}

	lv_fs_close(&f);
}
  1. Test lv_ file_explorer example:
{
    lv_obj_t * file_explorer = lv_file_explorer_create(lv_screen_active());
    lv_file_explorer_open_dir(file_explorer, "A:/");
}

Important Notes

1 Like
3

Hi @100ask
Thanks a lot. I will find some time to try this. Some thing that I still have to research are:

  1. Readme clearly says this is to “connect an external SPI Flash chip” (Not an SDCard that is a different thing)

  2. This config you mention:

LV_FS_FATFS_LETTER

I will try this. Then the question is how to define that “A” drive in the Espressif side. The partition is mounted like:

 const char *base_path = "/extflash";

Your answer looks helpful as the first glance and it’s a good idea.
I will try to follow FAT Filesystem Support - ESP32 - — ESP-IDF Programming Guide v5.1 documentation and try to open the SD card with FAT FS

4

You need to grasp this:

// Assuming there is only one drive and drive is available
lv_fs_open()  // lvgl\src\misc\lv_fs.c
    lv_fs_drv_t * drv = lv_fs_get_drv(letter);   // The role of letter
        drv->open_cb   // https://github.com/lvgl/lvgl/blob/release/v9.1/src/libs/fsdrv/lv_fs_fatfs.c#L72
             f_open();  // FATFS interface

By understanding the meaning of LVGL Filesystem interface parameters in this way, you can quickly use them.

1 Like
5

When enabling FAT FS that is actually in
LVGL configuration → 3rd Party libraries → File system on top of FatFS

I’m getting the following error:
components/lvgl/src/libs/fsdrv/lv_fs_fatfs.c:12:10: fatal error: ff.h: No such file or directory

I though it was because the fatfs component is not added but I’ve checked in my CMakeLists and it is:

idf_component_register(SRCS main.cpp
INCLUDE_DIRS ${LVGL_INCLUDE_DIRS}
REQUIRES 
# ESP-IDF components
fatfs driver esp_timer 
# LVGL specifics
lvgl lvgl_epaper_drivers
)

Here the solution to that one. But there are still some errors coming like:

lvgl/src/libs/fsdrv/lv_fs_fatfs.c:228:32: error: ‘DIR’ undeclared (first use in this function); did you mean ‘DDR’?
228 | DIR * d = lv_malloc(sizeof(DIR));

@100ask If you have a working example with this I would like to see it. At this point it looks like a shorter road to change all FAT references or even use the List widget and make a custom File explorer that implementing this since it seems so far no-one tried it fully with an Espressif MCU.
If yes then I would like to check a full example please.

6

Oh, you reminded me, this is an example I wrote before: https://github.com/100askTeam/esp-idf-learn/tree/master/07_integrated/01_lcd_sd_card_fs_joypad_lv_lib_100ask