Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
en:sw:01-mervis:hmi-customdir-hidden [2024/09/06 07:52] avsetulaen:sw:01-mervis:hmi-customdir-hidden [2024/12/30 14:11] (current) avsetula
Line 11: Line 11:
 #;; #;;
  
-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 CSSJavaScript, or images and upload them as part of the HMI.may be desirable+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 logoiconsCSS 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}}. 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 ===== ===== 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". **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 50: 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). 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).