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

news2025/1/18 15:00:02

开发环境

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寸屏幕，屏幕接线方式如下。

ESP32引脚	屏幕引脚
13	MOSI
14	SCK
15	CS
2	DC
EN 或 RST	RST
未接	MISO
VCC	BL/LED(背光）

点解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)

在这里插入图片描述