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

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

• Calculate rows and columns and label them with numbers: Here the number of columns and rows that can be displayed is calculated according to the size of the display. Then use two loops separately, set different text colors, and print the numbers of rows and columns on the display so that the position of the characters can be easily determined when drawing the ASCII characters in the future.

int numCols = LCD_WIDTH / 8;
int numRows = LCD_HEIGHT / 10;

// Label the line number
gfx->setTextColor(GREEN);
for (int x = 0; x < numRows; x++) {
    gfx->setCursor(10 + x * 8, 2);
    gfx->print(x, 16);
}

// Label the column number
gfx->setTextColor(BLUE);
for (int y = 0; y < numCols; y++) {
    gfx->setCursor(2, 12 + y * 10);
    gfx->print(y, 16);
}

• Draw the ASCII character table:

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

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.

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

Hardware connection

• Connect the board to the computer using a USB cable

Code analysis

• my_print(): Used for LVGL log output, if LVGL log function is enabled, this function will print the log information to the serial port
• my_disp_flush(): Responsible for refreshing the LVGL drawing buffer content to the display screen
• example_increase_lvgl_tick(): A timer callback function that is used to notify LVGL about the passage of time
• example_increase_reboot() : Another timer callback function that counts and may trigger a system reboot after a certain number of times

Result demonstration

• The voltage is measured by a voltage divider on the board, and the analog value is read using GPIO1, then the battery voltage is calculated using the voltage divider formula
  

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 September 24, 2024, 11:09:41;
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

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

• LVGL is used 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

Comparison of old and new versions

• This function button was designed to address the issue of fewer functions on external device buttons. In version V2, we made some adjustments:

The principle is as follows:

Pressing PWR allows battery power, initiating the system. At this point, the system should define SYS_EN to continuously output a high voltage level to maintain the powered-on effect. Releasing PWR will not cause a power cut. The function of PWR at this time is to lower SYS_OUT. The system detects actions such as pressing, double pressing, and long pressing on SYS_OUT, enabling customizable power-off control operations. For instance, in a long press mode, setting SYS_EN to a low level to disconnect the battery power completes the use of the multi-purpose buttons.

Code analysis

• loop():

Call lv_timer_handler to have LVGL handle graphical interface tasks;
Read the status of the input pin, and perform debouncing processing;
Based on the state of the button (pressed or released) and the time interval, determine whether it is a single click, double click, or long press event, and update the label text on the display to show the corresponding event information;
At the same time, for the long press event, the buzzer will be triggered, and when released, the buzzer will be stopped and the specific output pin will be set to a low level.

Hardware connection

• Connect the board to the computer using a USB cable

Result demonstration

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