Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
|
cs:sw:01-mervis:creating-hmi-interface-hidden [2020/05/07 07:22] avsetula |
cs:sw:01-mervis:creating-hmi-interface-hidden [2020/05/15 06:21] avsetula |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | V levém panelu dvojklikem otevřete vytvořenou HMI šablonu. Nyní ve spodní části tohoto panelu přepněte na záložku HMI objekty; vaše obrazovka by poté měla vypadat takto: | + | V levém panelu dvojklikem otevřete vytvořenou HMI šablonu. Nyní ve spodní části tohoto panelu přepněte na záložku HMI objekty, vaše obrazovka by poté měla vypadat takto: |
| - | <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/cs:sw:01-mervis:01_creating-hmi-interface.png)"> |
| <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:01_creating-hmi-interface.png" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:01_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
| Line 7: | Line 7: | ||
| 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**. | 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" onmousemove="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/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" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:02_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
| Line 13: | Line 13: | ||
| 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|}}. | 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|}}. | ||
| - | <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/cs:sw:01-mervis:03_creating-hmi-interface.png)"> |
| <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:03_creating-hmi-interface.png" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:03_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
| Line 19: | Line 19: | ||
| 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**. | 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**. | ||
| - | <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/cs:sw:01-mervis:04_creating-hmi-interface.png)"> |
| <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:04_creating-hmi-interface.png" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:04_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
| Line 25: | Line 25: | ||
| 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**. | 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**. | ||
| - | <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/cs:sw:01-mervis:05_creating-hmi-interface.png)"> |
| <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:05_creating-hmi-interface.png" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:05_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
| Line 31: | Line 31: | ||
| 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**. | 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**. | ||
| - | <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/cs:sw:01-mervis:06_creating-hmi-interface.png)"> |
| <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:06_creating-hmi-interface.png" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:06_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
| Line 37: | Line 37: | ||
| 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. | 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. | ||
| - | <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/cs:sw:01-mervis:07_creating-hmi-interface.png)"> |
| <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:07_creating-hmi-interface.png" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:07_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
| Line 43: | Line 43: | ||
| 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**. | 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**. | ||
| - | <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/cs:sw:01-mervis:08_creating-hmi-interface.png)"> |
| <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:08_creating-hmi-interface.png" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:08_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
| - | Nyní změňte vlastnost **Popředí** na bílou a **Vodorovné zarovnání textu** na **Vpravo** | + | Nyní změňte vlastnost **Pozadí** na bílou a **Vodorovné zarovnání textu** na **Vpravo** |
| - | <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/cs:sw:01-mervis:09_creating-hmi-interface.png)"> |
| <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:09_creating-hmi-interface.png" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:09_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
| Line 61: | Line 61: | ||
| * **Krok**, neboli stupeň po kterém bude moci být teplota upravována, nastavte na 0.5 | * **Krok**, neboli stupeň po kterém bude moci být teplota upravována, nastavte na 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/cs:sw:01-mervis:10_creating-hmi-interface.png)"> |
| <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:10_creating-hmi-interface.png" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:10_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
| Line 69: | Line 69: | ||
| 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. | 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. | ||
| - | <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/cs:sw:01-mervis:11_creating-hmi-interface.png)"> |
| <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:11_creating-hmi-interface.png" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:11_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
| Line 81: | Line 81: | ||
| 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: | 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: | ||
| - | <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/cs:sw:01-mervis:12_creating-hmi-interface.png)"> |
| <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:12_creating-hmi-interface.png" /> | <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:12_creating-hmi-interface.png" /> | ||
| </figure></html> | </figure></html> | ||
