Demo description

• This demo demonstrates how to control the ST7701 display using the Arduino GFX library, demonstrating basic graphics library functionality with dynamically changing text. This code can also be used to test the basic performance of the display and the effect of displaying random text

Hardware connection

• Connect the development board to the computer

Code analysis

• Initialize the display:

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!");

• GIF 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!");

Result demonstration

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 by rows and columns on the display 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 for communicating with the display is created, which is initialized with a specific pin configuration. Then a graphical display object gfx is created, passing in parameters such as data bus, reset pin, rotation angle, whether it is an IPS screen, 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_ST7701(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 line numbers one by one on the display. Then set the text color to blue and print the column number. Next, use a loop to draw each character individually to form 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);
  }
}

Result demonstration

Demo description

• This demo demonstrates how to use the PCF85063 RTC module to display the current time on a ST7701 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: Initialize the program
  • Serial port initialization to provide a channel for outputting error messages
  • Initialize the real-time clock chip, including connection check and setting the initial time, to ensure the accuracy of the time
  • Initialize the graphic display device, set the background color and brightness, and provide a visual interface for the time display

• loop: Continuously check for time changes and update the time display on the display while the program is running
  • Regularly check whether the time has changed, and determine whether the time display needs to be updated by comparing the difference between the current time and the last update time
  • Obtain the time information of the real-time clock and format it so that it is displayed correctly on the display
  • If the time changes, clear the last time display area, set the text color and size, calculate the center position, and display the new time on the display. Finally save the current time as the last time for comparison next time

Result demonstration

Demo description

• This demo demonstrates the use of 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 LVGL graphics library environment
  • Serial port initialization: USBSerial.begin(115200) prepares for serial port debugging
  • Touch controller initialization: Keep trying to initialize the touch controller GT911, if initialization fails, print an error message and wait with a delay, and print a success message if successful
  • Graphical display initialization: Initialize the graphical display device gfx, set the brightness, and print the version information of LVGL and Arduino. Next, initialize the LVGL, including registering the print callback function for debugging, initializing the display driver and the input device driver. Create and start the LVGL timer, finally create a label and set the initial text to "Initializing..."
  • Create a chart: Create a chart object chart, set the chart type, range, number of data points and other properties of the chart, and add data series for the three axes of acceleration
  • Acceleration sensor initialization: Initialize acceleration sensor qmi, configure accelerometer and gyroscope parameters, enable them, and print chip ID and control register information

• loop
  • lv_timer_handler(): This is an important function in the LVGL graphics library, which is used to handle various timer events, animation updates, input processing and other tasks of the graphical interface. Calling this function in each loop ensures smooth operation of the graphical interface and timely response to interactions
  • Read acceleration sensor data: If the acceleration sensor data is ready, read the acceleration data and print it via the serial port, while updating the chart to display the acceleration data. If the gyroscope data is ready, read the gyroscope data and print it via the serial port. Finally add a small delay and increase the frequency of data polling

Result demonstration

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 implementation 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;
}

Result demonstration

• Display parameters: chip temperature, charging state, discharging state, standby state, Vbus connected, Vbus condition, charger status, battery voltage, Vbus voltage, system voltage, battery percentage

Demo description

• • This demo demonstrates the LVGL Widgets example, the frame rate can reach 20~30 frames in the dynamic state. By optimizing the ST7701 display library to achieve a better and smoother frame rate, which can actually be compared to the scenario with double cache and double acceleration enabled in ESP-IDF environment

Hardware connection

• Connect the development board to the computer

Code analysis

• setup: Responsible for initializing various hardware devices and LVGL graphics library environment
  • Serial port initialization: USBSerial.begin(115200) prepares for serial port debugging
  • I2C bus Initialization: Wire.begin(IIC_SDA, IIC_SCL); initializes I2C bus for communication with other I2C devices
  • Expansion chip initialization: Create and initialize the expansion chip expander, set the pin mode as the output, and make some initial pin state settings
  • Touch controller initialization: Keep trying to initialize the touch controller GT911, if initialization fails, print an error message and wait with a delay, and print a success message if successful
  • Graphical display initialization: Initialize the graphical display device gfx, set the brightness, and get the width and height of the screen. Then initialize the LVGL, including registering the print callback function for debugging, setting the touch controller's power mode to monitor mode, initializing the display driver and the input device driver. Create and start the LVGL timer, create a label and set the text, and finally call lv_demo_widgets() to display the LVGL sample widget

• loop
  • lv_timer_handler(): This is an important function in the LVGL graphics library, which is used to handle various timer events, animation updates, input processing and other tasks of the graphical interface. Calling this function in each loop ensures smooth operation of the graphical interface and timely response to interactions
  • delay(5);: Add a small delay to avoid overoccupying CPU resources

Result demonstration

Demo description

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

Hardware connection

• Connect the development board to the computer

Code analysis

• es8311_codec_init: Initializes the ES8311 audio codec
  • Create a handle es_handle for the ES8311 codec
  • Configure the clock parameters of ES8311, including the main clock and sampling clock frequency, as well as the clock polarity, etc.
  • Initialize the codec and set the audio resolution to 16 bits
  • Configure sampling frequency
  • Configure microphone-related parameters, such as turning off the microphone, setting volume, and microphone gain

• setup: Perform overall initialization settings, including serial port, pins, I2S, and ES8311 codec
  • Initialize serial port for debugging output
  • Set a specific pin as output and set it high
  • Configure I2S bus, set pins, operating mode, sampling rate, data bit width, channel mode, etc.
  • Initialize the I2C bus
  • Call the es8311_codec_init function to initialize the ES8311 codec
  • Play a predefined piece of audio data (canon_pcm) through the I2S bus

Result demonstration

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

Demo description

• This demo demonstrates using I2S to drive the ES7210 chip, pick up sounds, and filter out human voice

Hardware connection

• Connect the development board to the computer

Result demonstration

• The device will play up the sound directly without showing content on the screen.

Demo description

• This demo demonstrates using ESP-IDF to port XPowersLib, and driving AXP2101 to obtain power-related data through the ported XPowersLib

Hardware connection

• Connect the development board to the computer

Code analysis

• i2c_init: Initializes the I2C master in preparation for communication with other devices, such as the PMU
  • Configure I2C parameters, including setting the master device mode, specifying the SDA and SCL pins, enabling the pull-up resistor, and determining the clock frequency
  • Install the I2C driver and apply the configuration to the actual hardware

• pmu_register_read: Reads a series of bytes of data from a specific register of the PMU
  • Perform parameter checks to ensure the incoming parameters are valid and avoid invalid read operations
  • Perform I2C operations in two steps, first send the register address to read, then read the data. During the reading process, different processing is carried out according to the length of bytes to be read to ensure accurate reading of the data. At the same time, handle error cases in the I2C communication process and return the corresponding status code so that the upper-layer code can determine if the read operation is successful

Result demonstration

• This demo will not light up the screen
• The serial port monitor displays the parameters: chip temperature, charging state, discharging state, standby state, Vbus connected, Vbus condition, charger status, battery voltage, Vbus voltage, system voltage, battery percentage

Demo description

• This example runs the LVGL V9 demo

Hardware connection

• Connect the development board to the computer

Result demonstration

Demo description

• This demo demonstrates the UI interface running with the esp-brookesia framework

Hardware connection

• Connect the development board to the computer

Result demonstration

Demo description

• This demo demonstrates the QMI8658 driving effect, achieving multiple blocks immersive tilting with gravity

Hardware connection

• Connect the development board to the computer

Result demonstration

Demo description

• This demo implements the microphone audio capture function, using FFT to analyze the audio and display it on the screen

Hardware connection

• Connect the development board to the computer

Result demonstration

Demo description

• This demo demonstrates an application created using the esp-brookesia master version, implementing features including but not limited to touch, display, audio pickup, audio playback, clock, gyroscope, PMU control, Xiaozhi AI, etc

Hardware connection

• Connect the development board to the computer
• Flash firmware using a firmware flashing tool (online, locally, etc.)

Result demonstration

AIChats

AIChats defaults to using XiaoZhi AI, and automatically switches to XiaoZhi AI when the user clicks to enter. To return to the esp-brookesia UI, press PWR

• The current demo provides test firmware, which can be used to test whether the onboard device functions properly by directly flashing the test firmware
• bin file path:

  ..\ESP32-S3-Touch-LCD-4B-Demo\Firmware