LVGL全程LittleVGL，是一个轻量化的，开源的，用于嵌入式GUI设计的图形库。并且配合LVGL模拟器，可以在电脑对界面进行编辑显示，测试通过后再移植进嵌入式设备中，实现高效的项目开发。

LVGL中文教程手册：极客笔记之LVGL教程

配置信息
芯片：ESP32-PICO-D4
PlatformIO版本：6.1.5
显示屏型号：ST7789V 240x240

一. platformIO生成项目文件

首先生成一个新项目，可以取消最后一行的勾选，自定义项目存储位置。

项目架构

Project
├─ .pio
│  ├─ build                    # 编译生成的文件
│  ├─ libdeps              # 依赖的开源库文件
│  │  ├─ integrity.dat     # 库配置文件，这个文件自动生成，不能手动修改
├─ .vscode                 # vscode配置文件
├─ lib                              # 私有库文件，里面的文件会被编译为静态库链接到项目中
├─ include                     # 头文件放置文件夹
├─ src                         # 源文件放置文件夹
├─ test                        # 测试文件放置文件夹
├─ .gitignore              
└─ platformio.ini               # 项目参数配置文件，libdeps中的库文件就在这里进行配置

修改platformio.ini文件
添加烧录串口号和串口监视速率，这里的串口速率只是配置platformio monitor接收数据的速率，并没有配置芯片的串口发送速率。

monitor_speed = 115200
upload_port = COM11

添加开源库
在下方的界面中搜索相应的库文件，并选择想要的版本添加到文件中。

注意：各个项目的库文件虽然都可以在installed中找到，但是不同项目的库文件不是共享的。也就是说，即使两个项目用了同一个版本的同一个库，installed中会有两个库文件，分别存储在两个项目的libdeps中。


选择添加之后，platformio.ini文件中就会自动生成依赖库代码。

二. 修改配置文件

1.lvgl
复制lv_conf_template.h到同一路径下，并改名为lvgl_conf.h

内容解注释

启用自定义时钟
注意：没有一步的话会导致屏幕停留在第一帧的界面

2.TFT_eSPI
修改User_Setup_Select.h文件，选择屏幕的型号。
这里只能解注释一个 #include ，所以需要把 #include<User_Setup.h> 给注释掉。

修改Setup24_ST7789.h文件，这里需要根据自己屏幕和芯片的连接引脚来确定引脚号。

三. 创建lvgl和屏幕的连接

可以参考lvgl/examples/porting/lv_port_disp_template.c文件，但是里面没有添加屏幕初始化的内容，所以需要结合TFT的demo来编写代码，以下是我用的源码。

注意：需要用cpp文件来编写，因为TFT_eSPI是基于cpp的。

/**
 * @file display.cpp
 *
 */

/*********************
 *      INCLUDES
 *********************/
#include "display.h"
#include <stdbool.h>
#include <TFT_eSPI.h>

/*********************
 *      DEFINES
 *********************/
#ifndef MY_DISP_HOR_RES
    #define MY_DISP_HOR_RES    (240)
#endif

#ifndef MY_DISP_VER_RES
    #define MY_DISP_VER_RES    (240)
#endif

/**********************
 *  STATIC VARIABLES
 **********************/
TFT_eSPI tft = TFT_eSPI();

/**********************
 *  STATIC PROTOTYPES
 **********************/
static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p)
{
    uint32_t w = (area->x2 - area->x1 + 1);
    uint32_t h = (area->y2 - area->y1 + 1);

    tft.startWrite();
    tft.setAddrWindow(area->x1, area->y1, w, h);
    tft.pushColors(&color_p->full, w * h, true);
    tft.endWrite();

    lv_disp_flush_ready(disp_drv);
}

/**********************
 *   GLOBAL FUNCTIONS
 **********************/

void Display::init(void)
{
    /* Set Backlight mode */
    ledcSetup(LCD_BL_PWM_CHANNEL, 5000, 8);
    ledcAttachPin(LCD_BL_PIN, LCD_BL_PWM_CHANNEL);

    /* Init lvgl */
    lv_init();

    /* Init display device */
    tft.begin(); 
    tft.setRotation(4); /* mirror */

    /*-----------------------------
     * Create a buffer for drawing
     *----------------------------*/
    static lv_disp_draw_buf_t draw_buf_dsc_1;
    static lv_color_t buf_1[MY_DISP_HOR_RES * 10];  /*A buffer for 10 rows*/
    lv_disp_draw_buf_init(&draw_buf_dsc_1, buf_1, NULL, MY_DISP_HOR_RES * 10);   /*Initialize the display buffer*/

    /*-----------------------------------
     * Register the display in LVGL
     *----------------------------------*/
    static lv_disp_drv_t disp_drv;      /*Descriptor of a display driver*/
    lv_disp_drv_init(&disp_drv);        /*Basic initialization*/

    /*Set up the functions to access to your display*/

    /*Set the resolution of the display*/
    disp_drv.hor_res = MY_DISP_HOR_RES;
    disp_drv.ver_res = MY_DISP_VER_RES;

    /*Used to copy the buffer's content to the display*/
    disp_drv.flush_cb = disp_flush;

    /*Set a display buffer*/
    disp_drv.draw_buf = &draw_buf_dsc_1;

    /*Finally register the driver*/
    lv_disp_drv_register(&disp_drv);
}

void Display::routine(void)
{
    lv_task_handler();
}

void Display::setBackLight(float duty)
{
    duty = constrain(duty, 0, 1);
    duty = 1 - duty;
    ledcWrite(LCD_BL_PWM_CHANNEL, (int)(duty * 255));
}

#ifndef DISPLAY_H
#define DISPLAY_H

#include <lvgl.h>

#define LCD_BL_PIN 5
#define LCD_BL_PWM_CHANNEL 0


class Display
{
private:


public:
    void init();
    void routine();
    void setBackLight(float);
};

#endif

四. 设计UI

这里使用的是官方提供的demo，lvgl/examples 中有很多官方提供的demo可以进行参考。

void lv_demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_style_bg_color(obj, lv_palette_main(LV_PALETTE_RED), 0);
    lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, 0);

    lv_obj_align(obj, LV_ALIGN_LEFT_MID, 10, 0);

    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_var(&a, obj);
    lv_anim_set_values(&a, 10, 50);
    lv_anim_set_time(&a, 1000);
    lv_anim_set_playback_delay(&a, 100);
    lv_anim_set_playback_time(&a, 300);
    lv_anim_set_repeat_delay(&a, 500);
    lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    lv_anim_set_path_cb(&a, lv_anim_path_ease_in_out);

    lv_anim_set_exec_cb(&a, anim_size_cb);
    lv_anim_start(&a);
    lv_anim_set_exec_cb(&a, anim_x_cb);
    lv_anim_set_values(&a, 10, 240);
    lv_anim_start(&a);
}

五. 修改main.cpp

/**
 * @file main.cpp
 * @author jozenlee
 * @brief
 * @version 0.1
 * @date 2022-12-15
 *
 * @copyright Copyright (c) 2022
 *
 */

#include <Arduino.h>
#include "lv_demo.h"

#include "display.h"
Display screen;

// lv_group_t * group;
void setup() {
    /* Init Serial */
    Serial.begin(115200);

    /* Init lvgl display port */
    screen.init();
    screen.setBackLight(0.2);

    /* Inflate GUI objects */
    lv_demo();
}

void loop() {
    // run this as often as possible
    screen.routine();

    /* Serial test */
    Serial.println("hello");
}

效果