Now that you have created your first HELIO project (Step 2: Create a New Project From the »Quickstart HMI« Template ), 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: HELIO Page Types and HELIO Element Types .

Creating a Dashboard Page

• What is the purpose of a Dashboard Page?

1. Add the Page

• 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 Dashboard Page from this list to add a new page to your HMI.

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Did you know? New pages will be added automatically to the navigation of your HMI.

</aside>

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…

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.

  <aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: You can always change the data source of the element later.

  • Locate the General > Data ****property in the Properties Panel (Content View)
  • Click the Link-Button, choose a Variable, and confirm </aside>

• 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.

  <aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: You will learn more about how to set up your own Data Variables later!

  </aside>

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 (Element). 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.

  <aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> Note: Did you notice? The Magic Output (Element) 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…

  </aside>

• 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 second widget our Dashboard!

<aside> <img src="/icons/light-bulb_gray.svg" alt="/icons/light-bulb_gray.svg" width="40px" /> 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 (Page Type) as well as HELIO Element Types.

</aside>

5. Challenge: Add a Second »Steam« Widget