Skip to main content

Working with Arduino

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

Arduino Getting Started

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

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

Please refer to the tutorial Installing and Configuring Arduino IDE to download and install the Arduino IDE and add ESP32 support.

2. Installing Libraries

  • When installing Arduino libraries, there are typically two methods: Install Online and Install Offline. If the library installation requires Install Offline, you must use the provided library file.
  • For most libraries, users can easily search for and install them via the Arduino IDE's online Library Manager. However, some open-source or custom libraries are not synchronized to the Arduino Library Manager and therefore cannot be found through online search. In this case, users can only install these libraries manually via offline methods.
  • The example package for the ESP32-S3-Touch-LCD-1.47 development board can be downloaded from here. The Arduino\libraries directory within the package already contains all the library files required for this tutorial.
Library/File NameDescriptionVersionInstallation Method
LVGLGraphics libraryv8.4.0"Online installation" (requires copying the demos folder to src)
GFX_Library_for_ArduinoLCD driver libraryv1.5.9"Online Installation"
esp_lcd_touch_axs5106lTouch driver library-"Offline Installation"
Version Compatibility Notes

There are strong dependencies between versions of LVGL and its driver libraries. For example, a driver written for LVGL v8 may not be compatible with LVGL v9. To ensure that the examples can be reproduced reliably, it is recommended to use the specific versions listed in the table above. Mixing different versions of libraries may lead to compilation failures or runtime errors.

3. Arduino Project Parameter Settings

Example

The Arduino examples are located in the Arduino/examples directory of the example package.

ExampleBasic Program DescriptionDependency Library
01_gfx_helloworldDisplay HelloWorld on the screenGFX_Library_for_Arduino
02_sd_card_testTest TF card-
03_lvgl_arduino_v8LVGL example programlvgl, GFX_Library_for_Arduino, esp_lcd_touch_axs5106l
04_lvgl_batteryDisplay battery voltage using LVGLlvgl, GFX_Library_for_Arduino, esp_lcd_touch_axs5106l
05_lvgl_brightnessControl and display screen brightness using LVGLlvgl, GFX_Library_for_Arduino, esp_lcd_touch_axs5106l
06_lvgl_imageDisplay images using LVGLlvgl, GFX_Library_for_Arduino, esp_lcd_touch_axs5106l

01_gfx_helloworld

Example Description

  • This example demonstrates the ESP32-S3-Touch-LCD-1.47 using the GFX_Library_for_Arduino library to drive the screen and display HelloWorld.

Hardware Connection

  • Connect the board to the computer using a USB cable.

Code Analysis

  • Create an Arduino_ESP32SPI object bus to configure the SPI bus GPIOs, and create an Arduino_ST7789 object gfx to drive the ST7789 display.

    Arduino_DataBus *bus = new Arduino_ESP32SPI(45 /* DC */, 21 /* CS */, 38 /* SCK */, 39 /* MOSI */);

    Arduino_GFX *gfx = new Arduino_ST7789(
    bus, 47 /* RST */, 0 /* rotation */, false /* IPS */,
    172 /* width */, 320 /* height */,
    34 /*col_offset1*/, 0 /*uint8_t row_offset1*/,
    34 /*col_offset2*/, 0 /*row_offset2*/);

Operation Result

  • HelloWorld is displayed on the screen.

02_sd_card_test

Example Description

  • This example demonstrates testing TF card read/write functionality on the ESP32-S3-Touch-LCD-1.47.

Hardware Connection

  • Connect the board to the computer using a USB cable.
  • Insert the TF card into the card slot (TF card needs to be formatted as FAT32).

Code Analysis

  • TF card initialization

    if (!SD_MMC.setPins(clk, cmd, d0, d1, d2, d3)) {
    Serial.println("Pin change failed!");
    return;
    }
    if (!SD_MMC.begin()) {
    Serial.println("Card Mount Failed");
    return;
    }

Operation Result

  • Insert the TF card into the computer, and and two files, test.txt and foo.test, will appear. The content of the foo.txt is Hello World!, and the test.txt is empty.

03_lvgl_arduino_v8

Example Description

  • This example demonstrates running the LVGL example program on the ESP32-S3-Touch-LCD-1.47.

Hardware Connection

  • Connect the board to the computer using a USB cable.

** Note

  • If the lvgl library is installed online, you need to copy the demos folder to src.

Code Analysis

  • Select the LVGL example to run.

    lv_demo_widgets();
    // lv_demo_benchmark();
    // lv_demo_keypad_encoder();
    // lv_demo_music();
    // lv_demo_stress();

Operation Result

  • Touch operation is supported.

04_lvgl_battery

Example Description

  • This example demonstrates using the LVGL library on the ESP32-S3-Touch-LCD-1.47 to display battery voltage and ADC values on the screen.

Hardware Connection

  • Connect the board to the computer using a USB cable.

Code Analysis

  • Initialize the UI and create a 1000ms timer to obtain ADC data and convert it to voltage.

    lvgl_battery_ui_init(lv_scr_act());

Operation Result

05_lvgl_brightness

Example Description

  • This example demonstrates using the LVGL library on the ESP32-S3-Touch-LCD-1.47 to display screen brightness, with a slider to control the brightness.

Hardware Connection

  • Connect the board to the computer using a USB cable.

Code Analysis

  • Initialize the UI and create a slider value change callback; when the slider value changes, the screen brightness is adjusted.

    lvgl_brightness_ui_init(lv_scr_act());

Operation Result

06_lvgl_image

Example Description

  • This example demonstrates the ESP32-S3-Touch-LCD-1.47 running LVGL to display an image.

Hardware Connection

  • Connect the board to the computer using a USB cable.

Preparation

  • Copy image_1.c to the project folder.
  • Add the following code to 06_lvgl_image.ino to declare the image.
    LV_IMG_DECLARE(image_1);

Code Analysis

  • Specify the image to be displayed.

    v_img_set_src(img, &image_1);

Operation Result