Skip to content

Lesson 09: LVGL Touch Control of LED

1. Course Introduction

Create LED ON and LED OFF buttons on the LVGL screen. When a button is tapped, the UART1 LED is controlled via GPIO48.

2. Learning Objectives

After completing this lesson, you should be able to:

  • Understand the connection between LVGL event callbacks and GPIO output.
  • Correctly acquire and release the LVGL lock before and after creating the UI.
  • Use touch buttons to control the LED on/off.

3. What You Need

  • Prepare the CrowPanel Advanced 5-inch ESP32-P4 HMI AI Display board and a data-capable USB-C cable as required for this lesson.
  • LVGL 9.1; the project includes the display/touch port files and board-level configuration.
  • The LED remains connected to GPIO48 of UART1.

Code reference link: https://github.com/Elecrow-RD/-CrowPanel-Advanced-5inch-ESP32-P4-HMI-AI-Display-800x480-IPS-Touch-Screen/tree/master/example/V1.0

4. Software Operation Steps

Double-click to open the Lesson 9 code. (.ino file)

Open LVGL LED project

The screen display pins and related control pins are described in board_config.h.

Configure the options below.

  • Board: ESP32P4 Dev Module
  • Core Debug Level: Info
  • Flash Frequency / Mode / Size: 80MHz / QIO / 16MB (128Mb)
  • Partition Scheme: 16M Flash (3MB APP/9.9MB FATFS)
  • PSRAM: Enabled
  • USB Mode: Hardware CDC and JTAG
  • Port: After connecting the USB data cable to the board's UART0, select the newly appeared COM port under "Tools → Port".

Standard upload configuration screenshot from Lesson 1

Follow the library import steps explained in detail in Lesson 1 to import the library files required by this project into the development environment, ensuring that the code can correctly locate the relevant dependencies during compilation, thereby guaranteeing proper program operation.

P4_Arduino_01_Images_15

5. Hardware Operation Steps

With the power off, inspect the LCD and touch panel cables, then connect a data-capable USB-C cable to the board's UART0 port and the computer.

Connect the board to the computer via UART0

Toggle the mode switch to the UART1 position so that the LED control signal is connected to the UART1 interface.

If you want to control the LED, you need to switch this switch to the left side of UART1

Then, switch the toggle switch on the 5-inch Advance-P4 to the UART1 position.

image-20260728143059267

This is the design on the hardware side.

image-20260728143125064

Switch to UART1 port:

Among the three interfaces shown in the figure, only the UART1 interface can be used at this time.

Alternatively, the expansion header at the bottom can also be used.

That is, either the UART1 interface or the expansion header can be used, but not both.

Switch to Wireless Module port:

Among the three interfaces shown in the figure, only the wireless module can be used at this time.

Alternatively, the expansion header at the bottom can also be used.

That is, either the wireless module or the expansion header can be used, but not both.

Summary:

The UART1 interface and the Wireless Module can only be used when switched to the corresponding port.

The expansion header at the bottom can be used regardless of the position of the mode switch, but it cannot be used simultaneously with the above interfaces. (When used simultaneously, only one of the three interfaces can be selected.)

With the power off, connect the LED according to the wiring diagram in the lesson, and double-check the power, GND, and control pins.

Connect the LED module

In the Arduino IDE, click Upload. After the upload completes, open the Serial Monitor at 115200 baud; the screen should display LED Controller and two buttons.

For details on how to open the Serial Monitor and set the baud rate, please refer to Lesson 1.

Observe the LED control interface

  • Click on "LED ON" on the screen and confirm that the LED is illuminated.

Tap the LED ON button

  • Press "LED OFF" and confirm that the LED has turned off.

Tap the LED OFF button

6. Key Code Explanation

6.1 Button Event Callback

static void btn_on_click_event(lv_event_t *e) {
  (void)e;
  digitalWrite(PIN_LED, LED_ON);
}

static void btn_off_click_event(lv_event_t *e) {
  (void)e;
  digitalWrite(PIN_LED, LED_OFF);
}

Each callback receives the LVGL event object, explicitly marks it unused with (void)e, and writes the corresponding active level to PIN_LED through the LED_ON or LED_OFF macro. The hardware action is therefore kept separate from the UI construction code.

6.2 create_led_control_ui()

    lv_obj_t *btn_on = lv_button_create(scr);
    lv_obj_set_size(btn_on, 120, 50);
    lv_obj_align(btn_on, LV_ALIGN_CENTER, 0, -40);
    lv_obj_add_event_cb(btn_on, btn_on_click_event, LV_EVENT_CLICKED, NULL);

create_led_control_ui() creates the active screen's title, ON/OFF buttons, and labels, then binds the buttons to their callbacks with lv_obj_add_event_cb(..., LV_EVENT_CLICKED, NULL). UI objects are created while the LVGL lock is held; callbacks perform the short GPIO write and should not contain long blocking delays.

7. Experimental Observations

When LED ON is tapped, GPIO48 goes to the LED_ON level and lights the LED.

LED ON/OFF acceptance

When LED OFF is tapped, GPIO48 goes to the LED_OFF level and the LED turns off.

Tap the OFF button

8. Common Issues and Troubleshooting

  • If the button does not respond, check the LVGL initialization and touch driver.
  • If the LED logic is inverted, follow the active-level macros defined in config.h/board_config.h.