====== Custom HMI design ======
#;;
Patron
Neuron
Gate
Unipi 1.1
Axon
#;;
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]] 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".
Archive with files: {{:en:sw:01-mervis:hmi-customdir:customwebfiles.zip|}}.
===== How to use in Mervis IDE solution? =====
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 |}}
/* obr1 - snímek na otevřenou šablonu HMI a vlastnosti PLC */
----
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 */
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 */
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 |}}
/* obr4 - výsledný vzhled HMI v prohlížeči */
----
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).
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 |}}
/* obr5 - HMI v prohlížeči po změně barvy */
===== Please note =====
- 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.
- Beware of JavaScript errors that can cause data loading errors.