ESP32-S3-Touch-LCD-2.1

From Waveshare Wiki
Jump to: navigation, search
ESP32-S3-Touch-LCD-2.1
ESP32-S3-Touch-LCD-2.1.jpg

2.1inch
480×480, I2C, SPI
{{{name2}}}

{{{name3}}}

{{{name4}}}

{{{name5}}}

{{{name6}}}

Overview

Parameters

Items Parameters
Interface USB Type-C/UART Type-C
Controller ESP32-S3
LCD Type TFT
LCD Controller Display: ST7701
Touch: CST820
Onboard Devices Attitude sensor: QMI8658
RTC clock: PCF85063
Micro SD
Buzzer
Battery Recharging Manager Module
Dimensions 75.00±0.1 (R) mm

Onboard Interface

  • 12PIN connector
PIN NO. PIN FUNC Description
1 GND GND Ground
2 VBus 5V USB Power Supply
3 D- USB differential cable(GPIO19) USB differential cable or as GPIO
4 D+ USB differential cable(GPIO20) USB differential cable or as GPIO
5 GND GND Ground
6 3V3 3V3 3.3V external output
7 SCL SCL (GPIO7) I2C clock pin, cannot be used as GPIO
8 SDA SDA (GPIO15) I2C data pin, cannot be used as GPIO
9 TXD TXD (GPIO43) UART transmit data or as GPIO
10 RXD RXD (GPIO44) UART receive data or as GPIO
11 NC NC Not connected
12 IO0 GPIO0 Spare pinout
  • I2C interface
PINOUT FUNC Description
GND GND Ground
3V3 3V3 3.3V external output
SCL SCL (GPIO7) I2C clock pin, cannot be used as GPIO
SDA SDA (GPIO15) I2C data pin, cannot be used as GPIO
  • UART interface
PINOUT FUNC Description
GND GND Ground
3V3 3V3 3.3V external outpout
TXD TXD (GPIO43) UART transmit data or used as GPIO
RXD RXD (GPIO44) UART receive data or used as GPIO

Onboard Functions

Internal Hardware Connection

LCD

LCD PIN ESP32S3
LCD_BL GPIO6
LCD_RST EXIO1
LCD_SDA GPIO1
LCD_SCL GPIO2
LCD_CS EXIO3
PCLK GPIO41
DE GPIO40
VSYNC GPIO39
HSYNC GPIO38
B0 NC
B1 GPIO5
B2 GPIO45
B3 GPIO48
B4 GPIO47
B5 GPIO21
G0 GPIO14
G1 GPIO13
G2 GPIO12
G3 GPIO11
G4 GPIO10
G5 GPIO9
R0 NC
R1 GPIO46
R2 GPIO3
R3 GPIO8
R4 GPIO18
R5 GPIO17
TP_SDA GPIO15
TP_SCL GPIO7
TP_INT GPIO16
TP_RST EXIO2

SD Card

SD Card ESP32S3
SD_D0/MISO GPIO42
SD_CMD/MOSI GPIO1
SD_SCK/SCLK GPIO2
SD_D3/CS EXIO4
SD_D1 NC
SD_D2 NC

QMI

QMI8658C ESP32S3
IMU_SCL GPIO7
IMU_SDA GPIO15
IMU_INT1 GPIO6
IMU_INT2 GPIO5

RTC

PCF85063ATL ESP32S3
RTC_SCL GPIO7
RTC_SDA GPIO15
RTC_INT GPIO7

Speaker

Buzzer ESP32S3
Buzzer_Control EXIO8

Working with ESP-IDF

The following development system is Windows by default, and it is recommended to use the VSCode plug-in for development.

Develop with VSCode Plug-in

Install VSCode

1. Open the download page of the official VSCode website, and select the corresponding system and system bit to download.
ESP32-S3-Pico 05.jpg
2. After running the installation package, the rest can be installed by default, but here for the subsequent experience, it is recommended to check boxes 1, 2, and 3.
  • After the first two items are enabled, you can open VSCode directly by right-clicking files or directories, which can improve the subsequent user experience.
  • After the third item is enabled, you can select VSCode directly when you choose how to open it.
ESP32-S3-Pico 06.jpg

Install Espressif IDF Plug-in

  • Note: Currently the latest version of the plugin is V1.6.4, users can choose the same version as us for a consistent experience!
  • Open VSCode, use Shift+Ctrl+X to enter the plug-in manager.

ESP32-C6-DEV-KIT-N8-03.png

  • In the search bar, enter Espressif IDF to select the corresponding plug-in and click "Install".

ESP32-C6-DEV-KIT-N8-04.png

ESP32-C6-DEV-KIT-N8-05.png

  • Press F1 to input:
esp-idf: configure esp-idf extension

ESP32-C6-DEV-KIT-N8-06.png

  • Select express (This tutorial is intended for first-time installation users, so only the first general installation tutorial is covered).

ESP32-C6-DEV-KIT-N8-07.png

  • Select download sever.

ESP32-C6-DEV-KIT-N8-08.png

  • Select the version of ESP-IDF you want to use now, we choose the latest V5.1.1.

ESP32-C6-DEV-KIT-N8-09.png

  • The following two are the installation paths respectively for the ESP-IDF container directory and the ESP-IDF Tools directory.

ESP32-C6-DEV-KIT-N8-10.png

  • Note: If you have installed ESP-IDF before, or failed to do so, please be sure to delete the file completely or create a new path without Chinese.
  • After configuring, click "Install" to download:

ESP32-C6-DEV-KIT-N8-19.png

  • Enter the download interface, and then it will automatically install the corresponding tools and environment, just wait for a second.

ESP32-C6-DEV-KIT-N8-11.png

  • After the installation is complete, you will enter the following interface, indicating that the installation is finished.

ESP32-C6-DEV-KIT-N8-12.png

ESP Demo Usage Guide

Create Demo

  • Press F1 to enter:
esp-idf:show examples projects

ESP32-C6-DEV-KIT-N8-13.png

  • Select your current IDF version:

ESP32-C6-DEV-KIT-N8-14.png

  • Take the Hello World demo as an example:
    • ①Select the corresponding demo.
    • ②Its readme will state what chip the demo applies to (how the demo is used and the file structure are described below, omitted here).
    • ③Click to create the demo.

ESP32-C6-DEV-KIT-N8-15.png
Select the path to place the demo, no folder with the same name as the demo is required:
ESP32-C6-DEV-KIT-N8-16.png

Modify COM Port

  • The corresponding COM ports are shown here, click to modify them.
  • Please select the COM ports according to your device. (You can view it from the device manager.)
  • In case of a download failure, please press the reset button for more than 1 second or enter download mode, and wait for the PC to recognize the device again before downloading once more.

SP32-S3 TO Program Add 1.png

  • Select the project or demo to use:

ESP32-C6-DEV-KIT-N8-18.png

  • Then we finish the modification of the COM ports.

Modify the Driver Object

  • The driver object is displayed here, and you can modify it by clicking on it.
  • Select the project or demo to use.

ESP32-C6-DEV-KIT-N8-20.png

  • Wait for a minute after clicking.

ESP32-C6-DEV-KIT-N8-21.png

  • Select the object we need to drive, which is our main chip, ESP32S3.

ESP32-S3-DEV-KIT-22.png

  • Choose the path to openocd, it doesn't affect us here, so let's just choose one at random.

ESP32-S3-DEV-KIT-23.png

The Rest of the Status Bar

  • ①SDK configuration editor, supports modifying many features and configurations of ESP-IDF.
  • ②All cleanup, and clear all compiled files.
  • ③Compile.
  • ④Current download mode, default is UART.
  • ⑤Burn the current firmware, please do it after compiling.
  • ⑥Open the serial port monitor, used to view the serial port information.
  • ⑦Compile, burn, open the serial monitor all-in-one button, (most commonly used for debugging).
ESP32-C6-DEV-KIT-N8-24.png

Compile, Program, Serial Port Monitoring

  • Click on the all-in-one button we described before to compile, burn, and open the serial port monitor.
ESP32-C6-DEV-KIT-N8-25.png
  • It may take a long time to compile especially for the first time.
ESP32-C6-DEV-KIT-N8-26.png
  • During this process, the ESP-IDF may take up a lot of CPU resources, so it may cause the system to lag.
  • If it is the first time to burn the program for a new project, you will need to select the download method, and select UART.
ESP32-C6-DEV-KIT-N8-27.png
  • This can also be changed later in the Download Methods section (click on it to bring up the options).
ESP32-C6-DEV-KIT-N8-28.png
  • As it comes with the onboard automatic download circuit, there is no need for manual operation to download automatically.
ESP32-C6-DEV-KIT-N8-29.png
  • After successful download, automatically enter the serial monitor, you can see the chip output the corresponding information and be prompted to restart after 10S.
ESP32-C6-DEV-KIT-N8-30.png

Erase Device Flash

  • Unpack the software resource package (Flash debugging software).
  • Open flash_download_tool_3.9.5.exe software, select ESP32-S3 and USB.

ESP32-S3-Relay-6CH TO MicroPython Firmware 1.png

  • Select the UART port number, and click START (not select any bin file).

ESP32-S3-DEV-KIT-N8-84.png

  • After programming, click on "ERASE".

ESP32-S3-DEV-KIT-N8-85.png

  • Waiting for Erase to Finish.

ESP32-S3-DEV-KIT-N8-86.png

Sample Demo

  • Open VScode software and select the file folder to open the example.

ESP32-S3-LCD-1.47 VScode example 1.png

  • Select the provided ESP-IDF example and click to select the file:

ESP32-S3-Touch-LCD-2.1 VScode example 2.png

  • After connecting the device, select the COM port and type, click to compile and run the demo:

ESP32-S3-LCD-1.47 VScode example 3.png

Working with Arduino

  • Please note that the ESP32 3.0.2 on Arduino is based on ESP-IDF v5.1, which is quite different from the previous ESP-IDF V4.X. After the following operations, the original demo may need to be adjusted for normal operation.
  • Please note that the computer user name must be English, the user name in Chinese will lead to compilation errors.

Environment Set-up

ESP32-C6-DEV-KIT-N8-Arduino01.png

  • Enter Arduino IDE after installation.

ESP32-C6-DEV-KIT-N8-Arduino02.png

  • Enter File -> Preferences.

ESP32-Arduino-3.0.2 3.png

  • Add JSON link:
https://espressif.github.io/arduino-esp32/package_esp32_index.json

ESP32-Arduino-3.0.2 4.png
ESP32-Arduino-3.0.2 5.png

  • Please modify the project file folder as C:\Users\Waveshare\AppData\Local\Arduino15\packages (Please note "Waveshare" is the computer username).

ESP32-Arduino-3.0.2 6.png

  • Go to the board manager, search for esp32, select the latest version of esp32 by Espressif Systems at the bottom, and click install (if it doesn't install correctly, you can try using a phone hotspot).

ESP32-Arduino-3.0.2 7.png
ESP32-Arduino-3.0.2 8.png

  • Restart the Arduino IDE after installation, and then you can use it.

ESP32-Arduino-3.0.2 9.png

If the installation fails

  • Failed to install 3.0.2 version:

ESP32-Arduino-3.0.2 Fail 1.png

ESP32-Arduino-3.0.2 Fail 2.png

  • Click on the path from the resource manager "c:\Users\Waveshare\AppData\Local\Arduino15\staging\packages" (Waveshare is the user name of the computer, and you need to turn on Show Hidden Files).

ESP32-Arduino-3.0.2 Fail 3.png

  • Unzip the downloaded files to the packages file folder:

ESP32-Arduino-3.0.2 Fail 4.png

  • Install it again:

ESP32-Arduino-3.0.2 7.png

  • Restart the Arduino IDE after installation and you're ready to go!

ESP32-Arduino-3.0.2 9.png

Install Libraries

  • Please note if this library has already been installed previously. If it has, please save the existing library to prevent errors or failures when running other demos.
  • Enter the sample demo file "ESP32_S3_Touch_LCD_2.1\LVGL_Arduino", double-click on LVGL_Arduino.ino to open it.
  • Search for the lvgl library and install it (this step is for creating the library file folder in Arduino environment, if you have installed other libraries before and the following file folder exists, you can skip this step.)

ESP32-S3-Touch-LCD-2.8 example 2.png

ESP32-S3-Touch-LCD-2.8 example 4.png

  • Enter "c:\Users\Waveshare\AppData\Local\Arduino15\packages\libraries" (Waveshare is the computer username).

ESP32-S3-Touch-LCD-2.8 example 3.png

  • Delete the lvgl library downloaded before (skip this step if you do not install this library before).

ESP32-S3-Touch-LCD-2.8 example 5.png

  • Please install the three libraries from the example file and create a new "Lib" folder in the example path.

ESP32-S3-Touch-LCD-2.8 example Add 1.png

  • Download and unzip the following libraries: (lvgl library, and then store them in the newly created "Lib" folder in the specified path.
  • Copy the above libraries in "c:\Users\Waveshare\AppData\Local\Arduino15\packages\libraries" (Waveshare is the computer username)

ESP32-S3-Touch-LCD-2.8 example 7.png

  • Next, install NTPClient library:

ESP32-S3-Touch-LCD-2.8 example 8.png

  • Install SensorLib library:

ESP32-S3-Touch-LCD-2.8 example 9.png

  • Finish.

Sample Demo

  • Reopen the example.
  • Select the model ESP32S3 Dev Module and port:

ESP32-S3-Touch-LCD-2.8 example 10.png

  • Set the board parameters:

ESP32-S3-Touch-LCD-2.8 example 11.png

  • Compile and upload the example:

ESP32-S3-Touch-LCD-2.8 example 12.png

  • Upon successful upload, you will observe two operational pages.
  • Page 1 displays the following parameters separately.
Parameters Function Description
SD Card Display SD card size Please note that only SD cards with below 16GB are supported
Flash Size Display Flash size The current onboard 16MB Flash
Angular deflection Display the angular deflection of the board Display the deflection of threen orientations
RTC Time Display RTC time Display the current RTC time

If the RTC time is not consistent with the current time, it is because the power-down state does not retain data, if you need to keep the RTC time normal, you need to connect the RTC battery and update the RTC time.

Wireless number Display the scanned WiFi and Bluetooth numbers When it finishes, display "Scan Finish" at the end.
  • Page 2 is the UI page for playing mp3 audio from the root directory of the SD card.

Resource

Schematic

Library

Sample Demo

FAQ

 Answer:

It may be due to Flash blank and the USB port is not stable, you can long-press the BOOT button, press RESET at the same time, and then release RESET, and then release the BOOT button, at this time the module can enter the download mode to burn the firmware (program) to solve the situation.

{{{5}}}


 Answer:

Method 1: Click the reset button for more than 1 second, wait for the PC to re-recognize the device and then download again.
Method 2: Long press the BOOT button, press RESET at the same time, then release RESET, then release the BOOT button, at this time the module can enter the download mode, which can solve most of the problems that can not be downloaded.

{{{5}}}


Support



Technical Support

If you need technical support or have any feedback/review, please click the Submit Now button to submit a ticket, Our support team will check and reply to you within 1 to 2 working days. Please be patient as we make every effort to help you to resolve the issue.
Working Time: 9 AM - 6 PM GMT+8 (Monday to Friday)