跳到主要内容

ESP32 开发

本章节包含以下部分，请按需阅读。接线图片和工程配置截图以 ESP32-C3-Zero 为例。

Arduino 入门教程​

初次接触 Arduino ESP32 开发，想要快速上手？我们为您准备了一套通用的 入门教程。

请注意：该教程使用 ESP32-S3-Zero 作为教学示例，所有硬件代码均基于其引脚布局。在动手实践前，建议您对照手中的开发板引脚图，确认引脚配置无误。

配置开发环境​

1. 安装和配置 Arduino IDE​

参考 安装和配置 Arduino IDE 教程，安装 Arduino IDE 并添加 ESP32 开发板支持。

2. 安装库​

  • Arduino 库支持在线安装和离线安装。
  • 本示例所需的配套库位于示例程序包的 ESP32-C3/libraries 目录。
库或文件名称说明安装方式
TFT_eSPIGC9D01 LCD 驱动、文字及图形绘制离线安装
Lvgl图片、动画及图形界面显示离线安装
lv_conf.hLVGL 配置文件随配套库复制
版本兼容性说明

本示例使用 ESP32-C3/libraries 目录提供的 TFT_eSPI、Lvgl 和 lv_conf.h。其中 TFT_eSPI 已包含 GC9D01 驱动及本示例所需的引脚配置。请使用配套文件，避免因库版本或配置不一致导致编译失败或显示异常。

安装步骤：

  1. 下载并解压 0.71inch LCD Module 示例程序。

  2. 将 ESP32-C3/libraries 目录中的 TFT_eSPI、Lvgl 文件夹及 lv_conf.h 文件复制到 Arduino 的库文件夹中，使三个项目位于同一层级。

    信息

    Arduino 库文件夹的路径通常为 C:\Users\<用户名>\Documents\Arduino\libraries。

    也可以在 Arduino IDE 中点击 文件 > 首选项，查看 项目文件夹位置。库文件夹是该路径下的 libraries 文件夹。

  3. 重新启动 Arduino IDE，使库文件被重新加载。

  4. 其他安装方法参考 Arduino 库管理教程。

0.71inch LCD Module 所需开发板安装说明

ESP32 开发板支持包版本要求

本示例要求安装 v2.0.12 版本的 ESP32 开发板支持包。国内网络环境可下载 ESP32 Arduino 开发板支持包 v2.0.12（离线包），并参考 Arduino IDE 教程中的开发板离线安装说明完成安装。

开发板支持包安装方式版本号要求
ESP32 by Espressif Systems离线安装 / 在线安装v2.0.12

3. Arduino 工程参数​

在 工具 菜单中选择以下参数：

  • Board：ESP32C3 Dev Module
  • USB CDC On Boot：Enabled
  • CPU Frequency：160MHz (WiFi)
  • Flash Frequency：80MHz
  • Flash Mode：QIO
  • Flash Size：4MB (32Mb)
  • Partition Scheme：Huge APP (3MB No OTA/1MB SPIFFS)
  • Upload Speed：921600

ESP32-C3 Arduino 工程参数设置

硬件连接​

通过 8PIN 杜邦线连接 LCD 模块与 ESP32-C3-Zero，引脚对应关系如下：

LCDESP32-C3-Zero
VCC3V3
GNDGND
DINGPIO7
CLKGPIO6
CSGPIO5
DCGPIO4
RSTGPIO8
BLGPIO1

接线示意如下：

0.71inch LCD Module 与 ESP32-C3-Zero 接线

确认接线后，通过支持数据传输的 USB 线将开发板连接到计算机。

示例说明与运行效果​

示例程序位于 ESP32-C3/examples 目录。使用 Arduino IDE 打开对应文件夹中的 .ino 文件，选择上述工程参数和实际端口，然后编译并上传。

示例文件夹功能依赖库
1.Text_and_Number_Display文字及数字显示TFT_eSPI
2.Shapes_on_Circular_Display几何图形绘制TFT_eSPI
3.Animated_Eye1仿真眼睛样式 1TFT_eSPI
4.Animated_Eye2仿真眼睛样式 2TFT_eSPI、LVGL
5.Animated_Eye12交替显示两种眼睛样式TFT_eSPI
6.Image_Display图片显示TFT_eSPI、LVGL
7.Clock时钟界面TFT_eSPI、LVGL

1.Text_and_Number_Display​

程序说明​

程序启动时依次显示蓝、红、绿背景，随后显示文字和从 00 到 99 循环递增的两位数数字，每秒更新一次。

代码分析​

  • setup()：初始化屏幕，依次切换背景颜色，并设置文字颜色和显示位置。
  • loop()：将计数值转换为两位数字符串，通过 tft.drawString() 刷新显示；数字超过 99 后归零。

运行效果​

ESP32-C3 文字及数字显示效果

2.Shapes_on_Circular_Display​

程序说明​

在屏幕中心依次绘制随机颜色的正方形、三角形和圆形，每隔 3 秒切换一次图形。

代码分析​

  • drawSquare()：调用 fillRect() 绘制随机颜色的正方形。
  • drawTriangle()：计算三个顶点并调用 fillTriangle() 绘制三角形。
  • drawCircleInCenter()：调用 fillCircle() 在屏幕中心绘制圆形。

运行效果​

ESP32-C3 几何图形绘制效果

3.Animated_Eye1​

程序说明​

使用 TFT_eSPI 绘制仿真眼睛，通过眼球移动、虹膜大小变化和自动眨眼形成动画。

代码分析​

  • config.h：设置屏幕数量、片选引脚、眼睛图像资源和动画选项，单目屏示例中的 NUM_EYES 为 1。
  • eye_functions.ino：计算虹膜位置和眨眼状态，并将每帧像素数据写入屏幕。
  • loop()：持续更新眼睛动画。

运行效果​

ESP32-C3 仿真眼睛样式 1 显示效果

4.Animated_Eye2​

程序说明​

初始化 TFT_eSPI 和 LVGL，通过 LVGL 动画图像对象显示另一种眼睛动画。

代码分析​

  • setup()：初始化 LVGL、屏幕和显示缓冲区，注册显示刷新回调。
  • lv_gif_create()：创建动画图像对象，并通过 lv_gif_set_src() 指定图像资源。
  • loop()：持续调用 lv_timer_handler() 处理 LVGL 任务。

运行效果​

ESP32-C3 仿真眼睛样式 2 显示效果

5.Animated_Eye12​

程序说明​

在同一块屏幕上交替显示仿真眼睛样式 1 和样式 2。

代码分析​

  • Demo_1()：调用眼睛绘制逻辑显示样式 1。
  • Demo_2()：通过 pushImage() 依次显示图像帧，形成样式 2 动画。
  • loop()：循环切换两种动画。

运行效果​

运行效果分别与 3.Animated_Eye1 和 4.Animated_Eye2 所示样式一致。

6.Image_Display​

程序说明​

初始化 TFT_eSPI 和 LVGL，在屏幕上显示内置图片资源。

代码分析​

  • setup()：初始化 LVGL、屏幕和显示缓冲区，注册显示刷新回调。
  • LV_IMG_DECLARE(A3)：声明图像资源，通过 lv_img_create() 创建图像对象，再使用 lv_img_set_src() 设置图像内容。
  • loop()：持续调用 lv_timer_handler() 处理 LVGL 任务。

运行效果​

ESP32-C3 使用 LVGL 显示图片的效果

7.Clock​

程序说明​

使用 TFT_eSPI 和 LVGL 初始化屏幕并显示时钟界面。

代码分析​

  • setup()：初始化 LVGL、屏幕和显示缓冲区，注册显示驱动，并调用 ui_init() 创建界面。
  • lv_disp_flush()：将待刷新区域的像素数据发送到屏幕。
  • loop()：持续调用 lv_timer_handler() 处理界面任务。

运行效果​

ESP32-C3 时钟界面显示效果