Obsah

V manuálu [1] je detailně popsáno vytvoření jednoduchého uživatelského rozhraní WebBuDi. Vývojové nástroje REXYGEN také obsahují program REXYGEN HMI Designer, což je nástroj pro návrh vlastních grafických vizualizací z předdefinovaných komponent (Definice vlastních komponent je také možná, ale vyžaduje trochu programování v jazyce Javascript.). REXYGEN HMI Designer je založen na známém open-source vektorovém editoru Inkscape^TM https://inkscape.org/en/.

V tomto doprovodném manuálu vyvineme alternativní HMI pro příklad 0101-01, jehož tvorba byla popsána v [1]. Stejně jako v případě uživatelského rozhraní WebBuDi, SVG soubor vytvořený pomocí REXYGEN HMI Designer bude sloužit jako zdrojový soubor, který se stane součástí vašeho projektu REXYGEN. Během kompilace projektu bude SVG soubor zpracován a převeden na HTML, JS a CSS soubory.

Kapitola 1
Inicializace návrhu HMI

Po spuštění REXYGEN HMI Designer najdete čistou stránku s inicializovanou vizualizací. HMI je konfigurováno prostřednictvím rozšíření REXYGEN HMI. V menu přejděte na Extensions $\to$ REXYGEN HMI $\to$ Edit HMI Config.

Toto rozšíření je reprezentováno speciální komponentou v levém horním rohu nad výkresem. Komponenta obsahuje obecná nastavení HMI. Prozatím zavřete konfigurační dialog tlačítkem OK.

Aby bylo možné zahrnout HMI během kompilace projektu REXYGEN, musí název souboru končit na .hmi.svg. Uložte soubor například jako designer.hmi.svg do podsložky hmisrc vašeho projektu. Použijte standardní menu File $\to$ Save as.

Poznámka: Pokud chcete nahradit rozhraní WebBuDi rozhraním REXYGEN HMI Designer, jednoduše smažte index.hmi.js a uložte HMI jako index.hmi.svg.

Kapitola 2
Přidání prvních komponent HMI

Nyní přidáme některé displeje a vstupy. REXYGEN HMI Designer obsahuje knihovnu komponent, které můžete použít k vytvoření vašeho HMI. Knihovna je dostupná prostřednictvím rozšíření Browse Components Library. V menu přejděte na Extensions $\to$ REXYGEN HMI $\to$ Browse Components Library (Ctrl+L). Otevře se okno průzkumníka s několika složkami. Otevřete složku GENERAL a přetáhněte Display na kresbu. Displej bude použit jako indikátor zbývajícího času v blokové funkci TIMER.

Pro konfiguraci nastavení displeje vyberte displej kliknutím na něj myší a použijte rozšíření Edit Component z Extensions $\to$ REXYGEN HMI $\to$ Edit Component (Ctrl+E). Po otevření konfiguračního dialogu můžete změnit Title na Display_remaining. Dialog Edit Component má dvě záložky: Data points a Options.

Záložka Data points (Datové body) obsahuje tři položky definující chování a animace komponenty. Každý datový bod obsahuje alias, což je ve skutečnosti spojení na živá data z algoritmu REXYGEN.

• value – Hodnota k zobrazení.
• disable_by – Pokud je aktivováno, displej je deaktivován a data již nejsou aktualizována.
• hide_by – Pokud je aktivováno, displej je skrytý.

Vlastnost value obsahuje $T_value. $T bude později automaticky nahrazen názvem komponenty Title. Hodnota vlastnosti value tedy po nahrazení bude obsahovat Display_remaining_value. Datové body disable_by a hide_by jsou volitelné. Nechte je prozatím prázdné.

Záložka Options obsahuje několik vlastností specifických pro komponentu Display. Popis každé komponenty a vlastnosti naleznete v [2]. Prozatím nechte výchozí hodnoty a stiskněte OK.
Poznámka: Každá komponenta je ve skutečnosti jedna SVG skupina s jedinečným obsahem. Komponenty můžete po obrazovce kopírovat a vkládat pomocí kombinace Ctrl+C a Ctrl+V.

Nyní přidáme ovládací prvky pro všechny spínače (bloky CNB). Všechny budou ovládány pomocí komponent PushOnOff . Přidejte je z knihovny. Vyberte první PushOnOff a otevřete dialog editoru Extensions $\to$ REXYGEN HMI $\to$ Edit Component (Ctrl+E). Změňte název na PushOnOff_SW_1 a vyberte záložku Options. V seznamu vlastností type vyberte položku ToggleButton. Zavřete dialog Edit Component stisknutím tlačítka OK. Zkopírujte a vložte tlačítko třikrát a nezapomeňte změnit názvy na PushOnOff_SW_2, PushOnOff_SW_3, PushOnOff_SW_4.

Nyní máme čtyři tlačítka PushOnOff a jeden Display a chceme propojit všechny komponenty s živými daty z cílového zařízení.

Kapitola 3
Propojení komponent HMI s běžícím algoritmem

Otevřete dialog HMI Configuration buď pomocí Extensions $\to$ REXYGEN HMI $\to$ Edit HMI Config, nebo jednoduše zrušte výběr všech komponent na kresbě (klikněte mimo jakoukoli komponentu) a stiskněte Ctrl+E. Konfigurátor prochází všechny komponenty a vytvoří seznam použitých Aliasů. Každý z nich by měl být propojen s jedním signálem v běžícím algoritmu. Můžete buď vyplnit každé připojovací pole ručně, nebo můžete použít funkci Browse.

Browser vyžaduje cílové zařízení s běžícím algoritmem. Ujistěte se, že algoritmus běží, viz manuál [1]. Také musí být nastavena cílová URL adresa. Stiskněte tlačítko Browse. Otevře se dialog přihlášení. Změňte Target na 192.168.1.100:8008 (nahraďte 192.168.1.100 IP adresou vašeho zařízení). Pokud jste nezměnili přihlašovací údaje, použijte výchozí uživatelské jméno admin s prázdným heslem. Po úspěšném přihlášení se karta připojení rozšíří o stromovou strukturu běžícího algoritmu (tuto stromovou strukturu jste již viděli v diagnostice algoritmu).

Vyberte Connection String (Připojovací řetězec) položky Display_remaining_value a poté procházejte strom k bloku TIMER a dvojklikněte na parametr rt. Připojovací řetězec parametru je zkopírován do aliasu Display_remaining_value, což je ukázáno na následujícím obrázku.

Jakmile je displej propojen, propojte také spínače. Procházejte strom ke CNB_SWITCH1, vyberte pole Connection String aliasu PushOnOff_SW_1 a dvojklikněte na parametr YCN. Opakujte to pro zbývající připojovací pole. Poté stiskněte OK pro uložení nastavení a zavření dialogu.

Interaktivní komponenty v REXYGEN HMI Designer jsou jen části kresby. Uživatel může komponenty libovolně umístit a přidat tolik dekorativních statických komponent, kolik potřebuje. Přidáme několik textových popisů pro odlišení jednotlivých tlačítek. Použijte nástroj Text (F8), klikněte kdekoli v prázdném prostoru a začněte psát. Poté použijte nástroj Selector (F1) a přesunujte texty a tlačítka.

Poznámka: Více informací o vlastním kreslení naleznete v tutoriálech Inkscape (viz Help $\to$ Tutorials $\to$ Inkscape: Basic)

Kapitola 4
Přidání dalších komponent HMI

Dále přidáme další komponenty pro ovládání časovače a zobrazení stavu bloků OR a AND. Otevřete knihovnu komponent (Ctrl+L) a přidejte jednu komponentu Input a čtyři komponenty Led. LED diody budou zobrazovat stav logických hodnot a Input bude použit pro změnu výchozí hodnoty intervalu časovače.

U komponent Led stačí upravit Title pomocí rozšíření Upravit komponentu (vyberte komponentu jedním kliknutím a stiskněte Ctrl+E). Tituly by měly být Led_OR_A, Led_OR_B, Led_AND a Led_TIMER_OUT. Nakonec upravte komponentu Input změnou Title na Input_interval.

Poslední komponentou, kterou potřebujeme, je graf zobrazující časový průběh dat z bloku TRND. Použijte knihovnu komponent (Ctrl+L) a přidejte komponentu TRND. Můžete nastavit velikost tak, aby vyhovovala požadovanému umístění. Upravte komponentu (Ctrl+E) a změňte Title na TRND a přepněte na záložku Options. Proveďte dvojklik na vlastnost signals. Přidejte následující štítky pomocí tlačítka plus (+): timer out, rem. time, OR A, OR B. Tyto štítky budou zobrazeny v legendě grafu.

Kapitola 5
Další propojení s běžícím algoritmem

Když jsou všechny komponenty na svém místě, znovu je propojte s běžícím algoritmem. Stačí opakovat postup popsaný v Sekci 3, otevřít dialog HMI Configuration (Extensions $\to$ REXYGEN HMI $\to$ Edit HMI Config) a procházet běžícím algoritmem, abyste spárovali zbývající aliasy s odpovídajícími připojovacími řetězci. Seznam je zobrazen na následujícím obrázku.

Kapitola 6
Závěrečné kroky

Gratulujeme, vaše první grafické HMI je téměř hotové! Přidejte několik obdélníků, které vizuálně rozdělí HMI na jednotlivé sekce. Použijte nástroj Rectangle (F4), nakreslete obdélník, vyberte barvu z palety a pošlete obdélník na pozadí pomocí klávesy End. Nezapomeňte uložit kresbu.

Jak bylo zmíněno dříve, soubory *.hmi.svg ve složce hmisrc jsou automaticky zpracovávány během kompilace projektu v aplikaci REXYGEN Studio. Hlavní soubor projektu musí obsahovat blok HMI s parametrem GenerateRexHMI nastaveným na on. To již bylo nastaveno při tvorbě prvního projektu v manuálu [1], takže byste měli mít vše připravené.

Jakmile projekt zkompilujete znovu a stáhnete jej do vašeho zařízení, HMI bude přístupné prostřednictvím webového prohlížeče. Přejděte na
http://192.168.1.100:8008/hmi/designer.html (nahraďte 192.168.1.100 IP adresou vašeho zařízení). Uvidíte své HMI s živými daty.

Tento tutoriál pokrývá pouze velmi základní komponenty. Pokud chcete získat více informací o dalších komponentách, viz [2].

Literatura

Referenční číslo dokumentace: 17331

2025 © REX Controls s.r.o., www.rexygen.com