====== Vlastní design HMI ====== #;; Patron Neuron Gate Unipi 1.1 Axon #;; Zařízení Unipi je možné objednat také s vlastním logem a ve vlastním designu, více podrobností naleznete [[https://www.unipi.technology/cs/zakazkovy-vyvoj/product-branding-416|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 návod proto vysvětluje postup, kterým je možné definovat vlastní logo, ikony, CSS, či JavaScript a nahrát vše 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 {{en:sw:01-mervis:hmi-customdir:unipi-welcome-solution.zip|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 [[https://kb.mervis.info/doku.php/en:mervis-ide:65-webpanel:webpanel-api|webpanel API]], či některý z dalších protokolů. **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 {{ :en:sw:01-mervis:hmi-customdir:customwebfiles.zip |ke stažení zde}}. ===== Přidání do sestavy Mervis IDE ===== Následující postup předpokládá, že již máte [[creating-simple-hmi-hidden|vytvořenu HMI šablonu]], kterou se podařilo do PLC nahrát. {{ .:hmi-customdir:hmi-customdir_01-overview.png?direct |}} /* obr1 - snímek na otevřenou šablonu HMI a vlastnosti PLC */ ---- Nyní je nutné přesunout adresář CustomWebFiles do adresáře sestavy Mervis IDE: {{ .:hmi-customdir:hmi-customdir_02-directory.png?direct |}} /* obr2 - jen adresář sestavy */ Ve vlastnostech PLC v Mervis IDE vyhledejte parametr "Adresář pro přizpůsobení" v rámci kategorie "Parametry webu" a vyberte adresář CustomWebFiles: {{ .:hmi-customdir:hmi-customdir_03-detail-customdir.png?direct |}} /* obr3 - detail na vlastnosti PLC */ Nahrajte sestavu vč. webu a poté zobrazte HMI ve webovém prohlížeči zadáním IP kontroléru: {{ .:hmi-customdir:hmi-customdir_04-unipi-hmi.png?direct |}} /* obr4 - výsledný vzhled HMI v prohlížeči */ ---- 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 název a 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í: {{ .:hmi-customdir:hmi-customdir_05-custom-hmi.png?direct |}} /* obr5 - HMI v prohlížeči po změně barvy */ ===== Na co si dát pozor? ===== - Tlačítko archivace v Mervis IDE nezahrne 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.