View source for Lesson06 Make a simple man-machine interface

==<b>Project Introduction:</b>==
The project uses Squareline Studio software to create a simple button interface. In this interface, users can click the button, and then the interface will display the text information that the button has been clicked. This interface includes small widgets such as buttons, labels, and panels, and a beautiful and practical interface can be created through simple dragging and setting of properties. Through this project, we can learn about the basic usage of small widgets in Squareline Studio software, and how to use these small widgets to create a basic interface and application.<BR>

==<b>Introduction to Knowledge Points:</b>==
Here are the basic introductions of the small widgets used in the project:<BR>
<b>Button</b>: A button is a commonly used interactive widget that is usually used to trigger an operation or event. In Squareline Studio, the text, background color, font, size, position, and other properties of the button can be set, and event response functions can be set for the button.<BR>

<b>Label</b>: A label is a widget used to display text or images, usually without interactivity. In Squareline Studio, the text, font, size, position, alignment, and other properties of the label can be set, and background images or background colors can be set for the label.<BR>

<b>Panel:</b> A panel is a container used to organize other small widgets, usually used to place multiple small widgets together to achieve a certain layout effect. In Squareline Studio, the size, position, background color, border, and other properties of the panel can be set, and other small widgets can be added to the panel.<BR>
==<b>project steps:</b>==
1 Open the Squareline Studio software and create a new project. First select the Arduino module, and then make basic settings such as project name, display size and 16-bit color depth. Click Create to continue.<BR>
[[image:7-1.png|1071px|789px]]<br>
2 Find the button widget in the left toolbar and drag it to the canvas, then set the button position in the properties panel on the right.<BR>
[[image:6-2.png|1071px|789px]]<BR>
3 Find the label widget in the left toolbar and drag it onto the button. Then, in the properties panel on the right, set the label text to "Click me" with a default size of 16.<BR>
[[image:6-3.png|1071px|789px]]<BR>
4 Find the label widget in the left toolbar and drag it onto the panel, set its position and size, and write "Hello everyone!" in the text.<BR>
[[image:6-4.png|1071px|820px]]<BR>
5 Click the button component on the left and add two events in the properties panel on the right: one for the "pressed" event, which will make label 2 show the text "This is ELECROW!" when the button is pressed; the other for the "clicked" event, which will show the text "Hello everyone!" when the button is clicked.<BR>

[[image:6-6.png|765px]]
[[image:6-5.png|246px]]
[[image:6-7.png|250px]]

6 Finally, find the panel widget in the left toolbar, drag three of them onto the panel, set them to circular and arrange them in order. Apply the same settings for all three panels, including a default style and a pressed style. Only the color is different between the two styles.<BR>
[[image:6-8.png|1071px|789px]]<BR>
Select the "PRESSED" state and set a different background color.<BR>

[[image:6-9-1.png|342px|297px]]<BR>
7 Click the "Run" button at the top of the Squareline Studio editor interface to run the application and test the button interface. Clicking the button should update the label text to "This is ELECROW!" and release the button should show "Hello everyone!". Clicking the three panels will switch between different colors.<BR>
[[image:6-10.png|395px|273px]]<BR>
8 Put the generated UI file in the Arduino library and download and run the source program we provide to see the same effect on the screen.<BR>
① Generate UI files，First set the export path, then export the UI file;<BR>
[[image:6-11_1.png|500px]]
[[image:6-11.png|500px]]
[[image:6-11-3.png|500px]]

②Place Arduino in the library file;<BR>
[[image:6-12.png|600px|356px]]<BR>
③Download fixed program files;<BR>
[[image:6-13.png|500px|300px]]<BR>
④ Program effect.<BR>
[[image:6-14.png|1000px|750px]]<BR>

==<b>Summary</b>==
This project is very simple, but can help beginners quickly understand the basic usage of small widgets in the Squareline Studio platform. In practical applications, it can be modified and expanded as needed, for example, by adding background or background image functions.<br>


==<b>HMI Display Tutorial Contents</b>==
{| border="0" cellpadding="10" width="100%"
|-
|width="32%" valign="top" align="left"|
*[[Lesson01 ESP32 HMI series screen introduction and environment configuration]]
*[[Lesson02 Simple graphics drawing]]
*[[Lesson03 How to display pictures]]
*[[Lesson04 LVGL introduction and installation]]
*[[Lesson05 Introduction to Control Classification]]
*[[Lesson06 Make a simple man-machine interface]]
*[[Lesson07 How to implement text information input]]
*[[Lesson08 How to make menu and progress bar]]
*[[Lesson09 How to make an analysis report]]
*[[Lesson10 How to Make a 3D Printed UI Interface]]
*[[Lesson11 How to Make a Mixer Interface]]
*[[Lesson12 Lantern control terminal]]
*[[Lesson13 Electronic control terminal]]
*[[Lesson14 Car central control screen]]
*[[Lesson15 Smart Agriculture Monitoring Station]]
*[[Lesson16 Smart home central control screen]]
|}