Skip to main content
Version: 24.1

5. Previewing Your HMI

Now that we’ve added 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!

5.1 Save and Preview​

  1. Save your Project!

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!

  1. Preview your HMI

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!

5.2 Switch between Placeholder and PLC Mode​

You may often need to work on an HMI without access to the actual PLC. However, you still want to be able to view the pages and elements of your HMI as if they were populated with data. Placeholders let you define fallback values that will be displayed when Placeholder Mode is active.

  1. Review your Dashboard in Placeholder Mode

Since we have not connected a PLC to our HMI yet, all the data that you can see in our HMI comes from Placeholders.

  1. Switch to PLC Mode

Now your Dashboard should be filled with orange boxes instead of our Gauge, inputs and outputs. These boxes are a way for HELIO to show you that you still need to connect data to your Elements.

←→

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? ✨

5.3 Edit Placeholder Values​

Our Placeholders are great, but we want to know what our OEE-Gauge would look like if it was in a critical range. So, let’s edit the Placeholder of our OEE variable.

  1. Edit the variable linked to the Value property of the Gauge

Select the Gauge and click the Edit Data Record button in the Properties Panel, which is right next to our Data Entry.

  1. Activate the placeholder

Navigate to the Placeholder section of the 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!

Note: When the Placeholder property of a Data Variable is disabled, HELIO will try and auto generate a fitting placeholder for you!

Mission accomplished!

You’ve finished the entire tutorial and are now be able to:

  • Create Dashboards, Parameter Pages, Collection Pages
  • Preview your HMI
  • Edit Placeholders

Learn more with the following resources:

Like To Learn How to Setup a PLC Connection?​

Lucky you! There is an optional step to this guide which will show you just how to do that!