Skip to main content
Version: 24.1

2. Create Your First Page

Now that you have created your first HELIO project, you should have your project opened in the Project Editor. In this part of our guide, we will start adding content to our HMI. Specifically, we will cover two of the most important content types: Pages and Elements.

What is the purpose of a Dashboard Page?

A Dashboard Page provides a quick overview of the most important key figures, settings, and states of an industrial machine. This allows users to easily monitor and manage the machine's performance and make informed decisions based on the data presented.

By displaying critical information in an organized and easily digestible format, Dashboards can help operators quickly identify issues and take appropriate actions to optimize machine performance and minimize downtime.

See Dashboard Page to learn more…

2.1 Add a Dashboard Page​

  • Navigate to the Pages section in your HMI Content Tree, and click the Add button to bring up the Add Element dialog.
  • Choose Dashboard Page from this list to add a new page to your HMI.

Did you know? New pages will be added automatically to the navigation of your HMI.

2.2 Add your first Widget: OEE​

Your dashboard appears to be empty, so let's add some content to bring it to life.

  • Create a new Widget by using the Add button on the Dashboard Page.
  • This time you’ll choose Empty Widget. Rename it to "OEE" in the content tree, as we would like to add a widget that displays the quality of our production.

For more info check Overall Equipment Effectiveness…

2.3 Adding Your First Element to Your Widget: A Gauge​

We would like to display the OEE in the form of a gauge and some additional numbers related to our production quality. Let's start with the gauge, since it will be the eye-catcher of our dashboard.

  • Add an Element to your OEE Widget by using the Add button again. This time you’ll choose Gauge from the extensive list of elements.
  • Once you have selected the Element, HELIO needs to know where to retrieve the data for it. To accomplish this, HELIO displays the "Choose Data Record" dialog for you.

Note: You can always change the data source of the element later.

  • Locate the General > Data property in the Properties Panel
  • Click the Link-Button, choose a Variable, and confirm
  • In your HMI Data Tree, you’ll find a variable called Quickstart > Moulding > OEE . Your PLC experts have defined this variable in a previous workshop, and it already has a placeholder value of 92.7%. Select it and Confirm your selection.

Note: You will learn more about how to set up your own Data Variables later!

2.4 Adding Key Figures Using the Magic Output Element​

Additionally, this widget should display the number of produced items that were deemed good and the number that were deemed bad.

  • To display a value that should not be modified by Operators, use the Magic Output. To do so, click the Add Button again and select the Magic Output Element.
  • Again the Data Selector will open automatically. Choose the Quickstart > Moulding > Production > Bad Data Variable and confirm.

Note: Did you notice? The Magic Output will display the unit “pcs” automatically. That’s one of the superpowers of the Magic Inputs and Outputs. You’ll learn a lot more about them later…

  • Finally set its Label Property to something like “Bad”.
  • To display the parts that were produced correctly, repeat the same steps using the "Good" data variable.

Now the “OEE” Widget is done, so let’s add a second widget our Dashboard!

Note: There are a lot more Widgets you can add to your Dashboard and you can configure them however you need! Find out more about the Dashboard Page as well as Elements.

2.5 Challenge: Add a Second »Steam« Widget​

Goal: Try to add a widget that enables operators to change two important steam parameters of our machine.

Add two Elements that enable operators to manipulate the following variables:

  • Quickstart > Steam > Pressure
  • Quickstart > Steam > Temperature

Bonus: Earn extra points by adding icons that visually represent these parameters. Icons help to identify parameters more easily.

Tip: In this case we want our operators to be able to manipulate the values of those variables. So the Magic Output might not be the best choice. 😉

Check Your Result​

Time to validate your own result against this screenshot. Make sure that you have included all the necessary elements in your HMI. 👉

Mission accomplished!

You're ready to move on to the next step!