4.3_5.0_7.0inch_Lesson03_LVGL_Desk_Lamp_Interface

1. Course Introduction

This lesson uses LovyanGFX to initialize the LCD and touch device of the 4.⅗.0/7.0 inch CrowPanel, then uses LVGL to create a desk lamp control interface. After flashing, learners can use the ON and OFF controls on the screen to toggle the LED state, verifying the complete chain of display refresh, touch sampling, LVGL events, and external output control.

2. Learning Objectives

• Be able to flash the LVGL project using the Arduino IDE configuration method described in Lesson 01.
• Be able to explain the relationship between LovyanGFX, the LVGL display buffer, the touch callback, and UI events.
• Be able to keep pins_config.h, LovyanGFX_Driver.h, and all ui* files to complete compilation.
• Be able to determine whether the program is running correctly based on the screen display, touch response, and LED status.

3. What You Need

• 1 x CrowPanel Advance 4.⅗.0/7.0 inch ESP32-S3 HMI development board.
• 1 x LED module.
• 1 x USB Type-C data cable that supports data transfer.
• Arduino IDE, ESP32 Arduino Core, LVGL 9.1.0, and LovyanGFX.
• Project: BigInch_LVGL.ino.

Note: The large-size 4.⅗.0/7.0 inch boards have a function selection switch. 00 corresponds to MIC&SPK, 01 corresponds to WM(wireless module), and 11 corresponds to MIC&TF Card. Because on the large-size product's circuit, pin 19 controls both the wireless module and the UART1 interface, you need to switch the mode to the 0 1 state.

Code and Resource Download

Code download: - lesson-03_BigInch_LVGL

Resource download: - table_lamp.png

4. Software Operation Steps

1. Open BigInch_LVGL.ino using the Arduino IDE, and confirm that the same project directory contains LovyanGFX_Driver.h, pins_config.h, ui.c, ui.h, ui_events.c, and the image resource files.

2. Connect the external LED, and use a USB cable that supports data transfer to connect the development board to your computer. Because on the large-size product's circuit, pin 19 controls both the wireless module and the UART1 interface, you need to switch the mode to the 0 1 state.

1. Configure the Arduino IDE. Common settings are as follows:

2. Board: ESP32S3 Dev Module

3. Port: select the serial port corresponding to the current board

4. Flash Size: 16MB (128Mb)

5. PSRAM: OPI PSRAM

6. Partition Scheme: Huge APP (3MB No OTA/1MB SPIFFS)

1. Click Upload to compile and wait for the upload to finish. If it gets stuck at Connecting..., check for port conflicts and use the BOOT/RESET download mode as required by the board.

1. After flashing is complete, open the Serial Monitor and set the baud rate to 115200.

5. Hardware Operation Steps

1. Connect the external LED, set the large-size board's function selection switch to 01, then connect the USB data cable to power the development board.

1. After flashing is complete, wait for the development board to reset; the screen should display the LED UI you just created.

After the screen displays the desk lamp interface, click the ON and OFF controls and observe whether the LED switches in response to the on-screen operations.

6. Key Code Explanation

lv_display_set_buffers(disp, buf, buf1, buffer_size, LV_DISPLAY_RENDER_MODE_PARTIAL);

LVGL uses double buffering to prepare the refresh data, then hands it to LovyanGFX via the display callback to push it to the RGB screen. The large-size 800 x 480 screen carries a large amount of data, so if PSRAM is not configured correctly, buffer allocation can easily fail.

bool touched = gfx.getTouch(&touchX, &touchY);

The touch callback reads the coordinates from LovyanGFX and passes them to LVGL. When the interface displays but the buttons do not respond, you should first check the touch ribbon cable, the I2C address, and the touch initialization log.

ui_init();

ui_init() loads the auto-generated desk lamp interface and its event bindings within the project. When copying the project, do not omit ui_events.c, ui_Screen1.c, and the image resource .c files, otherwise you will get undefined symbols or an incomplete interface display.

7. UI Creation Steps

The UI in this lesson is created with SquareLine Studio. The official process is to first create an Arduino + TFT_eSPI project, then add the lamp image, the On button, and the Off button, and finally bind the Lamp_on and Lamp_off callback functions to the two buttons before exporting the UI files.

For SquareLine Studio download and basic installation, refer to:

• Create LVGL UI with SquareLine Studio

7.1 Create the SquareLine Project

1. Open SquareLine Studio and click Create at the top. When creating a new project, you must select LVGL 9.1.0.

2. In the development board category, select Arduino.

3. Select the Arduino with TFT_eSPI project template.

1. Confirm the resolution according to the screen size. The course project for the CrowPanel Advance 4.⅗.0/7.0 inch ESP32-S3 HMI development board uses 800 x 480.

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

Width: 800
Height: 480
Color depth: 16 bit
LVGL version: 9.1.0

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

### 7.2 Import the Lamp Image Asset

1. After entering the project editing interface, switch to the Assets area at the bottom.

2. Click ADD FILE INTO ASSETS to import the lamp image asset into the project resources.

3. You can also choose another image you want to use.

4. The image asset can be downloaded from the 7.0 inch Arduino code repository: table_lamp.png.

5. After importing it, drag the lamp image resource onto the Screen1 canvas. Adjust its position so that it is on the left side of the screen, leaving space for the button area on the right.

   

### 7.3 Add the On Button

1. In Widgets > BASIC on the left, select Button.
2. Drag the Button to the right side of the canvas to use it as the On button.

1. Select the button, then adjust its position and size in the Inspector on the right.

   

2. Expand STYLE (MAIN) > Background and set the button background color to orange-red. The official example color is FF5529.

1. Add Label from Widgets > BASIC on the left and drag it into the button.

1. Select the Label and change the text in the text box on the right to On.

1. Adjust the Label style, set the text color to white, and select an appropriate font size. Here montserrat 40 is used.

1. In the Hierarchy panel on the right, confirm that Label is a child widget of Button.

### 7.4 Copy and Create the Off Button

1. In the Hierarchy panel, select the completed Button1.
2. Open the More menu and select Copy.

1. Paste it on the canvas or in the hierarchy as a new button. Use Paste as child to complete the copy.

1. Move the copied button below the On button.

1. Select the Label inside the new button and change the text to Off.

1. Adjust the positions and background colors of the two buttons as needed so that the On / Off buttons are arranged vertically on the right.

### 7.5 Set Button Events

1. Select the On button and scroll the Inspector on the right to the EVENTS area.
2. Click ADD EVENT to add an event.

1. Set Trigger to RELEASED.
2. Select CALL FUNCTION for Action.
3. Enter the Function name:

Lamp_on

1. Select the Off button and add an event in the same way.

2. Set Trigger to RELEASED, select CALL FUNCTION for Action, and enter the Function name:

   Note: The Call function name must exactly match the function name in the Arduino project. In this lesson, the ON button uses Lamp_on, and the Off button uses Lamp_off. Incorrect capitalization will prevent the button from controlling the LED correctly.

Lamp_off

1. Click the play button in the upper-right corner to enter preview mode. After adding the events, run the program and check whether the On / Off buttons can be clicked normally.

7.2 Set the Export Path

1. Click File > Project Settings to open the project settings.

1. In FILE EXPORT, set the export path. In the example, Project Export Root points to the SquareLine project directory, and UI Files Export Path points to the Output folder.

1. Set LVGL Include Path to:

lvgl.h

1. Check Flat export (exports all files to one folder), then click APPLY CHANGES.

Note: It is recommended to enable Flat export so that the exported UI files are placed together in one folder. This makes it less likely that files will be missed when copying them into the Arduino project later.

7.3 Export the UI Files and Copy Them to the Arduino Project

1. Click Export > Export UI Files in the top menu.

1. Open the exported Output folder and confirm that it contains the UI source files, event files, helper files, and image resource files. Common files include:

ui.c
ui.h
ui_events.c
ui_events.h
ui_helpers.c
ui_helpers.h
ui_Screen1.c
ui_comp_hook.c
ui_img_table_lamp_png.c

1. Copy the exported UI files into the Arduino project directory, at the same level as BigInch_LVGL.ino, LovyanGFX_Driver.h, pins_config.h, and touch.h.

8. Experimental Results

After the program is flashed and the device is reset, the screen should display the desk lamp control interface. Tapping ON turns the LED on, and tapping OFF turns the LED off.

9. Code Download

• Code path: lesson-03_BigInch_LVGL
• Lesson03 lamp image: table_lamp.png