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 Development Environment​

1. Installing and Configuring Arduino IDE​

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

Board NameBoard Installation RequirementVersion Requirement
esp32 by Espressif Systems"Install Offline" / "Install Online"≥3.0.6

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 sample program package for the ESP32-S3-Touch-AMOLED-1.8 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
Arduino_DriveBusFT3168 touch driver library——"Install Offline"
GFX_Library_for_ArduinoSH8601 GFX graphics libraryv1.4.9"Install Offline"
ESP32_IO_ExpanderTCA9554 expander driver libraryv0.0.3"Install Online" or "Install Offline"
LVGLLVGL graphics libraryv8.4.0After "online" installation, you need to copy the demos folder to src; "offline" installation is recommended
SensorLibPCF85063, QMI8658 sensor driver libraryv0.2.1"Install Online" or "Install Offline"
XPowersLibAXP2101 power management chip driver libraryv0.2.6"Install Online" or "Install Offline"
ui_aCustom UI library——"Install Offline"
ui_bCustom UI library——"Install Offline"
ui_cCustom UI library——"Install Offline"
MylibraryDevelopment board pin macro definitions——"Install Offline"
lv_conf.hLVGL configuration file——"Install Offline"
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​

Demo​

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

DemoBasic Program DescriptionDependency Library
01_HelloWorldDemonstrates basic graphics library functions, can also be used to test display basics and random text renderingGFX_Library_for_Arduino
02_Drawing_boardDemonstrates basic graphics library functions, can also be used to test display basics and random text renderingGFX_Library_for_Arduino, Arduino_DriveBus , ESP32_IO_Expander
03_GFX_AsciiTablePrints ASCII characters row by column on the display according to screen sizeGFX_Library_for_Arduino
04_GFX_FT3168_ImageDemonstrates image display, changes displayed image via touchGFX_Library_for_Arduino, Arduino_DriveBus , ESP32_IO_Expander
05_GFX_PCF85063_simpleTimeGFX library displays current timeSensorLib, GFX_Library_for_Arduino
06_GFX_ESPWiFiAnalyzerDraws Wi-Fi band signal strength on the screenGFX_Library_for_Arduino
07_GFX_ClockImplements clock query using simple marker pointers and time managementGFX_Library_for_Arduino
08_LVGL_AnimationCustom UI, controls backlight brightnessLVGL, Arduino_DriveBus, ui_a
09_LVGL_change_backgroundCustom UI, changes background colorLVGL, Arduino_DriveBus, ui_b
10_LVGL_PCF85063_simpleTimelibrary displays current timeLVGL, SensorLib
11_LVGL_QMI8658_uiLVGL draws acceleration line chartLVGL, SensorLib
12_LVGL_AXP2101_ADC_DataLVGL displays PMIC dataLVGL, XPowersLib
13_LVGL_WidgetsLVGL demonstrationLVGL, Arduino_DriveBus ,ESP32_IO_Expander
14_LVGL_SD_TestLVGL displays content of TF card filesLVGL
15_ES8311ES8311 driver example, plays simple audio——
16_LVGL_Sqprjsquareline ui combined with LVGL exampleLVGL
  • ESP32-S3-Touch-AMOLED-1.8 supports direct model selection

    ESP32-S3-Touch-AMOLED-1.8 ARD_set

01_HelloWorld​

Demo Description​

  • This demo demonstrates how to control the SH8601 display using the Arduino GFX library, demonstrating basic graphics library functions through dynamically changing text. This code can also be used to test the basic performance of the display and the random text display effects

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • Display initialization: 
    if (!gfx->begin()) {
      USBSerial.println("gfx->begin() failed!");
    }
  • Clear the screen and display text: 
    gfx->fillScreen(BLACK);
    gfx->setCursor(10, 10);
    gfx->setTextColor(RED);
    gfx->println("Hello World!");
  • Animated display: 
    gfx->setCursor(random(gfx->width()), random(gfx->height()));
    gfx->setTextColor(random(0xffff), random(0xffff));
    gfx->setTextSize(random(6), random(6), random(2));
    gfx->println("Hello World!");

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_1

02_Drawing_board​

Demo Description​

  • This example demonstrates how to use the ESP32 to control the FT3168 touch controller and TCA9554 GPIO expander via I2C, while driving the SH8601 display using the Arduino GFX and Arduino_DriveBus libraries.

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • Display initialization and brightness fade animation: 
    gfx->begin();
    gfx->fillScreen(WHITE);
    for(int i = 0;i <= 255;i++){
      gfx->Display_Brightness(i);
      gfx->setCursor(30, 150);
      gfx->setTextColor(BLUE);
      gfx->setTextSize(4);
      gfx->println("Loading board");
      delay(3);
    }
  • Touch interrupt handling and coordinate reading: 
    void Arduino_IIC_Touch_Interrupt(void) {
    FT3168->IIC_Interrupt_Flag = true;
    }

    int32_t touchX = FT3168->IIC_Read_Device_Value(FT3168->Arduino_IIC_Touch::Value_Information::TOUCH_COORDINATE_X);
    int32_t touchY = FT3168->IIC_Read_Device_Value(FT3168->Arduino_IIC_Touch::Value_Information::TOUCH_COORDINATE_Y); 

    if (FT3168->IIC_Interrupt_Flag == true) {
      FT3168->IIC_Interrupt_Flag = false;
      USBSerial.printf("Touch X:%d Y:%d\n", touchX, touchY);
      if (touchX > 20 && touchY > 20) {
        gfx->fillCircle(touchX, touchY, 5, BLUE);
      }
    }

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_2

03_GFX_AsciiTable​

Demo Description​

  • This demo shows how to display a basic ASCII character table on the SH8601 display by using the Arduino GFX library on an ESP32. The core function of the code is to initialize the display and print ASCII characters in rows and columns according to the screen size

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • Create data bus and graphic display objects
    • Here a data bus object bus is created for communicating with the display, initialized with specific pin configurations. Then a graphics display object gfx is created, passing parameters such as the data bus, reset pin, rotation angle, whether it is an IPS panel, and the width and height of the display 
      Arduino_DataBus *bus = new Arduino_ESP32QSPI(
      LCD_CS /* CS */, LCD_SCLK /* SCK */, LCD_SDIO0 /* SDIO0 */, LCD_SDIO1 /* SDIO1 */,
      LCD_SDIO2 /* SDIO2 */, LCD_SDIO3 /* SDIO3 */);

      Arduino_GFX *gfx = new Arduino_SH8601(bus, -1 /* RST */,
                                            0 /* rotation */, false /* IPS */, LCD_WIDTH, LCD_HEIGHT);
  • Draw row and column numbers and character table
    • First set the text color to green and print the row numbers one by one on the display. Then set the text color to blue and print the column numbers. Next, use a loop to draw each character individually, forming the character table, with each character using white foreground and black background 
      gfx->setTextColor(GREEN);
      for (int x = 0; x < numRows; x++) {
        gfx->setCursor(10 + x * 8, 2);
        gfx->print(x, 16);
      }
      gfx->setTextColor(BLUE);
      for (int y = 0; y < numCols; y++) {
        gfx->setCursor(2, 12 + y * 10);
        gfx->print(y, 16);
      }

      char c = 0;
      for (int y = 0; y < numRows; y++) {
        for (int x = 0; x < numCols; x++) {
          gfx->drawChar(10 + x * 8, 12 + y * 10, c++, WHITE, BLACK);
        }
      }

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

04_GFX_FT3168_Image​

Demo Description​

  • This demo implements a touch screen display interface using the QSPI-driven SH8601 display on an ESP32-S3. It integrates an I2C touch controller (FT3168) for detecting touch input, as well as an I2C GPIO expander (TCA9554) for managing additional output pins. This code sets up the display screen, touch controller, and expander, and cycles through multiple images when the screen is touched

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • Image display: 
    if (fingers_number > 0) {
      switch (Image_Flag) {
        case 0: gfx->draw16bitRGBBitmap(0, 0, (uint16_t *)gImage_1, LCD_WIDTH, LCD_HEIGHT); break;
        case 1: gfx->draw16bitRGBBitmap(0, 0, (uint16_t *)gImage_2, LCD_WIDTH, LCD_HEIGHT); break;
        case 2: gfx->draw16bitRGBBitmap(0, 0, (uint16_t *)gImage_3, LCD_WIDTH, LCD_HEIGHT); break;
        case 3: gfx->draw16bitRGBBitmap(0, 0, (uint16_t *)gImage_4, LCD_WIDTH, LCD_HEIGHT); break;
        case 4: gfx->draw16bitRGBBitmap(0, 0, (uint16_t *)gImage_5, LCD_WIDTH, LCD_HEIGHT); break;
      }
      Image_Flag++;
      if (Image_Flag > 4) {
        Image_Flag = 0;
      }
    }

Code Modification​

  • The image resources are large. You need to set: Tools -> Partition Scheme -> 16M Flash (3MB APP/9.9MB FATFS)

Operation Result​

05_GFX_PCF85063_simpleTime​

Demo Description​

  • This demo demonstrates using the PCF85063 RTC module to display the current time on the SH8601 display, retrieving the time every second and updating the display only when the time changes.

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • setup: Performs demo initialization settings
    • Initializes the serial port to provide a channel for outputting error messages
    • Initializes the real-time clock chip, including connection checks and setting the initial time to ensure time accuracy
    • Initializes the graphics display device, sets the background color and brightness, providing a visual interface for time display
  • loop: Continuously checks for time changes and updates the time display on the screen during program execution
    • Periodically checks if the time has changed by comparing the difference between the current time and the last updated time to determine if an update is needed
    • Retrieves time information from the RTC and formats it for correct display on the screen
    • If the time changes, clears the previous time display area, sets text color and size, calculates the centered position, and displays the new time on the screen. Finally saves the current time as the previous time for the next comparison

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

06_GFX_ESPWiFiAnalyzer​

Demo Description​

  • This demo demonstrates drawing Wi-Fi band signal strength on the SH8601 display, implementing a Wi-Fi analyzer.

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • setup: Prepares the entire program initialization.
    • Initializes serial port communication, sets the baud rate to 115200 for outputting information and debugging
    • Sets WiFi to station mode and disconnects, preparing for subsequent network scanning
    • Performs additional pre-initialization operations based on different hardware conditions (if GFX_EXTRA_PRE_INIT is defined)
    • Initializes the graphic display device, calculates some display-related parameters such as text size, banner height, etc., and sets the display brightness. Finally draws the initial banner information
  • loop: Executes the main program logic, including performing WiFi network scanning, processing scan results, drawing charts and displaying statistical information, and performing power-saving operations as needed
    • WiFi scanning and processing: Performs WiFi network scanning, obtains the number of networks and various network information; counts the number of access points per channel, calculates noise levels and determines signal peaks; draws WiFi signal strength charts based on scan results, including drawing ellipses representing signal strength and displaying related network information
    • Displaying statistical information: Prints the number of networks found and information about channels with less noise on the display, draws chart baselines and channel markers, and displays the number of access points per channel
    • Power-saving operations: Based on the configured number of scans, performs power-saving operations when conditions are met, such as turning off the display power pin and entering deep sleep mode

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

07_GFX_Clock​

Demo Description​

  • This demo demonstrates a simple SH8601 clock, implementing a clock example using simple marker pointers and time management.

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • Drawing hour, minute, and second hands: 
    void redraw_hands_cached_draw_and_erase() {
      gfx->startWrite();
      draw_and_erase_cached_line(center, center, nsx, nsy, SECOND_COLOR, cached_points, sHandLen + 1, false, false);
      draw_and_erase_cached_line(center, center, nhx, nhy, HOUR_COLOR, cached_points + ((sHandLen + 1) * 2), hHandLen + 1, true, false);
      draw_and_erase_cached_line(center, center, nmx, nmy, MINUTE_COLOR, cached_points + ((sHandLen + 1 + hHandLen + 1) * 2), mHandLen + 1, true, true);
      gfx->endWrite();
    }

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

08_LVGL_Animation​

Demo Description​

  • This demo demonstrates a simple LVGL slider example that can change the screen backlight brightness by adjusting the slider value

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • Modify the backlight brightness in real time 
    int32_t slider_value = lv_slider_get_value(ui_Slider1);
    int32_t brightness = map(slider_value, 0, 100, 5, 255);
    gfx->Display_Brightness(brightness);

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

09_LVGL_change_background​

Demo Description​

  • This demo demonstrates an LVGL background brightness/darkness scene change, implementing background color changes by defining simple button components

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • setup: Responsible for the initialization of the entire system
    • First, initializes the serial port for possible debugging output
    • Then initializes the I2C bus and expansion chip, setting the pin modes and initial states of the expansion chip
    • Continuously attempts to initialize the touch controller, setting its power mode upon success
    • Initializes the graphics display device and sets brightness, also prints LVGL and Arduino version information
    • Initializes LVGL, including registering a debug print callback function, initializing display driver and input device driver
    • Creates and starts an LVGL timer, initializes the user interface and prints the setup completion message
  • loop
    • In the main loop, continuously calls lv_timer_handler() to let the LVGL graphics library handle various tasks
    • Adds a small delay to avoid excessive CPU resource consumption
  • my_touchpad_read: Reads the coordinates of the touchpad, sets the state of LVGL's input device based on touch status, and updates touch coordinates

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3
ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

10_LVGL_PCF85063_simpleTime​

Demo Description​

  • This demo demonstrates using the PCF85063 RTC module to display the current time on the SH8601 display under LVGL. It retrieves the time every second and updates the display only when the time changes, resulting in better time refresh effects

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • setup: Responsible for initializing various hardware devices and the LVGL graphics library environment
    • Serial initialization: USBSerial.begin(115200) prepares for serial debugging
    • Real-time clock initialization: Attempts to initialize the real-time clock rtc. If it fails, enters an infinite loop. Set the date and time
    • Touch controller initialization: Continuously attempts to initialize the touch controller FT3168. If initialization fails, prints an error message and waits with a delay; prints a success message upon success
    • Graphics display initialization: Initializes the graphics display device gfx, sets brightness, and prints LVGL and Arduino version information. Then initializes the LVGL, including registering a print callback function for debugging, initializing the display driver and the input device driver. Creates and starts an LVGL timer. Finally creates a label and sets its initial text to "Initializing..."
  • loop
    • lv_timer_handler(): This is an important function in the LVGL graphics library, used to handle various timer events, animation updates, input processing, and other tasks for the graphical interface. Calling this function in each loop ensures the graphical interface runs smoothly and responds to interactions promptly
    • Time update and display: Gets the real-time clock time every second and prints it via the serial port. Then formats the time into a string and updates the text of the label to display the current time. Simultaneously sets the font of the label to a specific font. Finally adds a small delay play_Brightness(brightness);

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

11_LVGL_QMI8658_ui​

Demo Description​

  • This demo demonstrates using LVGL for graphical display, communicating with the QMI8658 IMU to obtain accelerometer and gyroscope data

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • setup: Responsible for initializing various hardware devices and the LVGL graphics library environment
    • Serial initialization: USBSerial.begin(115200) prepares for serial debugging
    • Touch controller initialization: Continuously attempts to initialize the touch controller FT3168. If initialization fails, prints an error message and waits with a delay; prints a success message upon success
    • Graphics display initialization: Initializes the graphics display device gfx, sets brightness, and prints LVGL and Arduino version information. Then initializes the LVGL, including registering a print callback function for debugging, initializing the display driver and the input device driver. Creates and starts an LVGL timer. Finally creates a label and sets its initial text to "Initializing..."
    • Creating a chart: Creates a chart object chart, sets chart properties such as type, range, number of data points, etc., and adds data series for the three axes of acceleration
    • Acceleration sensor initialization: Initializes the acceleration sensor qmi, configures accelerometer and gyroscope parameters, enables them, and prints the chip ID and control register information
  • loop
    • lv_timer_handler(): This is an important function in the LVGL graphics library, used to handle various timer events, animation updates, input processing, and other tasks for the graphical interface. Calling this function in each loop ensures the graphical interface runs smoothly and responds to interactions promptly
    • Reading acceleration sensor data: If acceleration sensor data is ready, reads acceleration data and prints it via the serial port, while updating the chart to display acceleration data. If the gyroscope data is ready, reads the gyroscope data and prints it via the serial port. Finally adds a small delay to increase data polling frequency

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

12_LVGL_AXP2101_ADC_Data​

Demo Description​

  • This demo demonstrates power management using the XPowers library under LVGL, and provides PWR custom button control for screen on and off actions

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • Screen on/off function 
    void toggleBacklight() {
    USBSerial.println(backlight_on);
    if (backlight_on) {
      for (int i = 255; i >= 0; i--) {
        gfx->Display_Brightness(i);
        delay(3);
      }
    }else{
      for(int i = 0;i <= 255;i++){
        gfx->Display_Brightness(i);
        delay(3);
      }
    }
    backlight_on = !backlight_on;
    }

Operation Result​

  • Displayed parameters: chip temperature, charging status, discharging status, standby status, Vbus connection, Vbus good status, charger status, battery voltage, Vbus voltage, system voltage, battery percentage.

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

13_LVGL_Widgets​

Demo Description​

  • This example demonstrates LVGL Widgets example. The frame rate can reach 50~60 fps in dynamic states. Optimizing the SH8601 display library can achieve smoother frame rates. This can be compared with scenarios where double buffering and dual acceleration are enabled in the ESP-IDF environment

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • setup: Responsible for initializing various hardware devices and the LVGL graphics library environment
    • Serial initialization: USBSerial.begin(115200) prepares for serial debugging
    • I²C bus initialization: Wire.begin(IIC_SDA, IIC_SCL); initializes the I²C bus for communication with other I²C devices.
    • Expansion chip initialization: Creates and initializes the expansion chip expander, sets pin modes to output, and performs some initial pin state settings
    • Touch controller initialization: Continuously attempts to initialize the touch controller FT3168. If initialization fails, prints an error message and waits with a delay; prints a success message upon success
    • Graphics display initialization: Initializes the graphics display device gfx, sets brightness, and obtains the width and height of the screen. Then initializes LVGL, including registering a print callback function for debugging, setting the touch controller's power mode to monitoring mode, initializing display driver and input device driver. Creates and starts an LVGL timer. Creates a label and sets its text. Finally calls lv_demo_widgets() to showcase LVGL example widgets
  • loop
  • lv_timer_handler(): This is an important function in the LVGL graphics library, used to handle various timer events, animation updates, input processing, and other tasks for the graphical interface. Calling this function in each loop ensures the graphical interface runs smoothly and responds to interactions promptly
  • delay(5);: Adds a small delay to avoid excessive CPU resource consumption

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3
ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

14_LVGL_SD_Test​

Demo Description​

  • This demo demonstrates using SDMMC to drive a TF card and output its contents to the display

Hardware Connection​

  • Connect the development board to the computer
  • Insert the TF card into the board

Code Analysis​

  • setup: Responsible for initializing various hardware devices and the LVGL graphics library environment
    • Serial initialization: USBSerial.begin(115200) prepares for serial debugging
    • I²C bus and expander initialization: Initializes the I²C bus, creates and initializes the expander chip, sets its pin modes to output, and prints the initial state and new state.
    • Graphics display initialization: Initializes the graphics display device, sets brightness, initializes LVGL, sets the display driver and input device driver, creates and starts the LVGL timer.
    • TF card Initialization and information display: Sets the pins of the TF card and attempts to mount the TF card. If the mount fails, an error message is displayed on the serial port and the screen. If the mount is successful, detect the TF card type and display it, get the TF card size and display it. Then call the listDir function to list the contents of the TF card root directory, and display the TF card type, size, and directory listing information on a label on the screen.
  • listDir: Recursively lists files and subdirectories under a specified directory.
    • First prints the directory name being listed. Then open the specified directory, and if the opening fails, an error message will be returned. If it is not a directory that is opened, an error message is also returned. If it is a directory, then traverse the files and subdirectories in it. For subdirectories, recursively calls the listDir function to continue listing their contents. For files, prints the file name and file size. Finally, return all collected information as a string

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

  • TF Card Control Pin Description
    SPI InterfaceESP32-S3
    CS (SS)EXIO7
    DI (MOSI)GPIO1
    DO (MISO)GPIO3
    SCK (SCLK)GPIO2

15_ES8311​

Demo Description​

  • This demo demonstrates using I2S to drive the ES8311 chip, playing the converted binary audio file

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • es8311_codec_init: Initializes the ES8311 audio codec
    • Creates an ES8311 codec handle es_handle
    • Configures ES8311 clock parameters, including master clock and sampling clock frequencies, clock polarity, etc.
    • Initializes the codec, sets audio resolution to 16-bit
    • Configures sampling frequency
    • Configures microphone-related parameters, such as turning off the microphone, setting volume and microphone gain
  • setup: Performs overall initialization settings, including serial port, pins, I2S, and the ES8311 codec
    • Initializesserial port for debugging output
    • Sets a specific pin as output and pulls it high
    • Configures the I2S bus, setting pins, operating mode, sample rate, data bit width, channel mode, etc.
    • Initializes the I2C bus
    • Calls es8311_codec_init function to initialize the ES8311 codec
    • Plays a predefined audio data (canon_pcm) via the I2S bus

Operation Result​

  • The device will play auido directly without showing content on the screen

16_LVGL_Sqprj​

Demo Description​

  • This demo demonstrates SquareLine UI combined with LVGL. It uses the QMI8658 sensor to achieve adaptive screen display orientation, displays real-time time via Wi-Fi, and changes backlight brightness by detecting touch input in specific areas.

Hardware Connection​

  • Connect the development board to the computer

Code Analysis​

  • setup
    • Serial initialization
    • Wi-Fi initialization: Wi-Fi connection and network time configuration
    • I2C communication and expander initialization: Initializes I2C communication bus, specifies SDA and SCL pins, configures multiple pins (pins 0, 1, 2, 6) of the expander
    • Sensor initialization: Initializes the QMI8658 sensor, initializes the touch controller (FT3168 object)
    • Display initialization and related configuration
  • loop()
    • Interface rotation processing based on sensor data
    • LVGL graphical interface update
    • Display brightness adjustment processing
    • Interface element value updates

Code Modification​

  • The image resources are large. You need to set: Tools -> Partition Scheme -> 16M Flash (3MB APP/9.9MB FATFS)
  • Modify to your available WiFi

    ESP32-S3-Touch-AMOLED-1.8 Ard_demo3

Operation Result​

ESP32-S3-Touch-AMOLED-1.8 Ard_demo3