Differences

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

--- en:sw:01-mervis:creating-simple-hmi-hidden [2020/05/13 12:57]
jan_kozak
+++ en:sw:01-mervis:creating-simple-hmi-hidden [2023/08/25 11:50] (current)
avsetula
@@ Line 1: / Line 1: @@
-/* ====== Creating a HMI for local PLC webserver ======
+====== Creating a HMI for local PLC webserver ======
 {{page>creating-hmi-intro-hidden}}
@@ Line 9: / Line 9: @@
 {{page>creating-hmi-template-hidden}}
-<html><figure ondblclick="redirectImg(this)" class="zoom" onclick="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:01_creating-simple-hmi-cz.png)">
+<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/cs:sw:01-mervis:01_creating-simple-hmi-cz.png" />
+<img src="https://kb.unipi.technology/_media/en:sw:01-mervis:01_creating-simple-hmi-en.png" />
 </figure></html>
@@ Line 20: / Line 20: @@
 </WRAP>
-You now need to assign the template to your PLC. 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/cs:sw:01-mervis:02_creating-simple-hmi-cz.png)">
+<html><div class="directTag" id="assign_the_template"></div></html>
-<img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:02_creating-simple-hmi-cz.png" />
+<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>
@@ Line 38: / Line 43: @@
 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}}
-/* původní část */
-====== Creating a HMI for local PLC web server ======
-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.
-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.
-===== Prerequisites =====
-  * UniPi controller running Mervis OS
-  * 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]].
-===== Creating HMI =====
-If you use [[attaching-1-wire-devices-hidden|previous tutorial]], your workspace should look like this:
-{{ :en:sw:01-mervis:creating-simple-hmi-01-workspace.png?direct |}}
-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 |}}
-A **New HMI Project** dialogue 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* dialogue 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 dialogue, the new template is created and opened. In the **Left panel** switch to the **HMI Gadget Explorer**. Now 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 can 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** dialogue 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 the 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 than the size of the element, you can resize it by grabbing 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 the 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, a 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 |}}
-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**.
-Switch to the **Solution** tab in the **Left panel**, select your PLC and in the **Properties panel** scroll 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.
-{{ :en:sw:01-mervis:creating-simple-hmi-18-select-device-template.png?direct |}}
-Now **Deploy** the solution and make sure, that you have **Web** options selected.
-{{ :en:sw:01-mervis:creating-simple-hmi-19-deploying.png?direct |}}
-After successful deployment, open your favourite 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.
-{{ :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 |}}