Hardware connection

• Connect the board to the computer using a USB cable

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

• This example demonstrates how to control the ST7789 display using the Arduino GFX library and the Arduino DriveBus 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 board to the computer using a USB cable

Code analysis

• Screen initialization and brightness gradient 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);
 }

Hardware connection

• Connect the board to the computer using a USB cable

Code analysis

• setup():

Initialize serial port communication;
Set WiFi to site mode and disconnect;
Initialize the display, obtain the screen size, and calculate various drawing parameters;
Set the screen background to black and draw the title bar.

• loop():

Scan WiFi networks and get network information, including channels, RSSI, BSSID, and SSID;
Count the number of networks, noise levels, and peak signal strength on each channel;
Clear old graphics and draw new ones based on the scan results, including signal strength ellipses and network information text;
Print the number of networks scanned and the channel with the least noise;
Draw graph baselines and channel numbering;
Enter the low-power mode according to the conditions.

Result demonstration

• This example demonstrates how to draw a Wi-Fi band signal strength on the ST7789 display, implementing the function of a Wi-Fi analyzer.
  

Hardware connection

• Connect the board to the computer using a USB cable

Code analysis

• Draw 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();
}

Result demonstration

• This example demonstrates a simple ST7789 clock example, which implements a clock example with a simple marker pointer and time management

Hardware connection

• Connect the board to the computer using a USB cable

Code analysis

• loop() :
  
• Get the current time first, and if this time is different from the last displayed time, perform the following operations:
  • Clear the area for the last displayed time, achieve this by filling a rectangle, so that there won't be overlapping when updating the time display.
  • Set the text color to black and the text size to 3.
  • Call the getCenteredX function to calculate the X coordinate of the current time string centered on the screen.
  • Set the cursor position and print the current time string to update the display of the time.
  • Copy the current time string to the previous Timestamp string to determine if the time has changed next time.

Result demonstration

• This example demonstrates how to use the PCF85063 RTC module to display the current time on a ST7789 display, retrieving the time every second and updating the display only when the time changes

Hardware connection

• Connect the board to the computer using a USB cable

Code analysis

• setup():

Initialize serial communication, prepare possible serial debugging at baud rate of 115200;
Try to connect the PCF85063 real-time clock chip, if the connection fails, enter an infinite loop;
Set the initial time of the real-time clock to October 23, 2025, 15:23:49;
Initialize the display and set the screen brightness;
Initialize LVGL and register the logging output function (if logging is enabled);
Configure the LVGL display driver and drawing buffer, as well as initialize the input device driver (which is a virtual pointer input device driver);
Create a timer to periodically trigger the LVGL clock update
Create a label and set the initial text to "Initializing..."

• loop():

Call lv_timer_handler to have LVGL handle graphical interface tasks;
Check the time for updates every second. If it has been updated, obtain the current time of the real-time clock, output it through the serial port, format the time into a specific format, update the text content of the label, and set the label's font to lv_font_montserrat_40.

Result demonstration

• This example demonstrates how to use the PCF85063 RTC module under LVGL to display the current time on a ST7789 display screen, retrieving the time every second and only updating the display when the time changes, which is better than time refresh

Hardware connection

• Connect the board to the computer using a USB cable

Code analysis

• my_disp_flush() :

This function is the refresh function of the LVGL display driver. It is responsible for refreshing the LVGL drawing buffer content to the display screen;
Based on different color formats, call the corresponding functions of the gfx object to draw the bitmap to a specific area;
Finally, LVGL is notified that the refresh of the display has been completed.

• loop():

Call lv_timer_handler to have LVGL handle graphical interface tasks;
Check if new data is ready for the QMI (QMI8658 sensor object). If available, attempt to acquire acceleration data and gyroscope data, and output through the serial port;
At the same time, the acceleration data is updated to the LVGL graph to show the change of acceleration on the three axes in real time;
Increase the frequency of data polling with delay(20) to ensure that sensor data is captured in a timely manner and the display is updated.

Result demonstration

• This example demonstrates the use of LVGL for graphical display, communicating with the QMI8658 IMU to obtain accelerometer and gyroscope data
  

Hardware connection

• Connect the board to the computer using a USB cable

Result demonstration

This example demonstrates LVGL Widgets, achieving a frame rate of 20 to 30 frames in dynamic state

Use of LVGL components

When developing using the LVGL framework, you can call the components according to the component instructions provided in the LVGL official documentation: LVGL8.3 Documents

Below is a case study of LVGL actual components in the Arduino IDE