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 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 this link.

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 webpanel API or one of the other protocols 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 the following steps it is important to have a created HMI template that has been successfully uploaded to the PLC.

Now you need to move the CustomWebFiles directory to the Mervis IDE solution directory:

In the PLC properties in the Mervis IDE, look for the “Custom Directory” parameter under the “ Web Parameters” category and set the CustomWebFiles directory:

Upload the solution including the web and then view the HMI in the web browser by entering the IP of the controller:

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.

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:

1. 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.
2. Beware of JavaScript errors that can cause data loading errors.