开发环境
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)
文章来源:https://www.toymoban.com/news/detail-415212.html
文章来源地址https://www.toymoban.com/news/detail-415212.html
到了这里,关于ESP32在ESP-IDF框架下使用LVGL(v8.3)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!