ESP32在ESP-IDF框架下使用LVGL（v8.3）

开发环境

VSCode+ESP-IDF插件
说明：IDF版本为4.4.4，最新版的5.0.1弃用了些东西，而lvgl_esp32_drivers对5以上的版本未适配，所以不建议使用5以上的版本。
安装：安装教程，建议整体看完在进行安装，以免安装失败，教程安装的是5.0.1，需要改为4.4.4。
Arduino移植教程：点击此处

加载库

lvgl:github下载地址，选择8.3版本。
lvgl_esp32_driver:gihub下载地址
说明：将两个压缩包解压，将lvgl-release-v8.3重命名为lvgl,lvgl_esp32_drivers_master重命名为lvgl_esp32_drivers，新建ESP-IDF项目，在根目录下创建components文件夹，并将上面两个文件夹放入components文件夹中。
操作：clean一下项目，重新build一下项目，此时界面下方导航栏齿轮按钮（SDK Configuration editor）中会生成lvgl和驱动相关的配置。首次编译会出现如下错误：

错误一：
lvgl_helpers.h:58:25: error: 'LV_HOR_RES_MAX' undeclared (first use in this 
function); did you mean 'LV_HOR_RES'?
解决方法：
ctrl+鼠标左键,选中上述错误语句，找到错误文件lvgl_helpers.h;在给文件的第25行插入下面两个定义，需要根据自己的屏幕尺寸修改。
#define LV_HOR_RES_MAX 240
#define LV_VER_RES_MAX 320错误二：
lvgl_helpers.c:159:9: error: 'SPI_HOST_MAX' undeclared (first use in this function); did you mean 'GPIO_PORT_MAX'?
解决方法：
还是上面的文件中，添加如下定义
#define SPI_HOST_MAX 3

lvgl_esp32_drivers配置

屏幕：st7789 240*320 2.8寸屏幕，屏幕接线方式如下。

点解VSCode界面下方导航栏齿轮按钮，抖索 Display Pin Assigments 配置如下：

测试

下面的程序，根据lvgl_port_esp32主程序修改而来。
打开齿轮按钮，使能一个lvgl示例，如下使能Benchmark your system,并将下面代码直接覆盖原来的主程序。如果你想测试其它示例，可以在下面中文注释下面，调用ui部分的逻辑代码即可。

#include <stdbool.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "esp_freertos_hooks.h"
#include "freertos/semphr.h"
#include "esp_system.h"
#include "driver/gpio.h"
#include "lvgl/lvgl.h"
#include "lvgl_helpers.h"
#include <lv_demos.h>
/      DEFINES*/
#define TAG "demo"
#define LV_TICK_PERIOD_MS 1/*  STATIC PROTOTYPES/
static void lv_tick_task(void *arg);
static void guiTask(void *pvParameter);
static void create_demo_application(void);/*   APPLICATION MAIN/
void app_main() {xTaskCreatePinnedToCore(guiTask, "gui", 4096*2, NULL, 0, NULL, 1);
}SemaphoreHandle_t xGuiSemaphore;static void guiTask(void *pvParameter) {(void) pvParameter;xGuiSemaphore = xSemaphoreCreateMutex();lv_init();lvgl_driver_init();lv_color_t* buf1 = heap_caps_malloc(DISP_BUF_SIZE * sizeof(lv_color_t), MALLOC_CAP_DMA);assert(buf1 != NULL);static lv_color_t *buf2 = NULL;static lv_disp_draw_buf_t disp_buf;uint32_t size_in_px = DISP_BUF_SIZE;lv_disp_draw_buf_init(&disp_buf, buf1, buf2, size_in_px);lv_disp_drv_t disp_drv;lv_disp_drv_init(&disp_drv);disp_drv.flush_cb = disp_driver_flush;disp_drv.draw_buf = &disp_buf;lv_disp_drv_register(&disp_drv);const esp_timer_create_args_t periodic_timer_args = {.callback = &lv_tick_task,.name = "periodic_gui"};esp_timer_handle_t periodic_timer;ESP_ERROR_CHECK(esp_timer_create(&periodic_timer_args, &periodic_timer));ESP_ERROR_CHECK(esp_timer_start_periodic(periodic_timer, LV_TICK_PERIOD_MS * 1000));/* 在这里更换自己的UI */lv_demo_benchmark();while (1) {/* Delay 1 tick (assumes FreeRTOS tick is 10ms */vTaskDelay(pdMS_TO_TICKS(10));/* Try to take the semaphore, call lvgl related function on success */if (pdTRUE == xSemaphoreTake(xGuiSemaphore, portMAX_DELAY)) {lv_task_handler();xSemaphoreGive(xGuiSemaphore);}}/* A task should NEVER return */free(buf1);vTaskDelete(NULL);
}static void lv_tick_task(void *arg) {(void) arg;lv_tick_inc(LV_TICK_PERIOD_MS);
}

上面程序是在lvgl_port_esp32的主程序修改而来，源程序直接运行会报下图中的错误，需要将lv_disp_buf_t修改为lv_disp_draw_buf_t,将lv_disp_buf_init修改为lv_disp_draw_buf_init,将 disp_drv.buffer修改为disp_drv.draw_buf。除此以外，删除了一些没用的#if、#endif等内容，让程序看起来比较简洁。

虽然编译通过了，但对于合宙的esp32s3来说还是没有画面显示。需要将lvgl_helpers.c的第180行，修改成如下代码，如果是其它芯片比如ESP32S2等，也要做相应的修改，网上有相关的教程。

 #if defined (CONFIG_IDF_TARGET_ESP32C3)|| defined (CONFIG_IDF_TARGET_ESP32S3)dma_channel = SPI_DMA_CH_AUTO;#endif

编写自己的UI界面

使用软件SquareLine Studio,版本1.2.2，该版本支持LVGL 8.2.0、8.3.3、8.3.4
1、设置屏幕尺寸，具体参数如下，注意红框内的内容。

2、随便拖拽两个控件。选择Export->Export UI Files,会导出.c和.h文件。
3、在VScode中使用ctrl+shift+p，选择ESP-IDF:创建新的ESP-IDF组件,输入组件文件夹的名字（例如：my_ui）
将.h头文件放在include文件夹中，将其它.c文件放在include文件夹之外。
4、将下面CMakeList.txt文件中的内容覆盖原来生成的CMakeList.txt文件。可复制下面的c程序中的内容。否则，ui界面相关的程序不会得到编译。

5、在main.c文件中#include<ui.h>,在上面完整代码中文注释下面一行调用ui_init()函数。
6、将SDK Configuration editor的下面选项选中。

7、编译、下载。
8、设计图、与运行结果如下所示。

file(GLOB_RECURSE SOURCES 	./*.c )
idf_component_register(SRCS ${SOURCES}INCLUDE_DIRS "include"REQUIRES lvgl)