This is an old revision of the document!
Vlastní design HMI
Zařízení Unipi je možné objednat také s vlastním logem a ve vlastním designu, více podrobností naleznete na stránkách Unipi. Zejména v tomto případě je skoro až žádoucí, aby bylo možné aplikovat vlastní design také na softwarové rozhraní. Tento článek proto vysvětluje postup, kterým je možné definovat vlastní CSS, JavaScript, či obrázky a nahrát je jako součást HMI.
Tato úprava je zahrnuta také ve výchozím projektu Mervis IDE, který je možné stáhnout přímo z kontroléru, nebo z tohoto odkazu.
Příprava
Pro radikální změny rozhraní, nebo doplnění speciálních efektů, je nezbytná velmi dobrá znalost CSS a JS. V některých případech může být dokonce výhodnější, vytvořit zcela vlastní webové rozhraní a ke komunikaci s programem (RT) využít webpanel API.
Pro běžné změny rozhraní postačí stáhnout předem připravený archiv obsahující úpravu rozhraní v CSS a JS. Obsah archivu je nutné extrahovat do nové složky s názvem “CustomWebFiles”.
Archiv se soubory ke stažení zde.
Přidání do sestavy Mervis IDE
Následující postup předpokládá, že již máte vytvořenu HMI šablonu, kterou se podařilo do PLC nahrát.
Nyní je nutné přesunout adresář CustomWebFiles do adresáře sestavy Mervis IDE:
Ve vlastnostech PLC v Mervis IDE vyhledejte parametr “Adresář pro přizpůsobení” v rámci kategorie “Parametry webu” a vyberte adresář CustomWebFiles:
Nahrajte sestavu vč. webu a poté zobrazte HMI ve webovém prohlížeči zadáním IP kontroléru:
Nyní, pokud se vzhled HMI změnil z Mervis na Unipi, již můžete v rámci adresáře CustomWebFiles dělat vlastní úpravy. Nejsnazší úpravou je nahrazení loga (CustomWebFiles/img/Mervis_WEBPANEL_Color.svg) a faviconu (CustomWebFiles/favicon.ico), je ale nutné dodržet formát souborů (SVG & ICO). Při dalším nahrání webu z IDE bude úprava zahrnuta.
Obdobně je možné upravit i soubory my_style.css a my_script.js, které jsou přímo v adresáři CustomWebFiles. Pro ukázku bude nejlepší změnit základní barvu rozhraní HMI v CustomWebFiles/my_style.css z modré Unipi (#1b75bc) na zelenou (#47a348).
Po nahrání v IDE a aktualizaci stránky se HMI změní:
Na co si dát pozor?
- Tlačítko archivace v Mervis IDE nazahrne složku CustomWebFiles, proto je nutné tento adresář do archivu doplnit ručně, nebo sestavu archivovat externím nástrojem.
- Pozor na chyby v JavaScriptu, které mohou zapříčinit chybu načítání dat.
