Differences

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

--- en:sw:01-mervis:creating-simple-hmi-hidden [2018/06/11 06:15]
martin_kudlacek created
+++ en:sw:01-mervis:creating-simple-hmi-hidden [2023/08/25 11:50] (current)
avsetula
@@ Line 1: / Line 1: @@
-====== Creating a simple HMI ======
+====== Creating a HMI for local PLC webserver ======
-In this tutorial, we will demonstrate, how to create a HMI (human-machine interface). The HMI is graphical interface displayed on the touchpanels or in web browser, which allows to show the status of the automation process and to control it. In this tutorial we will focus on the built-in HMI capabilities of Mervis, which runs on the UniPi controller and is accessible via web browser.
+{{page>creating-hmi-intro-hidden}}
+Create a new project or integrate into an already existing one.
+===== Creating a template =====
+To add a template a PLC must be attached to your project.
+{{page>creating-hmi-template-hidden}}
+<html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:01_creating-simple-hmi-en.png)">
+<img src="https://kb.unipi.technology/_media/en:sw:01-mervis:01_creating-simple-hmi-en.png" />
+</figure></html>
+<WRAP center round box 80%>
+  * <html><span class="avBlueText">Name</span></html> should be considered carefully. We recommend using a prefix separated by an underscore, ie. LOCAL_name \\
+  * <html><span class="avBlueText">Display type</span></html> determines the template type -> select **Graphic** \\
+  * <html><span class="avBlueText">Template type</span></html> - select your PLC \\
+  * <html><span class="avBlueText">PLC</span></html> - select the PLC the template is created for
+</WRAP>
+----
+<html><div class="directTag" id="assign_the_template"></div></html>
+<html><span class="kbBlueText">Now you need to assign the template to your PLC:</span></html> \\
+Click on the PLC and in its properties in the right column look for **Device template**. Insert the previously created template here.
+<html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/en:sw:01-mervis:02_creating-simple-hmi-en.png)">
+<img src="https://kb.unipi.technology/_media/en:sw:01-mervis:02_creating-simple-hmi-en.png" />
+</figure></html>
+===== Creating a HMI =====
+{{page>creating-hmi-interface-hidden}}
+===== Securing a HMI =====
+{{page>hmi-security-hidden}}
+===== Deploying a HMI into a PLC =====
+{{page>creating-hmi-deploy-hidden}}
+===== Downloads =====
+The entire Mervis IDE project used in this tutorial is available for download on {{ :en:sw:01-mervis:creating-a-simple-hmi-project.zip |this link}}