ESP32 P4 SquareLine LVGL 7inch
SquareLine Studio User Guide¶
1. Introduction¶
In Lesson 9 of ESP-IDF, we manually wrote LVGL code to design the LVGL interface and controls to manage the LED on and off. In this lesson, based on the functionality implemented in ESP-IDF Lesson 9,, we will use the SquareLine Studio platform to generate the LVGL interface and controls, enabling a more visually appealing and convenient interface to control the LED. After mastering this method, you can also use it to design more interesting interfaces.
Squareline Tutorial Video:¶
Squareline Tutorial for CrowPanel Advanced ESP32 P4 HMI AI Display Series
2. Operation Effect Diagram¶
After completing the design on the SquareLine Studio platform, integrating the exported UI files into the project, and successfully uploading the program, you will see this beautifully designed interface.
When you click the ON button on the screen, you will be able to turn on the LED.
When you click the OFF button on the screen, you will be able to turn off the LED.
3. Introduce LVGL¶
LVGL (LittlevGL) is an open-source, lightweight, high-performance embedded graphics library designed specifically for devices with limited resources. It supports multi-platform porting, provides rich controls, animations, touch support, and highly customizable styles, and is suitable for fields such as smart homes, industrial equipment, and medical instruments. LVGL is centered around modular design and can run on bare metal or operating systems, accelerating GUI development through strong community support and tools such as SquareLine Studio.
SquareLine Studio is a next-generation user interface (UI) solution for individuals and professionals, allowing users to quickly and easily design and develop aesthetically pleasing UI for embedded devices. This software provides integrated design, prototyping, and development capabilities, supporting the export of platform-independent C or MicroPython code for LVGL (Lightweight Graphics Library), which can be compiled and run on devices from any vendor.
4. SquareLine Studio User Guide¶
4.1 Installation Guide¶
Enter https://squareline.io/ to download the SquareLine installation file.
Then go to this download page.
Please note that the SquareLine Studio version we are using is 1.5.1.
Scroll down and select version 1.5.1 for download.
(Choose the version according to your operating system. Here I am using the Windows system.)
Wait for the download to complete.
Place the downloaded compressed file in a folder you are familiar with and extract it to obtain the .exe file.
Double-click it.
Proceed with the installation.
Wait for the installation to complete.
Installation completed.
Now you can see the software on your desktop.
Double-click to open it.
Then complete identity authentication and log in.
4.2 Designing the Interface in SquareLine Studio¶
After successfully logging in, you will arrive at this interface. Follow the steps in sequence to make your selections. Finally, choose this project as the template to design the interface used on ESP32-P4 in this lesson.
(Here we are using LVGL version 9.2.2. Please pay attention to your selection in step 2.)
After completing the above six steps and clicking Create, you will enter this design interface.
Before starting, click the link below to download the image resources we provide.
Click “ADD FILE INTO ASSETS” at the bottom of the design interface to import the provided resources.
Then drag the imported resources into the design interface.
Next, we will design the buttons.
In the “BASIC” section on the left, find “Button” and drag it into the design interface.
Then, in the design panel on the right, customize the button. I will use an example here; you can design your preferred style.
Step one: Rename it to a name that clearly indicates its function at a glance.
Step two: Set the button’s length, width, and its position within the design interface.
Step three: Customize the button style, such as button color, background, border, etc.
(Here I only customized the button color.)
Step four: Since we need to turn on the LED after clicking the button, we add an event to the button here. Later, we will edit the code to control the LED connected to the Advance-P4.
(It is recommended that both the event and function names be clearly identifiable.)
Now that the button design is complete, let’s add a label to make it clearer.
Drag the “Label” into the design interface.
Similarly, customize the label by renaming it and editing the text.
Next, bind the label to the button.
Drag the label onto the button to bind them together.
Set the label position to 0 so that it is centered within the button.
Now the “ON” label looks small. Let’s adjust its size and color.
That looks much better now.
With the ON button ready, designing the OFF button becomes easy. Here, we directly duplicate the ON button design.
Now you can see the second button.
The duplicated button overlaps with the original one. Drag it to reveal the copied button.
Now we only need to make the necessary modifications based on the original.
4.3 Export the UI Files¶
At this point, the complete UI design is finished. Next, we will export the UI files.
Click File and select Project Settings.
Specify the export path for the UI files here.
After that, click Export UI Files, and your designed UI will be exported.
Then navigate to the specified export path to view the exported UI files.
4.4 Integrate the UI Files into the Project¶
Prerequisite: this project is modified based on the ESP-IDF Lesson 9 code .
Create a ui folder under the main directory.
Place the exported UI files into the ui folder.
In the CMakeLists.txt file under the main folder, add ui so that main.c can locate the UI files.
Then specify LVGL version 9.2.2 in idf_component.yml under the main folder.
Finally, add #include "ui.h" to main.c so that it can locate your designed UI files step by step through ui.h.
Also add ui_init() in main.c to display the UI interface.
Because in ui.c, ui_init() includes all the UI elements.
4.5 Add Callback Functionality¶
Previously, we added events to both buttons in SquareLine Studio. To enable turning the LED on and off by clicking the buttons, we only defined the callback functions at that time but did not implement them. Now we will implement this functionality.
Go to the ui folder under the main directory and locate the ui_events.c file.
Add the following three lines of code here.
#include "bsp_extra.h": This library is added because the gpio_extra_set_level function used in this file comes from the bsp_extra component, which is required to control the LED connected to pin 48.
That is:
remember to connect an LED to the UART1 interface.
At this point, both the UI design and the code implementation are complete.
5. Complete Code¶
Kindly click the link below to view the full code implementation.
6. Programming Steps¶
Now the code is ready. Next, we need to flash the ESP32-P4 so that we can observe the results.
First, connect the Advance-P4 device to your computer via the USB cable.
Configure the project.
Before starting the flashing process, delete all compiled files and restore the project to its initial uncompiled state. (This ensures that the subsequent compilation will not be affected by previous operations.)
Following the steps in the first section, select the ESP-IDF version, upload method, serial port, and target chip.
Next, configure the SDK.
Click the icon shown in the image below.
Wait for the loading process to complete, then proceed with the SDK configuration.
After enabling the SDK configuration, search for “CONFIG_IDF_EXPERIMENTAL_FEATURES” in the search box, check it, and save the configuration.
Enable the PSRAM option to allocate sufficient RAM for the screen.
Enable the above CONFIG_IDF_EXPERIMENTAL_FEATURES option to select 200M PSRAM and use a higher RAM speed.
Then search for “flash” in the search box.
(Ensure that your flash settings match mine.)
Then select the partition table option we provide. Since the UI files contain images, a larger partition table is required. We have prepared one for you, so just use our partition table.
After completing the configuration, remember to save your settings.
Finally, since the label font we designed uses LVGL font size 48,
We need to enable it to use it in the project.
After the configuration is completed, remember to save your settings.
Then compile and flash the code (as detailed in the first lesson).
Here we introduce a very convenient feature: with a single button click, you can compile, upload, and open the monitor simultaneously. (This assumes the code is error-free.)
After a short wait, the code compilation and upload are completed, and the display lights up.
Suggestion: Please connect your Advance-P4 using another Type-C data cable through the USB2.0 interface. This interface provides a maximum current of approximately 500 milliamps from the computer’s USB-A port. When the Advance-P4 uses more external devices, especially the screen, it requires sufficient current supply.
After the upload is successful, you will see this beautifully designed interface.
When you click the ON button on the screen, you will be able to turn on the LED.
When you click the OFF button on the screen, you will be able to turn off the LED.
