设置
快速交货
免运费
国际贸易术语
支付类型
市场产品
How To Design an Embedded Electronics Functional User Interface with Squareline Studio
2023-06-19 | By Maker.io Staff
A recent article discussed the difference between UI and UX design and their importance when building systems that humans interact with. We also had an article that investigated Squareline Studio, a novel and easy-to-use graphical development tool that lets designers create beautiful, interactive, and platform-independent UIs for their desktop and embedded applications within minutes of downloading the program. This article dives a bit deeper into the more advanced features of Squareline Studio that let users define custom reusable components, event handling, and multiple app screens, like modeling a settings screen and a dashboard.
Making a Functional UI: Getting Started with a Simple Example
(An important note: this article assumes that readers are familiar with the basics of using Squareline Studio! Check out our other article if you aren’t!)
Start by creating a new screen and name it ‘Dashboard’. Then, place a label, two buttons, and a progress bar in the center of the screen. Add a label to each button, and then space the components apart so that they look nice. Finally, place a small rectangular button in the bottom-right corner of the app’s dashboard screen. Feel free to change the buttons' colors or the labels to your liking. However, in the end, your app’s dashboard screen should resemble the following image:
Follow the steps outlined above to create a simple dashboard screen for the application that looks similar to the one shown in the image.
Adding Events to Make Components Work
Placing components and changing their properties might be enough to create a visual mockup you can use when communicating with clients. However, the working software will require the components to do something besides looking pretty, which is where events come in. Designers can define events for all components on the canvas to make the UI react to specific user actions, like button presses. In Squareline Studio, all this can be achieved without writing a single line of code.
To add an event, start by selecting the component you want to edit and then scroll down in the inspector and press the ‘Add Event’ button in the bottom-right corner of the designer:
Use the outlined button to add a new event to the selected component.
Then, give the event a meaningful name. While this might not be required, it helps identify components and events in larger projects, and it is generally considered good practice. Then, set the trigger to ‘Clicked’ and the event’s action to ‘Increment Bar’:
Change the event’s settings as shown in the picture.
Next, click the green ‘Add’ button next to the action dropdown menu, and select the progress bar UI element you placed on the dashboard screen earlier as the target. Finally, make sure that the value is set to one:
The event settings for the increment button should look as shown in the image.
Select any other component or the dashboard screen to save the settings and repeat the same steps for the button that decreases the counter value. However, this time, make sure to set the value to negative one instead of one. You can then enter Squareline’s play mode and try out your new events:
Use the highlighted button to switch between the edit and play modes.
Adding a Second Screen & Switching Between Screens
Next, add a second screen using the widgets menu. It should appear as an empty canvas right next to the dashboard screen. Then, place another label on the screen and add a single red button with a label that reads ‘Back to Dashboard’:
Place some components on the second screen to build a settings menu for the app.
Next, select the red button and scroll down in the inspector until you see the events section again. Then, add a new click event to the button, as before. However, this time, select the ‘Change Screen’ action instead of ‘Increment Bar,’ and then set the ‘Screen To’ option to the dashboard screen of your application. Alternatively, you can also change the fade mode, which introduces animations to your application:
Add an event for switching back to the dashboard, and make sure to adjust the settings according to the image.
Head back to the dashboard and repeat the process for the small blue button in the screen’s bottom-right corner. However, this time, select the settings screen as the switch target. When you now start Squareline’s play mode, you should be able to switch back and forth between screens. Note that the play mode initially displays the screen highlighted in green in the hierarchy.
Adding Reusable Components for Consistent Designs
Consistency is essential in user interfaces, as it allows users to quickly identify similar actions they can perform. In addition, consistent designs also save UI developers time by enabling them to reuse components in several parts of their UI. Next up, we’ll create a custom component for a switch and label combination that can be used for displaying user-changeable settings.
Start by placing a panel on the settings canvas and then change its width to 425px and its height to 50px:
Start building your custom component by adding a parent, which is a panel in this example.
Then, add a switch and a label to the panel. Make sure that both components are children of the label:
Next, add some children to the parent component.
Make sure to align the two child components along the left-mid axis of the panel, and then choose their X and Y transform values until you’re satisfied with how the layout looks. Finally, select the panel in the hierarchy and then open up the component section in the inspector located at the top-right corner of the Squareline window:
Finally, use the highlighted button to create a custom reusable component.
Assign a meaningful name to your component and then press the purple create button to store it in the widgets menu. You can see that the panel turns purple in the hierarchy to indicate that it’s now a reusable component. You can also find the new component in the widgets menu and drag-and-drop it onto the settings screen to create another option:
Note how the affected widgets turn purple in the inspector once saved as a custom component.
Summary
Squareline Studio is easy to pick up and offers powerful tools for making UIs interactive without writing a single line of code. Adding additional app screens, for example, can be done with a single click of a button.
Assigning events to components is a similarly straightforward process. First, select the component and then add a new event. Next, select the event type and, depending on the event, the target, for example, a progress bar. Navigating between screens can be achieved in the same fashion.
Finally, reusable components can help reduce development time and make the UI easier to understand for users. To create a custom component, place multiple components on a parent and then use the inspector to define a new component. The custom widget can then be found in the widgets menu on the right-hand side of Squareline Studio.
Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.
Visit TechForum
