Skip to content

Lesson02_Touch_Display_LED: Touch Button Control of LED

1. Course Introduction

In this lesson, an LVGL button is created on a 360×360 ST77961 LCD. CST816T touch input is used to control the GPIO4 LED. When the program starts, it displays LED OFF; clicking the button toggles the LED level and label text. This lesson validates the complete chain involving the LCD, touch input, LVGL events, and digital output.

2. Learning Objectives

  • Complete the wiring and programming of the 1.46-inch board’s LCD, touch input, and LED.
  • Explain how the touch-reading callback passes coordinates to LVGL.
  • Determine whether the LED status and on-screen text remain synchronized when the button is clicked.

3. Preparation

  • ESP32-S3 1.46 development board with an onboard ST77961 LCD, CST816T touch input, and GPIO4 LED.
  • Arduino IDE, LVGL 9, LovyanGFX, CST816T, and the libraries provided with the project.
  • Lesson02-Turn_on_the_LED.ino and Common_1_46.h in the same directory.

Code download link: https://github.com/Elecrow-RD/CrowPanel-1.46inch-HMI-ESP32-Rotary-Display/tree/master/example/V1.0/Arduino/Examples/

4. Software Procedure

  1. Open Lesson02-Turn_on_the_LED.ino and confirm that Common_1_46.h is in the same directory. Open the touch LED project
  2. Download the configuration. Compile the touch LED project
  3. Compile the project and confirm that the LVGL, LovyanGFX, and CST816T dependencies are all found. Upload the touch LED program

5. Hardware Procedure

  1. With the power off, connect the USB cable and confirm that the LCD, touch cable, and LED wiring are secure. After powering on, wait for the screen backlight to turn on. Connect the LCD and LED

​ FPC cable pin diagram; the pin functions from top to bottom are shown in the figure

The LED pin is connected to GPIO4.

  1. Click the button in the center of the screen and observe the LED and label change from LED OFF to LED ON; clicking it again should restore the original state.

Click the button to control the LED

Click the button to control the LED

6. Key Code Explanation

static void readTouch(lv_indev_t*,lv_indev_data_t*d){
  if(touch.available()){ d->state=LV_INDEV_STATE_PRESSED; d->point.x=touch.x; d->point.y=touch.y; }
  else d->state=LV_INDEV_STATE_RELEASED;
}
static void click(lv_event_t*){ on=!on; digitalWrite(LED_GPIO,on); lv_label_set_text(label,on?"LED ON":"LED OFF"); }

readTouch converts the current coordinates from the CST816T into an LVGL input state; when there is no touch, it must report a released state. click is the button-click event callback. It uses the same on state to update the GPIO and label simultaneously. If only the label is modified without calling digitalWrite, the screen will change but the LED will not.

examplePower(); touch.begin(); auto*d=exampleDisplay();
auto*i=lv_indev_create(); lv_indev_set_read_cb(i,readTouch);

These calls sequentially complete power delivery, touch initialization, display creation, and input-device registration. Omitting any step will cause the corresponding hardware link to fail.

7. Experimental Results

After power-on, the backlight turns on, and the screen displays the button and LED OFF. When the button is touched, the GPIO4 LED and the text switch synchronously. Repeated clicks should not cause a restart. If there is no touch response, check SDA/SCL, the reset/interrupt pins, and touch.begin().

8. Code Download

Code download link: https://github.com/Elecrow-RD/CrowPanel-1.46inch-HMI-ESP32-Rotary-Display/tree/master/example/V1.0/Arduino/Examples/