In most HMI Projects you will create, the likelihood of having different variants of a component is quite high. Although this component can be anything from list items to search boxes, in this Demo we will be focusing on arguably the most prominent one: buttons.
As part of this Project you will:
A Prefab in Incari Studio is a reusable component that encompasses its own Logic, design, and behavior independently from the rest of the Project. This means they can be transferred between Projects and take many shapes. For more information, see Prefabs.
The fully functional Project is available in Incari Hub under Remote Projects. To start from scratch, keep following from here.
Imagine a generic, rounded rectangle button that can have multiple different icons in the middle, something you would see in a lot of HMI systems. This can even be used to build a custom keyboard, although there is already a customizable On-Screen-Keyboard Object in Incari, so there is no need.
Our button will have three states: 'Resting', 'Hover', and 'Pressed'.
For this Demo, we need 5 different buttons: Wi-Fi, Bluetooth, Cellular, GPS, and Mic. This is a common layout that you might see everywhere from your phone to your car. These are the final buttons we want to have:
Go to the Asset Manager to import the unzipped files into your Project which you downloaded by the above.
One of the simplest ways of creating different states for an image is using Image Sequences. In your Project's Assets folder, you will find them pre-created. Should you wish, you can skip this step. But just to demonstrate how easy it is to create them, let’s make one for the Wi-Fi icon.
To create a new Prefab, in this case one called 'Button', simply right-click on the Asset Manager and select
Create Asset > Prefab.
After creating your Prefab, double-click on it to open the editor. To add Assets to the Scene, simply drag them from the Asset Manager to the Scene. First, we will add the button backgrounds Image Sequence ('Button.incseq'). This way, we can later modify its state on hover.
Lastly, add an icon (let’s use Wi-Fi for the first one) and set its
sort indexto 3, so that it’s on top of everything else. Changing its name to Icon from the Scene Outliner is also a good way to make sure it stays common.
Open the Logic Editor through
View > Logic Editor.
Let’s start by creating the Logic for the 'Hover' and 'Resting' states.
And lastly, when we click our button it will change the state of the icon, negate the corresponding variable, and output the new value.
Which leaves us with this as the end result:
Now, in order to use it in different Projects and to collaborate with others, let’s export our Prefab. This can be done by right-clicking the Prefab in the Asset Manager and selecting
The real power of Prefabs is that you can use them again and again in different contexts. Using the Prefab we have just created, let’s build a simple control panel. It should take only a few drag and drops to build this fairly generic dashboard:
Dashboard with Map in the Background
This Project uses the Assets from the Dashboard folder of the provided files. After adding our map and taskbar backgrounds, we can drag our Prefabs from the Asset Manager to the Scene.
After adding all Prefabs to the Scene and placing them in their respective locations, add the appropriate icons for each of them from the 'Sequences' folder.
Finally, we add a slide-in animation for the taskbar.
Current Group Structure
To see it in action:
Using our Prefabs, we managed to create a dashboard in mere minutes using Incari Studio. As your Prefab library grows, building complex projects for any need will only get quicker.