wangbeihong/esp32c3-smart-scale
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

特性 (UI)：实现包含屏幕、图像和字体的 UI 组件

Browse Source 
新增资源文件：添加了字体、图像和屏幕相关的头文件与源文件。
定义数据结构：创建了用于描述字体和图像的数据结构。
实现主屏逻辑：实现了主屏幕的创建函数以及周期性刷新（tick）函数。
集成 LVGL 管理：集成了 LVGL 主题初始化及屏幕管理功能。
添加 UI 初始化：新增 UI 初始化及刷新函数，用于管理界面更新。
重构主入口：重构主应用程序入口，以支持 UI 任务及 FreeRTOS 多任务调度。
更新构建配置：更新了 CMakeLists 及组件配置，以包含新的依赖项。
This commit is contained in:
Wang Beihong
2026-04-05 21:50:06 +08:00
parent e72ad9fcf0
commit 990abc210c
29 changed files with 15373 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/lvgl_st7789_use/CMakeLists.txt Normal file
View File

@@ -0,0 +1,4 @@
idf_component_register(SRCS "lvgl_st7789_use.c"
INCLUDE_DIRS "include"
REQUIRES driver esp_lcd esp_lvgl_port
)

59
components/lvgl_st7789_use/Kconfig.projbuild Normal file
View File

@@ -0,0 +1,59 @@
menu "LVGL ST7789 显示屏配置"
config LVGL_ST7789_LCD_H_RES
int "LCD 水平分辨率 (H_RES)"
range 1 1000
default 240
help
LCD 屏幕的水平分辨率（像素）。
config LVGL_ST7789_LCD_V_RES
int "LCD 垂直分辨率 (V_RES)"
range 1 1000
default 240
help
LCD 屏幕的垂直分辨率（像素）。
config LVGL_ST7789_GPIO_SCLK
int "LCD SCLK GPIO"
range 0 39
default 2
help
LCD SPI 时钟引脚 GPIO 号。
config LVGL_ST7789_GPIO_MOSI
int "LCD MOSI GPIO"
range 0 39
default 3
help
LCD SPI MOSI 引脚 GPIO 号。
config LVGL_ST7789_GPIO_RST
int "LCD RST GPIO"
range 0 39
default 9
help
LCD 复位引脚 GPIO 号。
config LVGL_ST7789_GPIO_DC
int "LCD DC GPIO"
range 0 39
default 8
help
LCD 数据/命令引脚 GPIO 号。
config LVGL_ST7789_GPIO_CS
int "LCD CS GPIO"
range 0 39
default 7
help
LCD 片选引脚 GPIO 号。
config LVGL_ST7789_GPIO_BL
int "LCD 背光 GPIO (NC为-1)"
range -1 39
default -1
help
LCD 背光引脚 GPIO 号，未连接请填-1。
endmenu

114
components/lvgl_st7789_use/README.md Normal file
View File

@@ -0,0 +1,114 @@
# lvgl_st7789_use 组件说明
`lvgl_st7789_use` 是项目中的 LCD 显示组件，基于 `esp_lcd + esp_lvgl_port`，用于快速驱动 ST7789 SPI 屏并显示 LVGL 界面。
---
## 功能概览
- 初始化 SPI LCD（含背光、面板、显示偏移）
- 初始化 LVGL 端口并注册显示设备
- 默认创建一个居中标签用于快速验证显示链路
- 提供运行时更新中心文本接口
- 支持可配置方向、镜像与偏移
- 支持可选三色测试图（调试用）
---
## 对外 API
头文件：`include/lvgl_st7789_use.h`
- `esp_err_t start_lvgl_demo(void);`
- 完成 LCD + LVGL 初始化并创建默认界面
- `esp_err_t lvgl_st7789_set_center_text(const char *text);`
- 运行时更新中心标签文字（线程安全，内部已加锁）
---
## 关键配置项（可直接改宏）
在 `include/lvgl_st7789_use.h` 中：
### 1) 屏幕与 SPI
- `EXAMPLE_LCD_H_RES` / `EXAMPLE_LCD_V_RES`
- `EXAMPLE_LCD_PIXEL_CLK_HZ`
- `EXAMPLE_LCD_SPI_NUM`
- `EXAMPLE_LCD_CMD_BITS` / `EXAMPLE_LCD_PARAM_BITS`
建议：ST7789 默认可先用 `20MHz`，如出现花屏或不稳定再降到 `10MHz` 复测。
### 2) 颜色校准（重点）
- `EXAMPLE_LCD_COLOR_ORDER_BGR`
- `EXAMPLE_LCD_INVERT_COLOR`
- `EXAMPLE_LCD_SWAP_BYTES`
说明：
- 出现“黑色发灰、红绿蓝偏紫/互串”时，优先调整这三项。
- 建议从 `RGB + 不反色 + 不交换字节` 起步，再逐项切换。
### 3) 方向与偏移（重点）
- `EXAMPLE_LCD_GAP_X`
- `EXAMPLE_LCD_GAP_Y`
- `EXAMPLE_LCD_ROT_SWAP_XY`
- `EXAMPLE_LCD_ROT_MIRROR_X`
- `EXAMPLE_LCD_ROT_MIRROR_Y`
说明：
- 若出现“文字偏移/边缘花屏/方向反了”，优先微调上述宏，不要同时在多层重复旋转。
### 4) 调试项
- `EXAMPLE_LCD_ENABLE_COLOR_TEST`
- `1`：上电先画 RGB 三色测试图（便于确认硬件链路）
- `0`：跳过测试，直接进入 LVGL
---
## 在主程序中调用
```c
#include "esp_check.h"
#include "lvgl_st7789_use.h"
void app_main(void)
{
ESP_ERROR_CHECK(start_lvgl_demo());
ESP_ERROR_CHECK(lvgl_st7789_set_center_text("BotanicalBuddy"));
}
```
---
## 常见问题
### 1) 背光亮但没有内容
优先排查：
- 面板型号与驱动是否匹配（当前应为 ST7789）
- SPI 模式、时钟是否过高
- 方向/偏移参数是否正确
### 2) 文字方向反了或显示偏移
优先调整：
- `EXAMPLE_LCD_ROT_*`
- `EXAMPLE_LCD_GAP_X / EXAMPLE_LCD_GAP_Y`
### 3) 想快速确认硬件链路是否通
把 `EXAMPLE_LCD_ENABLE_COLOR_TEST` 设为 `1`，观察是否能显示三色图。
---
## 依赖
由组件 `CMakeLists.txt` 声明：
- `driver`
- `esp_lcd`
- `esp_lvgl_port`

80
components/lvgl_st7789_use/include/lvgl_st7789_use.h Normal file
View File

@@ -0,0 +1,80 @@
// SPDX-License-Identifier: MIT
#pragma once
#include "esp_err.h"
#ifdef __cplusplus
extern "C" {
#endif
/* LCD pins */
#ifndef EXAMPLE_LCD_GPIO_SCLK
#define EXAMPLE_LCD_GPIO_SCLK CONFIG_LVGL_ST7789_GPIO_SCLK
#endif
#ifndef EXAMPLE_LCD_GPIO_MOSI
#define EXAMPLE_LCD_GPIO_MOSI CONFIG_LVGL_ST7789_GPIO_MOSI
#endif
#ifndef EXAMPLE_LCD_GPIO_RST
#define EXAMPLE_LCD_GPIO_RST CONFIG_LVGL_ST7789_GPIO_RST
#endif
#ifndef EXAMPLE_LCD_GPIO_DC
#define EXAMPLE_LCD_GPIO_DC CONFIG_LVGL_ST7789_GPIO_DC
#endif
#ifndef EXAMPLE_LCD_GPIO_CS
#define EXAMPLE_LCD_GPIO_CS CONFIG_LVGL_ST7789_GPIO_CS
#endif
#ifndef EXAMPLE_LCD_GPIO_BL
#define EXAMPLE_LCD_GPIO_BL CONFIG_LVGL_ST7789_GPIO_BL
#endif
/* LCD size (ST7789 240x240) */
// 可通过 menuconfig 配置
#ifndef EXAMPLE_LCD_H_RES
#define EXAMPLE_LCD_H_RES CONFIG_LVGL_ST7789_LCD_H_RES
#endif
#ifndef EXAMPLE_LCD_V_RES
#define EXAMPLE_LCD_V_RES CONFIG_LVGL_ST7789_LCD_V_RES
#endif
/* LCD SPI总线配置 */
#define EXAMPLE_LCD_SPI_NUM (SPI2_HOST) // 使用SPI2主机接口进行通信
/* LCD显示参数配置 */
#define EXAMPLE_LCD_PIXEL_CLK_HZ (20 * 1000 * 1000) // ST7789常用20MHz，兼顾稳定性与刷新速度
/* LCD命令和参数配置 */
#define EXAMPLE_LCD_CMD_BITS (8) // 命令位数为8位，用于发送LCD控制命令
#define EXAMPLE_LCD_PARAM_BITS (8) // 参数位数为8位，用于发送命令参数
/* LCD颜色和缓冲区配置 */
#define EXAMPLE_LCD_BITS_PER_PIXEL (16) // 每个像素使用16位颜色(RGB565格式)
#define EXAMPLE_LCD_DRAW_BUFF_DOUBLE (1) // 启用双缓冲模式，提高显示流畅度
#define EXAMPLE_LCD_DRAW_BUFF_HEIGHT (50) // 绘图缓冲区高度为50行，影响刷新性能
/* ST7789颜色配置（出现偏色时优先调整这三项） */
#define EXAMPLE_LCD_COLOR_ORDER_BGR (0) // 0: RGB, 1: BGR
#define EXAMPLE_LCD_INVERT_COLOR (1) // 0: 正常色, 1: 反色
#define EXAMPLE_LCD_SWAP_BYTES (1) // 0: 不交换RGB565高低字节, 1: 交换
/* LCD背光配置 */
#define EXAMPLE_LCD_BL_ON_LEVEL (1) // 背光开启电平为高电平(1)
/* LCD方向/偏移配置 */
#define EXAMPLE_LCD_GAP_X (0)
#define EXAMPLE_LCD_GAP_Y (0)
#define EXAMPLE_LCD_ROT_SWAP_XY (1)
#define EXAMPLE_LCD_ROT_MIRROR_X (1)
#define EXAMPLE_LCD_ROT_MIRROR_Y (0)
/* 调试项：上电后是否先显示三色测试图 */
#define EXAMPLE_LCD_ENABLE_COLOR_TEST (0)
esp_err_t start_lvgl_demo(void);
esp_err_t lvgl_st7789_set_center_text(const char *text);
#ifdef __cplusplus
}
#endif

257
components/lvgl_st7789_use/lvgl_st7789_use.c Normal file
View File

@@ -0,0 +1,257 @@
#include <stdio.h>
#include <stdlib.h>
#include "lvgl_st7789_use.h"
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "driver/gpio.h"
#include "driver/spi_master.h"
#include "esp_err.h"
#include "esp_log.h"
#include "esp_check.h"
#include "esp_lcd_panel_io.h"
#include "esp_lcd_panel_vendor.h"
#include "esp_lcd_panel_ops.h"
#include "esp_lvgl_port.h"
static const char *TAG = "lvgl_st7789_use";
static esp_lcd_panel_io_handle_t lcd_io = NULL;
static esp_lcd_panel_handle_t lcd_panel = NULL;
static lv_display_t *lvgl_disp = NULL;
static lv_obj_t *s_center_label = NULL;
#if EXAMPLE_LCD_ENABLE_COLOR_TEST
static esp_err_t app_lcd_color_test(void)
{
const size_t pixels = EXAMPLE_LCD_H_RES * EXAMPLE_LCD_V_RES;
uint16_t *frame = calloc(pixels, sizeof(uint16_t));
ESP_RETURN_ON_FALSE(frame != NULL, ESP_ERR_NO_MEM, TAG, "分配测试帧缓冲失败");
for (int y = 0; y < EXAMPLE_LCD_V_RES; y++) {
for (int x = 0; x < EXAMPLE_LCD_H_RES; x++) {
uint16_t color;
if (x < EXAMPLE_LCD_H_RES / 3) {
color = 0xF800; // 红
} else if (x < (EXAMPLE_LCD_H_RES * 2) / 3) {
color = 0x07E0; // 绿
} else {
color = 0x001F; // 蓝
}
frame[y * EXAMPLE_LCD_H_RES + x] = color;
}
}
esp_err_t err = esp_lcd_panel_draw_bitmap(lcd_panel, 0, 0, EXAMPLE_LCD_H_RES, EXAMPLE_LCD_V_RES, frame);
free(frame);
ESP_RETURN_ON_ERROR(err, TAG, "三色测试绘制失败");
ESP_LOGI(TAG, "LCD三色测试图已发送");
return ESP_OK;
}
#endif
/**
* @brief 初始化LCD硬件和SPI接口
*
* 该函数负责初始化LCD所需的GPIO、SPI总线，并配置LCD面板
* 包括背光控制、SPI总线配置、面板IO配置和面板驱动安装
*
* @return esp_err_t 初始化结果，ESP_OK表示成功
*/
static esp_err_t app_lcd_init(void)
{
esp_err_t ret = ESP_OK;
if (EXAMPLE_LCD_GPIO_BL != GPIO_NUM_NC && EXAMPLE_LCD_GPIO_BL >= 0) {
gpio_config_t bk_gpio_config = {
.mode = GPIO_MODE_OUTPUT,
.pin_bit_mask = 1ULL << EXAMPLE_LCD_GPIO_BL
};
ESP_ERROR_CHECK(gpio_config(&bk_gpio_config));
} else {
ESP_LOGW(TAG, "背光引脚未配置(GPIO_NUM_NC 或 <0)，跳过背光GPIO初始化");
}
ESP_LOGI(TAG, "初始化SPI总线");
const spi_bus_config_t buscfg = {
.sclk_io_num = EXAMPLE_LCD_GPIO_SCLK,
.mosi_io_num = EXAMPLE_LCD_GPIO_MOSI,
.miso_io_num = GPIO_NUM_NC,
.quadwp_io_num = GPIO_NUM_NC,
.quadhd_io_num = GPIO_NUM_NC,
.max_transfer_sz = EXAMPLE_LCD_H_RES * EXAMPLE_LCD_DRAW_BUFF_HEIGHT * sizeof(uint16_t),
};
ESP_RETURN_ON_ERROR(spi_bus_initialize(EXAMPLE_LCD_SPI_NUM, &buscfg, SPI_DMA_CH_AUTO), TAG, "SPI初始化失败");
ESP_LOGI(TAG, "安装面板IO");
const esp_lcd_panel_io_spi_config_t io_config = {
.dc_gpio_num = EXAMPLE_LCD_GPIO_DC,
.cs_gpio_num = EXAMPLE_LCD_GPIO_CS,
.pclk_hz = EXAMPLE_LCD_PIXEL_CLK_HZ,
.lcd_cmd_bits = EXAMPLE_LCD_CMD_BITS,
.lcd_param_bits = EXAMPLE_LCD_PARAM_BITS,
.spi_mode = 0,
.trans_queue_depth = 10,
};
ESP_GOTO_ON_ERROR(esp_lcd_new_panel_io_spi((esp_lcd_spi_bus_handle_t)EXAMPLE_LCD_SPI_NUM, &io_config, &lcd_io), err, TAG, "创建面板IO失败");
ESP_LOGI(TAG, "安装LCD驱动");
const esp_lcd_panel_dev_config_t panel_config = {
.reset_gpio_num = EXAMPLE_LCD_GPIO_RST,
#if ESP_IDF_VERSION < ESP_IDF_VERSION_VAL(6, 0, 0)
.rgb_endian = EXAMPLE_LCD_COLOR_ORDER_BGR ? LCD_RGB_ENDIAN_BGR : LCD_RGB_ENDIAN_RGB,
#else
.rgb_ele_order = EXAMPLE_LCD_COLOR_ORDER_BGR ? LCD_RGB_ELEMENT_ORDER_BGR : LCD_RGB_ELEMENT_ORDER_RGB,
#endif
.bits_per_pixel = EXAMPLE_LCD_BITS_PER_PIXEL,
};
ESP_GOTO_ON_ERROR(esp_lcd_new_panel_st7789(lcd_io, &panel_config, &lcd_panel), err, TAG, "创建面板失败");
ESP_GOTO_ON_ERROR(esp_lcd_panel_reset(lcd_panel), err, TAG, "面板复位失败");
ESP_GOTO_ON_ERROR(esp_lcd_panel_init(lcd_panel), err, TAG, "面板初始化失败");
ESP_GOTO_ON_ERROR(esp_lcd_panel_swap_xy(lcd_panel, false), err, TAG, "设置面板swap_xy失败");
ESP_GOTO_ON_ERROR(esp_lcd_panel_mirror(lcd_panel, false, false), err, TAG, "设置面板镜像失败");
ESP_GOTO_ON_ERROR(esp_lcd_panel_set_gap(lcd_panel, EXAMPLE_LCD_GAP_X, EXAMPLE_LCD_GAP_Y), err, TAG, "设置显示偏移失败");
ESP_LOGI(TAG, "面板基准参数已应用: gap=(%d,%d)", EXAMPLE_LCD_GAP_X, EXAMPLE_LCD_GAP_Y);
ESP_GOTO_ON_ERROR(esp_lcd_panel_invert_color(lcd_panel, EXAMPLE_LCD_INVERT_COLOR), err, TAG, "设置反色失败");
ESP_GOTO_ON_ERROR(esp_lcd_panel_disp_on_off(lcd_panel, true), err, TAG, "打开显示失败");
if (EXAMPLE_LCD_GPIO_BL != GPIO_NUM_NC) {
ESP_RETURN_ON_ERROR(gpio_set_level(EXAMPLE_LCD_GPIO_BL, EXAMPLE_LCD_BL_ON_LEVEL), TAG, "背光引脚置位失败");
ESP_LOGI(TAG, "背光已打开，电平=%d", EXAMPLE_LCD_BL_ON_LEVEL);
}
ESP_LOGI(TAG, "颜色参数: order=%s invert=%d swap_bytes=%d",
EXAMPLE_LCD_COLOR_ORDER_BGR ? "BGR" : "RGB",
EXAMPLE_LCD_INVERT_COLOR,
EXAMPLE_LCD_SWAP_BYTES);
return ret;
// 错误处理标签，用于清理资源
err:
if (lcd_panel) {
esp_lcd_panel_del(lcd_panel);
lcd_panel = NULL;
}
if (lcd_io) {
esp_lcd_panel_io_del(lcd_io);
lcd_io = NULL;
}
spi_bus_free(EXAMPLE_LCD_SPI_NUM);
return ret;
}
/**
* @brief 初始化LVGL图形库
*
* 该函数负责初始化LVGL库，并配置显示设备
* 包括LVGL任务配置、显示缓冲区配置和旋转设置
*
* @return esp_err_t 初始化结果，ESP_OK表示成功
*/
static esp_err_t app_lvgl_init(void)
{
const lvgl_port_cfg_t lvgl_cfg = {
.task_priority = 4,
.task_stack = 8192,
.task_affinity = -1,
.task_max_sleep_ms = 500,
.timer_period_ms = 5
};
ESP_RETURN_ON_ERROR(lvgl_port_init(&lvgl_cfg), TAG, "LVGL端口初始化失败");
ESP_LOGI(TAG, "添加LCD屏幕");
const lvgl_port_display_cfg_t disp_cfg = {
.io_handle = lcd_io,
.panel_handle = lcd_panel,
.buffer_size = EXAMPLE_LCD_H_RES * EXAMPLE_LCD_DRAW_BUFF_HEIGHT,
.double_buffer = EXAMPLE_LCD_DRAW_BUFF_DOUBLE,
.hres = EXAMPLE_LCD_H_RES,
.vres = EXAMPLE_LCD_V_RES,
.monochrome = false,
#if LVGL_VERSION_MAJOR >= 9
.color_format = LV_COLOR_FORMAT_RGB565,
#endif
.rotation = {
.swap_xy = EXAMPLE_LCD_ROT_SWAP_XY,
.mirror_x = EXAMPLE_LCD_ROT_MIRROR_X,
.mirror_y = EXAMPLE_LCD_ROT_MIRROR_Y,
},
.flags = {
.buff_dma = true,
#if LVGL_VERSION_MAJOR >= 9
.swap_bytes = EXAMPLE_LCD_SWAP_BYTES,
#endif
}};
lvgl_disp = lvgl_port_add_disp(&disp_cfg);
ESP_RETURN_ON_FALSE(lvgl_disp != NULL, ESP_FAIL, TAG, "添加LVGL显示设备失败");
ESP_LOGI(TAG, "LVGL旋转已应用: swap_xy=%d mirror_x=%d mirror_y=%d",
EXAMPLE_LCD_ROT_SWAP_XY, EXAMPLE_LCD_ROT_MIRROR_X, EXAMPLE_LCD_ROT_MIRROR_Y);
return ESP_OK;
}
/**
* @brief 创建并显示LVGL主界面
*
* 该函数负责创建LVGL的用户界面元素，包括图像、标签和按钮
* 并设置它们的位置和属性
*/
static void app_main_display(void)
{
lv_obj_t *scr = lv_scr_act();
lvgl_port_lock(0);
lv_obj_set_style_bg_color(scr, lv_color_white(), 0);
lv_obj_set_style_bg_opa(scr, LV_OPA_COVER, 0);
s_center_label = lv_label_create(scr);
lv_label_set_text(s_center_label, "BotanicalBuddy\nloading...");
lv_label_set_recolor(s_center_label, false);
lv_label_set_long_mode(s_center_label, LV_LABEL_LONG_WRAP);
lv_obj_set_size(s_center_label, EXAMPLE_LCD_H_RES - 6, EXAMPLE_LCD_V_RES - 6);
lv_obj_set_style_text_color(s_center_label, lv_color_black(), 0);
lv_obj_set_style_text_font(s_center_label, &lv_font_montserrat_14, 0);
lv_obj_set_style_text_align(s_center_label, LV_TEXT_ALIGN_CENTER, 0);
lv_obj_set_style_pad_all(s_center_label, 0, 0);
lv_obj_align(s_center_label, LV_ALIGN_CENTER, 0, 0);
lvgl_port_unlock();
}
/**
* @brief 启动LVGL演示程序
*
* 该函数是程序的入口点，负责初始化LCD硬件、LVGL库，并显示主界面
*/
esp_err_t lvgl_st7789_set_center_text(const char *text)
{
ESP_RETURN_ON_FALSE(text != NULL, ESP_ERR_INVALID_ARG, TAG, "text is null");
ESP_RETURN_ON_FALSE(s_center_label != NULL, ESP_ERR_INVALID_STATE, TAG, "label not ready");
lvgl_port_lock(0);
lv_label_set_text(s_center_label, text);
lv_obj_align(s_center_label, LV_ALIGN_CENTER, 0, 0);
lvgl_port_unlock();
return ESP_OK;
}
esp_err_t start_lvgl_demo(void)
{
ESP_RETURN_ON_ERROR(app_lcd_init(), TAG, "LCD初始化失败");
#if EXAMPLE_LCD_ENABLE_COLOR_TEST
ESP_RETURN_ON_ERROR(app_lcd_color_test(), TAG, "LCD测试图绘制失败");
vTaskDelay(pdMS_TO_TICKS(300));
#endif
ESP_RETURN_ON_ERROR(app_lvgl_init(), TAG, "LVGL初始化失败");
// app_main_display();
return ESP_OK;
}