Differences

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

--- en:sw:01-mervis:creating-simple-hmi-hidden [2018/07/10 08:34]
martin_kudlacek
+++ 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}}
-The goal is to continue with previous "temperature regulator" project. We will display current temperature in the room, set the threshold temperature a display if the heating is ON or OFF.
+Create a new project or integrate into an already existing one.
-===== Prerequisites =====
+===== Creating a template =====
-  * UniPi controller running Mervis OS
+To add a template a PLC must be attached to your project.
-  * Temperature requlator project from [[attaching-1-wire-devices-hidden|previous tutorial]]
-  * [[https://www.unipi.technology/power-supplies-c15|24V power supply]]
-  * [[https://www.unipi.technology/1-wire-temperature-sensor-p63?categoryId=3|1-Wire temperature sensor]]
-In this tutorial, we will use [[https://www.unipi.technology/unipi-neuron-l503-p105?categoryId=10|Unipi Neuron L503]].
+{{page>creating-hmi-template-hidden}}
-===== Creating HMI =====
+<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)">
-If you use [[attaching-1-wire-devices-hidden|previous tutorial]], your workspace should look like this:
+<img src="https://kb.unipi.technology/_media/en:sw:01-mervis:01_creating-simple-hmi-en.png" />
+</figure></html>
-{{ :en:sw:01-mervis:creating-simple-hmi-01-workspace.png?direct |}}
+<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>
-In the **Left panel**, you can see **HMI Projects**, under which we will create a new project similarly as with **Executable projects**. Right click on the **HMI Projects** and from the context menu select the **Add New HMI Project**.
+----
-{{ :en:sw:01-mervis:creating-simple-hmi-02-add-new-hmi-project.png?direct |}}
+<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> \\
-A **New HMI Project** dialog will appear. Pick a name and location of the HMI project files. It's not uncommon to have them in the same directory as the Mervis project. If so, tick the **Create Project Directory** as well. And confirm by clicking on **OK**.
+Click on the PLC and in its properties in the right column look for **Device template**. Insert the previously created template here.
-{{ :en:sw:01-mervis:creating-simple-hmi-03-hmi-project-name.png?direct |}}
+<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>
-A new project appeared under the **HMI Projects** in the **Left panel**. Right click on the project and from the context menu select the **Add New HMI template** option.
+===== Creating a HMI =====
+{{page>creating-hmi-interface-hidden}}
-{{ :en:sw:01-mervis:creating-simple-hmi-04-add-new-hmi-template.png?direct |}}
+===== Securing a HMI =====
+{{page>hmi-security-hidden}}
-An *Add HMI Template* dialog will appear. Pick a name for this template and fill the rest of the options as follows. The PLC **Template type** will assure the presence of all the PLC's variables in the HMI template.
-{{ :en:sw:01-mervis:creating-simple-hmi-05-add-hmi-template.png?direct |}}
-Once you confirm the dialog, the new template is created and opened. In the **Left panel** switch to the **HMI Gadget Explorer**. No you should see similar workspace:
-{{ :en:sw:01-mervis:creating-simple-hmi-06-hmi-workspace.png?direct |}}
-In the **HMI Gadget Explorer** you can see all kinds of graphical elements, which we can place onto the template. We will start with element **Value Indicator**, which is able to display numeric value. Perfect for displaying the current temperature in the office. Click on the element in the **Left panel**, hold the button, move it over the template in the **Main window** and release the button.
-{{ :en:sw:01-mervis:creating-simple-hmi-07-placing-value-indicator.png?direct |}}
-A new element is created and automatically selected. In the **Properties panel**, you can see all the properties you can set for this element. The most important is the **Variable** property under the **HMI** section. Via this property, we will tell the element what is the source of data to display. Click on the **Variable** property and then click on the **...** button.
-{{ :en:sw:01-mervis:creating-simple-hmi-08-selecting-variable.png?direct |}}
-A known **Select variable** dialog will appear, where we can search for the variable we created in the program: the **office_Temperature**. Search for it, select it in the list and confirm by clicking on **OK**
-{{ :en:sw:01-mervis:creating-simple-hmi-09-select-variable-dialog.png?direct |}}
-Back in the **Properties panel**, we can change the **Unit** of the displayed value. This will be appended to the value inside the indicator. Since this indicator is for displaying temperature in Celsius, set the **Unit** to **°C**.
-{{ :en:sw:01-mervis:creating-simple-hmi-10-variable-unit.png?direct |}}
-Now we would like to label this value. From the **HMI Gadget Explorer** pick the **Text** element and place it on the template. In its properties panel change the **Text** to **Current temperature**.
-{{ :en:sw:01-mervis:creating-simple-hmi-11-current-temperature-text.png?direct |}}
-Since the new text is larger then the size of the element, you can resize it by grabing the yellow boxes around the selected element.
-{{ :en:sw:01-mervis:creating-simple-hmi-12-resizing-element.png?direct |}}
-The text element is also not very easy to read and the look rather indicates it is a button, tied to some function. Let's change the text to dark blue, by changing the **Foreground** property in the **Text** section of properties.
-{{ :en:sw:01-mervis:creating-simple-hmi-13-selecting-foreground-color.png?direct |}}
-And change the **Background** to white and the **Text Horizontal Alignment** to **Right** as well.
-{{ :en:sw:01-mervis:creating-simple-hmi-14-changing-alignment-and-background-color.png?direct |}}
-Next element we need is for displaying and setting the value of **threshold_Temperature**. We could use the **Value indicator**, but this element allows only displaying the value, not changing. More suitable element is the **Analog Setter**. Pick and place it onto the canvas.
-In the **HMI** section of its properties set the following:
-  * **Variable** to the **threshold_Temperature** we created in the program
-  * **Unit** to **°C** since the variable is temperature in Celsius
-  * **Min Value** to 18, because we don't want to allow the user to set the temperature lower than 18°C
-  * **Max Value** to 30, because we don't want to allow the user to set the temperature higher than 30°C
-  * **Step Value** to 0.5
-{{ :en:sw:01-mervis:creating-simple-hmi-15-adding-threshold-temperature-setter.png?direct |}}
-Also create a text label for this element as we did with the **Current temperature**. You can copy and paste the previous text label and just change the text.
-The last element we need to place is an indicator of whether the heating is ''ON'' or ''OFF''. We still could use the **Value indicator**, but it would display only values ''0'' or ''1''. It is better to use the **Digital indicator** element. Pick and place it onto the canvas. And the only thing we need to do is to point it to the correct variable. We didn't name it nicely, so you need to look for the RO_2.01.
-{{ :en:sw:01-mervis:creating-simple-hmi-16-adding-heating-status.png?direct |}}
-<WRAP center round tip 60%>
-It is always a good idea to rename the actual inputs/outputs to something meaningful, like kitchen_light, door_bell, etc. The reasons for this are (at least) two:
-  - it makes the program more understandable
-  - if you decide to physically rewire the sensor to another input, you just rename the input variable and the rest of the program will use the same name
-</WRAP>
+===== 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}}