Differences

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

--- en:sw:01-mervis:creating-simple-hmi-hidden [2020/05/12 12:48]
jan_kozak [Creating a simple HMI]
+++ 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 an HMI (human-machine interface). The HMI is a graphical interface displayed on the touchpanels or in a 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 a web browser.
+{{page>creating-hmi-intro-hidden}}
-The goal is to continue with the previous "temperature regulator" project. We will display the 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 \\
-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**.
+  * <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 \\
-{{ :en:sw:01-mervis:creating-simple-hmi-02-add-new-hmi-project.png?direct |}}
+  * <html><span class="avBlueText">PLC</span></html> - select the PLC the template is created for
-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**.
-{{ :en:sw:01-mervis:creating-simple-hmi-03-hmi-project-name.png?direct |}}
-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.
-{{ :en:sw:01-mervis:creating-simple-hmi-04-add-new-hmi-template.png?direct |}}
-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 80%>
-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>
-Let's do some final touches. Create a label for the heating status, and create another, larger label indicating what is this HMI page about. The result could look like this:
+----
-{{ :en:sw:01-mervis:creating-simple-hmi-17-finished-hmi.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> \\
-Now it's time to upload the HMI to PLC. First we need to tell the PLC, what type of template it should display. You can have many HMI Projects attached with many templates and PLC cannot pick this automatically. It's the same with programs being executed via **Tasks**.
+Click on the PLC and in its properties in the right column look for **Device template**. Insert the previously created template here.
-Switch to the **Solution** tab in the **Left panel**, select your PLC and in the **Properties panel** scroll all the way down until you see the **Device Template** property in the **Web Parameters** section. Select from the dropdown menu the correct template. If you followed the tutorial precisely, there should be only one.
+<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>
-{{ :en:sw:01-mervis:creating-simple-hmi-18-select-device-template.png?direct |}}
+===== Creating a HMI =====
+{{page>creating-hmi-interface-hidden}}
-Now **Deploy** the solution and make sure, that you have **Web** options selected.
+===== Securing a HMI =====
+{{page>hmi-security-hidden}}
-{{ :en:sw:01-mervis:creating-simple-hmi-19-deploying.png?direct |}}
+===== Deploying a HMI into a PLC =====
+{{page>creating-hmi-deploy-hidden}}
-After successful deployment, open your favorite web browser and enter the IP address of your PLC into the address bar. You should be presented with your newly created HMI with up-to-date information.
+===== 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}}
-{{ :en:sw:01-mervis:creating-simple-hmi-20-hmi-heating-on.png?direct |}}
-As you can see, the current temperature is 27.3°C, the desired temperature is 30°C, which results in the heating being ''ON''. Change the desired temperature to lower value ten your current temperature and the heating will turn ''OFF''.
-{{ :en:sw:01-mervis:creating-simple-hmi-21-hmi-heating-off.png?direct |}}
-===== Downloads =====
-You can download the Mervis project files here: {{ :en:sw:01-mervis:creating-a-simple-hmi-project.zip |}}