ESP-IDF

This chapter contains the following sections. Please read as needed:

• ESP-IDF Getting Started
• Setting Up the Development Environment
• Example

ESP-IDF Getting Started

New to ESP32 ESP-IDF development and looking to get started quickly? We have prepared a general Getting Started Tutorial for you.

• Section 1: Environment Setup
• Section 2: Running Examples
• Section 3: Creating a Project
• Section 4: Using Components
• Section 5: Debugging
• Section 6: FreeRTOS
• Section 7: Peripherals
• Section 8: Wi-Fi Programming
• Section 9: BLE Programming

Please Note: This tutorial uses the ESP32-S3-Zero as a teaching example, and all hardware code is based on its pinout. Before you start, it is recommended that you check the pinout of your development board to ensure the pin configuration is correct.

Setting Up the Development Environment

note

The following guide uses Windows as an example, demonstrating development using VS Code + the ESP-IDF extension. macOS and Linux users should refer to the official documentation.

Version Selection

The screenshots in this section use ESP-IDF V5.5.2 as an example. When installing, please select the ESP-IDF version that matches your board's example.

Install the ESP-IDF Development Environment

1. Download the installation manager from the ESP-IDF Installation Manager page. This is Espressif's latest cross-platform installer. The following steps demonstrate how to use its offline installation feature.

   Click the Offline Installer tab on the page, then select Windows as the operating system and the ESP-IDF version you need (the version shown in the screenshot is for reference only — choose the version that fits your actual needs).

   

   After confirming your selection, click the download button. The browser will automatically download two files: the ESP-IDF Offline Package (.zst) and the ESP-IDF Installer (.exe).

   

   Please wait for both files to finish downloading.

2. Once the download is complete, double-click to run the ESP-IDF Installer (eim-gui-windows-x64.exe).

   The installer will automatically detect if the offline package exists in the same directory. Click Install from archive.

   

   Next, select the installation path. We recommend using the default path. If you need to customize it, ensure the path does not contain Chinese characters or spaces. Click Start installation to proceed.

   

3. When you see the following screen, the ESP-IDF installation is successful.

   

4. We recommend installing the drivers as well. Click Finish installation, then select Install driver.

   

Install Visual Studio Code and the ESP-IDF Extension

1. Download and install Visual Studio Code.

2. During installation, it is recommended to check Add "Open with Code" action to Windows Explorer file context menu to facilitate opening project folders quickly.

3. In VS Code, click the Extensions icon in the Activity Bar on the side (or use the shortcut Ctrl + Shift + X) to open the Extensions view.

4. Enter ESP-IDF in the search box, locate the ESP-IDF extension, and click Install.

   

5. For ESP-IDF extension versions ≥ 2.0, the extension will automatically detect and recognize the ESP-IDF environment installed in the previous steps, requiring no manual configuration.

Example

This module provides the following two ESP-IDF examples, both based on LVGL 8.3. Choose the appropriate example based on the connector used on the module and the development board: 1.46-S3-test is for the 15PIN GH connector with DuPont wires, and 1.46-S3-audio-board-test is for the 18PIN FFC connector with an FFC cable.

1.46-S3-test

Example Description

• Suitable for the module's 15PIN GH connector, connected to the ESP32-S3-DEV-KIT-N16R8-M development board via DuPont wires.
• Initializes QSPI display, I2C touch, and the LVGL graphics library.
• The screen displays two 412 × 412 images that can be switched by swiping left or right, serving as a reference for LVGL image display and touch gesture development.

Hardware Connection

Use a 15PIN GH-to-Dupont wire cable and connect the display module to the ESP32-S3 development board as shown in the table below:

1.46inch Touch LCD Module	ESP32-S3-DEV-KIT-N16R8-M
VCC	3.3 V
GND	GND
LCD_IO0	GPIO 9
LCD_IO1	GPIO 8
LCD_IO2	GPIO 7
LCD_IO3	GPIO 6
LCD_SCLK	GPIO 4
LCD_CS	GPIO 3
LCD_TE	GPIO 18
LCD_RST	GPIO 39
LCD_BL	GPIO 5
TP_SDA	GPIO 11
TP_SCL	GPIO 10
TP_RST	GPIO 38
TP_INT	NC

• After verifying the connections, connect the development board to the computer.

Code Analysis

• image_swipe_page_create(): Creates a full-screen image page, loads two images, and registers gesture events.
• image_gesture_cb(): Detects left and right swipe gestures and cycles between images by showing or hiding the image objects.
• app_main(): Initializes the display, touch, and LVGL in sequence, then continuously calls the LVGL timer handler function.

Operation Result

1.46-S3-audio-board-test

Example Description

• Suitable for the module's 18PIN FFC connector, connected to the ESP32-S3-AUDIO-Board via an FFC cable.
• Upon power-on, the screen displays solid color screens in red, green, blue, and yellow sequentially to verify LCD display and color reproduction.
• After the color test, the LVGL Widgets example runs to verify LVGL rendering and touch interaction.
• The project includes a lv_demo_music() call entry; you can switch to the LVGL example in main.c if needed.

Hardware Connection

• Use an 18PIN FFC cable to connect the display module to the ESP32-S3-AUDIO-Board; no need to connect individual Dupont wires.
• Connect and disconnect the FFC cable only when the board is powered off. Ensure the cable is fully inserted before powering on the development board.

Code Analysis

• main_page_red(), main_page_green(), main_page_blue(), main_page_yellow(): Set the background color of the LVGL active screen to implement solid color display tests.
• app_main(): Initializes I2C, I/O expander, LCD, and LVGL. After completing the color test, launches the LVGL Widgets example.

Operation Result