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 06:17]
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}}
  
-===== Prerequisites ===== +Create a new project ​or integrate into an already existing one
-  * 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 tutorialwe will use [[https://www.unipi.technology/​unipi-neuron-l503-p105?​categoryId=10|Unipi Neuron L503]].+===== 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 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}}