第一步 下载LVGL8源码

下载地址：https://github.com/lvgl/lvgl

image.png

1. 拉取主文件：git clone https://github.com/lvgl/lv_port_esp32.git
2. 初始化本地配置文件 git submodule init
3. 拉取子模块 git submodule update
   注：2、3可以合起来试试 git submodule update --init --recursive

第二步 将以下核心代码拷贝出来

image.png

image.png

第三步 重新组织文件夹

image.png

其中
lvgl/lv_config.h是从lv_config_template.h修改文件名而来
lvgl/porting/lv_port_disp.c是从lv_port_disp_template.c修改文件名而来
lvgl/porting/lv_port_disp.h是从lv_port_disp_template.h修改文件名而来
lvgl/src文件夹保持不动即可

第四步 将以上文件添加到项目中，每个平台的添加方法不尽相同，按照相应的添加操作即可

第五步 启用lv_config.h

将#if 0 /*Set it to "1" to enable content*/修改为#if 1 /*Set it to "1" to enable content*/

第六步 启用lv_port_disp.h

将
 /*Copy this file as "lv_port_disp.h" and set this value to "1" to enable content*/
#if 0
改为
 /*Copy this file as "lv_port_disp.h" and set this value to "1" to enable content*/
#if 1
#定义屏幕分辨率
#define LV_HOR_RES_MAX  320 // 屏幕水平分辨率
#define LV_VER_RES_MAX  240 // 屏幕垂直分辨率
定义每10行显示缓冲区大小
#define MY_DISP_HOR_RES 640
#define MY_DISP_VER_RES 480
#添加相关函数的导出定义
void lv_port_disp_init(void);
void put_px(int x, int y, lv_color_t color);
并在相关屏幕驱动中实现put_px功能
#在lv_port_disp.c中取消画点函数调用的注释，让外部程序实现画点功能
static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
{
    /*The most simple case (but also the slowest) to put all pixels to the screen one-by-one*/

    int32_t x;
    int32_t y;
    for(y = area->y1; y <= area->y2; y++) {
        for(x = area->x1; x <= area->x2; x++) {
            /*Put a pixel to the display. For example:*/
            put_px(x, y, *color_p);
            color_p++;
        }
    }

    /*IMPORTANT!!!
     *Inform the graphics library that you are ready with the flushing*/
    lv_disp_flush_ready(disp_drv);
}

第七步 在main函数中实现lvgl的功能

void app_main(void)
{
    lv_init();
    lv_port_disp_init();

    /* 在这里实现lvgl的gui应用 */
        MyDemo();

    while (1) {
        lv_task_handler();
    }
}

第八步 在定时器中断中添加lvgl的嘀嗒函数

void time_1ms_interrupt(void)
{
    lv_tick_inc(1);
}

第九步 添加画图功能函数并实现

void put_px(int x, int y, lv_color_t color)
{
// TODO: 在这里实现画点功能
}
在实际项目中，也可以采用画区域的方法，加快刷屏时间

static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
{
    /*The most simple case (but also the slowest) to put all pixels to the screen one-by-one*/

    // TODO: 在这里实现画区域的函数相关驱动
    ；

    /*IMPORTANT!!!
     *Inform the graphics library that you are ready with the flushing*/
    lv_disp_flush_ready(disp_drv);
}