View source for Lesson10 How to make menu and progress bar

==<b>Project Introduction:</b>==
The 3D printer interface is a UI project based on Squareline studio software, which uses other components such as rollers and switches, as well as text boxes and buttons, to allow users to easily adjust the printer's parameters.<br>

==<b>Introduction to Knowledge Points:</b>==
The following is a basic introduction to the components used in the project:<br>

<b>Roller:</b>
A roller is a control used to adjust values or parameters, typically consisting of a rotating disc and a central indicator. Users can adjust values or parameters by rotating the disc, and the indicator will move to display the current value or parameter. Roller components are typically used in 3D modeling, graphics design, game development, and audio editing.<br>

<b>Switch:</b>
A switch is a control used to switch states or options, typically consisting of a toggle button and a text label. Users can switch states or options by clicking the button, and the text label will update to display the current state or option. Switch components are typically used in setting panels, configuration options, and user settings.<br>

In Squareline Studio, designers can customize the appearance and functionality of roller and switch components, such as adjusting their size, color, shape, and label. In addition, these components have responsive design, adapting to different screen sizes and resolutions to provide a better user experience. The UI content will be showcased using an ESP32 Terminal 3.5 inch RGB screen as an example.<br>
==<b>Project Steps:</b>==

1 Create a new project in Squareline Studio as before. First, select the Arduino module, and then make some simple settings for the project, such as the project name and display size. Click Create to continue.<br>
[[image:10-1.png|800px|640px]]<br>
2 Add two buttons and two labels to display the content of the buttons. Adjust their positions as shown in the figure and set the appropriate display properties.<br>
[[image:10-2.png|900px|300px]]<br>
[[image:10-3.png|501px|367px]]<br>
3 Add a slider component to simulate the printing progress. Add a label below the slider to display the progress value.<br>

① Add the slider and label components, with the label located under the progress bar. Use the mouse to adjust their positions.<br>
[[image:10-4.png|800px]]<br>
②Add related assets. At the bottom of the software, there is an Assets component. Click Add Assets and select the required assets to add them.<br>
[[image:10-5.png|917px]]<br>
③Set the progress bar. Set the background image, event, indicator, and KNOB display properties of the progress bar.<br>
*Set the background image<br>
[[image:10-6.png|235px]]<br>
*Set the event<br>
[[image:10-7.png|235px]]<br>
*Set the indicator<br>
[[image:10-8.png|235px]]<br>
*Set the KNOB<br>
[[image:10-9.png|235px]]<br>
*Full effect<br>
[[image:10-10.png|517px]]<br>
④Set label display properties;<br>
[[image:10-11.png|223px]]<br>
4 Add a panel to display the printing status. Add four labels below the panel to display the printing time and temperature.<br>
①Add the panel and four labels below it.<br>
[[image:10-12.png|302px]]<br>
②Set the panel properties and label contents as shown in the figure.<br>
[[image:10-13.png|520px]]<br>
5 Finally, add two buttons, add button images, and set the shadow effect when the button is pressed.<br>
① Add the buttons and button images.<br>
[[image:10-14.png|536px]]<br>
[[image:10-15.png|138px]]<br>
② Set the shadow state when the button is pressed. Make the same settings for both buttons.<br>
[[image:10-16.png|238px]]<br>
6 Click Screen 1 and then click Copy Page to generate the same page.<br>
① Delete the extra components and leave only the button components to switch pages.<br>
[[image:10-17.png|1225px]]<br>
② Set the Screen 2 button to switch pages. Make the same settings as for Screen 1.<br>
[[image:10-18.png|280px]]<br>
[[image:10-19.png|277px]]<br>
③ Select the target page to switch to. Select Screen 1 for the PRINT button and Screen 2 for the SETTING button. Make the same settings for both buttons on both screens.<br>
[[image:10-20.png|243px]]<br>
7 Temperature and material selection interface.<br>
①Drag two panels and add a Roller component under each panel. Use the mouse to move the components and adjust them to the appropriate position.<br>
[[image:10-21.png|278px]]<br>
[[image:10-22.png|491px]]<br>
②Use the mouse and position parameters to adjust the position of the components. Enter the Roller component to set the data parameters.<br>
[[image:10-23.png|208px]]<br>
[[image:10-24.png|84px]]<br>
③Adjust the background color and other related properties according to the background requirements.<br>
[[image:10-25.png|493px]]<br>
8 Add two labels below the selection to indicate the temperature and material.<br>
[[image:10-27.png|484px]]<br>
9 Finally, set the fan switch to control the fan.<br>

①Drag two Switch components and adjust their positions by moving the components with the mouse.<br>
[[image:10-28.png|495px]]<br>
②Drag two label components and place them below the switch to identify FAN 1 and FAN 2.<br>
[[image:10-29.png|505px]]<br>
③Set different page targets for the two buttons.<br>
After all settings are completed, click Run to see the effect.<br>
[[image:10-30.png]]<br>
<b>Running effect:</b>

①Click Export in the software to generate the UI file and place the new UI file in the Arduino library. Then download the LVGL_RGB example provided by the official to the ESP32_rgb terminal.<br>
[[image:10-31.png|448px|246px]]<br>
②After the program is successfully downloaded, check the effect on the screen.<br>
[[image:10-32.png|526px]]
[[image:10-33.png|523px]]<br>

==<b>Summary:</b>==
This project helps beginners to quickly understand the basic usage of the Roller and Switch components and adds page jump function to replicate the UI interface of a 3D printer, which is very practical. In practical applications, it can be modified and extended according to needs, adding more settings and 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 menu and progress bar]]
*[[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]]
|}