在做LVGL项目的时候，经常是以自定义UI的方式做的，这时候图片会占用
很多资源，必须将图片转换成bin文件存放到外部存储器上，比如SD卡或者Flash存储芯片。

先上效果图

具体操作

1.注册lvgl文件系统

void init_fs_config(void)
{
    static lv_fs_drv_t pcfs_drv;                         /*A driver descriptor*/
    lv_fs_drv_init(&pcfs_drv);
    pcfs_drv.user_data = NULL;
    pcfs_drv.letter = 'S';
    pcfs_drv.ready_cb = pcfs_ready;
    pcfs_drv.write_cb = pcfs_write;
    pcfs_drv.open_cb = pcfs_open;
    pcfs_drv.close_cb = pcfs_close;
    pcfs_drv.read_cb = pcfs_read;
    pcfs_drv.seek_cb = pcfs_seek;
    pcfs_drv.tell_cb = pcfs_tell;
    lv_fs_drv_register(&pcfs_drv);
}

2.定义文件操作函数

//文件系统是否准备好被回调函数pcfs_ready
bool pcfs_ready(lv_fs_drv_t* drv)
{
    (void)drv; /*Unused*/
    return true;  //这里仅返回true,如果是嵌入式，则是返回嵌入式文件系统挂载成功与否的标志
}
//打开文件被回调的函数pcfs_open
static void* pcfs_open(lv_fs_drv_t* drv, const char* fn, lv_fs_mode_t mode)
{
    (void)drv; /*Unused*/

    errno = 0;

    const char* flags = "";

    if (mode == LV_FS_MODE_WR) flags = "wb";
    else if (mode == LV_FS_MODE_RD) flags = "rb";
    else if (mode == (LV_FS_MODE_WR | LV_FS_MODE_RD)) flags = "a+";

    /*Make the path relative to the current directory (the projects root folder)*/
    char buf[256];
    sprintf(buf, "./%s", fn);

    return fopen(buf, flags);  
}
//写入文件被回调的函数pcfs_write
static lv_fs_res_t pcfs_write(struct _lv_fs_drv_t* drv, void* file_p, const void* buf, uint32_t btw, uint32_t* bw)
{
    (void)drv; /*Unused*/

    *bw = (uint32_t)fwrite(buf, 1, btw, file_p);

    return LV_FS_RES_OK;
}
//读取文件被回调的函数pcfs_read
static lv_fs_res_t pcfs_read(lv_fs_drv_t* drv, void* file_p, void* buf, uint32_t btr, uint32_t* br)
{
    (void)drv; /*Unused*/
    
    //pc_file_t* fp = file_p;        /*Just avoid the confusing casings*/
    *br = (uint32_t)fread(buf, 1, btr, file_p);
    return LV_FS_RES_OK;
}
//关闭文件被回调的函数pcfs_close
static lv_fs_res_t pcfs_close(lv_fs_drv_t* drv, void* file_p)
{
    (void)drv; /*Unused*/

    return fclose(file_p);
}
//移动文件位置被回调的函数pcfs_seek
static lv_fs_res_t pcfs_seek(lv_fs_drv_t* drv, void* file_p, uint32_t pos,lv_fs_whence_t whence)
{
    (void)drv; /*Unused*/

    return fseek(file_p, pos, whence);
}
//获取文件位置被回调的函数pcfs_tell
static lv_fs_res_t pcfs_tell(lv_fs_drv_t* drv, void* file_p, uint32_t* pos_p)
{
    (void)drv; /*Unused*/
    *pos_p = ftell(file_p);
    return LV_FS_RES_OK;
}
//初时化调用init_fs_config函数
init_fs_config();

3.将图片转换成bin文件

转换工具使用的是

• Lvgl_image_convert_tool
• LvglFontTool_V0.4

这种离线工具，比官网的在线方式好用很多。
工具直接百度搜下，很多的。

4.调用bin格式的图片

将转换后的bin文件存放到项目目录下（注意，只有放到根目录下才能读取的到，我项目用的是codeblocks的IDE）

加载外部图片

调用代码：

    lv_obj_t* obj = lv_img_create(lv_scr_act());
    lv_img_set_src(obj,"S:images/btn/btn_mode_manual_p.bin");
    lv_obj_center(obj);

例如，我项目中用到的某个按钮，图片存放到SD卡上，调用方式如下：

加载外部字体需要匹配读取数据函数

    static uint8_t __g_font_buf[364];//如bin文件存在SPI FLASH可使用此buff
    static uint8_t *__user_font_getdata(int offset, int size){
    //如字模保存在SPI FLASH, SPIFLASH_Read(__g_font_buf,offset,size);
    //如字模已加载到SDRAM,直接返回偏移地址即可如:return (uint8_t*)(sdram_fontddr+offset);
    lv_fs_file_t file;
    lv_fs_res_t result;
    result = lv_fs_open(&file, "S:/myFont.bin", LV_FS_MODE_RD);
    if (result != LV_FS_RES_OK)
        return NULL;

    lv_fs_seek(&file, offset, LV_FS_SEEK_CUR);
    uint32_t len;
    lv_fs_read(&file, __g_font_buf, size, &len);
    lv_fs_close(&file);
    return __g_font_buf;
}

使用外部字显示

    lv_obj_t* obj = lv_btn_create(lv_scr_act());
    lv_obj_set_size(obj, 300, 300);
    lv_obj_center(obj);

    lv_obj_t* label = lv_label_create(obj);
    lv_obj_set_style_text_font(label, &_myFont, 0);
    lv_label_set_text(label, "外部字体测试");
    lv_obj_center(label);

完整代码

下面是完整的代码

lv_port_fs.h

/**
 * @file lv_port_fs.h
 *
 */

 /*Copy this file as "lv_port_fs.h" and set this value to "1" to enable content*/
#if 1

#ifndef LV_PORT_FS_H
#define LV_PORT_FS_H

#ifdef __cplusplus
extern "C" {
#endif

/*********************
 *      INCLUDES
 *********************/
#include "../lvgl/lvgl.h"

/*********************
 *      DEFINES
 *********************/
//使用PC文件系统
#define USE_PC_FILE_SYSTEM 1
//使用FATFS文件系统
#define USE_FATFS_FILE_SYSTEM 0
/**********************
 *      TYPEDEFS
 **********************/

/**********************
 * GLOBAL PROTOTYPES
 **********************/

/**********************
 *      MACROS
 **********************/

#ifdef __cplusplus
} /*extern "C"*/
#endif

#endif /*LV_PORT_FS_H*/

#endif /*Disable/Enable content*/

lv_port_fs.h

/**
 * @file lv_port_fs.c
 *
 */

/*Copy this file as "lv_port_fs.c" and set this value to "1" to enable content*/
#if 1

/*********************
 *      INCLUDES
 *********************/
#include "lv_port_fs.h"
#if USE_FATFS_FILE_SYSTEM==1
#include "fatfs/ff.h"
#endif
#include "../lvgl/lvgl.h"
#include "stdio.h"

/*********************
 *      DEFINES
 *********************/

/**********************
 *      TYPEDEFS
 **********************/

/**********************
 *  STATIC PROTOTYPES
 **********************/
static void fs_init(void);
#if USE_PC_FILE_SYSTEM==1
static lv_fs_res_t fs_open(lv_fs_drv_t *drv, void *file_p, const char *path,
        lv_fs_mode_t mode);
static lv_fs_res_t fs_close(lv_fs_drv_t *drv, void *file_p);
static lv_fs_res_t fs_read(lv_fs_drv_t *drv, void *file_p, void *buf,
        uint32_t btr, uint32_t *br);
static lv_fs_res_t fs_write(lv_fs_drv_t *drv, void *file_p, const void *buf,
        uint32_t btw, uint32_t *bw);
static lv_fs_res_t fs_seek(lv_fs_drv_t *drv, void *file_p, uint32_t pos,
        lv_fs_whence_t whence);
static lv_fs_res_t fs_size(lv_fs_drv_t *drv, void *file_p, uint32_t *size_p);
static lv_fs_res_t fs_tell(lv_fs_drv_t *drv, void *file_p, uint32_t *pos_p);

static void* fs_dir_open(lv_fs_drv_t *drv, void *rddir_p, const char *path);
static lv_fs_res_t fs_dir_read(lv_fs_drv_t *drv, void *rddir_p, char *fn);
static lv_fs_res_t fs_dir_close(lv_fs_drv_t *drv, void *rddir_p);
#endif
/**********************
 *  STATIC VARIABLES
 **********************/

/**********************
 * GLOBAL PROTOTYPES
 **********************/

/**********************
 *      MACROS
 **********************/

/**********************
 *   GLOBAL FUNCTIONS
 **********************/
#if USE_PC_FILE_SYSTEM==1
bool pcfs_ready(lv_fs_drv_t *drv);
static void* pcfs_open(lv_fs_drv_t *drv, const char *fn, lv_fs_mode_t mode);
static lv_fs_res_t pcfs_write(struct _lv_fs_drv_t *drv, void *file_p,
        const void *buf, uint32_t btw, uint32_t *bw);
static lv_fs_res_t pcfs_read(lv_fs_drv_t *drv, void *file_p, void *buf,
        uint32_t btr, uint32_t *br);
static lv_fs_res_t pcfs_close(lv_fs_drv_t *drv, void *file_p);
static lv_fs_res_t pcfs_seek(lv_fs_drv_t *drv, void *file_p, uint32_t pos,
        lv_fs_whence_t whence);
static lv_fs_res_t pcfs_tell(lv_fs_drv_t *drv, void *file_p, uint32_t *pos_p);
#endif
void lv_port_fs_init(void) {
    /*----------------------------------------------------
     * Initialize your storage device and File System
     * -------------------------------------------------*/
    fs_init();

    /*---------------------------------------------------
     * Register the file system interface in LVGL
     *--------------------------------------------------*/
#if USE_FATFS_FILE_SYSTEM==1
    /*Add a simple drive to open images*/
    static lv_fs_drv_t fs_drv;
    lv_fs_drv_init(&fs_drv);

    /*Set up fields...*/
    fs_drv.letter = 'S';
    fs_drv.open_cb = fs_open;
    fs_drv.close_cb = fs_close;
    fs_drv.read_cb = fs_read;
    fs_drv.write_cb = fs_write;
    fs_drv.seek_cb = fs_seek;
    fs_drv.tell_cb = fs_tell;

    fs_drv.dir_close_cb = fs_dir_close;
    fs_drv.dir_open_cb = fs_dir_open;
    fs_drv.dir_read_cb = fs_dir_read;

    lv_fs_drv_register(&fs_drv);
#endif

#if USE_PC_FILE_SYSTEM==1
    static lv_fs_drv_t pcfs_drv; /*A driver descriptor*/
    lv_fs_drv_init(&pcfs_drv);
    pcfs_drv.user_data = NULL;
    pcfs_drv.letter = 'S';
    pcfs_drv.ready_cb = pcfs_ready;
    pcfs_drv.write_cb = pcfs_write;
    pcfs_drv.open_cb = pcfs_open;
    pcfs_drv.close_cb = pcfs_close;
    pcfs_drv.read_cb = pcfs_read;
    pcfs_drv.seek_cb = pcfs_seek;
    pcfs_drv.tell_cb = pcfs_tell;
    lv_fs_drv_register(&pcfs_drv);
#endif
}

/**********************
 *   STATIC FUNCTIONS
 **********************/

/*Initialize your Storage device and File system.*/
static void fs_init(void) {
    /*E.g. for FatFS initialize the SD card and FatFS itself*/
#if USE_FATFS_FILE_SYSTEM==1
    sfc_init();
    #endif
    /*You code here*/
}

#if USE_PC_FILE_SYSTEM==1
//文件系统是否准备好被回调函数pcfs_ready
bool pcfs_ready(lv_fs_drv_t *drv) {
    (void) drv; /*Unused*/
    return true;  //这里仅返回true,如果是嵌入式，则是返回嵌入式文件系统挂载成功与否的标志
}
//打开文件被回调的函数pcfs_open
static void* pcfs_open(lv_fs_drv_t *drv, const char *fn, lv_fs_mode_t mode) {
    (void) drv; /*Unused*/

    errno = 0;

    const char *flags = "";

    if (mode == LV_FS_MODE_WR)
        flags = "wb";
    else if (mode == LV_FS_MODE_RD)
        flags = "rb";
    else if (mode == (LV_FS_MODE_WR | LV_FS_MODE_RD))
        flags = "a+";

    /*Make the path relative to the current directory (the projects root folder)*/
    char buf[256];
    sprintf(buf, "./%s", fn);

    return fopen(buf, flags);
}
//写入文件被回调的函数pcfs_write
static lv_fs_res_t pcfs_write(struct _lv_fs_drv_t *drv, void *file_p,
        const void *buf, uint32_t btw, uint32_t *bw) {
    (void) drv; /*Unused*/

    *bw = (uint32_t) fwrite(buf, 1, btw, file_p);

    return LV_FS_RES_OK;
}
//读取文件被回调的函数pcfs_read
static lv_fs_res_t pcfs_read(lv_fs_drv_t *drv, void *file_p, void *buf,
        uint32_t btr, uint32_t *br) {
    (void) drv; /*Unused*/

    //pc_file_t* fp = file_p;        /*Just avoid the confusing casings*/
    *br = (uint32_t) fread(buf, 1, btr, file_p);
    return LV_FS_RES_OK;
}
//关闭文件被回调的函数pcfs_close
static lv_fs_res_t pcfs_close(lv_fs_drv_t *drv, void *file_p) {
    (void) drv; /*Unused*/

    return fclose(file_p);
}
//移动文件位置被回调的函数pcfs_seek
static lv_fs_res_t pcfs_seek(lv_fs_drv_t *drv, void *file_p, uint32_t pos,
        lv_fs_whence_t whence) {
    (void) drv; /*Unused*/

    return fseek(file_p, pos, whence);
}
//获取文件位置被回调的函数pcfs_tell
static lv_fs_res_t pcfs_tell(lv_fs_drv_t *drv, void *file_p, uint32_t *pos_p) {
    (void) drv; /*Unused*/
    *pos_p = ftell(file_p);
    return LV_FS_RES_OK;
}
#endif

#if USE_FATFS_FILE_SYSTEM==1

/**
 * Open a file
 * @param drv       pointer to a driver where this function belongs
 * @param path      path to the file beginning with the driver letter (e.g. S:/folder/file.txt)
 * @param mode      read: FS_MODE_RD, write: FS_MODE_WR, both: FS_MODE_RD | FS_MODE_WR
 * @return          a file descriptor or NULL on error
 */
static lv_fs_res_t fs_open(lv_fs_drv_t *drv, void *file_p, const char *path,
                           lv_fs_mode_t mode)
{
    lv_fs_res_t res = LV_FS_RES_NOT_IMP;

    /************************************************
     * 在这里，我们需要先进行设备的判断，因为我们实际上
     * 可能不只有一个设备，而且LVGL里使用letter（即单个字符）
     * 作为驱动号
     * 而在FatFS里使用VOLUME_STR（字符串）或者一个字节的pdrv
     * 驱动号，使用前要进行转换。
     *
     * 有一种方便的方法，就是上面提到的user_data，我们可以把
     * VOLUME_STR提前装入user_data，那我们的程序进行判断时
     * 耦合度会更低，在更多设备时，这种方法会更方便
     *************************************************/

    char *path_buf = NULL;
    uint8_t opt_mode = 0;
    uint16_t path_len = strlen(path);

    // 根据传入的letter判断是什么存储设备
    switch (drv->letter)
    {
    case 'S':       // SD card
        path_buf = (char*) lv_mem_alloc(sizeof(char) * (path_len + 4));
        sprintf(path_buf, "SD:/%s", path);
        break;
    case 'F':       // SPI FALSH
        path_buf = (char*) lv_mem_alloc(sizeof(char) * (path_len + 6));
        sprintf(path_buf, "SPIF:/%s", path);
        break;
    default:
        printf("No drive %c\n", drv->letter);
        return LV_FS_RES_NOT_EX;
    }

    /* 文件操作方法，将FatFS的转换成LVGL的操作方法 */
    if (mode == LV_FS_MODE_WR)
    {
        opt_mode = FA_OPEN_ALWAYS | FA_WRITE;
    }
    else if (mode == LV_FS_MODE_RD)
    {
        opt_mode = FA_OPEN_EXISTING | FA_READ;
    }
    else if (mode == (LV_FS_MODE_WR | LV_FS_MODE_RD))
    {
        opt_mode = FA_WRITE | FA_READ;
    }

    /* 调用FatFs的函数 */
    FRESULT fres = f_open((FIL*) file_p, path_buf, opt_mode);
    if (fres != FR_OK)
    {
        printf("f_open error (%d)\n", fres);
        res = LV_FS_RES_NOT_IMP;
    }
    else
        res = LV_FS_RES_OK;

    lv_mem_free(path_buf);

    return res;
}

/**
 * Close an opened file
 * @param drv       pointer to a driver where this function belongs
 * @param file_p    pointer to a file_t variable. (opened with lv_ufs_open)
 * @return          LV_FS_RES_OK: no error or  any error from @lv_fs_res_t enum
 */
static lv_fs_res_t fs_close(lv_fs_drv_t *drv, void *file_p)
{
    lv_fs_res_t res = LV_FS_RES_NOT_IMP;

    /*Add your code here*/

    return res;
}

/**
 * Read data from an opened file
 * @param drv       pointer to a driver where this function belongs
 * @param file_p    pointer to a file_t variable.
 * @param buf       pointer to a memory block where to store the read data
 * @param btr       number of Bytes To Read
 * @param br        the real number of read bytes (Byte Read)
 * @return          LV_FS_RES_OK: no error or  any error from @lv_fs_res_t enum
 */
static lv_fs_res_t fs_read(lv_fs_drv_t *drv, void *file_p, void *buf,
                           uint32_t btr, uint32_t *br)
{
    lv_fs_res_t res = LV_FS_RES_NOT_IMP;

    /*Add your code here*/

    return res;
}

/**
 * Write into a file
 * @param drv       pointer to a driver where this function belongs
 * @param file_p    pointer to a file_t variable
 * @param buf       pointer to a buffer with the bytes to write
 * @param btr       Bytes To Write
 * @param br        the number of real written bytes (Bytes Written). NULL if unused.
 * @return          LV_FS_RES_OK: no error or  any error from @lv_fs_res_t enum
 */
static lv_fs_res_t fs_write(lv_fs_drv_t *drv, void *file_p, const void *buf,
                            uint32_t btw, uint32_t *bw)
{
    lv_fs_res_t res = LV_FS_RES_NOT_IMP;

    /*Add your code here*/

    return res;
}

/**
 * Set the read write pointer. Also expand the file size if necessary.
 * @param drv       pointer to a driver where this function belongs
 * @param file_p    pointer to a file_t variable. (opened with lv_ufs_open )
 * @param pos       the new position of read write pointer
 * @param whence    tells from where to interpret the `pos`. See @lv_fs_whence_t
 * @return          LV_FS_RES_OK: no error or  any error from @lv_fs_res_t enum
 */
static lv_fs_res_t fs_seek(lv_fs_drv_t *drv, void *file_p, uint32_t pos,
                           lv_fs_whence_t whence)
{
    lv_fs_res_t res = LV_FS_RES_NOT_IMP;

    /*Add your code here*/

    return res;
}
/**
 * Give the position of the read write pointer
 * @param drv       pointer to a driver where this function belongs
 * @param file_p    pointer to a file_t variable.
 * @param pos_p     pointer to to store the result
 * @return          LV_FS_RES_OK: no error or  any error from @lv_fs_res_t enum
 */
static lv_fs_res_t fs_tell(lv_fs_drv_t *drv, void *file_p, uint32_t *pos_p)
{
    lv_fs_res_t res = LV_FS_RES_NOT_IMP;

    /*Add your code here*/

    return res;
}

/**
 * Initialize a 'lv_fs_dir_t' variable for directory reading
 * @param drv       pointer to a driver where this function belongs
 * @param path      path to a directory
 * @return          pointer to the directory read descriptor or NULL on error
 */
static void* fs_dir_open(lv_fs_drv_t *drv, void *rddir_p, const char *path)
{
    lv_fs_res_t dir = NULL;
    /*Add your code here*/
    //dir = ...           /*Add your code here*/
    return dir;
}

/**
 * Read the next filename form a directory.
 * The name of the directories will begin with '/'
 * @param drv       pointer to a driver where this function belongs
 * @param rddir_p   pointer to an initialized 'lv_fs_dir_t' variable
 * @param fn        pointer to a buffer to store the filename
 * @return          LV_FS_RES_OK: no error or  any error from @lv_fs_res_t enum
 */
static lv_fs_res_t fs_dir_read(lv_fs_drv_t *drv, void *rddir_p, char *fn)
{
    lv_fs_res_t res = LV_FS_RES_NOT_IMP;

    /*Add your code here*/

    return res;
}

/**
 * Close the directory reading
 * @param drv       pointer to a driver where this function belongs
 * @param rddir_p   pointer to an initialized 'lv_fs_dir_t' variable
 * @return          LV_FS_RES_OK: no error or  any error from @lv_fs_res_t enum
 */
static lv_fs_res_t fs_dir_close(lv_fs_drv_t *drv, void *rddir_p)
{
    lv_fs_res_t res = LV_FS_RES_NOT_IMP;

    /*Add your code here*/

    return res;
}
#endif

#else /*Enable this file at the top*/

/*This dummy typedef exists purely to silence -Wpedantic.*/
typedef int keep_pedantic_happy;
#endif

main.c中调用

/**
 * @file main
 *
 */

/*********************
 *      INCLUDES
 *********************/
#include <stdlib.h>
#include <unistd.h>
#include "lvgl/lvgl.h"

#include "lv_drivers/win32drv/win32drv.h"

#include "app/mainui.h"
#include <windows.h>

/*********************
 *      DEFINES
 *********************/

/**********************
 *      TYPEDEFS
 **********************/

/**********************
 *  STATIC PROTOTYPES
 **********************/
static void hal_init(void);
static int tick_thread(void *data);

/**********************
 *  STATIC VARIABLES
 **********************/

/**********************
 *      MACROS
 **********************/

/**********************
 *   GLOBAL FUNCTIONS
 **********************/
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance,
        LPSTR szCmdLine, int nCmdShow) {
    /*Initialize LittlevGL*/
    lv_init();
    /*文件系统支持*/
    lv_port_fs_init();
    /*Initialize the HAL for LittlevGL*/
    lv_win32_init(hInstance, SW_SHOWNORMAL, 800, 480, NULL);

    /*Output prompt information to the console, you can also use printf() to print directly*/
    LV_LOG_USER("LVGL initialization completed!");

    //run main app ui
    main_ui();

    while (!lv_win32_quit_signal) {
        /* Periodically call the lv_task handler.
         * It could be done in a timer interrupt or an OS task too.*/
        lv_timer_handler();
        usleep(10000); /*Just to let the system breath*/
    }
    return 0;
}

在main.c文件中调用代码如下：

    /*文件系统支持*/
    lv_port_fs_init();