Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
en:sw:01-mervis:creating-simple-hmi-hidden [2018/06/11 10:23]
martin_kudlacek [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 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 ​display if the heating is ON or OFF.+Create ​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 tutorialwe will use [[https://www.unipi.technology/​unipi-neuron-l503-p105?​categoryId=10|Unipi Neuron L503]].+{{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 underscoreie. 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}}