Differences

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

--- en:sw:01-mervis:hmi-chart-hidden [2020/05/12 11:05]
avsetula created
+++ en:sw:01-mervis:hmi-chart-hidden [2021/08/02 13:01] (current)
avsetula
@@ Line 1: / Line 1: @@
-====== Chart - HMI gadget ======
+====== Chart ======
+<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-simple-hmi-hidden|created a graphic HMI template and attached it to a PLC]]
+  - switched the Mervis IDE project into [[en:sw:01-mervis:creating-new-project-hidden#switching_from_simple_mode_to_full_mode|Full Mode]]
+</WRAP>
+<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/en:sw:01-mervis:01_hmi-chart_en.png" />
+</figure></html>
+\\
+<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.
+<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/en:sw:01-mervis:02_hmi-chart_en.png" />
+</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.
+<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/en:sw:01-mervis:03_hmi-chart_en.png" />
+</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|}}.
+<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/en:sw:01-mervis:04_hmi-chart_en.png" />
+</figure></html>
+<html><span class="avBlueText">Chart Mappings</span></html> dialogue window will open. The window could be divided into two parts:
+  - The upper part for setting a single or multiple Y-axes
+  - 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/en:sw:01-mervis:05_hmi-chart_en.png)">
+<img src="https://kb.unipi.technology/_media/en:sw:01-mervis:05_hmi-chart_en.png" />
+</figure></html>
+As we need only a single Y-axis, we will leave the predefined <html><span class="avOrangeText">Axis 1</span></html> unchanged. We can also set its minimal or maximal value. If the auto is left on, the <html><span class="avOrangeText">Axis 1</span></html> will dynamically change according to values displayed.
+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/en:sw:01-mervis:06_hmi-chart_en.png)">
+<img src="https://kb.unipi.technology/_media/en:sw:01-mervis:06_hmi-chart_en.png" />
+</figure></html>
+The most important item here is <html><span class="avBlueText">Variable</span></html>. Click on {{:files:dialog-open_button.png?nolink|}}.
+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/en:sw:01-mervis:07_hmi-chart_en.png)">
+<img src="https://kb.unipi.technology/_media/en:sw:01-mervis:07_hmi-chart_en.png" />
+</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.
+<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/en:sw:01-mervis:08_hmi-chart_en.png" />
+</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**.
+<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/en:sw:01-mervis:09_hmi-chart_en.png" />
+</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.
+<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/en:sw:01-mervis:10_hmi-chart_en.png" />
+</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">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/en:sw:01-mervis:11_hmi-chart_en.png)">
+<img src="https://kb.unipi.technology/_media/en:sw:01-mervis:11_hmi-chart_en.png" />
+</figure></html>
+The values are now stored in the history. Wait for 5 minutes and then open the chart page. Data should be visible now.
+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/en:sw:01-mervis:12_hmi-chart_en.png)">
+<img src="https://kb.unipi.technology/_media/en:sw:01-mervis:12_hmi-chart_en.png" />
+</figure></html>