1. 项目概述：ESP32-C3驱动SPI LCD与EC11编码器的黄金组合
这个项目本质上是在探索如何用合宙ESP32-C3这块性价比极高的开发板，同时驱动SPI接口的LCD屏幕和EC11旋转编码器，并搭载LVGL这个轻量级图形库来构建交互界面。我最近在为一个智能家居控制面板做原型开发时，发现这个组合特别适合需要低成本、低功耗但又要求良好用户交互的场景。
ESP32-C3作为乐鑫推出的RISC-V架构芯片，相比传统ESP32更省电且价格更低，而SPI接口的LCD（比如常见的ST7789、ILI9341等驱动芯片的屏幕）既能保证显示性能又节省IO资源。EC11编码器则是人机交互的神器，通过旋转和按压可以实现丰富的控制功能。LVGL作为嵌入式领域最火的GUI库之一，其轻量级特性和丰富的控件库让界面开发变得异常高效。
2. 硬件选型与电路设计
2.1 核心器件选型要点
合宙ESP32-C3开发板我选用的是经典款Air101，其核心优势在于：
- 内置4MB Flash，足够存放LVGL资源和程序代码
- 支持SPI时钟最高达80MHz，满足大部分LCD的时序要求
- 仅需约20元人民币，性价比碾压STM32系列
LCD屏幕选择需要注意几个参数：
c复制// 典型SPI LCD配置参数示例
#define LCD_WIDTH 240
#define LCD_HEIGHT 320
#define SPI_CLK 40*1000*1000 // 40MHz
#define SPI_MODE 0 // 模式0或3
EC11编码器要选A/B相输出型（带按压功能），注意区分5pin和3pin版本：
- 5pin版本：VCC, GND, SW(按压), DT(B相), CLK(A相)
- 3pin版本：只有A/B相输出，无按压功能
2.2 硬件连接方案
ESP32-C3的SPI0默认引脚分配：
code复制MOSI - GPIO7
MISO - GPIO10
SCLK - GPIO6
CS - GPIO5 (可自定义)
推荐接线方案：
| 设备 | ESP32-C3引脚 | 备注 |
|---|---|---|
| LCD_DC | GPIO4 | 数据/命令选择 |
| LCD_RST | GPIO3 | 硬件复位 |
| LCD_CS | GPIO5 | 片选 |
| EC11_CLK | GPIO0 | 编码器A相 |
| EC11_DT | GPIO1 | 编码器B相 |
| EC11_SW | GPIO2 | 按压信号(需上拉10KΩ) |
重要提示：ESP32-C3的GPIO12-15在下载模式时有特殊用途，建议避免使用这些引脚连接外设
3. 软件架构设计与环境搭建
3.1 开发环境配置
我推荐使用ESP-IDF v4.4及以上版本，其已经内置了对ESP32-C3的完善支持。VSCode+PlatformIO也是不错的选择，但需要注意选择正确的环境配置：
ini复制[env:air101]
platform = espressif32
board = esp32-c3-devkitm-1
framework = espidf
monitor_speed = 115200
3.2 LVGL移植关键步骤
- 获取LVGL源码（建议v8.3+）：
bash复制git clone --recursive https://github.com/lvgl/lvgl.git
- 配置lv_conf.h核心参数：
c复制#define LV_COLOR_DEPTH 16 // 匹配LCD的16bit色深
#define LV_HOR_RES_MAX 240 // 水平分辨率
#define LV_VER_RES_MAX 320 // 垂直分辨率
#define LV_USE_PERF_MONITOR 1 // 启用性能监控
- 实现显示驱动接口：
c复制void my_disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p) {
uint16_t w = area->x2 - area->x1 + 1;
uint16_t h = area->y2 - area->y1 + 1;
LCD_SetWindow(area->x1, area->y1, area->x2, area->y2);
SPI_WriteData((uint8_t*)color_p, w * h * 2); // 16bit颜色
lv_disp_flush_ready(disp_drv);
}
3.3 EC11编码器驱动实现
编码器处理的核心在于中断服务例程(ISR)的实现：
c复制static void IRAM_ATTR enc_isr_handler(void* arg) {
static uint8_t last_state = 0;
uint8_t curr_state = (gpio_get_level(ENC_A) << 1) | gpio_get_level(ENC_B);
const int8_t enc_states[] = {0, -1, 1, 0, 1, 0, 0, -1, -1, 0, 0, 1, 0, 1, -1, 0};
last_state = (last_state << 2) | curr_state;
int8_t delta = enc_states[(last_state & 0x0F)];
if(delta) {
lv_indev_data_t data = {
.enc_diff = delta,
.state = gpio_get_level(ENC_SW) ? LV_INDEV_STATE_REL : LV_INDEV_STATE_PR
};
queue_send(data); // 发送到LVGL输入队列
}
}
4. 性能优化与实战技巧
4.1 SPI传输加速方案
ESP32-C3的SPI控制器支持DMA传输，配置方法：
c复制spi_bus_config_t buscfg = {
.miso_io_num = -1, // 仅输出模式
.mosi_io_num = GPIO_NUM_7,
.sclk_io_num = GPIO_NUM_6,
.quadwp_io_num = -1,
.quadhd_io_num = -1,
.max_transfer_sz = LCD_WIDTH*LCD_HEIGHT*2 + 8
};
spi_device_interface_config_t devcfg = {
.clock_speed_hz = 40*1000*1000,
.mode = 0,
.spics_io_num = GPIO_NUM_5,
.queue_size = 7,
.pre_cb = lcd_spi_pre_transfer_callback,
};
4.2 LVGL内存管理策略
针对ESP32-C3的有限内存（约400KB可用RAM），推荐配置：
c复制#define LV_MEM_SIZE (48*1024) // 分配48KB给LVGL
#define LV_DISP_DEF_REFR_PERIOD 30 // 30ms刷新周期
// 使用PSRAM扩展存储（如有）
#if CONFIG_SPIRAM_USE
#define LV_IMG_CACHE_DEF_SIZE 16 // 图片缓存数量
#endif
4.3 多任务处理架构
建议采用FreeRTOS任务划分：
code复制App Task (优先级2)
|- LVGL Task (优先级3)
|- Encoder Task (优先级4)
|- SPI Comm Task (优先级5)
关键同步机制：
c复制QueueHandle_t encoder_queue = xQueueCreate(10, sizeof(lv_indev_data_t));
SemaphoreHandle_t spi_mutex = xSemaphoreCreateMutex();
5. 常见问题与解决方案
5.1 显示异常排查清单
| 现象 | 可能原因 | 解决方案 |
|---|---|---|
| 屏幕全白 | 复位时序不正确 | 检查RST引脚时序，确保>10ms低电平 |
| 颜色错乱 | 色深配置不匹配 | 确认LV_COLOR_DEPTH与LCD一致 |
| 局部花屏 | SPI时钟过快导致信号失真 | 降低SPI时钟频率，检查走线 |
| 刷新闪烁 | 未使用双缓冲 | 在lv_conf.h启用LV_USE_DOUBLE_BUFFER |
5.2 编码器抖动处理
硬件方案：
- 在EC11的A/B相引脚上加100nF电容滤波
- 使用施密特触发器整形信号（如74HC14）
软件方案：
c复制// 在中断服务中添加去抖逻辑
static uint32_t last_int_time = 0;
if(esp_timer_get_time() - last_int_time < 2000) { // 2ms防抖
return;
}
last_int_time = esp_timer_get_time();
5.3 内存不足崩溃分析
使用ESP-IDF的内存调试工具：
bash复制idf.py size-components
idf.py size-files
优化建议：
- 将大尺寸图片转换为C数组时使用LVGL的bin2c.py工具压缩
- 启用LVGL的文件系统支持，动态加载资源
- 减少同时显示的控件数量，复杂界面分页处理
6. 进阶开发技巧
6.1 低功耗优化
当系统空闲时，可以动态调整性能：
c复制void enter_low_power_mode() {
lv_disp_set_refr_period(NULL, 100); // 降低刷新率到100ms
set_cpu_freq(ESP32C3_DEFAULT_CPU_FREQ / 2);
spi_bus_set_clock_speed(SPI_HOST, 10*1000*1000); // SPI降速
}
6.2 UI设计最佳实践
- 样式复用策略：
c复制static lv_style_t style_base;
lv_style_init(&style_base);
lv_style_set_bg_opa(&style_base, LV_OPA_COVER);
lv_style_set_bg_color(&style_base, lv_color_hex(0x333333));
// 派生样式
static lv_style_t style_btn;
lv_style_init(&style_btn);
lv_style_set_base(&style_btn, &style_base); // 继承基础样式
lv_style_set_radius(&style_btn, 5);
- 动画效果实现：
c复制lv_anim_t a;
lv_anim_init(&a);
lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)lv_obj_set_x);
lv_anim_set_time(&a, 300);
lv_anim_set_values(&a, 0, 100);
lv_anim_set_path_cb(&a, lv_anim_path_ease_out);
lv_anim_set_playback_time(&a, 300);
lv_anim_set_var(&a, btn);
lv_anim_start(&a);
6.3 固件OTA升级方案
利用ESP32-C3的无线功能实现远程更新：
- 配置分区表增加OTA分区
- 实现简单的HTTP服务器接收新固件
- 使用LVGL进度条显示更新状态
关键代码片段：
c复制esp_https_ota_config_t ota_config = {
.http_config = &config,
.partial_http_download = true,
.max_http_request_size = 4096,
};
esp_https_ota_handle_t ota_handle = NULL;
esp_err_t err = esp_https_ota_begin(&ota_config, &ota_handle);
while(1) {
int data_read = esp_https_ota_perform(ota_handle);
if(data_read < 0) break;
int progress = esp_https_ota_get_image_len_read(ota_handle) * 100 /
esp_https_ota_get_image_size(ota_handle);
lv_bar_set_value(progress_bar, progress, LV_ANIM_ON);
}