用户手册用latex写的，转过来会乱码，建议大家去gitee上下载ESP32-S3-Dock_Userdoucunment进行查看，pdf和word导入会乱码
gitee开源链接：https://gitee.com/hao-long-chen/esp32-s3-dock

目前项目还不是很完善，还有一些底层驱动需要攥写，目前只有一个lvgl多级菜单

人菜勿喷

ESP32S3-Dock 使用文档

作 者 hlchen2021

项目链接 https://oshwhub.com/hlchen2021/esp32_s3_dock

设计时间 2024 年 3 月 20 日 程序开发 VScode+ESP-IDF UI 设计 SquarLine Studio

目 录

第一章 项目硬件设计 1

• 1. 总体硬件设计 1
     1. 原理图和 PCB 设计 1
     2. fushion360 设计 1
  2. 硬件具体设计 2
     1. 串口自动下载电路和 OTG 电路 3
     2. 锂电池和 TYPEC 实现 UPS 不间断供电 4
     3. 锂电池充电 5
     4. LCD 的并口驱动和触摸驱动 5
     5. 外围电路设计 6

第二章 硬件驱动设计 8

• 1. VScode+ESPIDF 安装 8
     1. VScode 安装 8
     2. ESP-IDF 安装 9
  2. ESP-IDF 程序驱动 9
     1. BMI270 IIC 驱动 10
     2. WS2812 驱动 10
     3. SD SPI 驱动 13
     4. ST7789 I80-8bit 并口屏驱动 13
     5. GT911 IIC 触摸 IC 驱动 13
  3. SquarLine Studio UI 界面设计 13
     1. 基本控件使用 13
     2. 基本动画使用 13
     3. 事件触发使用 13
  4. VScode+SDL2 UI 界面仿真 13
     1. 仿真环境搭建 13
     2. ui 文件移植 13
  5. SquarLine Studio 生成文件移植 13
     1. cmakelist.txt 文件配置 13

第三章 微信小程序设计 14

• 1. 程序设置 14
     1. 开发工具安装 14
     2. 依赖库安装 14
  2. UI 界面设计 14

第一章 项目硬件设计

ESP32S3-Dock 主要由主控 ESP32S3-WROOM-1U 和 240*320 的 2.8 寸 TFT 电容触摸屏构成。ESP32S3-Dock 主要在整个系统框架中起到垃圾桶整体状态监测和云平台互联的功能，CH32 通过串口将电机、垃圾种类、垃圾个数等垃圾桶信息通过串口传输到 ESP32， ESP32 通过硬件 i80-8bit 的并行接口将数据经过 littlelvgl 的开源 UI 库处理后传输至屏幕，呈现符合人类交互逻辑的UI 界面，屏幕上的 GT911 五点触摸IC 将触摸的位置信息反馈回 ESP32S3，系统解算后实现 UI 交互功能；同时，系统通过 TCP 协议连接wifi，通过 MQTT连接阿里云云平台后将串口收到的数据发送至阿里云云平台，至于阿里云云平台的数据可以通过微信小程序订阅相关节点的数据实现垃圾桶状态的监测。

总体硬件设计

硬件设计包括原理图、PCB 和 3D 外壳的结构设计。

原理图和 PCB 设计

使用国产化的立创 EDA 软件进行硬件的原理图和 PCB 的设计，得益于中国领先的元器件自营商城-立创商城，和中国领先的 PCB/SMT 制造商-嘉立创，嘉立创 EDA 集成超过 90 万实时价格的，实时库存数量的元器件库。电子工程师可以在设计过程中检查元器件的库存、价格、值、规格书和 SMT 信息，缩短器件选型和项目设计周期。选用立创 EDA 主要基于以下方面考虑：

1. 本土化支持和服务，立创 EDA 软件是国产软件，因此可以提供更及时、更贴近国内用户需求的本土化支持和服务，用户可以更方便地获得技术支持、培训和更新等服务，减少语言和文化差异带来的沟通障碍；
2. 定制化和灵活性，国产化软件通常更容易进行定制化开发，可以根据用户的具体需求进行定制功能或适配特定的硬件平台；
3. 生态系统和社区支持，立创 EDA 在国内拥有更广泛的用户群体和生态系统支持，用户可以更方便地在社区中获取技术分享、交流经验，并且共同解决问题，这有助于提高用户的学习效率和问题解决能力。

 

 fushion360 设计

使用 fushion360 进行 PCB 的外壳设计，Fusion 360 是基于云的 CAD/CAM/CAE 工具，同时适用于 Mac 和 PC 的平台，可支持协作式产品开发。Fusion 360 将快速轻松的有机建

模与精确的实体建模相结合，能够更快进行 3D 结构设计。

图 1.1 fushion360 设计

外壳使用 PLA 材料进行 3D 打印和亚克力材料激光切割，添加外壳的主要目的为：保护电路板和组件，PCB 外壳可以提供物理保护，防止电路板和内部组件受到机械损伤、灰尘、水分等外部环境因素的影响，这有助于延长电子产品的寿命和稳定性；美观性和用户体验，外壳设计可以影响产品的外观和手感，吸引用户的注意力，提升产品的美观性和使用体验，符合人体工程学的设计也可以提高产品的舒适性和便捷性；组装和维修便利性：合理的外壳设计可以简化产品的组装过程，并且在需要维修或更换部件时，也能够方便地打开外壳进行操作，提高产品的维修性和可维护性。

硬件具体设计

图 1.2 ESP32 系统框图

硬件的整体设计如上图所示，电路主要需要实现的功能为如下十点：一个 TYPEC 通过 CH340K 和两个二极管实现串口自动下载功能、一个 TYPEC 直连 ESP32 实现 OTG 功能、锂电池和TYPEC 实现UPS 不间断供电、两路 DC-DC 降压电路为后级元件供电、TYPEC 为锂电池充电、LCD 的并口驱动和触摸驱动、IMU BMI270 陀螺仪驱动、SD 卡驱动、WS2812 RGB 灯珠驱动、ADC 锂电池电压采集欠压保护。这十个功能覆盖了硬件电路设计中常见的供电、通信、外设驱动、传感器接口等方面，充分利用 ESP32S3 的IO，是一个较为完整的硬件设计。

• • 1. 串口自动下载电路和 OTG 电路

ESP32 的启动模式由EN（Enable）引脚和BOOT 引脚的电平状态决定。具体而言，当 EN 引脚为高电平时，ESP32 处于工作模式，可以正常运行程序；当 EN 引脚为低电平时， ESP32 进入下载模式。BOOT 引脚则用于选择启动模式，其电平状态决定ESP32 是从哪个存储介质（例如 Flash 或外部设备）启动。

图 1.3 USART OTG Design

串口自动下载电路设计的原因是为了实现以下功能：当连接到计算机的串口通信端口时，ESP32 能够自动进入下载模式，以便进行固件的更新。

CH340K 是一个 USB 转串口芯片，它与计算机的 USB 接口相连，用于通过串口与 ESP32 通信，两个二极管连接在ESP32 的EN 和BOOT 引脚上的集电极端，这两个二极管的发射极分别连接到ESP32 的EN 和BOOT 引脚，而且连接方式如同“OR”门。这样设计的目的是让ESP32 可以通过串口收到来自计算机的控制信号，从而在需要时自动切换至下载模式。原理图中的 OD_P,OD_N 和 VBUS 两端的 LESD5D5.0 主要起到静电和浪涌保护，超过 5.0V 的电压会直接通过 ESD 放电到地。

程序下载流程如下：（1）当 ESP32 处于正常工作模式时，EN 引脚为高电平，BOOT引脚的状态根据需要选择；（2）当用户需要更新固件时，通过串口与 ESP32 建立通信连接；（3）计算机通过串口发送特定的启动命令到 ESP32，ESP32 收到特定命令后，通过串口通信接收到的信号使EN 引脚电平下降，进入下载模式；（4）进入下载模式后，ESP32 可

以通过串口接收来自计算机的固件数据，并将其写入 Flash 等存储介质。

通过这样的设计，当连接到计算机的串口时，ESP32 会自动进入下载模式，而不需要手动操作开发板上的启动按键或拨动BOOT 引脚的跳线帽，这提高了固件更新的便捷性和用户体验。

为了提供了灵活的 USB 连接方式，增强设备的功能和交互性，对于需要与其他 USB设备进行通信和数据交换的需求，可以使用 TYPEC 引脚的 D+ 和 D-端口直连 ESP32S3 的 USB 外设实现OTG 的功能，默认情况下，USB_SERIAL_JTAG 模块连接到ESP32-S3 的内部PHY，USB_OTG 而外设只有在连接外部USB PHY 时才能使用，由于CDC 控制台是通过外设提供的USB_OTG 因此在此配置中无法通过内部PHY 使用。在 ESP32 的固件中，需要进行相应的软件配置，以便动态切换 ESP32 的USB 接口工作模式，通常需要通过编程将 ESP32 的 USB 控制器配置为主机模式或设备模式，并根据连接状态进行切换。OTG 的作用主要体现在以下几个方面：（1）灵活连接：OTG 功能使设备能够在需要时充当USB 主机或USB 设备，从而实现与其他USB 设备的灵活连接。例如，智能手机可以连接到USB 存储设备以读取或存储文件，或者连接到打印机以进行打印。（2）简化设备设计：使用 OTG功能可以简化设备设计，因为设备只需一个 USB 接口即可同时实现主机和设备功能，而不需要额外的接口或开关。（3）增强交互性：OTG 功能增强了设备与外部设备之间的交互性，使设备能够更灵活地与其他USB 设备进行通信和数据交换，从而提高了设备的功能和用户体验。

• • 1. 锂电池和 TYPEC 实现 UPS 不间断供电

UPS（Uninterruptible Power Supply）功能确保设备在主电源中断时仍能够持续供电，保护设备免受电源中断带来的影响。使用 AO3401A MOS 管实现锂电池和 5V Type-C 的 UPS

（不间断电源）供电是一种及其简单的设计方案。

图 1.4 UPS Design

将 AO3401A PMOS 管的源极连接到锂电池的正极，漏极连接到 5V Type-C 的供电线路。通过电路中的控制电路（例如基于电压比较器或微控制器的控制电路），控制 AO3401A MOS 管的导通和截止，以实现对电源的切换。当输入电源（5V Type-C）正常时，控制电路将使 AO3401A MOS 管导通，电流通过 MOS 管直接供给设备，当 Type-C 的 5V 输入电源中断时，控制电路将使 AO3401A MOS 管截止，锂电池开始为设备提供电源，肖特基二极管 DSK34 防止电流回流到 5V Type-C 接口。

• • 1. 锂电池充电

IP5306 是一款集成了充电管理和电源管理功能的芯片，芯片可以通过三个端口控制四个 LED 电量指示灯，进行锂电池电量的监测，可以实时反馈电流大小。

图 1.5 IP5306 锂电池充电

与 TP4056 等传统的锂电池充电芯片相比，具有以下优点：（1）集成度高：IP5306 集成了锂电池充电管理、DC-DC 升压、降压和电流限制等功能于一体，整合了多个功能模块，简化了电路设计和布局，减少了外部元件的数量和板面积，有利于缩小产品尺寸；（2）高效率：IP5306 采用了高效的升压和降压转换器，具有较高的转换效率，能够更有效地利用电池能量，减少能量损耗，提高设备的续航时间。（3）多种保护功能：IP5306 内置了多种保护功能，如过充保护、过放保护、过流保护、短路保护等，能够有效保护锂电池和充电电路的安全稳定运行。（4）多种充电模式：IP5306 支持多种充电模式，包括恒流充电、恒压充电和浮充充电等模式，能够根据不同的充电状态自动调整充电电流和电压，有利于提高锂电池的充电效率和充电寿命。

• • 1. LCD 的并口驱动和触摸驱动

项目使用ESP32S3 的硬件I80-8bit 接口驱动ST7789V 的 240*320 分辨率的触摸屏，选择八位并口传输而不是串行 SPI 传输主要考虑到如下因素：（1）硬件 I80 并口驱动通过同时传输多个数据位，具有更高的带宽和数据传输速度。相比之下，SPI 通常是单线或四线串行通信，传输速度相对较低，因为它需要逐位传输数据。（2）对于高分辨率的屏幕，如高清晰度液晶显示器（LCD），硬件 I80 并口驱动通常更适合。由于其高速并行传输的特性，它

(a) 显示屏引脚定义                                                                                                                                                                                     (b) 硬件驱动原理图

图 1.6 显示屏引脚定义和驱动

可以更有效地处理大量像素数据，提供更流畅的显示效果。（3）硬件 I80 并口驱动可以同时传输多个数据位，因此在一次传输中可以发送更多的数据。这样可以减少通信周期，提高数据传输的效率，特别是在需要传输大量像素数据的情况下。（4）硬件 I80 并口驱动通常具有更灵活的配置选项，可以根据需求调整数据线数量、时钟频率等参数，以满足不同屏幕的驱动需求。这种灵活性使其能够适应各种不同类型和规格的显示屏。（5）由于硬件 I80 并口驱动是并行传输，相对于串行 SPI 通信具有更低的电磁辐射和干扰。这有利于减少系统中的电磁兼容性问题，提高系统的稳定性和可靠性。

相较于传统的按键驱动的屏幕交互逻辑，触摸驱动更符合屏幕的人机交互逻辑，本项目使用 GT911 五点触摸 IC 以实现项目更好的控制，通过触摸屏，用户可以实现更多的功能，例如手势操作、多点触控、拖拽、缩放等，实现更直观、更快速的操作，目的是提升系统的交互性和功能性，提高用户的参与感和体验感。

• • 1. 外围电路设计

为了提高系统的交互体验，项目引入了 WS2812 的RGB 灯珠，可以根据系统的不同状态显示不同的颜色，进行更加直观的状态显示；引入两个外围按键，可以通过按键来使系统进入休眠或者唤醒；加入BMI270 的IMU 模块，可以感应系统的状态变化，来实现屏幕的自适应，或者系统震动检测，及时停止系统，防止系统运行损坏等。

(a) 外围器件 1                                                                                                                                                                          (b) 外围器件 2

• • • 1. 外围器件 3

图 1.7 外围器件

第二章 硬件驱动设计

VScode+ESPIDF 安装

• • 1. VScode 安装

在VScode 官网官网下载 windows x64 的 stable 版本 (VScode 的安装路径建议放在 C

盘)，推荐安装 vscode 时选项全部勾选。

(a) vscode 官网安装                                                                                                                                                                (b) vscode 安装选项

VScode 仅仅只是一个编辑器，要想实现相应的功能需要安装各种插件，VScode 有很多好用的插件，本项目主要使用的是 VScode+ESP-IDF 进行开发，项目主要使用 C 和 C++语言，因此好用的插件必不可少，主要安装一下插件：1.Chinese simplified，提供中文的开发环境。2.C/C++ extension，主要用来头文件引用链接跳转。如果有 C 语言编译代码的需求，则需要安装 C 语言的编译器，可以参照知乎这篇文章：VS Code 配置C 语言开发环境。

3.cmake + cmake tools，ESP32 的工程主要使用cmakelist.txt 用于将各个头文件添加至路径。 4.CodeGeeX，CodeGeeX 是国产免费的编程助手，可以根据自然语言注释描述的功能自动生成代码，也可以根据已有的代码自动生成后续代码，补全当前行或生成后续若干行，帮助你提高编程效率。

(c) VScode 插件

• • 1. ESP-IDF 安装

ESP-IDF 安装分为在线版和离线版 (乐鑫官网离线下载) 两种安装方式，由于网络问题无法访问github 的可以尝试离线安装ESP-IDF V5.2.1 版本，然后在再在 VScode 的ESP-IDF插件中引入ESP-IDF 的安装路径和编译工具的安装路径即可，本文主要介绍 VScode 在线安装的方式，主要流程如下：1. 在拓展插件中搜索ESP-IDF 安装即可。2. 键盘键入ctrl+shift+p调出命令行，输入 ESP-IDF extension 来配置 ESPIDF 插件，随后选择 ADVANCED 选项。

1. Select download server 选择下载服务器 (推荐魔法 +github，我 Espressif 服务器有时候会下载失败)，Select ESP-IDF version 选择ESP-IDF 版本，本项目使用的是 5.2.1 版本，Enter ESP-IDF directory (IDF_PATH) 选择你的ESP-IDF 安装路径，建议放在除 C 盘外的其他盘符，最后点击 Configure Tools，然后静静等待 ESP-IDF 的安装。

ESP-IDF 程序驱动

IDF 组件管理器工具用于下载 ESP-IDF CMake 项目的依赖项，该下载在 CMake 运行期间自动完成。IDF 组件管理器可以从组件注册表 或 Git 仓库获取组件。IDF 组件管理器提供了丰富的驱动示例，例如 LVGL、WS2812 等，本项目很多程序驱动都源自于 ESP-IDF component registry。

BMI270 IIC 驱动

bosch 官方在github 上有给出底层的IIC 驱动(BMI270_SensorAPI)，arduino-libraries基于bosch 官方的驱动库给出了具体的BMI270+BMM150 的API 接口，本项目并未使用到博世的 BMM150 磁力计，因此本项目在arduino 库的基础上进行修改，仅使用 BMI270。

(h) BMI270 驱动 (i) BMI270 寄存器

BMI270 的驱动代码位于esp32-s3-dock/Software/i80_controller/main/hal/imu 中，其中的 BMI270-Sensor-API 文件夹下为bosch 官方在github 的底层IIC 驱动，器件具体的寄存器以及功能描述可以参照 BMI270 的 datasheet 中的第 74 页进行查看。

imu.init();imu.setWristWearWakeup();imu.enableStepCounter(); 调用上面三个函数即可实现bmi270 的初始化，因为触摸 IC 的IIC 引脚和bmi270 的IIC 引脚相同，所以初始化 GT911触摸屏 IIC 引脚后无需再次初始化 bmi270 的 IIC 引脚。

WS2812 驱动

RMT(红外遥控) 外设是驱动WS2812 RGB 灯珠的最经济方式，RMT 是一个红外发送和接收控制器，可通过软件加解密多种红外协议。RMT 模块可以实现将模块内置RAM 中的脉冲编码转换为信号输出，或将模块的输入信号转换为脉冲编码存入 RAM 中。此外，RMT模块可以选择是否对输出信号进行载波调制，也可以选择是否对输入信号进行滤波和去噪处理。

T0H

0 code, high voltage time

220ns-380ns

T1H

1 code, high voltage time

580ns-1us

T0L

0 code, low voltage time

580ns-1us

T1L

1 code, low voltage time

580ns-1us

RES Frame unit, low voltage time

>280us

表 2.1 WS2812 数据传输时间

上述表格描述了系统传输高低电平时间的限制，RMT 模块可以快速定义每个字节高低电平的传输时间，因此用于控制 WS2812 比较合适，WS2812 支持多颗灯珠串联，如果串联灯珠数目较多，那么对内存的消耗较大，如果不使用 DMA 进行控制，WS2812 的控制数据会有丢包或误码，因此多个灯珠级联时使用 DMA 控制是必要的。

G7

G6

G5

G4

G3

G2

G1

G0

B7

B6

B5

B4

B3

B2

B1

B0

R7

R6

R5

R4

R3

R2

R1

R0

表 2.2 24bit GBR 数据传输

因此灯珠的驱动数据格式是 GBR 且高位优先的传输方式，RGB 图像是一种三通道图像，通常用于表示彩色图，它由相同行、列的红（Red）、绿（Green）、蓝（Blue）这三通道的数据组成，对于 8 位的 RGB 图像，其每个像素值取值范围是 0 255，如果某一坐标点 A 处红、绿、蓝三通道的像素值依次为 255，255，255，那么该点表示的颜色为白色，如果该处红、绿、蓝三通道的像素值依次为 0，0，0，那么该点表示的颜色为黑色，又如果该处红、绿、蓝三通道的像素值为其它值，则其表示的颜色为其它颜色。所以理论上 8 位RGB图可以表示的颜色种类数为 255*255*255。

RGB 图像与相机传感器输出的原始数据相对应，HSV 图像则与我们人类的直观视觉更相符。HSV 图像也包含相同尺寸的三通道数据：H 通道、S 通道、V 通道。H 通道的像素值表示色调，取值范围 0-360，我们可以把这个取值范围理解为角度；S 通道的像素值表示图像的饱和度，指图片彩色的纯度——图像的混合颜色越少，其饱和度越高，直观看起来就越鲜艳鲜明、视觉效果越强烈，取值范围是 0-1；V 通道的像素值表示图像的明亮程度，取值范围也是 0-1，值越大表示越亮。

下面程序为WS2812 的具体驱动 (项目引入了strip 库):

Listing 2.1 ws2812.c

/*

* @Author: hlchen2021 1093447442@qq.com

* @Date: 2024-04-19 19:53:38

• @LastEditors: hlchen2021 1093447442@qq.com
• @LastEditTime: 2024-04-19 20:06:12
• @FilePath: \i80_controller\main\hal\ws2812\ws2812.c
• @Description: 这是默认设置,请设置‘customMade‘, 打开koroFileHeader查看配置 进行设置: https:// github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE

*/

#include "ws2812.h"

#include "led_strip.h"

#include "esp_log.h"

static const char *TAG = "example"; led_strip_handle_t configure_led(void)

{

// LED strip general initialization, according to your led board design

led_strip_config_t strip_config = {

.strip_gpio_num = LED_STRIP_BLINK_GPIO, data line

.max_leds = LED_STRIP_LED_NUMBERS,

// The GPIO that connected to the LED strip’s

// The number of LEDs in the strip,

.led_pixel_format = LED_PIXEL_FORMAT_GRB, // Pixel format of your LED strip

.led_model = LED_MODEL_WS2812, // LED strip model

.flags.invert_out = false, // whether to invert the output signal

};

// LED strip backend configuration: RMT led_strip_rmt_config_t rmt_config = {

.clk_src = RMT_CLK_SRC_DEFAULT, // different clock source can lead to different power consumption

.resolution_hz = LED_STRIP_RMT_RES_HZ, // RMT counter clock frequency

.flags.with_dma = false, // DMA feature is available on ESP target like ESP32-S3

};

// LED Strip object handle led_strip_handle_t led_strip;

ESP_ERROR_CHECK(led_strip_new_rmt_device(&strip_config, &rmt_config, &led_strip)); ESP_LOGI(TAG, "Created LED strip object with RMT backend");

return led_strip;

}

void ws2812_init(void)

{

led_strip_handle_t led_strip = configure_led(); ESP_LOGI(TAG, "Start WS2812 strip"); ESP_ERROR_CHECK(led_strip_set_pixel(led_strip, 0, 2, 0, 0)); ESP_ERROR_CHECK(led_strip_refresh(led_strip));

}

• • 1. SD SPI 驱动
    2. ST7789 I80-8bit 并口屏驱动
    3. GT911 IIC 触摸 IC 驱动

SquarLine Studio UI 界面设计

• • 1. 基本控件使用
    2. 基本动画使用
    3. 事件触发使用

VScode+SDL2 UI 界面仿真

• • 1. 仿真环境搭建
    2. ui 文件移植

SquarLine Studio 生成文件移植

• • 1. cmakelist.txt 文件配置

第三章 微信小程序设计

程序设置

• • 1. 开发工具安装
    2. 依赖库安装

UI 界面设计