Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
en:sw:01-mervis:hmi-chart-hidden [2020/05/13 08:39] jan_kozak |
en:sw:01-mervis:hmi-chart-hidden [2021/08/02 13:01] (current) avsetula |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Chart - HMI gadget ====== | + | ====== Chart ====== |
| - | Create a new project or integrate into an already existing one. For this tutorial, we: | + | <WRAP group> |
| - | Vytvořte nový projekt, nebo integrujte do vašeho stávajícího projektu. Pro účely tohoto návodu jsme: | + | <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 1.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#zabezpeceni_kontroleru|secured the PLC]] | + | </WRAP> |
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onmousemove="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> | ||
| - | Pokud máte vše uvedené připraveno, pokračujte dle následujícího návodu: | + | \\ |
| + | <html><span class="kbBlueText">With all of the above set, continue according to the following guide: </span></html> | ||
| - | Dvojklikem otevřete <html><span class="avBlueText">HMI šablonu</span></html> a spodní části levého panelu klikněte na <html><span class="avBlueText">HMI objekty</span></html>, tím zobrazíte nabídku s prvky pro Mervis HMI. | + | ---- |
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onmousemove="zoom(event)" style="background-image: url(https://kb.unipi.technology/_media/cs:sw:01-mervis:02_hmi-chart_cz.png)"> | + | 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. |
| - | <img src="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/en:sw:01-mervis:02_hmi-chart_en.png" /> | ||
| </figure></html> | </figure></html> | ||
| - | Zde za pomoci myši přetáhněte prvek <html><span class="avBlueText">Chart</span></html> na <html><span class="avBlueText">HMI šablonu</span></html> otevřenou v pracovním prostoru. | + | 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" onmousemove="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> | ||
| - | Tento prvek máte nyní označen a v pravém sloupci se vám proto zobrazí jeho vlastnosti. | + | 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|}}. |
| - | Zde klikněte na <html><span class="avBlueText">Mapování grafu</span></html> a otevřete nabídku pomocí tlačítka {{:files:dialog-open_button.png?nolink|}}. | + | |
| - | <html><figure ondblclick="redirectImg(this)" class="zoom" onmousemove="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> | ||
| - | Otevře se vám dialog <html><span class="avBlueText">Mapování grafu</span></html>, ten je pomyslně rozdělen do dvou částí: | + | <html><span class="avBlueText">Chart Mappings</span></html> dialogue window will open. The window could be divided into two parts: |
| - | - Horní část slouží k nastavení jedné, či více os Y | + | - The upper part for setting a single or multiple Y-axes |
| - | - Spodní část slouží pro nastavení jednotlivých řad v grafu a jejich vlastností, např.mapování proměnných, název, jednotku, či osu Y ke které proměnná náleží | + | - 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" onmousemove="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> | ||
| - | Protože nám postačí pouze jedna osa Y, ponecháme v horní části předem definovanou <html><span class="avOrangeText">osu 1</span></html>, můžeme u ní nastavit maximum nebo minimum. Pokud ponecháte auto, bude se <html><span class="avOrangeText">osa 1</span></html> dynamicky přizpůsobovat zobrazovaným hodnotám. | + | 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. |
| - | Nyní klikněte na <html><span class="avBlueText">přidat</span></html> ve spodní části dialogu, poté se zobrazí další nastavení této mapované proměnné. | + | 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" onmousemove="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> | ||
| - | Nejdůležitější je zde položka <html><span class="avBlueText">Proměnná</span></html>, zde klikněte na {{:files:dialog-open_button.png?nolink|}}. Otevře se dialog pro výběr proměnné, vyberete proto požadovanou proměnou, kterou chcete použít v grafu. | + | 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" onmousemove="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> | ||
| - | Můžete nastavit i další vlastnosti, v tomto návodu se tím nebudeme zabývat, ale přidáme další 3 řady. Celkem se nám v grafu budou zobrazovat 4 řady s proměnnými typu <html><span class="avOrangeText">real</span></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" onmousemove="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> | ||
| - | V tuto chvíli můžete projekt nahrát do PLC, graf vám bude vypisovat hodnoty v závislosti na čase, avšak **nebude se ukládat jejich historie**. | + | 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" onmousemove="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> | ||
| - | Pro ukládání historických hodnot, které by se zobrazily v grafu musíte nejprve [[cs:sw:01-mervis:storing-data-to-mervis-db-hidden|vytvořit záznam historie]], povolit ukládání a případně připojit k Mervis DB. | + | 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" onmousemove="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> | ||
| - | Máte-li použité proměnné v historii, <html><span class="avOrangeText">nahrajte sestavu</span></html> do PLC. Po nahrátí můžete pod kolonkou <html><span class="avBlueText">Výstup</span></html> naléznout informace o zálohování do historie. <html><span class="avBlueText">Max. délka historie</span></html> značí čas, jak dlouho je možné ukládat do lokálního záznamu PLC při současném počtu proměnných daného typu. | + | 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" onmousemove="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> | ||
| - | Nyní jsou již proměnné zálohovány do historie. Počkejte 5 minut a otevřete stránku s grafem, nyní už by mělo být viditelné, že si graf vyčetl hodnoty z historie. | + | The values are now stored in the history. Wait for 5 minutes and then open the chart page. Data should be visible now. |
| - | Poznáte to tak, že na grafu budou body a každý bod znázorňuje jeden uložený stav načtený z historie. Ve výchozím nastavení se hodnota ukládá jen jednou za minutu, proto od sebe budou body vzdáleny přesně jednu minutu na ose X. | + | 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" onmousemove="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> | ||
| - | |||
| - | |||
