Differences

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

--- en:sw:01-mervis:hmi-customdir-hidden [2024/09/05 16:04] – avsetula
+++ en:sw:01-mervis:hmi-customdir-hidden [2024/12/30 14:11] (current) – avsetula
@@ Line 1: / Line 1: @@
 ====== 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 tutorial 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}}.
 ===== Prerequisites =====
-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]] to interact with the program (RT).
+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).
 **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".
@@ Line 39: / Line 50: @@
 ----
-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 file format (SVG & ICO). After the next upload of the web (HMI) from the IDE, the modification will be included.
+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.
 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).