In the left panel, double-click on the created HMI template. On the bottomn of this panel, switch to HMI Objects tab - your screen should look like this afterwards:
In the HMI objects window you can see a wide collection of graphic gadgets that can be added to the template. In this tutorial, we will start with the Value Indicator element designed for displaying numeric values. This makes it ideal for displaying the current temperature in an office, for example. Click on the element in the left panel and drag it onto the main panel.
The element will appear on the main panel and will stay highlighted. In the Properties menu, you can now see all available configurations for it. Right now, the most important attribute is Variable placed in the HMI section. Using this setting we will tell the element which variable will be used as a data source. Click on Variable and then click on the button. 
.
A well-known Select variable dialogue will appear, in which you can search for the needed variable. In this tutorial, we are looking for an already existing office_temperature variable. Look it up, select it from the list and confirm by clicking on OK.
Go back to Properties. Change the Unit setting determining the displayed value's unit. In the HMI, this unit will be automatically added behind the displayed values. As we are talking about a temperature value, set the Unit attribute to °C.
It may be also handy to give the value a suitable name. In the HMI objects menu choose the Text element and place it into the template. In the Properties panel, change the Text attribute to Current temperature.
As the new name is much longer than the default one, you can enlarge the text field by dragging one of the yellow squares around the element to make the whole text visible.
Right now, the element is not legible enough, and its current design makes it look more like a button than a nametag. Let's improve it by changing the text's colour to blue using the Foreground attribute in the Text property section.
Now change the Background colour to white, and Text Horizontal Alignment to Right.
The next step is to add an element that would allow us to display and configure the values of an analogue variable. Theoretically, we could again use the Value Indicator. However, this element can only display values, not change them. A more suitable choice is the Analog Setter. Select it and place it onto the canvas. In the HMI properties, configure it as follows:
- Variable: choose a suitable variable representing temperature. In our case, we will select threshold_temperature variable
- Unit should be set to °C as the variable is expressed in degrees Celsius.
- Min Value will be 18, which will prevent users to set a temperature lower than 18 °C
- Max Value is 30 to prevent users to set a temperature higher than 30 °C
- Step Value, or the increment by which the temperature can be adjusted. Set it to 0.5
We will also create a text label for the element in the same way as with Current temperature. You can simply copy and paste the text fields and edit the text afterwards.
The last element we will need is an indication of heating status, eg. if the heating is ON or OFF. Again, we could simply use the Value Indicator, but we won't since this element can display only binary values (0 or 1). A better choice is the Digital Indicator. Select it and place it onto the canvas. Here, you need only to select the correct variable, ie. DI_1.02.
We recommend giving inputs/outputs descriptive names such as light_kitchen, door_bell etc. There are two main reasons:
- Such names will make the project much clearer and easier to read
- If you decide to plug a sensor to a different input, all you need to do is to rename the input variable with the rest of the program still using the same name
At this point, only a couple of finishing touches is needed. Give the heating status indicator a name and then create another, a larger text field for the name of the entire HMI project. The result can look like this:
