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/12 14:21] jan_kozak |
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" onmousemove="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 current temperature in an office, for example. OIn | + | 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**. |
| - | V okně **HMI objekty** naleznete širokou škálu grafických elementů, které lze do šablony přidat. V případě našeho tutoriálu začneme s prvkem **Value Indicator**, který slouží k zobrazování číselných hodnot - ideální pro zobrazení aktuální teploty v kanceláři. V **levém panelu** na tento prvek klikněte a přetáhněte jej na **hlavní panel**. | + | <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/en:sw:01-mervis:02_creating-hmi-interface-en.png" /> | |
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onmousemove="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:02_creating-hmi-interface.png)"> | + | |
| - | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:02_creating-hmi-interface.png" /> | + | |
| </figure></html> | </figure></html> | ||
| - | Na panelu přibude nový prvek, který automaticky zůstane vybrán. V panelu **Vlastnosti** nyní můžete vidět všechny nastavitelné atributy prvku. Pro nás nejdůležitější je vlastnost **Proměnná** umístěná v sekci **HMI**. Pomocí tohoto nastavení prvku sdělíme, co má použít jako zdroj zobrazovaných dat. Klikněte na **Proměnná** levým tlačítkem a poté klikněte na tlačítko {{: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" onmousemove="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> | ||
| - | Objeví se již důvěrně známý dialog **Vyberte proměnnou**, ve kterém můžete vyhledat svou proměnnou. Pro účely návodu hledáme předem vytvořenou proměnnou **kancelar_teplota**. Vyhledejte a vyberte ze seznamu, volbu potvrďte kliknutím na **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" onmousemove="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> | ||
| - | Zpět do panelu **Vlastnosti**. Nyní změníme vlastnost **Jednotka** určující jednotku zobrazované hodnoty. Tato jednotka bude v HMI automaticky přidána za zobrazenou hodnotu, a jelikož se jedná o teplotu ve stupních Celsia, nastavíme atribut **Jednotka** na **°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" onmousemove="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> | ||
| - | Nyní by bylo vhodné hodnotu pojmenovat. Z nabídky **HMI objekty** vyberte element **Text** a umístěte jej do šablony. V panelu **Vlastnosti** pak změňte **Text** na **Aktuální teplota**. | + | 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" onmousemove="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> | ||
| - | Nový název je výrazně delší než původní, pro lepší viditelnost proto můžete textové pole zvětšit přetáhnutím jednoho ze žlutých čtverců okolo prvku. | + | 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" onmousemove="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> | ||
| - | Textový prvek rovněž není zcela čitelný a jeho současný vzhled evokuje spíše tlačítko než jmenovku. Změníme proto barvu textu na tmavě modrou pomocí vlastnosti **Popředí** v sekci vlastností **Text**. | + | 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" onmousemove="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> | ||
| - | Nyní změňte vlastnost **Popředí** na bílou a **Vodorovné zarovnání textu** na **Vpravo** | + | Now change the **Background** colour to white, and **Text Horizontal Alignment** to **Right**. |
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onmousemove="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> | ||
| - | Jako další hledáme prvek pro zobrazení a nastavení hodnoty analogové proměnné. Teoreticky bychom mohli opět použít **Value indicator**, tento prvek ale umožňuje pouze zobrazení hodnoty, nikoliv její změny. Lepší volbou zde bude **Analog Setter**. Vyberte jej a umístěte jej na pracovní plochu. V sekci vlastností **HMI** pak proveďte následující nastavení. | + | 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: |
| - | * **Proměnná**, zde vyberte vhodnou proměnou reprezentující teplotu, v případě tohoto návodu zvolím proměnnou **hranicni_teplota** | + | * **Variable**: choose a suitable variable representing temperature. In our case, we will select **threshold_temperature** variable |
| - | * **Jednotka** bude nastavena na **°C**, neboť proměnná je vyjádřena ve stupni Celsia | + | * **Unit** should be set to **°C** as the variable is expressed in degrees Celsius. |
| - | * **Min. hodnota** bude 18, což uživateli zabrání nastavit teplotu menší než 18°C | + | * **Min Value** will be 18, which will prevent users to set a temperature lower than 18 °C |
| - | * **Max. hodnota** bude 30, což uživateli zabrání nastavit teplotu vyšší než 30°C | + | * **Max Value** is 30 to prevent users to set a temperature higher than 30 °C |
| - | * **Krok**, neboli stupeň po kterém bude moci být teplota upravována, nastavte na 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" onmousemove="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> | ||
| - | Rovněž vytvoříme textové označení prvku, stejně jako jsme učinili u **Aktuální teploty**. Zde můžete textové pole jednoduše zkopírovat a následně upravit text. | + | 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. |
| - | Poslední prvek, který budeme potřebovat, je indikátor stavu topení, tj. zda je topení zapnuto (''ON'') či vypnuto (''OFF''). I zde bychom mohli použít prvek **Value indicator**, ten by ale zobrazoval pouze hodnoty ''0'' a ''1''. Lepší volbou proto bude digitální prvek **Digital Indicator**. Vyberte jej a umistěte jej na pracovní plochu. Zde je třeba provést jen výběr správné proměnné např. 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" onmousemove="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> | ||
| <WRAP center round tip 80%> | <WRAP center round tip 80%> | ||
| - | Doporučujeme vždy pojmenovávat vstupy/výstupy smysluplnými názvy jako např. svetlo_kuchyn, dverni_zvonek apod. Existují dva hlavní důvody | + | We recommend giving inputs/outputs descriptive names such as light_kitchen, door_bell etc. There are two main reasons: |
| - | - Takové názvy učiní projekt výrazně čitelnějším a přehlednějším | + | - Such names will make the project much clearer and easier to read |
| - | - Pokud se rozhodnete pro fyzické přepojení senzoru do jiného vstupu, stačí jen přejmenovat vstupní proměnnou - zbytek programu pak bude nadále užívat stejný název | + | - 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 |
| </WRAP> | </WRAP> | ||
| - | Nyní už nás čeká jen pár posledních úprav. Vytvořte pro indikaci stavu topení jméno a poté vytvořte další, větší textové pole označující název celého HMI projektu. Výsledek může vypadat například takto: | + | 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" onmousemove="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> | ||
| - | */ | ||
