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:hmi-chart-hidden [2020/05/13 12:09]
jan_kozak
en:sw:01-mervis:hmi-chart-hidden [2021/08/02 13:01] (current)
avsetula
Line 1: Line 1:
 ====== Chart ====== ====== Chart ======
-Create a new project or integrate into an already existing one. For this tutorial, we:+<WRAP group> 
 +<WRAP half column 81%> 
 +Create a new project or integrate into an already existing one.  
 +</​WRAP>​ 
 +<WRAP half column 15%> 
 +;;# 
 +<​html><​span class="​dev-tag dev-patron">​Patron</​span></​html>​ \\ 
 +<​html><​span class="​dev-tag dev-neuron">​Neuron</​span></​html>​ \\ 
 +<​html><​span class="​dev-tag dev-gate">​Gate</​span></​html>​ \\ 
 +<​html><​span class="​dev-tag dev-unipi11">​Unipi&​nbsp1.1</​span></​html>​ \\ 
 +<​html><​span class="​dev-tag dev-axon">​Axon</​span></​html>​ 
 +;;# 
 +</​WRAP>​ 
 +</​WRAP>​ 
 + 
 +<WRAP center round box> 
 +<​html><​span class="​kbBlue-H4alt">​For this tutorial, we:</​span></​html>​
   - [[en:​sw:​01-mervis:​creating-new-project-hidden|created a project and attached a PLC to it]]   - [[en:​sw:​01-mervis:​creating-new-project-hidden|created a project and attached a PLC to it]]
   - [[en:​sw:​01-mervis:​creating-simple-hmi-hidden|created a graphic HMI template and attached it to a PLC]]   - [[en:​sw:​01-mervis:​creating-simple-hmi-hidden|created a graphic HMI template and attached it to a PLC]]
-  - [[en:​sw:​01-mervis:​creating-simple-hmi-hidden#​zabezpeceni_hmi|secured the HMI]] 
   - switched the Mervis IDE project into [[en:​sw:​01-mervis:​creating-new-project-hidden#​switching_from_simple_mode_to_full_mode|Full Mode]]   - switched the Mervis IDE project into [[en:​sw:​01-mervis:​creating-new-project-hidden#​switching_from_simple_mode_to_full_mode|Full Mode]]
-  - [[en:​sw:​01-mervis:​creating-new-project-hidden#​securing_the_controller|secured the PLC]]+</​WRAP>​
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​01_hmi-chart_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_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​01_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​01_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​
  
-With all of the above set, continue according to the following guide: ​+\\ 
 +<​html><​span class="​kbBlueText">​With all of the above set, continue according to the following guide: ​</​span></​html>​ 
 + 
 +----
  
 Open the <​html><​span class="​avBlueText">​HMI template</​span></​html>​ by double-clicking on it and then click on a spodní části levého panelu klikněte na <​html><​span class="​avBlueText">​HMI objects</​span></​html>​ at the bottom of the left panel. A list of Mervis HMI elements will appear. ​ Open the <​html><​span class="​avBlueText">​HMI template</​span></​html>​ by double-clicking on it and then click on a spodní části levého panelu klikněte na <​html><​span class="​avBlueText">​HMI objects</​span></​html>​ at the bottom of the left panel. A list of Mervis HMI elements will appear. ​
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​02_hmi-chart_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:​02_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​02_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​02_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​
  
 Drag and drop the <​html><​span class="​avBlueText">​Chart</​span></​html>​ element to the <​html><​span class="​avBlueText">​HMI template</​span></​html>​ open on the canvas. Drag and drop the <​html><​span class="​avBlueText">​Chart</​span></​html>​ element to the <​html><​span class="​avBlueText">​HMI template</​span></​html>​ open on the canvas.
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​03_hmi-chart_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:​03_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​03_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​03_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​
  
 As the element will stay selected, a list of its properties is displayed in the right column. Here, click on <​html><​span class="​avBlueText">​Chart Mappings</​span></​html>​ and open its menu using this button: {{:​files:​dialog-open_button.png?​nolink|}}. As the element will stay selected, a list of its properties is displayed in the right column. Here, click on <​html><​span class="​avBlueText">​Chart Mappings</​span></​html>​ and open its menu using this button: {{:​files:​dialog-open_button.png?​nolink|}}.
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​04_hmi-chart_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:​04_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​04_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​04_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​
  
Line 35: Line 53:
   - The lower part for setting up the individual chart lines and their properties, ie. variable mapping, name, controller or Y-axis the variable belongs to   - The lower part for setting up the individual chart lines and their properties, ie. variable mapping, name, controller or Y-axis the variable belongs to
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​05_hmi-chart_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:​05_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​05_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​05_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​
  
Line 43: Line 61:
 At the bottom of the dialogue windows, click on <​html><​span class="​avBlueText">​Add</​span></​html>​ to display further properties of this mapped variable. ​ At the bottom of the dialogue windows, click on <​html><​span class="​avBlueText">​Add</​span></​html>​ to display further properties of this mapped variable. ​
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​06_hmi-chart_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:​06_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​06_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​06_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​
  
Line 50: Line 68:
 A variable selection dialogue will open - select the required variable you want to use in the chart. ​ A variable selection dialogue will open - select the required variable you want to use in the chart. ​
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​07_hmi-chart_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:​07_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​07_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​07_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​
  
 You can set additional properties, but these are out of this tutorial'​s scope for now. We will however add 3 more lines. In total, the chart will display 4 lines of <​html><​span class="​avOrangeText">​real</​span></​html>​ variables. ​ You can set additional properties, but these are out of this tutorial'​s scope for now. We will however add 3 more lines. In total, the chart will display 4 lines of <​html><​span class="​avOrangeText">​real</​span></​html>​ variables. ​
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​08_hmi-chart_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:​08_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​08_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​08_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​
  
 You can now deploy the project into the PLC. The chart will display values over time, but **their history will not be stored**. ​ You can now deploy the project into the PLC. The chart will display values over time, but **their history will not be stored**. ​
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​09_hmi-chart_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:​09_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​09_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​09_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​
  
 For storing historical values from the chart, you need to [[en:​sw:​01-mervis:​storing-data-to-mervis-db-hidden|create a history]] first, enable the storing of it or connect the PLC to the Mervis DB service. For storing historical values from the chart, you need to [[en:​sw:​01-mervis:​storing-data-to-mervis-db-hidden|create a history]] first, enable the storing of it or connect the PLC to the Mervis DB service.
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​10_hmi-chart_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:​10_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​10_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​10_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​
  
-If you added variables to the history, <​html><​span class="​avOrangeText">​deploy the solution</​span></​html>​ into the PLC. After that, you can check the <​html><​span class="​avBlueText">​Output</​span></​html>​ tab where you can find info about historical data. <​html><​span class="​avBlueText">​Max. history ​length</​span></​html>​ represents time over which it is possible to store data into the PLC's local history using the current number of variables of the given type. +If you added variables to the history, <​html><​span class="​avOrangeText">​deploy the solution</​span></​html>​ into the PLC. After that, you can check the <​html><​span class="​avBlueText">​Output</​span></​html>​ tab where you can find info about historical data. <​html><​span class="​avBlueText">​History maximal ​length</​span></​html>​ represents time over which it is possible to store data into the PLC's local history using the current number of variables of the given type. 
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​11_hmi-chart_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:​11_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​11_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​11_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​
  
Line 82: Line 100:
 You can also tell by the chart containing points with each point representing one specific status loaded from the history. By default values are stored every 60 seconds, these points should be then separated by one minute on the X-axis. ​ You can also tell by the chart containing points with each point representing one specific status loaded from the history. By default values are stored every 60 seconds, these points should be then separated by one minute on the X-axis. ​
  
-<​html><​figure ondblclick="​redirectImg(this)"​ class="​zoom"​ onclick="​zoom(event)"​ style="​background-image:​ url(https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​12_hmi-chart_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:​12_hmi-chart_en.png)">​ 
-<img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​12_hmi-chart_cz.png" />+<img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​12_hmi-chart_en.png" />
 </​figure></​html>​ </​figure></​html>​