Skip to content

Lesson12 Make Your ESP32 Display the Lantern Control terminal

Project description:

This project uses Squareline Studio to create an RGB light control terminal based on ESP32. Users can control the color of the RGB light by clicking on different buttons on the screen.

Introduction to Knowledge Points:

The following is a basic introduction to the widgets used in the project:

Squareline Studio's terminal control uses an image widget, which is a user interface element used to display images or graphics. The image widget is usually a rectangular area that can display various types of images, such as bitmaps, vector graphics, or animations.

The image widget can be used for various purposes, such as:

  • Displaying icons or logos: The image widget can be used to display brand logos, application icons, or other icon-style elements.

  • Displaying image content: The image widget can be used to display images, photos, or other visual elements, such as product images or user avatars.

  • Visualizing data: The image widget can be used to display graphics, charts, or other data visualization elements, such as maps or statistical charts.

The image widget usually has the ability to resize and scale to fit different screen sizes and resolutions. In addition, the image widget can usually be used in conjunction with other user interface elements, such as text labels or buttons.

In Squareline Studio's terminal control, the image widget may be used to display the output of command-line tools, file or directory lists, code examples, or other visual elements. The image widget may also be used to implement some graphical interactive elements, such as drag-and-drop files for operations.

Project Steps:

Note: Add the provided image material files first!
11-1.png
1 Create a new project in Squareline Studio in the same way as before. First, select the Arduino module, and then perform simple settings for the project, such as project name and display size, etc. Since this UI is vertical, the size needs to be changed to 480*320. Click Create to complete.
11-2-1.png
2 Add a panel, add labels and 5 image widgets, adjust and set their positions according to the diagram.
12-3.png
3 Arrange each widget in the position shown in the diagram and add image materials to the image widgets.
12-4.png
4 Check the Clickable option for each image widget's flags.
12-5.png
5 Add an event to each image widget. After generating the UI file, the relevant functions will be generated, which will be set in the program file later.
12-6.png
6 In the generated UI file, open the ui.c and ui.h files.
12-7.png
7 In the ui.c file, add a variable, and add a program to set the variable value in each image widget's event function.
12-8.png
12-9.png
8 Declare the variable set above in ui.h.
12-10.png
9 In the main program, set the program to control the light. Depending on the value of the variable, display different colors. Note: This main program adds the RGB light library function on the original basis, which can be viewed by yourself.
12-11.png
Running effect: After successfully downloading the program, check the effect on the screen.
12-12.png 12-13.png

Summary:

This project helps beginners quickly understand the combination of UI interface and external sensors, how to modify using generated functions, and achieve the function of controlling sensors through the interface. In actual applications, it can be modified and extended according to needs, and more settings and functions can be added.

HMI Display Tutorial Contents

Back to Main Content

Resources

lesson12.zip