Vlastní design HMI

Unipi devices can also be ordered with your own logo and design, please visit the Unipi website for more details. Especially in this case, it is almost desirable to apply the custom design to the software interface as well. This article explains how to define your own CSS, JavaScript, or images and upload them as part of the HMI.

This modification is also included in the default Mervis IDE project, which can be downloaded directly from the controller or from this link.

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”.

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í:

1. 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.
2. Pozor na chyby v JavaScriptu, které mohou zapříčinit chybu načítání dat.