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
cs:sw:01-mervis:hmi-chart-hidden [2020/05/13 07:17]
avsetula
cs:sw:01-mervis:hmi-chart-hidden [2024/03/14 09:39] (current)
kcerny typos
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"​ /> <img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​01_hmi-chart_cz.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">​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. 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"​ /> <img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​02_hmi-chart_cz.png"​ />
 </​figure></​html>​ </​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. 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"​ /> <img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​03_hmi-chart_cz.png"​ />
 </​figure></​html>​ </​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|}}. 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"​ /> <img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​04_hmi-chart_cz.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í: 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"​ /> <img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​05_hmi-chart_cz.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.+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é. 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"​ /> <img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​06_hmi-chart_cz.png"​ />
 </​figure></​html>​ </​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. 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"​ /> <img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​07_hmi-chart_cz.png"​ />
 </​figure></​html>​ </​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>​. 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"​ /> <img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​08_hmi-chart_cz.png"​ />
 </​figure></​html>​ </​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**. ​ 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"​ /> <img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​09_hmi-chart_cz.png"​ />
 </​figure></​html>​ </​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. 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"​ /> <img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​10_hmi-chart_cz.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 ​**výstup** naléznout ​informace o zálohování do historie.+Máte-li použité proměnné v historii, <​html><​span class="​avOrangeText">​nahrajte sestavu</​span></​html>​ do PLC. Po nahrání ​můžete pod kolonkou ​<​html><​span class="​avBlueText">​Výstup</​span></​html>​ naleznout ​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" ​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:​11_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:​11_hmi-chart_cz.png"​ />
 </​figure></​html>​ </​figure></​html>​
Line 80: Line 98:
 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. ​ 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:​12_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:​12_hmi-chart_cz.png"​ /> <img src="​https://​kb.unipi.technology/​_media/​cs:​sw:​01-mervis:​12_hmi-chart_cz.png"​ />
 </​figure></​html>​ </​figure></​html>​