4.3_5.0_7.0inch_Lesson04_DHT20_LVGL¶

1. Course Introduction¶

This lesson reads DHT20 temperature and humidity data using the CrowPanel Advance 4.3-inch, 5.0-inch, and 7.0-inch large-size displays and displays it in real time through an LVGL interface. The project includes RGB LCD initialization, GT911 touch, a DHT20 reading task, and a UI refresh task.

This tutorial uses the 7.0-inch board as an example. All three large-size displays share one tutorial, and the display resolution is uniformly 800 x 480. The UI creation steps are written for the large-size 800 x 480 project; use the large-size UI screenshots and the actual sensor connection diagrams for this lesson.

DIP switch function mapping for the large-size boards: 00 = MIC&SPK, 01 = WM (wireless module), 11 = MIC&TF Card. This lesson uses the I2C DHT20 sensor and does not depend on any of these three switch functions; before doing audio, wireless, or TF/SD card lessons, the DIP switch settings must be reconfirmed.

Reference materials:

2. Learning Objectives¶

Be able to open and compile the large-size DHT20 LVGL project.
Be able to understand the I2C acquisition process of the DHT20.
Be able to understand how FreeRTOS tasks separately acquire data and refresh the UI.
Be able to display temperature and humidity on an 800 x 480 LVGL interface.
Be able to troubleshoot I2C, sensor connection, and UI display issues.

3. What You Need¶

CrowPanel Advance 4.3-inch / 5.0-inch / 7.0-inch ESP32-S3 HMI.
DHT20 temperature and humidity module.
A VS Code environment with ESP-IDF 5.5.4 installed.
Local project: Lesson04_DHT_screen_4.3_5.0_7.0.

Code and Resource Download¶

Code download: - Lesson04_DHT_screen_4.3_5.0_7.0

Resource download: - 800x480/background.png

4. ESP-IDF Software Operation Steps¶

Open this lesson's project in VS Code:

Lesson04_DHT_screen_4.3_5.0_7.0

After opening the project, first run Build -> Delete to clear the build cache and path records generated by the previous project. After switching computers, switching the ESP-IDF version, or copying the project, it is recommended to do this step first.

Confirm that VS Code has loaded ESP-IDF 5.5.4. If the version shown in the status bar or the ESP-IDF extension is incorrect, go back to the installation steps in Lesson01 and reselect the 5.5.4 environment.

Connect the DHT20 to the I2C interface, and use a USB cable that supports data transmission to connect the development board to the computer.

Click the serial port location in the bottom status bar of VS Code and select the actual COM port detected by the computer.

Click the target chip location in the status bar, or run the command ESP-IDF: Set Espressif Device Target, and select esp32s3 as the target chip. The reference image is for illustrating the entry point; the actual selection should follow this lesson's esp32s3.

When selecting the debug configuration, choose one that matches the ESP32-S3 development board, such as the ESP32-S3 built-in USB-JTAG or the corresponding ESP32-S3 OpenOCD configuration. For ordinary UART flashing, the main requirements are that the serial port and target chip are set correctly.

Click the Build button in the status bar to start compilation, or run the following in the ESP-IDF terminal:

idf.py build

The first compilation needs to download and generate dependencies, so it will take longer; continue with flashing only after you see the build success message.

Confirm that the flashing method is UART, then click the lightning icon Flash, or run the following in the ESP-IDF terminal:

idf.py -p COMx flash

5. Hardware Operation Steps¶

Connect the DHT20 module.
The DHT20 uses I2C communication; in this project, SDA is GPIO15 and SCL is GPIO16.
Use a USB data cable to connect the development board and flash the program.

6. Key Code Explanation¶

The core code for this lesson is located in Lesson04_DHT_screen_4.3_5.0_7.0/main/main.c.

6.1 I2C Pin Configuration¶

#define I2C_MASTER_SDA_IO    15
#define I2C_MASTER_SCL_IO    16
#define I2C_MASTER_FREQ_HZ   400000
#define I2C_MASTER_PORT      I2C_NUM_1

The DHT20 and the on-board controller both use I2C communication. SDA/SCL must match the hardware connections; otherwise, sensor reading will fail.

i2c_write_byte(0x30, 250);
i2c_write_byte(0x30, 0);

The program writes commands to 0x30 over I2C to control on-board functions such as touch and screen backlight. If the screen does not light up, first check whether this part of the initialization has been executed.

6.3 Initializing LCD and UI¶

waveshare_esp32_s3_rgb_lcd_init();

lvgl_port_lock(-1);
ui_init();
lvgl_port_unlock();

waveshare_esp32_s3_rgb_lcd_init() initializes the RGB LCD and the LVGL port. ui_init() loads the 800 x 480 UI exported from SquareLine Studio.

6.4 DHT20 Reading Task¶

void dht20_read_task(void *param) {
    dht20_data_t measurements;

    while (1) {
        if (dht20_read_data(&measurements) == ESP_OK) {
            xSemaphoreTake(data_mutex, portMAX_DELAY);
            sensor_data.temperature = measurements.temperature;
            sensor_data.humidity = measurements.humidity;
            xSemaphoreGive(data_mutex);
        }
        vTaskDelay(pdMS_TO_TICKS(1500));
    }
}

This task reads the DHT20 once every 1.5 seconds and saves the temperature and humidity to a shared variable. The mutex is used to prevent the UI task and the sensor task from accessing the data at the same time.

6.5 UI Refresh Task¶

lv_label_set_text(ui_tempLabel1, temp_str);
lv_label_set_text(ui_HumiLabel2, humid_str);

The UI task formats the temperature and humidity into strings and then writes them to the LVGL labels. Before calling the LVGL API, you must first enter lvgl_port_lock() to avoid exceptions caused by multiple tasks accessing LVGL.

7. UI Creation Steps¶

This section uses LVGL to create an interface that displays temperature and humidity. The UI creation process for this lesson must use an 800 x 480 canvas and an 800x480 background image.

For SquareLine Studio download and installation methods, refer to: https://www.elecrow.com/wiki/Create_LVGL_UI_with_SquareLine_Studio.html

Open SquareLine Studio.

After launching SquareLine Studio, enter the main interface. If the software is not yet installed, first refer to Lesson 3 or the link above to complete the installation. This section uses it to generate the LVGL ui.c, ui.h, image resources, and widget object files.

Create a SquareLine Studio UI project template.

In the welcome screen, first click Create at the top, and when creating a new project you must select LVGL 9.1.0. Then select the TFT_eSPI-compatible category on the left, and choose the TFT_eSPI template in the middle. This template generates UI files that will be copied into the ESP-IDF project.

Note: When selecting this framework template, SquareLine Studio generates template code suitable for TFT_eSPI. SquareLine Studio also supports other graphics libraries; when switching to other hardware, you need to modify the display code according to the actual library.

Confirm the resolution based on the screen size. The CrowPanel Advance 4.⅗.0/7.0-inch ESP32-S3 HMI development board uses 800 x 480.

In the Project Settings on the right, set the project name and path, and confirm the key parameters:

Resolution: 800 x 480
Color depth: 16 bit
LVGL version: 9.1.0
Theme: Light
Multilanguage: Disable

After confirming the parameters, click CREATE to create the project.

Prepare the background image resource provided by the lesson.

This lesson uses lesson-05/source material/800x480/background.png. The image asset can be downloaded from the 4.3-inch / 5.0-inch / 7.0-inch Arduino code repository: 800x480/background.png.

Place the background image on the interface canvas.

In the left widget or resource area, select the image widget and add the background image to the current Screen. After adding it, select the imported background image in the right property panel and adjust its position and size so that it fills the entire 800 x 480 canvas. The exported background object in this project is ui_img_background_png, and its width and height should be 800 x 480.

Add the temperature value text label.

Because the screen needs to display the temperature value, add a text label in the temperature display area. Select the text or Label widget and drag it into the temperature frame so that the value appears in the position reserved by the background image.

Set the object name for the temperature label.

In the right property panel, modify the label name and keep it consistent with the object name used by the code, for example TempLabel1. The project files later locate this label by the exported object name and write the DHT20 temperature value to it.

Fill in the default display value for the temperature label.

Enter a default temperature value in the label text, for example 25. This value is only placeholder content during UI design. After the program runs, it will be replaced by the real-time temperature value read from the sensor.
Set the font style of the temperature label.

Set the label font color and size according to the background image color. To make the value clear on the large-size screen, you can set the font color to white and select Montserrat 20 or another font consistent with the current UI. The value will be refreshed by the program in real time, so it is recommended to keep the label text width as LV_SIZE_CONTENT.
Copy the temperature label as the humidity label.

The display styles for temperature and humidity are basically the same, so you can copy the temperature label you just created and move the copied label to the humidity display area. This keeps the font size, color, and alignment of the two values consistent.
Modify the humidity label name and default value.

Select the copied label, change its name in the right property panel to the humidity label object name, for example HumiLabel2, and change the default text to a humidity example value such as 50. The code updates the humidity display through this object name.
Check the overall UI effect.

After the background image, temperature label, and humidity label are all set, check whether the two values are located in their corresponding areas, whether the font is clear, and whether there is any offset or occlusion.
Open the project export settings.

Click Project Setting in SquareLine Studio to enter the project export configuration page. The export settings determine where the generated UI files are saved and which LVGL header file is included in the code.
Set the UI file export path.

In the export path, select the directory used when creating the project, or specify a separate location for saving exported files. It is recommended that the path not contain too many nested levels, so the files are easier to copy later.
Create an Output folder to receive exported files.

Create an Output folder under the path you just set. SquareLine Studio will place exported files such as ui.c, ui.h, ui_helpers.*, and image .c files into this folder.
Set the LVGL header file and export mode.

In the project settings, set the LVGL include field to lvgl.h and select Flat export. Flat export places the exported UI files in the same-level directory, making them easier to copy into the ESP-IDF project.
Confirm the export settings.

After confirming that the export path, lvgl.h, and Flat export are all set correctly, click the Confirm button to save the project settings.
Export the UI files.

After returning to the main interface, perform the export operation to generate the UI interface files designed in this section. Once the export is complete, check the generated results in the Output folder.
Copy the generated UI files.

Open the Output folder you just created and select the exported UI-related files. Typically, you need to copy ui.c, ui.h, ui_helpers.c, ui_helpers.h, the screen interface files, image resource .c files, and so on.
Paste into the IDF project directory for this section.

Paste the copied UI files into the code project directory for this section, overwriting or replacing the original UI files.