Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| en:sw:01-mervis:hmi-customdir-hidden [2024/09/06 08:06] – [Custom HMI design] avsetula | en:sw:01-mervis:hmi-customdir-hidden [2024/12/30 14:11] (current) – avsetula | ||
|---|---|---|---|
| Line 15: | Line 15: | ||
| This modification is also included in the default Mervis IDE project, which can be downloaded directly from the controller or from {{en: | This modification is also included in the default Mervis IDE project, which can be downloaded directly from the controller or from {{en: | ||
| ===== 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:// | + | 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:// |
| **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 " | **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 " | ||
| 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 ('' | + | 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 ('' |
| 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 '' | 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 '' | ||
