Great work so far! You have created your first Dashboard page (Step 3: Create your first HMI Page using Placeholders ). Now let’s keep working on your HMI. In this step we will be adding a Parameter Page (Page Type) where you will be able to view and edit your HMI’s parameters.
Navigate to the Pages section in your HMI Content Tree (Content View), and Click the Add ****Button to bring up the Add Element Dialog.
Choose Parameter Page from this list to add a new page to your HMI.
Since we want to edit some vacuum parameters on this page, rename the page to “Vacuum Parameters”. You can either do that in the content tree or within the General ****section in the page’s Properties Panel (Content View).
<aside> <img src="/icons/trophy_gray.svg" alt="/icons/trophy_gray.svg" width="40px" /> Challenge: Change the page’s icon We would like to use a more fitting icon for this page, so try and set the page’s icon to the “vacuum” icon!
</aside>
Let’s add some parameters our operators need to be able to edit.
Within the content tree, navigate to the Parameters section of your Parameter Page (Page Type) and click the Add button.
For now we just want do add a single Parameter to our page, so choose the Parameter Element from the Add Element dialog.
Rename your parameter to “Pre Delay”.
Our operators need to be able to edit the “Pre Delay” variable using a numeric stepper. So click the Add button next to you parameter and choose the Numeric Stepper Element from the Add Element dialog.
<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: Remember the Magic Output (Element) from Step 3: Create your first HMI Page using Placeholders? Well as you might have guessed, there is also Magic Input (Element) which you could use here as well!
</aside>
After adding the Input Element to you parameter, the Data Selector will open automatically. Choose the Quickstart > Moulding > Vacuum > PreDelay Data Variable and confirm. Now our operators can edit the “Pre-Delay” data variable!
<aside> <img src="/icons/trophy_gray.svg" alt="/icons/trophy_gray.svg" width="40px" />
Challenge: Add another input to your parameter Our operators also need to be able to edit another Data Variable regarding this parameter. This Data Variable is called “PreDelayActive” and is located right next to our “PreDelay” Data Variable.
Add another Input Element and connect the “PreDelayActive” Data Variable to it!
</aside>
Sometimes multiple parameters will need to be grouped together. For example some details regarding our Pre Delay parameter.
Within the content tree, click the Add button next to the Parameters section of parameter page and choose the Parameter Group element.
Rename the group to “Details” and add a “Time” parameter to it. Within this new “Time” parameter add another input element to enable our operators to edit the Quickstart > Moulding > Vacuum > Time Data Variable.
<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: Don’t remember how to do all that? No problem at all. Just repeat what you did for the “Pre Delay” parameter and you’ll be set!
</aside>
After editing the “Time” Data Variable our operators may need to reset the variable, we will achieve this by adding a button to the parameter.
Within the content tree, click the Add button next to your “Time” parameter and choose the Button element and rename it to “Reset Time”.
We also want this button to be a bit bigger, so navigate to the Alignment section within the button’s Properties Panel (Content View) and choose the Fill option.
Now let’s take care of our button’s functionality, since all it can do right now is display a warning and that’s not what we want!
On click property of our button within it’s Properties Panel (Content View) and click the drop down next to it. This will open the Select Action dialog.
<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: There are a lot of different List of Available Action Types and you will learn more about them later. Or if you can’t wait just try them out right now!
</aside>