Skip to main content

ESP-IDF

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

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 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.

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 choose your desired version from the filter bar.

    Download EIM and offline package

    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).

    Download EIM and offline package 2

    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.

    Auto-detect offline package

    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.

    Select installation path

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

    Installation successful

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

    Install drivers via ESP-IDF Installation Manager

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 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.

    Search and install ESP-IDF extension in VS Code

  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​

Required Components​

  • RGB-Matrix-P4-80x40 (included in this product)
  • 2 × 8PIN 2.54mm pitch cable (included in this product)
  • ESP32-S3-DEV-KIT-NXRX (must be purchased separately)

Hardware Connection​

The pin assignment below is consistent with the default macro definitions in the example program:

Code Description​

void app_main(void) {
  init_display();
  int color_index = 0;
  const int num_colors = sizeof(rgbw_colors) / sizeof(rgbw_colors[0]);
  bool locked = bsp_display_lock(1000);
  if (locked) {
    lv_obj_t *screen = lv_scr_act();
    lv_obj_set_style_bg_color(screen, lv_color_hex(0x000000), 0);
    bsp_display_unlock();
  }

  while (true) {
    locked = bsp_display_lock(1000);
    if (locked) {
      rgbw_set_color(rgbw_colors[color_index].hex_color);
      bsp_display_unlock();
    }
    ESP_LOGI(TAG, "Current color: %s", rgbw_colors[color_index].name);
    vTaskDelay(pdMS_TO_TICKS(STEP_DELAY_MS));
    color_index++;
    if (color_index >= num_colors) {
      draw_circle_square();
      show_four_lines_text();
      color_index = 0;
    }
  }
}

Code Analysis​

  • init_display():
    • Initializes the HUB75 display driver and the LVGL display environment, preparing for subsequent UI drawing.
  • sizeof(rgbw_colors) / sizeof(rgbw_colors[0]):
    • Calculates the length of the color array, used to determine the boundary when cycling.
  • bsp_display_lock() / bsp_display_unlock():
    • Locks and unlocks display operations to prevent conflicts caused by multiple tasks accessing the UI simultaneously.
  • ESP_LOGI(TAG, "Current color: %s", ...):
    • Prints the name of the current color being switched to, facilitating serial debugging to observe the runtime sequence.
  • vTaskDelay(pdMS_TO_TICKS(STEP_DELAY_MS)):
    • Keeps the current display content visible for 2 seconds, allowing easy observation of color, graphics, and text effects.
  • if (color_index >= num_colors):
    • After the last color has been shown, displays graphics and text, then resets the index to 0 to start the next cycle.
  • app_main():
    • The program entry point, responsible for initializing the display, cycling through background colors, and after each full cycle displaying graphics and four lines of colored text.

Operation Result (IDF)​