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 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**.
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|}}.
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**.
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**.
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**.
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.
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**.
Nyní změňte vlastnost **Pozadí** na bílou a **Vodorovné zarovnání textu** na **Vpravo**
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í.
* **Proměnná**, zde vyberte vhodnou proměnou reprezentující teplotu, v případě tohoto návodu zvolím proměnnou **hranicni_teplota**
* **Jednotka** bude nastavena na **°C**, neboť proměnná je vyjádřena ve stupni Celsia
* **Min. hodnota** bude 18, což uživateli zabrání nastavit teplotu menší než 18 °C
* **Max. hodnota** bude 30, což uživateli zabrání nastavit teplotu vyšší než 30 °C
* **Krok**, neboli stupeň po kterém bude moci být teplota upravována, nastavte na 0.5
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.
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.
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
- Takové názvy učiní projekt výrazně čitelnějším a přehlednějším
- 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
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:
