Now that we’ve added a Collection Page in Step 5: Set up a Collection Page, our HMI is looking pretty good already. But we haven’t really taken a good look at it, so let’s do that right now! You’ll learn to save and preview your project and edit placeholder data!
First things first, you’ll need to save your Project!
<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: HELIO does not auto-save your project; otherwise, any changes to your HMI would become live immediately. So remember to save your work regularly, especially once you've reached a state that should be preserved!
HELIO will help you remember to save your project by coloring the save button blue whenever there are unsaved changes, also we’ll remind you to save when you close the website or navigate back to the homepage!
</aside>
Everything saved? Great! Now let’s click the Run HMI button right next to the Save Project button! This will open a preview of your HMI in another tab.
Try navigating your new HMI! For example you could use the menu in the lower left corner to navigate to our recipes pages and edit one of the recipe’s target values!
Since we have not connected a PLC to our HMI yet, all the data that you can see in our HMI comes from Placeholders.
Let’s try switching between Placeholder-Mode and PLC Data-Mode anyways! Now your Dashboard should be filled with yellow boxes instead of our guage, inputs and outputs. These boxes are a way for HELIO to show you that you still need to connect data to your Elements. This is called a ‣.
<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: Still got that Preview tab open? Perfect! The Preview will react to whichever mode you have chosen in the IDE. So, choose PLC Data-Mode and switch over to your HMI-Preview. It’s looking pretty empty right now, but this is what our operators would see if there were no data connected to our HMI! Let’s go back to the IDE and switch back to Placeholder-Mode! That’s much better, isn’t it? ✨
</aside>
Our Placeholders are great, but we want to know what our OEE-Guage would look like if it was in a critical range.
So, let’s edit the Placeholder for our OEE Data Variable!
Navigate to our Guage and click the Edit Data Record button, which is right next to our Data Entry.
Navigate to the Placeholder section of the Edit Variable dialog. Now set a new placeholder that would be in the critical range, for example 50% and click Confirm.
Great work! You can now edit placeholders as you like!
<aside>
<img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: When the Placeholder property of a Data Variable is disabled, HELIO will try and auto generate a fitting placeholder for you!
</aside>
<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: This tutorial was waaay too easy for you? That’s great. If you like, you can go on and try a way harder tutorial, where you will learn to add placeholders for lists. Try to add some placeholders for our Recipe IDs (for this you can skip the first three steps)!
→ Define Placeholders for Lists
</aside>