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-image-hidden [2021/08/02 13:01]
avsetula
en:sw:01-mervis:hmi-image-hidden [2021/08/03 05:21] (current)
lpolcerova
Line 1: Line 1:
 ====== Image ====== ====== Image ======
 +
 <WRAP group> <WRAP group>
 <WRAP half column 81%> <WRAP half column 81%>
-Create a new project or integrate into an already existing one. +Create a new project or integrate into an already existing one.
 </​WRAP>​ </​WRAP>​
 <WRAP half column 15%> <WRAP half column 15%>
Line 16: Line 17:
  
 <WRAP center round box> <WRAP center round box>
-<​html><​span class="​kbBlue-H4alt">​Pro účely tohoto návodu je třeba:</​span></​html>​ +<​html><​span class="​kbBlue-H4alt">​For the purpose of this tutorial:</​span></​html>​ 
-  - [[cs:​sw:​01-mervis:​creating-new-project-hidden|vytvořit projekt ​přiřadit ​PLC]] +  - [[en:​sw:​01-mervis:​creating-new-project-hidden|create a project and attach ​a PLC]] 
-  - [[cs:​sw:​01-mervis:​creating-simple-hmi-hidden|vytvořit grafickou HMI šablonu ​přiřadit ji k PLC]]+  - [[en:​sw:​01-mervis:​creating-simple-hmi-hidden|create ​graphical HMI template and assign it to the PLC]]
 </​WRAP>​ </​WRAP>​
  
Line 26: Line 27:
  
 \\ \\
-<​html><​span class="​kbBlueText">​Pokud máte vše uvedené připravenopokračujte dle následujícího návodu:</​span></​html>​+<​html><​span class="​kbBlueText">​If you have everything listed readyfollow the instructions below:</​span></​html>​
  
 ---- ----
  
-Složka ​<​html><​span class="​avBlueText">​Resources</​span></​html> ​slouží pro vkládání zdrojových datnapř. stylů ​HMI objektůnebo právě obrázků.+The <​html><​span class="​avBlueText">​Resources</​span></​html> ​folder is used for storing source datasuch as styles of HMI objectsor just images. 
  
 <​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-image_en.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-image_en.png)">​
Line 36: Line 38:
 </​figure></​html>​ </​figure></​html>​
  
-Vždy doporučujeme řadit zdrojová ​data podle obsahu do samostatných adresářůPro vytvoření nového adresáře klikněte pravým tlačítkem myši na složku ​<​html><​span class="​avBlueText">​Resources</​span></​html> ​a v kontextovém menu vyberte ​<​html><​span class="​avBlueText">​Add > Add Directory</​span></​html>​.+We always recommend sorting the source ​data by content into separate directoriesTo create a new directory, right-click on the <​html><​span class="​avBlueText">​Resources</​span></​html> ​folder in the left panel and select ​<​html><​span class="​avBlueText">​Add > Add Directory</​span></​html> ​from context menu.
  
 <​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-image_en.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-image_en.png)">​
Line 42: Line 44:
 </​figure></​html>​ </​figure></​html>​
  
-Vložte název nového adresáře ​(v případě návodu je použit název ​<​html><​span class="​avOrangeText">​My images</​span></​html>​) ​a klikněte na <​html><​span class="​avBlueText">​OK</​span></​html> ​pro potvrzení.+Enter the name of the new directory ​(in the case of the manual, the name <​html><​span class="​avOrangeText">​My images</​span></​html> ​is usedand click <​html><​span class="​avBlueText">​OK</​span></​html> ​to confirm.
  
 {{ :​en:​sw:​01-mervis:​04_hmi-image_en.png?​nolink |}} {{ :​en:​sw:​01-mervis:​04_hmi-image_en.png?​nolink |}}
  
-Pomocí šipky vpravo od složky ​<​html><​span class="​avBlueText">​Resources</​span></​html> ​rozbalte její obsahkde je také nově vytvořená složka se zvoleným názvemNyní na ni klikněte pravým tlačítkem myši a v kontextovém menu vyberte ​<​html><​span class="​avBlueText">​Add > Add Image</​span></​html>​.+Use the arrow to the left of the <​html><​span class="​avBlueText">​Resources</​span></​html> ​folder to expand its contextswhich also contains the newly created folder with the chosen nameNow right-click on it and select ​<​html><​span class="​avBlueText">​Add > Add Image</​span></​html> ​from context menu.
  
 <​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-image_en.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-image_en.png)">​
Line 52: Line 54:
 </​figure></​html>​ </​figure></​html>​
  
-Na následujícím snímku jsou již vidět vložené obrázky ve vlastním adresářikteré lze dále použít v HMI template.+The following image shows the embedded images in your own directorywhich can be used in the HMI template.
  
 <​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-image_en.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-image_en.png)">​
Line 58: Line 60:
 </​figure></​html>​ </​figure></​html>​
  
-Dvojklikem otevřete ​HMI template ​a pro vložení obrázku do tempate klikněte ve spodní části levého panelu na <​html><​span class="​avBlueText">​HMI Gadget Explorer</​span></​html>​, tím zobrazíte nabídku s prvky (gadgets) ​pro Mervis HMI. +Double-click to open the HMI template ​and to insert the image into the template, click on the <​html><​span class="​avBlueText">​HMI Gadget Explorer</​span></​html> ​at the bottom of the sidebar to display the menu with elements ​(gadgets) ​for Mervis HMI. 
  
 <​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-image_en.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-image_en.png)">​
Line 64: Line 66:
 </​figure></​html>​ </​figure></​html>​
  
-Zde za pomoci myši přetáhněte prvek <​html><​span class="​avBlueText">​Image</​span></​html> ​na HMI template ​otevřenou v pracovním prostoru.+Here, use the mouse to drag the <​html><​span class="​avBlueText">​Image</​span></​html> ​element onto the HMI template ​open in the workspace.
  
 <​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-image_en.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-image_en.png)">​
Line 70: Line 72:
 </​figure></​html>​ </​figure></​html>​
  
-Klikem, nebo tahem označte vložený prvekV pravém sloupci jeho vlastností nyní klikněte na <​html><​span class="​avBlueText">​Image Source</​span></​html> ​a následně otevřete nabídku pomocí tlačítka ​{{:​files:​dialog-open_button.png?​nolink|}}.+Click or drag mouse to select the inserted elementNow, click on <​html><​span class="​avBlueText">​Image Source</​span></​html> ​in the right column of its properties and then open the menu with the 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:​09_hmi-image_en.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-image_en.png)">​
Line 76: Line 78:
 </​figure></​html>​ </​figure></​html>​
  
-Otevře se dialogové okno pro výběr obrázkuzde vyberte žádaný obrázek a klikněte na <​html><​span class="​avBlueText">​OK</​span></​html> ​pro potvrzení.+The image selection dialog box opensselect the desired image here and click <​html><​span class="​avBlueText">​OK</​span></​html> ​to confirm.
  
 {{ :​en:​sw:​01-mervis:​10_hmi-image_en.png?​nolink |}} {{ :​en:​sw:​01-mervis:​10_hmi-image_en.png?​nolink |}}
  
-Po vložení lze měnit ​<​html><​span class="​avOrangeText">​positon,​ sizes, stretch, rotation</​span></​html>​ and <​html><​span class="​avOrangeText">​mirroring</​span></​html>​ of image. ​Výsledek může vypadat např. jako na následujícím snímku:+Once inserted, you can change the <​html><​span class="​avOrangeText">​positon,​ sizes, stretch, rotation</​span></​html>​ and <​html><​span class="​avOrangeText">​mirroring</​span></​html>​ of the image. ​The result may look like the following image:
  
 <​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-image_en.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-image_en.png)">​
 <img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​11_hmi-image_en.png"​ /> <img src="​https://​kb.unipi.technology/​_media/​en:​sw:​01-mervis:​11_hmi-image_en.png"​ />
 </​figure></​html>​ </​figure></​html>​