開發(fā)環(huán)境
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項目，在根目錄下創(chuàng)建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:創(chuàng)建新的ESP-IDF組件,輸入組件文件夾的名字（例如：my_ui）
將.h頭文件放在include文件夾中，將其它.c文件放在include文件夾之外。
4、將下面CMakeList.txt文件中的內容覆蓋原來生成的CMakeList.txt文件?？蓮椭葡旅娴腸程序中的內容。否則，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)
文章來源：http://www.zghlxwxcb.cn/news/detail-415212.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-415212.html
到了這里，關于ESP32在ESP-IDF框架下使用LVGL（v8.3）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
