Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
en:sw:01-mervis:creating-hmi-interface-hidden [2020/05/13 12:13] avsetula |
en:sw:01-mervis:creating-hmi-interface-hidden [2021/08/05 15:04] (current) avsetula |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| 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 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: | ||
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:01_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:01_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:01_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:01_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
| - | In the **HMI objects** window you can see a wide collection of graphic elements 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**. | + | 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**. |
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:02_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:02_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:02_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:02_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
| 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. {{:files:dialog-open_button.png?nolink|}}. | 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. {{:files:dialog-open_button.png?nolink|}}. | ||
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:03_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:03_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:03_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:03_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
| 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**. | 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**. | ||
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:04_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:04_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:04_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:04_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
| - | Go back to **Properties**. Change the **Controller** 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**. | + | 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**. |
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:05_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:05_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:05_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:05_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
| 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**. | 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**. | ||
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:06_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:06_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:06_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:06_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
| 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. | 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. | ||
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:07_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:07_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:07_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:07_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
| 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. | 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. | ||
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:08_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:08_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:08_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:08_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
| - | Now change the **Foreground** colour to white, and **Text Horizontal Alignment** to **Right**. | + | Now change the **Background** colour to white, and **Text Horizontal Alignment** to **Right**. |
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:09_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:09_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:09_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:09_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
| Line 56: | Line 56: | ||
| * **Variable**: choose a suitable variable representing temperature. In our case, we will select **threshold_temperature** variable | * **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. | * **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 | + | * **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 | + | * **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 | * **Step Value**, or the increment by which the temperature can be adjusted. Set it to 0.5 | ||
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:10_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:10_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:10_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:10_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
| Line 68: | Line 68: | ||
| 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. | 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. | ||
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:11_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:11_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:11_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:11_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
| Line 80: | Line 80: | ||
| 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: | 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: | ||
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:12_creating-hmi-interface.png)"> | + | <html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:12_creating-hmi-interface-en.png)"> |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:12_creating-hmi-interface.png" /> | + | <img src="https://kb.unipi.technology/_media/en:sw:01-mervis:12_creating-hmi-interface-en.png" /> |
| </figure></html> | </figure></html> | ||
