What is an Element?

»Elements are the basic building blocks that comprise your HMI. They can be thought of as the Lego blocks that you use to assemble your HMI.«

Almost everything you can add to the pages of your HMI is an Element, such as a Dashboard Widget (Element) , a Button (Element) , or a Pie Chart (Element).

Every element has properties that affect its appearance and behavior. You can find and manipulate these properties using the Properties Panel (Content View) within the Content View of the Project Editor .

What Is an Input?

»An input is an Element that allows your operators to manipulate, edit, or enter data, thereby changing the state of your PLC.«

For example a Numeric Stepper (Element), Text Field (Element), or a Switch (Element).

HELIO offers a convenient input feature called the Magic Input (Element). This Input adapts to the variable types you want to manipulate, presenting a UI that best fits the shape of your data.

If you connect a number to the Magic Input, it will turn into a Numeric Stepper; if you connect a boolean, the Magic Input will turn into a Switch. Pretty handy right? 🪄

And an Output?

»An Output is the exact opposite of an Input. Outputs will display data in your HMI in different ways without the ability to edit the data.«

Some examples for Outputs are Gauge (Element) , Pie Chart (Element) and Radial Bars (Element) .

We realized how much time can be saved by using our Magic Input, so we decided to add a Magic Output (Element) as well! It can transform into different variants based on the type of the linked data.

Real Life Examples

Add a Widget to Your Dashboard

  1. Navigate to or create a Dashboard page in your HMI (or use the Playground Dashboard).
  2. Click the Add button next to the Widgets section of your Dashboard. And add an Empty Widget.
  3. Try changing the Title property of your new Widget and give it a fitting name!

Untitled


Add a Magic Output

  1. Now click the Add button next to your new Widget and add a Magic Output (Element) .
  2. Select any Data you would like to display, for example the Examples > Moulding > OEE data variable within the Playground project. And click confirm.
  3. Have a look through the properties of your new Output and edit them however you like!

Untitled