开发背景
模块使用的合宙的ESP32-C3(经典款) 购买连接
CORE ESP32核心板是基于乐鑫ESP32-C3进行设计的一款核心板，尺寸仅有21mm*51mm，板边采用邮票孔设计，方便开发者在不同场景下的使用。核心板支持UART、GPIO、SPI、I2C、ADC、PWM等接口，可根据实际需要选择。
屏幕使用的LuatOS屏幕扩展板 购买连接
驱动芯片:ST7735S 屏幕尺寸:80 X 160
我们使用VSCODE,安装PlatformIO插件进行开发
首先在Platforms中安装Espressif 32
都说lvgl暂不支持新版的idfV5版本
这里我们安装Espressif 32的5.4.0版本,ESP-IDF版本是v4.4.5
完整的代码我放在GITEE
模块信息
屏幕信息
开发过程
创建项目
| 配置 | 值 |
|---|---|
| Name | ESP32C3 ST7735S |
| Board | Espressif ESP32-C3-DevKitM-1 |
| Framework | Espidf |
项目名称可以自己随意更改
在最新版idf开发时我一直使用的esp32-c3-devkitc-02,更换为v4.x后始终不会打印,耽误了一点时间
修改配置文件
[env:esp32-c3-devkitm-1] ;平台 platform = espressif32@5.4.0 ;模块 board = esp32-c3-devkitm-1 ;闪存芯片接口方式 board_build.flash_mode = dio ;框架 framework = espidf ;串口监视波特率 monitor_speed = 115200 ;串口监视过滤器 解码异常 颜色展示 monitor_filters = direct, esp32_exception_decoder ;内置调试器 重点是配置这个 debug_tool = esp-builtin 安装依赖
我这里git拉取都使用的ssh的方式,如果是http的方式,自己修改一下连接
LVGL 依赖库
git submodule add -b release/v7 git@github.com:lvgl/lvgl.git components/lvgl ESP32 芯片系列的 LVGL 驱动库
git submodule add git@github.com:lvgl/lvgl_esp32_drivers.git components/lvgl_esp32_drivers 直接编译会提示'SPI_HOST_MAX' undeclared错误
componentslvgl_esp32_driverslvgl_helpers.c: In function 'lvgl_spi_driver_init': componentslvgl_esp32_driverslvgl_helpers.c:157:28: error: 'SPI_HOST_MAX' undeclared (first use in this function); did you mean 'GPIO_PORT_MAX'? assert((0 <= host) && (SPI_HOST_MAX > host)); 在componentslvgl_esp32_driverslvgl_helpers.h头部增加
#define SPI_HOST_MAX 2 在componentslvgl_esp32_drivers目录提交一下git更改
Lvgl 示例
git submodule add -b release/v7 git@github.com:littlevgl/lv_examples.git components/lv_examples/lv_examples 为了等下测试方便,我们这里自己新增一些文件
增加自定义文件
增加文件:componentslv_examplesCMakeLists.txt
if(ESP_PLATFORM) file(GLOB_RECURSE SOURCES lv_examples/*.c) idf_component_register(SRCS ${SOURCES} INCLUDE_DIRS . REQUIRES lvgl) else() message(FATAL_ERROR "LVGL LV examples: ESP_PLATFORM is not defined. Try reinstalling ESP-IDF.") endif() 增加文件:componentslv_examplescomponent.mk
# # Component Makefile # CFLAGS += -DLV_LVGL_H_INCLUDE_SIMPLE COMPONENT_SRCDIRS := lv_examples lv_examples/src/lv_demo_benchmark lv_examples/src/lv_demo_keypad_encoder lv_examples/src/demo_stress lv_examples/src/lv_demo_widgets lv_examples/src/lv_ex_style lv_examples/src/lv_ex_widgets lv_examples/assets COMPONENT_ADD_INCLUDEDIRS := $(COMPONENT_SRCDIRS) . 增加文件:componentslv_examplesKconfig
# Kconfig for lv_examples v7.4.0 menu "lv_examples configuration" config LV_EX_PRINTF bool "Enable printf-ing data in demos and examples." choice LV_EX_CHOICE prompt "Select the demo you want to run." default LV_USE_DEMO_WIDGETS config LV_USE_DEMO_WIDGETS bool "Show demo widgets." config LV_USE_DEMO_KEYPAD_AND_ENCODER bool "Demonstrate the usage of encoder and keyboard." config LV_USE_DEMO_BENCHMARK bool "Benchmark your system." config LV_USE_DEMO_STRESS bool "Stress test for LVGL." endchoice config LV_DEMO_WIDGETS_SLIDESHOW bool "Slide demo widgets automatically." depends on LV_USE_DEMO_WIDGETS default y endmenu 增加文件:componentslv_exampleslv_ex_conf.h
/** * @file lv_ex_conf.h * Configuration file for v7.4.0 * */ /* * COPY THIS FILE AS lv_ex_conf.h */ #if 1 /*Set it to "1" to enable the content*/ #ifndef LV_EX_CONF_H #define LV_EX_CONF_H /******************* * GENERAL SETTING *******************/ /* Enable printf-ing data in demoes and examples */ #ifdef CONFIG_LV_EX_PRINTF #define LV_EX_PRINTF 1 #else #define LV_EX_PRINTF 0 #endif #define LV_EX_KEYBOARD 0 /*Add PC keyboard support to some examples (`lv_drivers` repository is required)*/ #define LV_EX_MOUSEWHEEL 0 /*Add 'encoder' (mouse wheel) support to some examples (`lv_drivers` repository is required)*/ /********************* * DEMO USAGE *********************/ /*Show some widget*/ #ifdef CONFIG_LV_USE_DEMO_WIDGETS #define LV_USE_DEMO_WIDGETS 1 #else #define LV_USE_DEMO_WIDGETS 0 #endif #if LV_USE_DEMO_WIDGETS #ifdef CONFIG_LV_DEMO_WIDGETS_SLIDESHOW #define LV_DEMO_WIDGETS_SLIDESHOW 1 #else #define LV_DEMO_WIDGETS_SLIDESHOW 0 #endif #endif /*Printer demo, optimized for 800x480*/ #define LV_USE_DEMO_PRINTER 0 /*Demonstrate the usage of encoder and keyboard*/ #ifdef CONFIG_LV_USE_DEMO_KEYPAD_AND_ENCODER #define LV_USE_DEMO_KEYPAD_AND_ENCODER 1 #else #define LV_USE_DEMO_KEYPAD_AND_ENCODER 0 #endif /*Benchmark your system*/ #ifdef CONFIG_LV_USE_DEMO_BENCHMARK #define LV_USE_DEMO_BENCHMARK 1 #else #define LV_USE_DEMO_BENCHMARK 0 #endif /*Stress test for LVGL*/ #ifdef CONFIG_LV_USE_DEMO_STRESS #define LV_USE_DEMO_STRESS 1 #else #define LV_USE_DEMO_STRESS 0 #endif #endif /*LV_EX_CONF_H*/ #endif /*End of "Content enable"*/ 开始开发
在正式写代码前,先验证一下依赖库是否存在异常
点击编辑器下方的Clean按钮,清理完成后点击Build
如果提示Successfully created esp32c3 image.就可以继续我们的开发了
菜单配置
执行命令:pio run -t menuconfig打开菜单
通过使用键盘的J和K来控制上下移动,ESC返回上层
按照下方的说明配置,全部修改完成后,按下S保存成功后,一路ESC关闭窗口
lv_examples configuration
| 参数 | 值 | 备注 |
|---|---|---|
| Enable printf-ing data in demos and examples. | 勾选 | 在演示和示例中启用打印数据 |
| Select the demo you want to run. | Show demo widgets. | 选择演示:小部件 |
LVGL configuration
| 参数 | 值 | 备注 |
|---|---|---|
| Maximal horizontal resolution to support by the library. | 160 | 水平分辨率 |
| Maximal vertical resolution to support by the library. | 80 | 垂直分辨率 |
| Swap the 2 bytes of RGB565 color. Useful if the display has a 8 bit interface (e.g. SPI). | 选中 | 颜色反转 |
LVGL ESP Drivers
进入 LVGL TFT Display controller
| 参数 | 值 | 备注 |
|---|---|---|
| Display orientation | Landscape | 旋转270° |
| Select a display controller model. | ST7735S | 屏幕驱动 |
| Use custom SPI clock frequency | 勾选 | 自定义SPI时钟频率 |
| Select a custom frequency. | 26.67 MHz | 设置频率 |
| GPIO for MOSI (Master Out Slave In) | 3 | MOSI引脚 |
| GPIO for CLK (SCK / Serial Clock) | 2 | CLK时钟引脚 |
| GPIO for CS (Slave Select) | 7 | 片选引脚 |
| GPIO for DC (Data / Command) | 6 | DC引脚 |
| GPIO for Reset | 10 | 重置引脚 |
点亮屏幕
将以下代码复制到src/main.c中
/* LVGL Example project * * Basic project to test LVGL on ESP32 based projects. * * This example code is in the Public Domain (or CC0 licensed, at your option.) * * Unless required by applicable law or agreed to in writing, this * software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR * CONDITIONS OF ANY KIND, either express or implied. */ #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" /* Littlevgl specific */ #ifdef LV_LVGL_H_INCLUDE_SIMPLE #include "lvgl.h" #else #include "lvgl/lvgl.h" #endif #include "lvgl_helpers.h" #ifndef CONFIG_LV_TFT_DISPLAY_MONOCHROME #if defined CONFIG_LV_USE_DEMO_WIDGETS #include "lv_examples/lv_examples/src/lv_demo_widgets/lv_demo_widgets.h" #elif defined CONFIG_LV_USE_DEMO_KEYPAD_AND_ENCODER #include "lv_examples/lv_examples/src/lv_demo_keypad_encoder/lv_demo_keypad_encoder.h" #elif defined CONFIG_LV_USE_DEMO_BENCHMARK #include "lv_examples/lv_examples/src/lv_demo_benchmark/lv_demo_benchmark.h" #elif defined CONFIG_LV_USE_DEMO_STRESS #include "lv_examples/lv_examples/src/lv_demo_stress/lv_demo_stress.h" #else #error "No demo application selected." #endif #endif /********************* * 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() { /* If you want to use a task to create the graphic, you NEED to create a Pinned task * Otherwise there can be problem such as memory corruption and so on. * NOTE: When not using Wi-Fi nor Bluetooth you can pin the guiTask to core 0 */ xTaskCreatePinnedToCore(guiTask, "gui", 4096*2, NULL, 0, NULL, 1); } /* Creates a semaphore to handle concurrent call to lvgl stuff * If you wish to call *any* lvgl function from other threads/tasks * you should lock on the very same semaphore! */ SemaphoreHandle_t xGuiSemaphore; static void guiTask(void *pvParameter) { (void) pvParameter; xGuiSemaphore = xSemaphoreCreateMutex(); lv_init(); /* Initialize SPI or I2C bus used by the drivers */ lvgl_driver_init(); lv_color_t* buf1 = heap_caps_malloc(DISP_BUF_SIZE * sizeof(lv_color_t), MALLOC_CAP_DMA); assert(buf1 != NULL); /* Use double buffered when not working with monochrome displays */ #ifndef CONFIG_LV_TFT_DISPLAY_MONOCHROME lv_color_t* buf2 = heap_caps_malloc(DISP_BUF_SIZE * sizeof(lv_color_t), MALLOC_CAP_DMA); assert(buf2 != NULL); #else static lv_color_t *buf2 = NULL; #endif static lv_disp_buf_t disp_buf; uint32_t size_in_px = DISP_BUF_SIZE; #if defined CONFIG_LV_TFT_DISPLAY_CONTROLLER_IL3820 || defined CONFIG_LV_TFT_DISPLAY_CONTROLLER_JD79653A || defined CONFIG_LV_TFT_DISPLAY_CONTROLLER_UC8151D || defined CONFIG_LV_TFT_DISPLAY_CONTROLLER_SSD1306 /* Actual size in pixels, not bytes. */ size_in_px *= 8; #endif /* Initialize the working buffer depending on the selected display. * NOTE: buf2 == NULL when using monochrome displays. */ lv_disp_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; #if defined CONFIG_DISPLAY_ORIENTATION_PORTRAIT || defined CONFIG_DISPLAY_ORIENTATION_PORTRAIT_INVERTED disp_drv.rotated = 1; #endif /* When using a monochrome display we need to register the callbacks: * - rounder_cb * - set_px_cb */ #ifdef CONFIG_LV_TFT_DISPLAY_MONOCHROME disp_drv.rounder_cb = disp_driver_rounder; disp_drv.set_px_cb = disp_driver_set_px; #endif disp_drv.buffer = &disp_buf; lv_disp_drv_register(&disp_drv); /* Register an input device when enabled on the menuconfig */ #if CONFIG_LV_TOUCH_CONTROLLER != TOUCH_CONTROLLER_NONE lv_indev_drv_t indev_drv; lv_indev_drv_init(&indev_drv); indev_drv.read_cb = touch_driver_read; indev_drv.type = LV_INDEV_TYPE_POINTER; lv_indev_drv_register(&indev_drv); #endif /* Create and start a periodic timer interrupt to call lv_tick_inc */ 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)); /* Create the demo application */ create_demo_application(); 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); #ifndef CONFIG_LV_TFT_DISPLAY_MONOCHROME free(buf2); #endif vTaskDelete(NULL); } static void create_demo_application(void) { /* When using a monochrome display we only show "Hello World" centered on the * screen */ #if defined CONFIG_LV_TFT_DISPLAY_MONOCHROME || defined CONFIG_LV_TFT_DISPLAY_CONTROLLER_ST7735S /* use a pretty small demo for monochrome displays */ /* Get the current screen */ lv_obj_t * scr = lv_disp_get_scr_act(NULL); /*Create a Label on the currently active screen*/ lv_obj_t * label1 = lv_label_create(scr, NULL); /*Modify the Label's text*/ lv_label_set_text(label1, "HellonworldnHi,ITLDG"); /* Align the Label to the center * NULL means align on parent (which is the screen now) * 0, 0 at the end means an x, y offset after alignment*/ lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, 0); #else /* Otherwise we show the selected demo */ #if defined CONFIG_LV_USE_DEMO_WIDGETS lv_demo_widgets(); #elif defined CONFIG_LV_USE_DEMO_KEYPAD_AND_ENCODER lv_demo_keypad_encoder(); #elif defined CONFIG_LV_USE_DEMO_BENCHMARK lv_demo_benchmark(); #elif defined CONFIG_LV_USE_DEMO_STRESS lv_demo_stress(); #else #error "No demo application selected." #endif #endif } static void lv_tick_task(void *arg) { (void) arg; lv_tick_inc(LV_TICK_PERIOD_MS); } 
