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.

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

info

For the ESP32-C3-LCD-1.47 development board, ESP-IDF version V5.5.0 or above is required.

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

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.
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.
When you see the following screen, the ESP-IDF installation is successful.
We recommend installing the drivers as well. Click Finish installation, then select Install driver.

Install Visual Studio Code and the ESP-IDF Extension

Download and install Visual Studio Code.
During installation, it is recommended to check Add "Open with Code" action to Windows Explorer file context menu to facilitate opening project folders quickly.
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.
Enter ESP-IDF in the search box, locate the ESP-IDF extension, and click Install.
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

The ESP-IDF examples are located in the ESP-IDF directory of the example package.

Example	Basic Program Description	Dependency Library
01_Factory	Comprehensive test program	-
02_SD	Test TF card read/write	-
03_Brightness	LVGL example program	-
04_LVGL	Run LVGL benchmark example	-

01_Factory

Example Description

This example tests the functions of the onboard modules of the ESP32-C3-LCD-1.47. The screen will display information about each module, and the user can switch pages by pressing the BOOT button.

Hardware Connection

Connect the board to the computer.
Insert the TF card into the card slot.

Code Analysis

IO_EXTENSION_Init(): Initializes I/O expansion (such as backlight/button control pins).
LCD_Init(): Initializes the LCD screen and display interface.
SD_Init() / QMI8658_Init() / Wireless_Init(): Initializes the TF card, IMU, wireless, and other onboard modules for comprehensive function demonstration.
lvgl_display_init() / Lvgl_Example1(): Initializes the LVGL display and starts the example UI page.

while (true) { lv_timer_handler(); ... }: In the task loop, periodically drives LVGL and sensor polling to keep the interface and data refreshed.

void Factory_Example(void)
{
    ESP_LOGI(TAG, "board init");
    IO_EXTENSION_Init();
    ESP_ERROR_CHECK(LCD_Init());
    SD_Init();
    QMI8658_Init();
    Wireless_Init();

    ESP_LOGI(TAG, "lvgl init");
    lvgl_display_init();
    Lvgl_Example1();

    while (true) {
        lv_timer_handler();
        vTaskDelay(pdMS_TO_TICKS(10));
        QMI8658_Loop();
    }
}

Operation Result

After flashing, the image is displayed on the screen.

02_SD

Example Description

This example demonstrates the ESP32-C3-LCD-1.47 reading a JPG image from the TF card and displaying it on the screen.

Hardware Connection

Connect the board to the computer.
Insert the TF card into the card slot (the TF card needs to be formatted as FAT32).
Place the image image_01.jpg in the root directory of the TF card.

Code Analysis

ESP_GOTO_ON_ERROR(..., EXIT, ...): Serial initialization/check process; any failure jumps directly to a unified exit path, reducing nested checks.
jpg_decode_buffer_init(): Initializes the global buffer required for JPEG decoding.
sd_init_with_retry() / sd_find_jpg() / sd_read_file_retry(): TF card initialization, JPG file search, and file read (with retries) to improve reliability.
lcd_draw_jpg(jpg_data, jpg_size): Decodes the read JPG data and draws it on the screen.

EXIT: free(jpg_data): Frees the dynamically allocated image buffer, then enters a while (true) loop to keep the task alive for observation.

void SD_Example(void)
{
    esp_err_t ret = ESP_OK;
    char jpg_path[SD_EXAMPLE_PATH_MAX] = {0};
    uint8_t *jpg_data = NULL;
    size_t jpg_size = 0;

    ESP_GOTO_ON_ERROR(IO_EXTENSION_Init(), EXIT, TAG, "IO init failed");
    ESP_GOTO_ON_ERROR(LCD_Init(), EXIT, TAG, "LCD init failed");
    ESP_GOTO_ON_ERROR(jpg_decode_buffer_init(), EXIT, TAG, "alloc global jpg buffer failed");
    ESP_GOTO_ON_ERROR(sd_init_with_retry(), EXIT, TAG, "SD init failed");
    ESP_GOTO_ON_ERROR(sd_find_jpg(jpg_path, sizeof(jpg_path)), EXIT, TAG, "jpg not found");
    ESP_GOTO_ON_ERROR(sd_read_file_retry(jpg_path, &jpg_data, &jpg_size), EXIT, TAG, "read jpg failed");
    ESP_GOTO_ON_ERROR(lcd_draw_jpg(jpg_data, jpg_size), EXIT, TAG, "draw jpg failed");

EXIT:
    free(jpg_data);
    while (true) {
        vTaskDelay(pdMS_TO_TICKS(1000));
    }
}

Operation Result

After flashing, the image is displayed on the screen.

03_Brightness

Example Description

This example demonstrates controlling the screen brightness using the BOOT button. Double‑clicking the BOOT button switches the control logic.

Hardware Connection

Connect the board to the computer.

Code Analysis

IO_EXTENSION_Init() / LCD_Init(): Initializes I/O expansion and LCD display, providing the underlying driver for LVGL display.
lvgl_display_init(): Registers the display driver and buffer, allowing LVGL to refresh the screen normally.
boot_key_init() / boot_key_poll(): Initializes and polls the BOOT button for switching brightness adjustment logic / triggering events.
ui_init(): Initializes the UI elements (text, progress bar, etc.) for the brightness control example.

while (true) { ... lv_timer_handler(); ... }: Loops to drive the button and LVGL task scheduling, achieving real‑time UI updates.

void Brightness_Example(void)
{
    ESP_ERROR_CHECK(IO_EXTENSION_Init());
    ESP_ERROR_CHECK(LCD_Init());
    lvgl_display_init();
    boot_key_init();
    ui_init();

    while (true) {
        boot_key_poll();
        lv_timer_handler();
        vTaskDelay(pdMS_TO_TICKS(10));
    }
}

Operation Result

04_LVGL

Example Description

This example demonstrates the ESP32-C3-LCD-1.47 running the LVGL benchmark example.

void LVGL_Benchmark_Example(void)
{
    ESP_ERROR_CHECK(IO_EXTENSION_Init());
    ESP_ERROR_CHECK(LCD_Init());
    lvgl_display_init();
    xTaskCreate(lvgl_benchmark_task, "lvgl_bench", 6144, NULL, 5, NULL);
}

Code Analysis

IO_EXTENSION_Init() / LCD_Init(): Initializes the board‑level I/O and LCD display interface.
lvgl_display_init(): Initializes the LVGL display layer so the benchmark can output to the screen.
xTaskCreate(lvgl_benchmark_task, ...): Creates a benchmark task to avoid blocking in the initialization function; the benchmark logic executes in a separate task and refreshes the interface.

Operation Result

Give Feedback

ESP-IDF Getting Started​

Setting Up the Development Environment​

Install the ESP-IDF Development Environment​

Install Visual Studio Code and the ESP-IDF Extension​

Example​

01_Factory​

02_SD​

03_Brightness​

04_LVGL​

ESP-IDF Getting Started

Setting Up the Development Environment

Install the ESP-IDF Development Environment

Install Visual Studio Code and the ESP-IDF Extension

Example

01_Factory

02_SD

03_Brightness

04_LVGL