Demo description

• This demo demonstrates how to control the CO5300 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_CO5300(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 CO5300 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 FT3168, 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 SH8601 display library to achieve a better and smoother frame rate, which can actually be compared to the scenario with dual buffering and dual 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 FT3168, 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 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 LVGL graphics library environment
  • Serial port initialization: USBSerial.begin(115200) prepares for serial port debugging
  • I2C bus and expansion chip initialization: Initialize the I2C bus, create and initialize the expansion chip, set its pin mode to output, and print the initial and new states
  • Graphics display initialization: Initialize graphics display device, set brightness, initialize LVGL, set display driver and input device driver, create and start LVGL timer
  • TF card Initialization and information display: Set the pins of the TF card and attempt 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 list information in the label on the screen

• listDir: Recursively lists the files and subdirectories in the specified directory
  • First print the name of the directory 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 call the listDir function to list their contents. For files, print the file name and file size. Finally, return all collected information as a string