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-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> |
- | - [[en:sw:01-mervis:creating-new-project-hidden|vytvořit projekt a přiřadit PLC]] | + | - [[en:sw:01-mervis:creating-new-project-hidden|create a project and attach a PLC]] |
- | - [[en:sw:01-mervis:creating-simple-hmi-hidden|vytvořit grafickou HMI šablonu a přiřadit ji k PLC]] | + | - [[en:sw:01-mervis:creating-simple-hmi-hidden|create a 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řipraveno, pokračujte dle následujícího návodu:</span></html> | + | <html><span class="kbBlueText">If you have everything listed ready, follow the instructions below:</span></html> |
---- | ---- | ||
- | Složka <html><span class="avBlueText">Resources</span></html> slouží pro vkládání zdrojových dat, např. stylů HMI objektů, nebo právě obrázků. | + | The <html><span class="avBlueText">Resources</span></html> folder is used for storing source data, such as styles of HMI objects, or 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 directories. To 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 used) and 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í obsah, kde je také nově vytvořená složka se zvoleným názvem. Nyní 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 contexts, which also contains the newly created folder with the chosen name. Now 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áři, které lze dále použít v HMI template. | + | The following image shows the embedded images in your own directory, which 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ý prvek. V 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 element. Now, 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ázku, zde vyberte žádaný obrázek a klikněte na <html><span class="avBlueText">OK</span></html> pro potvrzení. | + | The image selection dialog box opens, select 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> |