4.3_5.0_7.0inch_Lesson05_DHT20_Temperature_and_Humidity¶

1. Course Introduction¶

This lesson adds the Crowbits DHT20 sensor on top of the LCD, touch, and LVGL initialization. The program reads temperature and humidity approximately every 1 second, updates the UI labels only when the values change, and switches the corresponding status depending on whether the temperature exceeds 30°C.

2. Learning Objectives¶

Be able to explain the DHT20 sampling, value comparison, and LVGL label update flow.
Be able to compile and flash the sensor, display, and touch projects.
Be able to determine whether the acquisition chain is working correctly by observing the temperature/humidity changes and the UI response.

3. What You Need to Prepare¶

One CrowPanel Advance 4.⅗.0/7.0 inch ESP32-S3 HMI development board.
Crowbits DHT20 temperature and humidity sensor and the matching connection cable.
One LED module.
Crowbits_DHT20, LVGL, LovyanGFX, Wire, and SPI libraries; exact versions to be confirmed through actual testing.
Keep pins_config.h, the drivers, and all ui* files intact.
Project: Port_CrowPanel_ESP32_Advance_HMI_4_3_5_0_7_0.ino.

Note: This lesson uses the external sensor interface and the LVGL display; it does not use audio or the SD card. If the 4.⅗.0/7.0 inch large-size board needs to route signals through the expansion/wireless module side interface, set the function selector switch to 01; if only the standalone I2C terminal is connected, follow the silkscreen on the board and the lesson wiring diagram, and power off the board before plugging or unplugging the sensor.

When using the UART1-OUT interface, set the DIP switch to the 0 1 mode, because the wireless module and the UART1-OUT line are jointly controlled. (Applies to devices in the 4.3-inch, 5.0-inch, and 7.0-inch sizes.)

Code and Resource Download¶

Code download:

lesson-05_Port_CrowPanel_ESP32_Advance_HMI_4_3_5_0_7_0

4. Software Operation Steps¶

Open Port_CrowPanel_ESP32_Advance_HMI_4_3_5_0_7_0.ino with the Arduino IDE. Confirm that Crowbits_DHT20.h, LovyanGFX_Driver.h, touch.h, ui.c, ui.h, ui_Screen1.c, and the image resource files are all in the project directory.

Connect the bulb to the UART1-OUT interface, connect the DHT20 temperature and humidity sensor to the IIC-OUT interface, and use a USB cable that supports data transmission to connect the development board to the computer.

Configure the Arduino IDE; the common settings are as follows:
Board: ESP32S3 Dev Module
Port: Select the serial port corresponding to the current development board
Flash Size: 16MB (128Mb)
PSRAM: OPI PSRAM
Partition Scheme: Huge APP (3MB No OTA/1MB SPIFFS)

Click Upload to compile and upload the code.

5. Hardware Operation Steps¶

Connect the bulb to the UART1-OUT interface, connect the DHT20 temperature and humidity sensor to the IIC-OUT interface, and use a USB cable that supports data transmission to connect the development board to the computer.

After flashing is complete, observe the screen display. The temperature and humidity values on the screen will refresh periodically, and when the temperature exceeds 30°C, the LED will change state according to the threshold judgment.

6. Key Code Explanation¶

if (firstSample || now - lastSampleTime >= 1000) {

Sampling occurs immediately on the first entry into the loop, then at an interval of approximately 1000 ms. A sampling period that is too short may serve no practical purpose and will increase the UI update overhead.

if (firstSample || temp != lastTemp) {

The relevant UI is updated only on the first sample or when the temperature changes, avoiding repeated refreshes of the same text on every loop iteration.

if (temp > 30) {

This threshold determines the high-temperature state. Changing the threshold alters the point at which the UI switches state; after experimentation, restore it to 30.

7. UI Asset Creation Process¶

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

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

Open SquareLine Studio.

After launching SquareLine Studio, you 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 the Arduino project template.

On the welcome screen, first click Create at the top. When creating a new project, you must select LVGL 9.1.0. Then select Arduino from the left-side category, and then select the Arduino with TFT_eSPI template in the middle. This template generates a UI file framework suitable for Arduino projects.

Note: When the Arduino framework is selected, SquareLine Studio displays only the Arduino with TFT_eSPI option. It generates template code suitable for TFT_eSPI, but SquareLine Studio also supports other graphics libraries; when switching to other hardware, the display code must be modified 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 asset provided by the lesson.

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

Place the background image onto the interface canvas.

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

Add the temperature value text label.

Since the screen needs to display the temperature value, add a text label in the temperature display area. After selecting the Text or Label widget, drag it into the temperature box so the value appears at the position reserved in the background image.

Set the object name for the temperature label.

In the properties panel on the right, change the label's name. It is recommended to keep it consistent with the object name in the code, for example TempLabel1. The subsequent project code will find this label through the exported object name and write the temperature value read by the DHT20 into it.

Fill in the default display value for the temperature label.

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

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

The temperature and humidity display styles are essentially the same, so you can copy the temperature label you just created, then 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, and in the properties panel on the right change the name to the humidity label object name, for example HumiLabel2; then change the default text to a sample humidity value, for example 50. The code will update the humidity display through this object name.
Check the overall effect of the UI interface.

After the background image, temperature label, and humidity label are all set up, check whether the two values are each located in their respective areas, whether the fonts are 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 placed 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 earlier, or customize a location dedicated to saving the exported files. It is recommended that the path not contain too many nested levels, to make copying files easier later.
Create an Output folder to receive the exported files.

Create a new Output folder under the path just set. The ui.c, ui.h, ui_helpers.*, image .c files, etc. exported by SquareLine Studio will all be placed in this folder.
Set the LVGL header file and export method.

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

After checking 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. After the export completes, go to the Output folder to view the generated results.
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 files, and the image resource .c files.
Paste into this section's Arduino project directory.

Paste the copied UI files into this section's code project directory, overwriting or replacing the original UI files. The project directory used in this course is lesson-05/Port_CrowPanel_ESP32_Advance_HMI_4_3_5_0_7_0/.
Open the project with the Arduino IDE.

Finally, use the Arduino IDE to open the Port_CrowPanel_ESP32_Advance_HMI_4_3_5_0_7_0.ino file in the project directory. After opening it, you can follow the software operation steps above to select the development board, port, and upload the program.

Important Check: The background image size for this lesson's UI is 800 x 480. The object names must be kept as TempLabel1 and HumiLabel2, and the export directory must be Port_CrowPanel_ESP32_Advance_HMI_4_3_5_0_7_0. If the label object names are changed, the lv_label_set_text(ui_TempLabel1, ...) and lv_label_set_text(ui_HumiLabel2, ...) calls in the Arduino program must be updated accordingly.

8. Experimental Results¶

After flashing is complete, observe the screen display. The temperature and humidity values on the screen will refresh periodically. When the temperature exceeds 30°C the LED will change its state based on the threshold check.

9. Code Download¶

Code Path: lesson-05_Port_CrowPanel_ESP32_Advance_HMI_4_3_5_0_7_0
Lesson05 Background Image: 800x480