3.5inch_Lesson05_DHT20_LVGL_LED¶

1. Course Introduction¶

This lesson uses the DHT20 temperature and humidity sensor to read environmental data and displays it on the 3.5inch screen through an LVGL label. When the temperature exceeds 30 degrees, GPIO18 outputs a high level to turn on an indicator light or trigger a safe external load. After the program runs, the temperature and humidity values on the screen refresh periodically, the serial port outputs sensor data, and GPIO18 changes its state based on the threshold judgment.

This lesson connects the I2C sensor, the LVGL display, and the GPIO output together, serving as a "data-driven interface" experiment following the Lesson03 touch UI.

Reference materials:

2. Learning Objectives¶

Be able to identify the IIC-OUT / I2C interface on the 3.5inch development board and correctly connect the DHT20.
Be able to initialize the I2C bus and the DHT20 sensor.
Connect the LED module to the UART1-OUT interface.
Be able to explain how sensor data is updated to the LVGL label.
Be able to determine whether the GPIO18 light-control output is working correctly based on the temperature threshold.
Be able to prepare or re-export UI resources according to the 480 × 320 resolution of the 3.5inch board.

3. Preparation¶

Hardware: CrowPanel Advance 3.5inch ESP32-S3 development board, DHT20 temperature and humidity sensor, GPIO18 indicator light.
Cables: USB data cable that supports data transfer, DHT20 connection cable.
Software: Arduino IDE, ESP32 Arduino development environment configured in Lesson01.
Dependencies: LVGL, LovyanGFX, Crowbits_DHT20, touch driver, and the UI files that come with the project.
Project: Port_CrowPanel_ESP32_Advance_HMI_3_5.ino.
Resources: source material/480x320/background.png, as well as files exported from SquareLine Studio such as ui.c, ui.h, ui_Screen1.c, etc.

Code and Resource Download¶

Code download: - lesson-05_Port_CrowPanel_ESP32_Advance_HMI_3_5

Resource download: - 480x320/background.png

4. Software Operation Steps¶

Open Port_CrowPanel_ESP32_Advance_HMI_3_5.ino using 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 present in the project directory.

Connect the LED module to the UART1-OUT interface, connect the DHT20 to the I2C interface, and use a USB cable that supports data transfer 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 LED module to the UART1-OUT interface, connect the DHT20 to the I2C interface, and use a USB cable that supports data transfer to connect the development board to the computer.

After flashing is complete, observe the screen display; the temperature and humidity values should refresh continuously.

6. Key Code Explanation¶

Wire.begin(15, 16);
dht20.begin();

The I2C bus must be initialized first before the DHT20 object can read data. If the SDA/SCL wiring or power supply is incorrect, the screen may retain old values, display abnormal readings, or the serial port may produce no valid data.

if (first_update || now - last_sensor_update >= SENSOR_UPDATE_INTERVAL_MS) {

The program does not refresh the sensor on every loop() call; instead, it updates at fixed intervals. This reduces the number of UI redraws and keeps touch response and screen refresh stable.

lv_label_set_text(ui_TempLabel1, DHT_buffer);
lv_label_set_text(ui_HumiLabel2, DHT_buffer);
digitalWrite(ledPin, temp > 30 ? HIGH : LOW);

The first two lines write the temperature and humidity values into the LVGL labels, and the last line outputs the temperature judgment result to GPIO18. If the values display normally but the light does not turn on, check the threshold, the GPIO18 wiring, and the load driving.

pinMode(38, OUTPUT);
digitalWrite(38, HIGH);

GPIO38 is used to turn on the screen backlight. If the program runs but the screen stays black, check the backlight, the LVGL initialization, and whether the UI files are complete.

7. UI Resource Creation Process¶

Next, the explanation takes the case of an external temperature and humidity sensor connected to the I2C-OUT interface as an example. To make the experimental results more intuitive, this section uses LVGL to build an interface that displays temperature and humidity. The UI creation workflow for this lesson must use a 480 × 320 canvas and the 480x320 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 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 category list on the left, and choose the Arduino with TFT_eSPI template in the middle. This template generates a UI file framework suitable for use in 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, you need to modify the display code according to the actual library used.

Confirm the resolution based on the screen size. The 3.5inch course project uses 480 × 320.

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

Resolution: 480 × 320
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 resources provided by the course.

This lesson uses lesson-05/source material/480x320/background.png. The image assets can be downloaded from the 3.5inch Arduino code repository: 480x320/background.png.

Place the background image onto the interface canvas.

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

Add the temperature value text label.

Since the screen needs to display the temperature value, a text label must be added to the temperature display area. After selecting the Text or Label widget, drag it into the temperature box so that the value appears in the position reserved by the background image. For the current 3.5inch project, refer to the position in ui_Screen1.c: the temperature label is at x = -38, y = -62 relative to the screen center.

Set the object name for the temperature label.

In the properties panel on the right, modify the label name. It is recommended to keep it consistent with the object name in the code, for example TempLabel1. The subsequent Arduino program will locate 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 during the UI design phase and will be replaced by the temperature value read in real time by the sensor once the program runs.
Set the font style for the temperature label.

Set the label font color and size according to the background image color. To make the values clearly visible on the 3.5inch screen, set the font color to white and choose Montserrat 20 or a font consistent with the current UI. The values 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 display styles for temperature and humidity are basically the same, so you can copy the temperature label you just created and 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 its 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, check whether the two values are located in their respective areas, whether the font is clear, and whether there is any offset or occlusion. The 3.5inch canvas is wider than the 2.4inch one, so do not leave the labels still positioned at the center of a 320 × 240 layout, otherwise they will be misaligned with the area reserved in the background.
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 it easier to copy files 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, which makes it more convenient when copying them 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 is complete, 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. Usually you need to copy ui.c, ui.h, ui_helpers.c, ui_helpers.h, the screen files, image resource .c files, etc.
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_3_5/; use this 3.5inch directory as the reference when operating.
Open the project with Arduino IDE.

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

Key check: The background image size for this lesson's UI is 480 × 320, the object names must retain TempLabel1 and HumiLabel2, and the export directory must be Port_CrowPanel_ESP32_Advance_HMI_3_5. If the label object names change, the lv_label_set_text(ui_TempLabel1, ...) and lv_label_set_text(ui_HumiLabel2, ...) calls in the Arduino program also need to be modified accordingly.

8. Experimental Phenomena¶

Observe the screen display; the temperature and humidity values should refresh continuously. The temperature and humidity values on the screen refresh periodically, the serial port outputs sensor data, and GPIO18 changes state based on the threshold judgment.

9. Code Download¶

Code path: lesson-05_Port_CrowPanel_ESP32_Advance_HMI_3_5
Lesson05 480x320 background image: background.png