Differences

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

--- cs:sw:01-mervis:hmi-chart-hidden [2020/05/12 11:04]
avsetula
+++ cs:sw:01-mervis:hmi-chart-hidden [2021/08/02 13:01]
avsetula
@@ Line 1: / Line 1: @@
-====== Chart (graf) - prvek HMI ======
+====== Chart (graf) ======
-Vytvořte nový projekt, nebo integrujte do vašeho stávajícího projektu. Pro účely tohoto návodu jsme:
+<WRAP group>
-  - [[cs:sw:01-mervis:creating-new-project-hidden|vytvořili projekt a přiřadili PLC]]
+<WRAP half column 81%>
-  - [[cs:sw:01-mervis:creating-simple-hmi-hidden|vytvořili grafickou HMI šablonu a přiřadili ji k PLC]]
+Vytvořte nový projekt, nebo integrujte do vašeho stávajícího projektu.
-  - nastavili [[cs:sw:01-mervis:creating-simple-hmi-hidden#zabezpeceni_hmi|zabezpečení HMI]]
+</WRAP>
-  - převedli jsme projekt Mervis IDE [[cs:sw:01-mervis:creating-new-project-hidden#prepnuti_ze_zjednoduseneho_modu_na_plny_mod|do plného módu]]
+<WRAP half column 15%>
-  - [[cs:sw:01-mervis:creating-new-project-hidden#zabezpeceni_kontroleru|zabezpečili PLC]]
+;;#
+<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>
-<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)">
+<WRAP center round box>
+<html><span class="kbBlue-H4alt">Pro účely tohoto návodu je třeba:</span></html>
+  - [[cs:sw:01-mervis:creating-new-project-hidden|vytvořit projekt a přiřadit PLC]]
+  - [[cs:sw:01-mervis:creating-simple-hmi-hidden|vytvořit grafickou HMI šablonu a přiřadit ji k PLC]]
+  - převést projekt v Mervis IDE [[cs:sw:01-mervis:creating-new-project-hidden#prepnuti_ze_zjednoduseneho_modu_na_plny_mod|do plného módu]]
+</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)">
 <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:01_hmi-chart_cz.png" />
 </figure></html>
-Pokud máte vše uvedené připraveno, pokračujte dle následujícího návodu:
+\\
+<html><span class="kbBlueText">Pokud máte vše uvedené připraveno, pokračujte dle následujícího návodu:</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)">
+<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)">
 <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:02_hmi-chart_cz.png" />
 </figure></html>
@@ Line 21: / Line 39: @@
 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.
-<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/cs:sw:01-mervis:03_hmi-chart_cz.png)">
 <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:03_hmi-chart_cz.png" />
 </figure></html>
@@ Line 28: / Line 46: @@
 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/cs:sw:01-mervis:04_hmi-chart_cz.png)">
 <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:04_hmi-chart_cz.png" />
 </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í:
-  - Horní část slouží k nastavení jedné, či více os Y
+  - Horní část slouží k nastavení jedné, či více os Y
-  - 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ží
+  - 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ží
-<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/cs:sw:01-mervis:05_hmi-chart_cz.png)">
 <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:05_hmi-chart_cz.png" />
 </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.
+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.
 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é.
-<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/cs:sw:01-mervis:06_hmi-chart_cz.png)">
 <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:06_hmi-chart_cz.png" />
 </figure></html>
@@ Line 50: / Line 68: @@
 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.
-<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/cs:sw:01-mervis:07_hmi-chart_cz.png)">
 <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:07_hmi-chart_cz.png" />
 </figure></html>
@@ Line 56: / Line 74: @@
 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>.
-<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/cs:sw:01-mervis:08_hmi-chart_cz.png)">
 <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:08_hmi-chart_cz.png" />
 </figure></html>
@@ Line 62: / Line 80: @@
 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**.
-<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/cs:sw:01-mervis:09_hmi-chart_cz.png)">
 <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:09_hmi-chart_cz.png" />
 </figure></html>
@@ Line 68: / Line 86: @@
 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.
-<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/cs:sw:01-mervis:10_hmi-chart_cz.png)">
 <img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:10_hmi-chart_cz.png" />
 </figure></html>
-Máte-li použité proměnné v historii, <html><span class="avOrangeText">nahrajte sestavu</span></html> do PLC.
+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.
+<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)">
+<img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:11_hmi-chart_cz.png" />
+</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.
-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.
+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.
-<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/cs:sw:01-mervis:12_hmi-chart_cz.png)">
-<img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:11_hmi-chart_cz.png" />
+<img src="https://kb.unipi.technology/_media/cs:sw:01-mervis:12_hmi-chart_cz.png" />
 </figure></html>