飛書文檔https://x509p6c8to.feishu.cn/wiki/Ly6ywvphqi6HZlk38vHcz2OgnXg
LVGL是一個開源的顯示框架,使用它可以加速我們開發帶顯示屏交互的應用。
IDF對于LVGL的支持一直有更新的,我們可以很方便在組件庫中搜索到對應版本的LVGL,并把它添加到工程中
idf.py add-dependency "lvgl/lvgl^9.2.0"
關于LVGL的使用,在IDF的例程中也是有提供的esp-idf/examples/peripherals/lcd/spi_lcd_touch,我們可以借鑒此工程,實現對應屏幕的LVGL移植,其實LVGL部分都是一樣的,根據不同屏幕修改屏幕外設初始化部分即可。
課程板卡使用的屏幕是SPI接口的,分辨率是172*320,驅動芯片是st7789,然后對應的IO可以回到上節課了解
#define EXAMPLE_LCD_BK_LIGHT_ON_LEVEL? 0
#define EXAMPLE_LCD_BK_LIGHT_OFF_LEVEL !EXAMPLE_LCD_BK_LIGHT_ON_LEVEL#define EXAMPLE_PIN_NUM_SCLK?????????? GPIO_NUM_16
#define EXAMPLE_PIN_NUM_MOSI?????????? GPIO_NUM_17
#define EXAMPLE_PIN_NUM_MISO?????????? GPIO_NUM_NC
#define EXAMPLE_PIN_NUM_LCD_DC???????? GPIO_NUM_21
#define EXAMPLE_PIN_NUM_LCD_RST??????? GPIO_NUM_18
#define EXAMPLE_PIN_NUM_LCD_CS???????? GPIO_NUM_15
#define EXAMPLE_PIN_NUM_BK_LIGHT?????? GPIO_NUM_2// The pixel number in horizontal and vertical
#define EXAMPLE_LCD_H_RES????????????? 172
#define EXAMPLE_LCD_V_RES????????????? 320
// Bit number used to represent command and parameter
#define EXAMPLE_LCD_CMD_BITS?????????? 8
#define EXAMPLE_LCD_PARAM_BITS???????? 8
參考上節課的LDC控制器部分,在屏幕初始化完成起來后,我們就可以進行LVGL的適配。關鍵步驟如下
- 初始化 LVGL 庫:設置 LVGL 的內部數據結構。
- 創建顯示對象:使用屏幕分辨率創建顯示對象。
- 分配繪圖緩沖區:分配足夠的內存用于繪圖緩沖區。
- 初始化緩沖區:設置緩沖區和渲染模式。
- 關聯面板句柄:將面板句柄與顯示對象關聯。
- 設置顏色格式:配置顏色格式為 RGB565。
- 設置刷新回調:注冊刷新回調函數。
- 安裝 tick 定時器:創建和啟動定時器用于 LVGL 的 tick 接口。
- 注冊事件回調:注冊事件回調函數用于刷新完成通知。
- 設置旋轉角度:根據需要設置顯示旋轉角度。
- 創建 LVGL 任務:創建任務處理 LVGL 的事件循環。
- 顯示 UI:創建并顯示 LVGL 的示例 UI。
初始化 LVGL 庫
首先,需要初始化 LVGL 庫,設置必要的內部數據結構。
// 初始化 LVGL 庫
ESP_LOGI(TAG, "Initialize LVGL library");
lv_init();
創建 LVGL 顯示對象
創建一個 LVGL 顯示對象,并使用屏幕的分辨率作為參數。
// 創建一個 LVGL 顯示對象
lv_display_t *display = lv_display_create(EXAMPLE_LCD_H_RES, EXAMPLE_LCD_V_RES);
分配繪圖緩沖區
分配 LVGL 使用的繪圖緩沖區。推薦選擇的緩沖區大小至少為屏幕大小的 1/10。
// 分配 LVGL 使用的繪圖緩沖區
size_t draw_buffer_sz = EXAMPLE_LCD_H_RES * EXAMPLE_LVGL_DRAW_BUF_LINES * sizeof(lv_color16_t);void *buf1 = spi_bus_dma_memory_alloc(LCD_HOST, draw_buffer_sz, 0);
assert(buf1);? // 確保內存分配成功
void *buf2 = spi_bus_dma_memory_alloc(LCD_HOST, draw_buffer_sz, 0);
assert(buf2);? // 確保內存分配成功
初始化繪圖緩沖區
初始化 LVGL 繪圖緩沖區,并設置兩個緩沖區和渲染模式。
// 初始化 LVGL 繪圖緩沖區
lv_display_set_buffers(display, buf1, buf2, draw_buffer_sz, LV_DISPLAY_RENDER_MODE_PARTIAL);
關聯面板句柄
將 LCD面板句柄關聯到顯示對象。
// 將面板句柄關聯到顯示對象
lv_display_set_user_data(display, panel_handle);
設置顏色格式
設置顏色格式為 RGB565。
// 設置顏色格式為 RGB565
lv_display_set_color_format(display, LV_COLOR_FORMAT_RGB565);
設置刷新回調函數
設置回調函數,用于將渲染后的圖像復制到顯示區域。
// 設置回調函數,用于將渲染后的圖像復制到顯示區域
lv_display_set_flush_cb(display, example_lvgl_flush_cb);
安裝 LVGL 的 tick 定時器
安裝 LVGL 的 tick 定時器,用于 LVGL 的 tick 接口。使用 esp_timer 創建一個 2ms 周期的定時器。
// 安裝 LVGL 的 tick 定時器
ESP_LOGI(TAG, "Install LVGL tick timer");
const esp_timer_create_args_t lvgl_tick_timer_args = {.callback = &example_increase_lvgl_tick,? // 定時器回調函數.name = "lvgl_tick"? // 定時器名稱
};
esp_timer_handle_t lvgl_tick_timer = NULL;
ESP_ERROR_CHECK(esp_timer_create(&lvgl_tick_timer_args, &lvgl_tick_timer));? // 創建定時器
ESP_ERROR_CHECK(esp_timer_start_periodic(lvgl_tick_timer, EXAMPLE_LVGL_TICK_PERIOD_MS * 1000));? // 啟動定時器
注冊 IO 面板事件回調
注冊 IO 面板事件回調,用于 LVGL 刷新完成通知。
// 注冊 IO 面板事件回調,用于 LVGL 刷新完成通知
ESP_LOGI(TAG, "Register io panel event callback for LVGL flush ready notification");
const esp_lcd_panel_io_callbacks_t cbs = {.on_color_trans_done = example_notify_lvgl_flush_ready,? // 顏色傳輸完成回調函數
};
/* 注冊回調函數 */
ESP_ERROR_CHECK(esp_lcd_panel_io_register_event_callbacks(io_handle, &cbs, display));
設置顯示旋轉角度(可選)
設置顯示旋轉角度,根據需要進行配置。
// 設置顯示旋轉角度(可選)
// lv_disp_set_rotation(display, LV_DISPLAY_ROTATION_0);
創建 LVGL 任務
創建 LVGL 任務,用于處理 LVGL 的事件循環。
// 創建 LVGL 任務
ESP_LOGI(TAG, "Create LVGL task");
xTaskCreate(example_lvgl_port_task, "LVGL", EXAMPLE_LVGL_TASK_STACK_SIZE, NULL, EXAMPLE_LVGL_TASK_PRIORITY, NULL);
顯示 LVGL Meter Widget
顯示 LVGL Meter Widget。鎖定互斥鎖,因為 LVGL API 不是線程安全的。
// 顯示 LVGL Meter Widget
ESP_LOGI(TAG, "Display LVGL Meter Widget");
_lock_acquire(&lvgl_api_lock);? // 鎖定互斥鎖
example_lvgl_demo_ui(display);? // 創建并顯示 LVGL 的示例 UI
_lock_release(&lvgl_api_lock);? // 釋放互斥鎖
最終參考源碼如下:
#include <stdio.h>
#include <unistd.h>
#include <sys/lock.h>
#include <sys/param.h>
#include <string.h>
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "esp_lcd_panel_io.h"
#include "esp_lcd_panel_vendor.h"
#include "esp_lcd_panel_ops.h"
#include "driver/gpio.h"
#include "driver/spi_master.h"
#include "esp_timer.h"
#include "esp_err.h"
#include "esp_log.h"#include "lvgl.h"static const char *TAG = "example";// Using SPI2 in the example
#define LCD_HOST? SPI2_HOSTPlease update the following configuration according to your LCD spec //#define EXAMPLE_LCD_PIXEL_CLOCK_HZ???? (20 * 1000 * 1000)
#define EXAMPLE_LCD_BK_LIGHT_ON_LEVEL? 0
#define EXAMPLE_LCD_BK_LIGHT_OFF_LEVEL !EXAMPLE_LCD_BK_LIGHT_ON_LEVEL#define EXAMPLE_PIN_NUM_SCLK?????????? GPIO_NUM_16
#define EXAMPLE_PIN_NUM_MOSI?????????? GPIO_NUM_17
#define EXAMPLE_PIN_NUM_MISO?????????? GPIO_NUM_NC
#define EXAMPLE_PIN_NUM_LCD_DC???????? GPIO_NUM_21
#define EXAMPLE_PIN_NUM_LCD_RST??????? GPIO_NUM_18
#define EXAMPLE_PIN_NUM_LCD_CS???????? GPIO_NUM_15
#define EXAMPLE_PIN_NUM_BK_LIGHT?????? GPIO_NUM_2// The pixel number in horizontal and vertical
#define EXAMPLE_LCD_H_RES????????????? 172
// Bit number used to represent command and parameter
#define EXAMPLE_LCD_V_RES????????????? 320
#define EXAMPLE_LCD_CMD_BITS?????????? 8
#define EXAMPLE_LCD_PARAM_BITS???????? 8// 列地址偏移示例(假設X起始偏移為0,Y起始偏移為40)
#define X_OFFSET 34
#define Y_OFFSET 0esp_lcd_panel_handle_t panel_handle = NULL;typedef struct {int cmd;??????????????? /*<! The specific LCD command */const void *data;?????? /*<! Buffer that holds the command specific data */size_t data_bytes;????? /*<! Size of `data` in memory, in bytes */unsigned int delay_ms;? /*<! Delay in milliseconds after this command */
} st7789_lcd_init_cmd_t;typedef struct {const st7789_lcd_init_cmd_t *init_cmds;???uint16_t init_cmds_size;??? /*<! Number of commands in above array */struct {unsigned int use_qspi_interface: 1;???? /*<! Set to 1 if use QSPI interface, default is SPI interface */} flags;
} st7789_vendor_config_t;static const st7789_lcd_init_cmd_t lcd_init_cmds [] ={/* {cmd, { data }, data_size, delay_ms} "*/{0x11, (uint8_t []){0x00}, 0, 0},{0x36, (uint8_t []){0x00}, 1, 0},{0x3A, (uint8_t []){0x05}, 1, 0},{0xB2, (uint8_t []){0x0C, 0x0C, 0x00, 0x33, 0x33}, 5, 0},{0xB7, (uint8_t []){0x35}, 1, 0},{0xBB, (uint8_t []){0x35}, 1, 0},{0xC0, (uint8_t []){0x2C}, 1, 0},{0xC2, (uint8_t []){0x01}, 1, 0},{0xC3, (uint8_t []){0x13}, 1, 0},{0xC4, (uint8_t []){0x20}, 1, 0},{0xC6, (uint8_t []){0x0F}, 1, 0},{0xD0, (uint8_t []){0xA4, 0xA1}, 2, 0},{0xD6, (uint8_t []){0xA1}, 1, 0},{0xE0, (uint8_t []){0xF0, 0x00, 0x04, 0x04, 0x04, 0x05, 0x29, 0x33, 0x3e, 0x38, 0x12, 0x12, 0x28, 0x30}, 14, 0},{0xE1, (uint8_t []){0xF0, 0x07, 0x0A, 0x0D, 0x0b, 0x07, 0x28, 0x33, 0x3e, 0x36, 0x14, 0x14, 0x29, 0x32}, 14, 0},{0x21, (uint8_t []){0x00}, 0, 0},{0x11, (uint8_t []){0x00}, 0, 120},{0x29, (uint8_t []){0x00}, 0, 0},
};#define EXAMPLE_LVGL_DRAW_BUF_LINES??? 20 // number of display lines in each draw buffer
#define EXAMPLE_LVGL_TICK_PERIOD_MS??? 2
#define EXAMPLE_LVGL_TASK_MAX_DELAY_MS 500
#define EXAMPLE_LVGL_TASK_MIN_DELAY_MS 1
#define EXAMPLE_LVGL_TASK_STACK_SIZE?? (4 * 1024)
#define EXAMPLE_LVGL_TASK_PRIORITY???? 2// LVGL library is not thread-safe, this example will call LVGL APIs from different tasks, so use a mutex to protect it
static _lock_t lvgl_api_lock;/* Rotate display and touch, when rotated screen in LVGL. Called when driver parameters are updated. */
static void example_lvgl_port_update_callback(lv_display_t *disp)
{esp_lcd_panel_handle_t panel_handle = lv_display_get_user_data(disp);lv_display_rotation_t rotation = lv_display_get_rotation(disp);switch (rotation) {case LV_DISPLAY_ROTATION_0:// Rotate LCD displayesp_lcd_panel_swap_xy(panel_handle, false);esp_lcd_panel_mirror(panel_handle, true, false);break;case LV_DISPLAY_ROTATION_90:// Rotate LCD displayesp_lcd_panel_swap_xy(panel_handle, true);esp_lcd_panel_mirror(panel_handle, true, true);break;case LV_DISPLAY_ROTATION_180:// Rotate LCD displayesp_lcd_panel_swap_xy(panel_handle, false);esp_lcd_panel_mirror(panel_handle, false, true);break;case LV_DISPLAY_ROTATION_270:// Rotate LCD displayesp_lcd_panel_swap_xy(panel_handle, true);esp_lcd_panel_mirror(panel_handle, false, false);break;}
}static void example_lvgl_flush_cb(lv_display_t *disp, const lv_area_t *area, uint8_t *px_map)
{example_lvgl_port_update_callback(disp);esp_lcd_panel_handle_t panel_handle = lv_display_get_user_data(disp);int offsetx1 = area->x1;int offsetx2 = area->x2;int offsety1 = area->y1;int offsety2 = area->y2;// because SPI LCD is big-endian, we need to swap the RGB bytes orderlv_draw_sw_rgb565_swap(px_map, (offsetx2 + 1 - offsetx1) * (offsety2 + 1 - offsety1));// copy a buffer's content to a specific area of the displayesp_lcd_panel_draw_bitmap(panel_handle, offsetx1, offsety1, offsetx2 + 1, offsety2 + 1, px_map);}static bool example_notify_lvgl_flush_ready(esp_lcd_panel_io_handle_t panel_io, esp_lcd_panel_io_event_data_t *edata, void *user_ctx)
{lv_display_t *disp = (lv_display_t *)user_ctx;lv_display_flush_ready(disp);return false;
}static void example_increase_lvgl_tick(void *arg)
{/* Tell LVGL how many milliseconds has elapsed */lv_tick_inc(EXAMPLE_LVGL_TICK_PERIOD_MS);}static void example_lvgl_port_task(void *arg)
{ESP_LOGI(TAG, "Starting LVGL task");uint32_t time_till_next_ms = 0;uint32_t time_threshold_ms = 1000 / CONFIG_FREERTOS_HZ;while (1) {_lock_acquire(&lvgl_api_lock);time_till_next_ms = lv_timer_handler();_lock_release(&lvgl_api_lock);// in case of triggering a task watch dog time outtime_till_next_ms = MAX(time_till_next_ms, time_threshold_ms);time_till_next_ms = 10;usleep(1000 * time_till_next_ms);}
}static void set_angle(void * obj, int32_t v)
{lv_arc_set_value(obj, v);
}void example_lvgl_demo_ui(lv_display_t *disp)
{lv_obj_t *scr = lv_display_get_screen_active(disp);/*Create an Arc*/lv_obj_t * arc = lv_arc_create(scr);lv_arc_set_rotation(arc, 270);lv_arc_set_bg_angles(arc, 0, 360);lv_obj_remove_style(arc, NULL, LV_PART_KNOB);?? /*Be sure the knob is not displayed*/lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE);? /*To not allow adjusting by click*/lv_obj_center(arc);lv_obj_set_style_bg_color(arc, lv_color_hex(0x00ff00), LV_PART_MAIN);lv_anim_t a;lv_anim_init(&a);lv_anim_set_var(&a, arc);lv_anim_set_exec_cb(&a, set_angle);lv_anim_set_duration(&a, 1000);lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);??? /*Just for the demo*/lv_anim_set_repeat_delay(&a, 500);lv_anim_set_values(&a, 0, 100);lv_anim_start(&a);
}void app_main(void)
{// 關閉LCD背光ESP_LOGI(TAG, "Turn off LCD backlight");gpio_config_t bk_gpio_config = {.mode = GPIO_MODE_OUTPUT, // 設置GPIO模式為輸出.pin_bit_mask = 1ULL << EXAMPLE_PIN_NUM_BK_LIGHT // 設置背光控制引腳};ESP_ERROR_CHECK(gpio_config(&bk_gpio_config)); // 配置GPIO// 初始化SPI總線ESP_LOGI(TAG, "Initialize SPI bus");spi_bus_config_t buscfg = {.sclk_io_num = EXAMPLE_PIN_NUM_SCLK, // SCLK引腳編號.mosi_io_num = EXAMPLE_PIN_NUM_MOSI, // MOSI引腳編號.miso_io_num = GPIO_NUM_NC,????????? // MISO引腳編號.quadwp_io_num = GPIO_NUM_NC,??????? // QUADWP引腳編號(未使用).quadhd_io_num = GPIO_NUM_NC,??????? // QUADHD引腳編號(未使用).max_transfer_sz = EXAMPLE_LCD_H_RES * EXAMPLE_LCD_V_RES * sizeof(uint16_t), // 最大傳輸大小};ESP_ERROR_CHECK(spi_bus_initialize(LCD_HOST, &buscfg, SPI_DMA_CH_AUTO)); // 初始化SPI總線// 安裝面板IOESP_LOGI(TAG, "Install panel IO");esp_lcd_panel_io_handle_t io_handle = NULL;esp_lcd_panel_io_spi_config_t io_config = {.dc_gpio_num = EXAMPLE_PIN_NUM_LCD_DC, // 數據/命令控制引腳編號.cs_gpio_num = EXAMPLE_PIN_NUM_LCD_CS, // 片選引腳編號.pclk_hz = EXAMPLE_LCD_PIXEL_CLOCK_HZ, // 像素時鐘頻率.lcd_cmd_bits = EXAMPLE_LCD_CMD_BITS, // 命令位數.lcd_param_bits = EXAMPLE_LCD_PARAM_BITS, // 參數位數.spi_mode = 3, // SPI模式.trans_queue_depth = 10, // 傳輸隊列深度};// 將LCD連接到SPI總線ESP_ERROR_CHECK(esp_lcd_new_panel_io_spi((esp_lcd_spi_bus_handle_t)LCD_HOST, &io_config, &io_handle));st7789_vendor_config_t vendor_config = {? // 用于替換驅動組件中的初始化命令及參數.init_cmds = lcd_init_cmds,.init_cmds_size = sizeof(lcd_init_cmds) / sizeof(st7789_lcd_init_cmd_t),};esp_lcd_panel_dev_config_t panel_config = {.reset_gpio_num = EXAMPLE_PIN_NUM_LCD_RST,? // 復位引腳編號.rgb_ele_order = LCD_RGB_ELEMENT_ORDER_RGB, // RGB元素順序.bits_per_pixel = 16,?????????????????????? // 每像素位數.data_endian = LCD_RGB_DATA_ENDIAN_BIG,???? // MSB.vendor_config = &vendor_config,?????????? // 用于替換驅動組件中的初始化命令及參數};ESP_LOGI(TAG, "Install ST7789 panel driver");ESP_ERROR_CHECK(esp_lcd_new_panel_st7789(io_handle, &panel_config, &panel_handle));// 復位和初始化面板ESP_ERROR_CHECK(esp_lcd_panel_reset(panel_handle)); // 復位面板ESP_ERROR_CHECK(esp_lcd_panel_init(panel_handle)); // 初始化面板ESP_ERROR_CHECK(esp_lcd_panel_invert_color(panel_handle, true)); // 反轉顏色ESP_ERROR_CHECK(esp_lcd_panel_mirror(panel_handle, false, false)); // 鏡像顯示(水平鏡像)// 用戶可以在點亮屏幕或背光之前刷新預定義的圖案到屏幕上ESP_ERROR_CHECK(esp_lcd_panel_disp_on_off(panel_handle, true)); // 打開屏幕顯示// 打開LCD背光ESP_LOGI(TAG, "Turn on LCD backlight");gpio_set_level(EXAMPLE_PIN_NUM_BK_LIGHT, EXAMPLE_LCD_BK_LIGHT_ON_LEVEL); // 設置背光引腳電平ESP_LOGI(TAG, "Initialize LVGL library");lv_init();// create a lvgl displaylv_display_t *display = lv_display_create(EXAMPLE_LCD_H_RES, EXAMPLE_LCD_V_RES);lv_display_set_offset(display, X_OFFSET, Y_OFFSET);// alloc draw buffers used by LVGL// it's recommended to choose the size of the draw buffer(s) to be at least 1/10 screen sizedsize_t draw_buffer_sz = EXAMPLE_LCD_H_RES * EXAMPLE_LVGL_DRAW_BUF_LINES * sizeof(lv_color16_t);void *buf1 = spi_bus_dma_memory_alloc(LCD_HOST, draw_buffer_sz, 0);assert(buf1);void *buf2 = spi_bus_dma_memory_alloc(LCD_HOST, draw_buffer_sz, 0);assert(buf2);// initialize LVGL draw bufferslv_display_set_buffers(display, buf1, buf2, draw_buffer_sz, LV_DISPLAY_RENDER_MODE_PARTIAL);// associate the mipi panel handle to the displaylv_display_set_user_data(display, panel_handle);// set color depthlv_display_set_color_format(display, LV_COLOR_FORMAT_RGB565);// set the callback which can copy the rendered image to an area of the displaylv_display_set_flush_cb(display, example_lvgl_flush_cb);ESP_LOGI(TAG, "Install LVGL tick timer");// Tick interface for LVGL (using esp_timer to generate 2ms periodic event)const esp_timer_create_args_t lvgl_tick_timer_args = {.callback = &example_increase_lvgl_tick,.name = "lvgl_tick"};esp_timer_handle_t lvgl_tick_timer = NULL;ESP_ERROR_CHECK(esp_timer_create(&lvgl_tick_timer_args, &lvgl_tick_timer));ESP_ERROR_CHECK(esp_timer_start_periodic(lvgl_tick_timer, EXAMPLE_LVGL_TICK_PERIOD_MS * 1000));ESP_LOGI(TAG, "Register io panel event callback for LVGL flush ready notification");const esp_lcd_panel_io_callbacks_t cbs = {.on_color_trans_done = example_notify_lvgl_flush_ready,};/* Register done callback */ESP_ERROR_CHECK(esp_lcd_panel_io_register_event_callbacks(io_handle, &cbs, display));lv_disp_set_rotation(display, LV_DISPLAY_ROTATION_0);ESP_LOGI(TAG, "Create LVGL task");xTaskCreate(example_lvgl_port_task, "LVGL", EXAMPLE_LVGL_TASK_STACK_SIZE, NULL, EXAMPLE_LVGL_TASK_PRIORITY, NULL);ESP_LOGI(TAG, "Display LVGL Meter Widget");// Lock the mutex due to the LVGL APIs are not thread-safe_lock_acquire(&lvgl_api_lock);example_lvgl_demo_ui(display);_lock_release(&lvgl_api_lock);while(1){vTaskDelay(3000 / portTICK_PERIOD_MS);}
}