Differences

This shows you the differences between two versions of the page.

--- en:sw:01-mervis:hmi-customdir-hidden [2024/09/05 15:06] – [Vlastní design HMI] avsetula
+++ en:sw:01-mervis:hmi-customdir-hidden [2024/12/30 14:11] (current) – avsetula
@@ Line 1: / Line 1: @@
-====== Vlastní design HMI ======
+====== Custom HMI design ======
-Unipi devices can also be ordered with your own logo and design, please visit the [[https://www.unipi.technology/customization/product-branding-416|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.
+#;;
+<html><style>h1 {margin-bottom: 10px !important;}</style><span class="tag-skelet inline-tags">
+<span class="tag-patron">Patron</span>
+<span class="tag-neuron">Neuron</span>
+<span class="tag-gate">Gate</span>
+<span class="tag-unipi11">Unipi&nbsp1.1</span>
+<span class="tag-axon">Axon</span>
+</span></html>
+#;;
+Unipi devices can also be ordered with your own logo and design, please visit the [[https://www.unipi.technology/customization/product-branding-416|Unipi website]] for more details. Especially in this case, it may be desirable to apply the custom design to the software interface as well. This tutorial explains how to define your own logo, icons, CSS or JavaScript and upload it 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 {{en:sw:01-mervis:hmi-customdir:unipi-welcome-solution.zip|this link}}.
-===== Příprava =====
+===== Prerequisites =====
-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]].
+For radical changes to the interface, or adding special effects, a very good knowledge of CSS and JS is necessary. In some cases, it may even be better to create a custom web interface and use the [[https://kb.mervis.info/doku.php/en:mervis-ide:65-webpanel:webpanel-api|webpanel API]] or other communication protocol to interact with the program (RT).
-**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".
+**For common changes** to the interface, just download the pre-prepared archive containing the CSS and JS modifications. The contents of the archive must be extracted to a new folder called "CustomWebFiles".
 <WRAP center round info 85%>
-Archiv se soubory {{ :en:sw:01-mervis:hmi-customdir:customwebfiles.zip |ke stažení zde}}.
+Archive with files: {{:en:sw:01-mervis:hmi-customdir:customwebfiles.zip|}}.
 </WRAP>
-===== Přidání do sestavy Mervis IDE =====
+===== How to use in Mervis IDE solution? =====
-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.
+For the following steps it is important to have a [[creating-simple-hmi-hidden|created HMI template]] that has been successfully uploaded to the PLC.
 {{ .:hmi-customdir:hmi-customdir_01-overview.png?direct |}}
@@ Line 22: / Line 33: @@
 ----
-Nyní je nutné přesunout adresář CustomWebFiles do adresáře sestavy Mervis IDE:
+Now you need to move the CustomWebFiles directory to the Mervis IDE solution directory:
 {{ .: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:
+In the PLC properties in the Mervis IDE, look for the "Custom Directory" parameter under the " Web Parameters" category and set the CustomWebFiles directory:
 {{ .: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:
+Upload the solution including the web and then view the HMI in the web browser by entering the IP of the controller:
 {{ .:hmi-customdir:hmi-customdir_04-unipi-hmi.png?direct |}}
@@ Line 39: / Line 50: @@
 ----
-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.
+Now, if the HMI design has changed from Mervis to Unipi, you can make custom modifications within the CustomWebFiles directory. The easiest modification is to replace the logo (''CustomWebFiles/img/Mervis_WEBPANEL_Color.svg'') and favicon (''CustomWebFiles/favicon.ico''). The images must have the same name and file format (SVG & ICO). After the next upload of the web (HMI) from the IDE, the modification will be included.
-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).
+Similarly, you can edit the **my_style.css** and **my_script.js** files, which are located directly in the CustomWebFiles directory. For demonstration it's best to change the base color of the HMI in ''CustomWebFiles/my_style.css'' from Unipi blue (#1b75bc) to green (#47a348).
-Po nahrání v IDE a aktualizaci stránky se HMI změní:
+Once the solution is uploaded, refresh the web page and the controller's HMI will change:
 {{ .:hmi-customdir:hmi-customdir_05-custom-hmi.png?direct |}}
@@ Line 51: / Line 62: @@
-===== Na co si dát pozor? =====
+===== Please note =====
-  - 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.
+  - The archive button in Mervis IDE does not include the CustomWebFiles folder, so it is necessary to add this folder to the archive manually or use an external tool to archive the solution.
-  - Pozor na chyby v JavaScriptu, které mohou zapříčinit chybu načítání dat.
+  - Beware of JavaScript errors that can cause data loading errors.