Working with ESP32

This chapter covers the following sections. Please read as needed. The wiring images and project configuration screenshots use the ESP32-C3-Zero as an example.

• Arduino Getting Started
• Setting Up the Development Environment
• Hardware Connection
• Example Descriptions and Running Effects

Arduino Getting Started

New to Arduino ESP32 development and looking for a quick start? We have prepared a comprehensive Getting Started Tutorial for you.

• Section 0: Getting to Know ESP32
• Section 1: Installing and Configuring Arduino IDE
• Section 2: Arduino Basics
• Section 3: Digital Output/Input
• Section 4: Analog Input
• Section 5: Pulse Width Modulation (PWM)
• Section 6: Serial Communication (UART)
• Section 7: I2C Communication
• Section 8: SPI Communication
• Section 9: Wi-Fi Basics
• Section 10: Web Server
• Section 11: Bluetooth
• Section 12: LVGL GUI Development
• Section 13: Comprehensive Project

Note: This tutorial uses the ESP32-S3-Zero as a reference example, and all hardware code is based on its pinout. Before you start, we recommend checking the pinout of your development board to ensure the pin configuration is correct.

Setting Up the Development Environment

1. Installing and Configuring the Arduino IDE

Refer to the tutorial Install and Configure Arduino IDE to download and install the Arduino IDE and add ESP32 board support.

2. Installing the Libraries

• Arduino libraries support online and offline installation.
• The libraries required by this example are located in the ESP32-C3/libraries directory of the example package.

Library or File Name	Description	Installation Method
TFT_eSPI	GC9D01 LCD driver, text and graphics rendering	Offline installation
Lvgl	Image, animation, and graphical interface display	Offline installation
lv_conf.h	LVGL configuration file	Copied with the supporting libraries

Version Compatibility Note

This example uses the TFT_eSPI, Lvgl, and lv_conf.h provided in the ESP32-C3/libraries directory. TFT_eSPI already includes the GC9D01 driver and the pin configuration required by this example. Please use the companion files to avoid compilation failures or display abnormalities caused by inconsistent library versions or configurations.

Installation Steps:

1. Download and extract the 0.71inch LCD Module Example.

2. Copy the TFT_eSPI and Lvgl folders and the lv_conf.h file from the ESP32-C3/libraries directory to the Arduino libraries folder, so that the three items are at the same level.

   info

   The Arduino libraries folder path is typically C:\Users\<username>\Documents\Arduino\libraries.

   You can also click File > Preferences in Arduino IDE to view the Sketchbook location. The libraries folder is the libraries folder inside this path.

3. Restart Arduino IDE so that the library files are reloaded.

4. For other installation methods, refer to the Arduino Library Management Tutorial.

Board installation instructions required for the 0.71inch LCD Module

ESP32 Board Support Package Version Requirement

This example requires the v2.0.12 version of the ESP32 board support package. If you choose offline installation, please refer to the Install and Configure Arduino IDE to complete the installation.

Board Support Package	Installation Method	Version Requirement
ESP32 by Espressif Systems	Offline installation / Online installation	v2.0.12

3. Arduino Project Settings

Select the following parameters in the Tools menu:

• 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

Hardware Connection

Connect the LCD module to the ESP32-C3-Zero using 8PIN wires. The pin correspondence is as follows:

LCD	ESP32-C3-Zero
VCC	3V3
GND	GND
DIN	GPIO7
CLK	GPIO6
CS	GPIO5
DC	GPIO4
RST	GPIO8
BL	GPIO1

The wiring diagram is as follows:

After confirming the wiring, connect the development board to the computer using a USB cable that supports data transfer.

Example Descriptions and Running Effects

The example programs are located in the ESP32-C3/examples directory. Open the .ino file in the corresponding folder with Arduino IDE, select the project parameters above and the actual port, then compile and upload.

Example Folder	Function	Dependencies
1. Text_and_Number_Display	Text and number display	TFT_eSPI
2. Shapes_on_Circular_Display	Geometric shape drawing	TFT_eSPI
3. Animated_Eye1	Simulated eye style 1	TFT_eSPI
4. Animated_Eye2	Simulated eye style 2	TFT_eSPI, LVGL
5. Animated_Eye12	Alternately displays two eye styles	TFT_eSPI
6. Image_Display	Image display	TFT_eSPI, LVGL
7. Clock	Clock interface	TFT_eSPI, LVGL

1. Text_and_Number_Display

Program Description

When the program starts, it displays blue, red, and green backgrounds in sequence, followed by text and a two-digit number counting up cyclically from 00 to 99, updating once per second.

Code Analysis

• setup(): Initializes the screen, switches background colors in sequence, and sets the text color and display position.
• loop(): Converts the counter value into a two-digit string and refreshes the display via tft.drawString(); the number resets to zero after exceeding 99.

Running Effect

2. Shapes_on_Circular_Display

Program Description

Draws randomly colored squares, triangles, and circles in sequence at the center of the screen, switching shapes every 3 seconds.

Code Analysis

• drawSquare(): Calls fillRect() to draw a randomly colored square.
• drawTriangle(): Calculates three vertices and calls fillTriangle() to draw a triangle.
• drawCircleInCenter(): Calls fillCircle() to draw a circle at the center of the screen.

Running Effect

3. Animated_Eye1

Program Description

Uses TFT_eSPI to draw simulated eyes, creating animation through eye movement, iris size changes, and automatic blinking.

Code Analysis

• config.h: Sets the number of screens, chip select pins, eye image resources, and animation options. In the single-eye screen example, NUM_EYES is 1.
• eye_functions.ino: Calculates the iris position and blink state, and writes the pixel data of each frame to the screen.
• loop(): Continuously updates the eye animation.

Running Effect

4. Animated_Eye2

Program Description

Initializes TFT_eSPI and LVGL, and displays another eye animation through an LVGL animated image object.

Code Analysis

• setup(): Initializes LVGL, the screen, and the display buffer, and registers the display refresh callback.
• lv_gif_create(): Creates an animated image object and specifies the image resource via lv_gif_set_src().
• loop(): Continuously calls lv_timer_handler() to process LVGL tasks.

Running Effect

5. Animated_Eye12

Program Description

Alternately displays simulated eye style 1 and style 2 on the same screen.

Code Analysis

• Demo_1(): Calls the eye drawing logic to display style 1.
• Demo_2(): Displays image frames in sequence via pushImage() to form the style 2 animation.
• loop(): Alternates between the two animations in a loop.

Running Effect

The running effects are the same as those shown in 3. Animated_Eye1 and 4. Animated_Eye2, respectively.

6. Image_Display

Program Description

Initializes TFT_eSPI and LVGL, and displays a built-in image resource on the screen.

Code Analysis

• setup(): Initializes LVGL, the screen, and the display buffer, and registers the display refresh callback.
• LV_IMG_DECLARE(A3): Declares the image resource, creates an image object via lv_img_create(), and then sets the image content using lv_img_set_src().
• loop(): Continuously calls lv_timer_handler() to process LVGL tasks.

Running Effect

7. Clock

Program Description

Uses TFT_eSPI and LVGL to initialize the screen and display a clock interface.

Code Analysis

• setup(): Initializes LVGL, the screen, and the display buffer, registers the display driver, and calls ui_init() to create the interface.
• lv_disp_flush(): Sends the pixel data of the area to be refreshed to the screen.
• loop(): Continuously calls lv_timer_handler() to process interface tasks.

Running Effect