ESP32-S3-Touch-LCD-4B Arduino 开发

本章节包含以下部分，请按需阅读：

Arduino 入门教程
配置开发环境
示例程序

Arduino 入门教程

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

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

配置开发环境

1. 安装和配置 Arduino IDE

请参考 安装和配置 Arduino IDE 教程 下载安装 Arduino IDE 并添加 ESP32 支持。

ESP32-S3-Touch-LCD-4B 所需开发板安装说明

板名称	板安装要求	版本号要求
esp32 by Espressif Systems	“离线”安装/“在线”安装	≥3.2.0

安装库

在安装 Arduino 库时，通常有两种方式可供选择：在线安装 和 离线安装 。若库安装要求离线安装，则必须使用提供的库文件
对于大多数库，用户可以通过 Arduino 软件的在线库管理器轻松搜索并安装。然而，一些开源库或自定义库未被同步到 Arduino 库管理器中，因此无法通过在线搜索获取。在这种情况下，用户只能通过离线方式手动安装这些库。
ESP32-S3-Touch-LCD-4B 库文件存放于示例程序中，点击此处跳转：ESP32-S3-Touch-LCD-4B 示例程序
库安装教程，详见：安装和配置 Arduino IDE 教程 当中关于库安装的部分

ESP32-S3-Touch-LCD-4B 库文件说明

库名称	说明	版本	库安装要求
GFX_Library_for_Arduino	适配 ST7701 的 GFX 图形化库	v1.6.0	可“在线”或“离线”安装
lvgl	LVGL 图形化库	v9.3.0	“在线”安装后需复制 demos 文件夹至 src，建议使用“离线”安装
SensorLib	PCF85063、QMI8658、GT911 传感器驱动库	v0.3.1	可“在线”或“离线”安装
XPowersLib	AXP2101 电源管理芯片驱动库	v0.2.6	可“在线”或“离线”安装
Mylibrary	开发板宏定义	——	“离线”安装
lv_conf.h	LVGL 配置文件	——	“离线”安装

示例程序

Demo-flow-01

ESP32-S3-Touch-LCD-4B 示例程序

示例程序	基础例程说明	依赖库
01_HelloWorld	展示了基本的图形库功能，也可以用于测试显示屏的基础性能以及随机文本显示效果	GFX_Library_for_Arduino
02_GFX_AsciiTable	根据屏幕尺寸，在显示屏上按行列打印 ASCII 字符	GFX_Library_for_Arduino
03_LVGL_PCF85063_simpleTime	LVGL 库显示当前时间	LVGL，SensorLib
04_LVGL_QMI8658_ui	LVGL 绘制加速度折线图	LVGL，SensorLib
05_LVGL_AXP2101_ADC_Data	LVGL 显示 PMIC 数据	LVGL，XPowersLib
06_LVGL_Arduino_v9	LVGL 演示	lvgl、GFX_Library_for_Arduino、SensorLib
07_ES8311	ES8311 驱动示例，播放简单的音频	——
08_ES7210	ES7210 驱动示例，拾取人声检测	——

Arduino 工程参数设置

ESP32-S3-Touch-LCD-4B

01_HelloWorld

【程序说明】

本示例演示了如何使用 Arduino GFX 库控制 ST7701 显示屏，通过动态变化的文本展示了基本的图形库功能。该代码也可以用于测试显示屏的基础性能以及随机文本显示效果

【硬件连接】

将开发板接入电脑

【代码分析】

显示初始化：

if (!gfx->begin()) {
  USBSerial.println("gfx->begin() failed!");
}

清屏并显示文本：

gfx->fillScreen(BLACK);
gfx->setCursor(10, 10);
gfx->setTextColor(RED);
gfx->println("Hello World!");

动图显示：

gfx->setCursor(random(gfx->width()), random(gfx->height()));
gfx->setTextColor(random(0xffff), random(0xffff));
gfx->setTextSize(random(6), random(6), random(2));
gfx->println("Hello World!");

【运行效果】

ESP32-S3-Touch-LCD-4B-250807-01

02_GFX_AsciiTable

【程序说明】

本示例通过使用 Arduino GFX 库在 ESP32 上展示了如何在 ST7701 显示屏上显示一个基本的 ASCII 字符表格。代码的核心功能是初始化显示屏，并根据屏幕尺寸，在显示屏上按行列打印 ASCII 字符

【硬件连接】

将开发板接入电脑

【代码分析】

创建显示控制和 RGB 数据接口：Arduino_XCA9554SWSPI 通过 TCA9554 IO 扩展芯片发送 ST7701 初始化命令，Arduino_ESP32RGBPanel 通过 RGB 并行接口传输图像数据。以下代码来自 02_GFX_AsciiTable 示例。

Arduino_XCA9554SWSPI *expander = new Arduino_XCA9554SWSPI(
  7, 0, 2, 1, &Wire, 0x20);

Arduino_ESP32RGBPanel *rgbpanel = new Arduino_ESP32RGBPanel(
  17 /* DE */, 3 /* VSYNC */, 46 /* HSYNC */, 9 /* PCLK */,
  10 /* B0 */, 11 /* B1 */, 12 /* B2 */, 13 /* B3 */, 14 /* B4 */,
  21 /* G0 */, 8 /* G1 */, 18 /* G2 */, 45 /* G3 */, 38 /* G4 */, 39 /* G5 */,
  40 /* R0 */, 41 /* R1 */, 42 /* R2 */, 2 /* R3 */, 1 /* R4 */,
  1 /* hsync_polarity */, 10 /* hsync_front_porch */, 8 /* hsync_pulse_width */, 50 /* hsync_back_porch */,
  1 /* vsync_polarity */, 10 /* vsync_front_porch */, 8 /* vsync_pulse_width */, 20 /* vsync_back_porch */);

Arduino_RGB_Display *gfx = new Arduino_RGB_Display(
  480 /* width */, 480 /* height */, rgbpanel, 0 /* rotation */, true /* auto_flush */,
  expander, GFX_NOT_DEFINED /* RST */, st7701_type1_init_operations, sizeof(st7701_type1_init_operations));

expander 的前四个参数依次为扩展芯片上的复位、片选、时钟和数据引脚编号，对应 EXIO7、EXIO0、EXIO2 和 EXIO1。在 setup() 中先调用 Wire.begin(47, 48) 初始化 I2C，再按示例设置扩展引脚并调用 gfx->begin()。

绘制行列编号和字符表

首先设置文本颜色为绿色，在显示屏上逐个打印行号。然后设置文本颜色为蓝色，打印列号。接着使用循环逐个绘制字符，组成字符表，每个字符使用白色前景和黑色背景

gfx->setTextColor(GREEN);
for (int x = 0; x < numRows; x++) {
  gfx->setCursor(10 + x * 8, 2);
  gfx->print(x, 16);
}
gfx->setTextColor(BLUE);
for (int y = 0; y < numCols; y++) {
  gfx->setCursor(2, 12 + y * 10);
  gfx->print(y, 16);
}

char c = 0;
for (int y = 0; y < numRows; y++) {
  for (int x = 0; x < numCols; x++) {
    gfx->drawChar(10 + x * 8, 12 + y * 10, c++, WHITE, BLACK);
  }
}

【运行效果】

ESP32-S3-Touch-LCD-4B-250807-02

03_LVGL_PCF85063_simpleTime

【程序说明】

本示例读取 PCF85063 实时时钟，通过 LVGL 标签在 ST7701 显示屏上显示日期和时间，约每秒更新一次。

【硬件连接】

将开发板接入电脑

【代码分析】

setup()：初始化串口、I2C、显示屏和 PCF85063，设置实时时钟的初始日期与时间。随后初始化 LVGL，注册显示缓冲区和刷新回调，并创建居中的时间标签。
loop()：调用 lv_timer_handler() 处理 LVGL 任务并刷新显示。每隔约 1 秒读取实时时钟，将日期与时间格式化后，通过 lv_label_set_text() 更新标签。

【运行效果】

ESP32-S3-Touch-LCD-4B-250807-04

04_LVGL_QMI8658_ui

【程序说明】

本示例演示了使用 LVGL 进行图形显示，与 QMI8658 IMU 通信以获取加速度计和陀螺仪数据

【硬件连接】

将开发板接入电脑

【代码分析】

setup ：负责初始化各种硬件设备和 LVGL 图形库环境
- 串口初始化： USBSerial.begin(115200) 为串口调试做准备
- 触摸控制器初始化：不断尝试初始化触摸控制器 GT911 ，如果初始化失败则打印错误信息并延迟等待，成功后打印成功信息
- 图形显示初始化：初始化图形显示设备 gfx ，设置亮度，并打印 LVGL 和 Arduino 的版本信息。接着初始化 LVGL，包括注册打印回调函数用于调试，初始化显示驱动和输入设备驱动。创建并启动 LVGL 的定时器，最后创建一个标签并设置初始文本为 “Initializing...”
- 创建图表：创建一个图表对象 chart ，设置图表的类型、范围、数据点数量等属性，并为加速度的三个轴添加数据系列
- 加速度传感器初始化：初始化加速度传感器 qmi ，配置加速度计和陀螺仪的参数，启用它们，并打印芯片 ID 和控制寄存器信息
loop
- lv_timer_handler() ：这是 LVGL 图形库中的一个重要函数，用于处理图形界面的各种定时器事件、动画更新、输入处理等任务。在每个循环中调用这个函数可以确保图形界面的流畅运行和及时响应交互操作
- 读取加速度传感器数据：如果加速度传感器数据准备好，读取加速度数据并通过串口打印出来，同时更新图表显示加速度数据。如果陀螺仪数据准备好，读取陀螺仪数据并通过串口打印出来。循环末尾调用 delay(5)，增加轮询间隔、降低轮询频率。

【运行效果】

ESP32-S3-Touch-LCD-4B-250807-03

05_LVGL_AXP2101_ADC_Data

【程序说明】

本示例演示了 LVGL 下使用 XPowers 库进行电源管理，并且提供 PWR 自定义按钮控制亮屏、熄屏动作

【硬件连接】

将开发板接入电脑

【代码分析】

亮屏熄屏实现函数

void toggleBacklight() {
  USBSerial.println(backlight_on);
  if (backlight_on) {
    for (int i = 255; i >= 0; i--) {
      gfx->Display_Brightness(i);
      delay(3);
    }
  } else {
    for (int i = 0; i <= 255; i++) {
      gfx->Display_Brightness(i);
      delay(3);
    }
  }
  backlight_on = !backlight_on;
}

【运行效果】

显示参数：芯片温度，是否正在充电，是否放电，是否待机状态，Vbus 是否连接，Vbus 是否良好，充电器状态，电池电压，Vbus 电压，系统电压，电池百分比

ESP32-S3-Touch-LCD-4B-250807-05

06_LVGL_Arduino_v9

【程序说明】

本示例演示了 LVGL Widgets 示例，动态状态下帧率可达 20~30 帧，通过优化 ST7701 显示库可实现更佳流畅的帧率，实际可对比 ESP-IDF 环境下启用双缓存、双加速的场景

【硬件连接】

将开发板接入电脑

【代码分析】

setup ：负责初始化各种硬件设备和 LVGL 图形库环境
- 串口初始化： USBSerial.begin(115200) 为串口调试做准备
- I²C 总线初始化： Wire.begin(IIC_SDA, IIC_SCL); 初始化 I²C 总线，用于与其他 I²C 设备通信
- 扩展芯片初始化：创建并初始化扩展芯片 expander ，设置引脚模式为输出，并进行一些初始的引脚状态设置
- 触摸控制器初始化：不断尝试初始化触摸控制器 GT911 ，如果初始化失败则打印错误信息并延迟等待，成功后打印成功信息
- 图形显示初始化：初始化图形显示设备 gfx ，设置亮度，并获取屏幕的宽度和高度。然后初始化 LVGL，包括注册打印回调函数用于调试，设置触摸控制器的电源模式为监控模式，初始化显示驱动和输入设备驱动。创建并启动 LVGL 的定时器，创建一个标签并设置文本，最后调用 lv_demo_widgets() 展示 LVGL 的示例小部件
loop
- lv_timer_handler() ：这是 LVGL 图形库中的一个重要函数，用于处理图形界面的各种定时器事件、动画更新、输入处理等任务。在每个循环中调用这个函数可以确保图形界面的流畅运行和及时响应交互操作
- delay(5); ：添加一个小的延迟，避免过度占用 CPU 资源

【运行效果】

ESP32-S3-Touch-LCD-4B-250807-06

07_ES8311

【程序说明】

本示例演示了使用 I2S 驱动 ES8311 芯片，将转换的二进制音频文件进行播放

【硬件连接】

将开发板接入电脑

【代码分析】

es8311_codec_init ：初始化 ES8311 音频编解码器
- 创建一个 ES8311 编解码器的句柄 es_handle
- 配置 ES8311 的时钟参数，包括主时钟和采样时钟的频率、时钟极性等
- 初始化编解码器，设置音频分辨率为 16 位
- 配置采样频率
- 配置麦克风相关参数，如关闭麦克风、设置音量和麦克风增益
setup ：进行整体的初始化设置，包括串口、引脚、I2S 和 ES8311 编解码器
- 初始化串口用于调试输出
- 设置特定引脚为输出并置高
- 配置 I2S 总线，设置引脚、工作模式、采样率、数据位宽、声道模式等
- 初始化 I²C 总线
- 调用 es8311_codec_init 函数初始化 ES8311 编解码器
- 通过 I2S 总线播放一段预先定义的音频数据（ canon_pcm ）

【运行效果】

播放音频文件，屏幕无现象

08_ES7210

【程序说明】

本示例演示了使用 I2S 驱动 ES7210 芯片，拾音并过滤人声

【硬件连接】

将开发板接入电脑

【运行效果】

拾音，屏幕无现象

文档反馈

Arduino 入门教程​

配置开发环境​

1. 安装和配置 Arduino IDE​

安装库​

示例程序​

Arduino 工程参数设置​

01_HelloWorld​

02_GFX_AsciiTable​

03_LVGL_PCF85063_simpleTime​

04_LVGL_QMI8658_ui​

05_LVGL_AXP2101_ADC_Data​

06_LVGL_Arduino_v9​

07_ES8311​

08_ES7210​

Arduino 入门教程

配置开发环境

1. 安装和配置 Arduino IDE

安装库

示例程序

Arduino 工程参数设置

01_HelloWorld

02_GFX_AsciiTable

03_LVGL_PCF85063_simpleTime

04_LVGL_QMI8658_ui

05_LVGL_AXP2101_ADC_Data

06_LVGL_Arduino_v9

07_ES8311

08_ES7210