Skip to content

Lesson10 Create a 3D Printer UI Project on ESP32 Display

Project Introduction:

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.

Introduction to Knowledge Points:

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

Roller: 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.

Switch: 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.

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.

Project Steps:

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.
10-1.png
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.
10-2.png 10-3.png
3 Add a slider component to simulate the printing progress. Add a label below the slider to display the progress value.

① Add the slider and label components, with the label located under the progress bar. Use the mouse to adjust their positions.
10-4.png
②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.
10-5.png
③Set the progress bar. Set the background image, event, indicator, and KNOB display properties of the progress bar.

  • Set the background image

10-6.png

  • Set the event

10-7.png

  • Set the indicator

10-8.png

  • Set the KNOB

10-9.png

  • Full effect

10-10.png
④Set label display properties;
10-11.png
4 Add a panel to display the printing status. Add four labels below the panel to display the printing time and temperature.
①Add the panel and four labels below it.
10-12.png
②Set the panel properties and label contents as shown in the figure.
10-13.png
5 Finally, add two buttons, add button images, and set the shadow effect when the button is pressed.
① Add the buttons and button images.
10-14.png
10-15.png
② Set the shadow state when the button is pressed. Make the same settings for both buttons.
10-16.png
6 Click Screen 1 and then click Copy Page to generate the same page.
① Delete the extra components and leave only the button components to switch pages.
10-17.png
② Set the Screen 2 button to switch pages. Make the same settings as for Screen 1.
10-18.png 10-19.png
③ 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.
10-20.png
①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.
10-21.png 10-22.png
②Use the mouse and position parameters to adjust the position of the components. Enter the Roller component to set the data parameters.
10-23.png 10-24.png
③Adjust the background color and other related properties according to the background requirements.
10-25.png
8 Add two labels below the selection to indicate the temperature and material.
10-27.png
9 Finally, set the fan switch to control the fan.

①Drag two Switch components and adjust their positions by moving the components with the mouse.
10-28.png
②Drag two label components and place them below the switch to identify FAN 1 and FAN 2.
10-29.png
③Set different page targets for the two buttons.
After all settings are completed, click Run to see the effect.
10-30.png

Running effect:

①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.
10-31.png
②After the program is successfully downloaded, check the effect on the screen.
10-32.png 10-33.png

Summary:

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.

HMI Display Tutorial Contents

Back to Main Content

Resources

lesson10.zip