{"id":26298,"date":"2026-07-01T12:48:52","date_gmt":"2026-07-01T10:48:52","guid":{"rendered":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?p=26298"},"modified":"2026-07-27T18:32:14","modified_gmt":"2026-07-27T16:32:14","slug":"grupowanie-elementow-graficznych-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-4","status":"publish","type":"post","link":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/grupowanie-elementow-graficznych-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-4\/","title":{"rendered":"Grupowanie element\u00f3w graficznych | Kurs\u00a0Industrial Graphics w oprogramowaniu AVEVA, odc. 4"},"content":{"rendered":"\n
<\/div>\n\n\n\n

W tym odcinku nauczymy si\u0119 grupowa\u0107 elementy graficzne w edytorze Industrial Graphics.<\/p>\n\n\n

\n

Kurs projektowania symboli Industrial Graphics w oprogramowaniu wizualizacyjnym AVEVA<\/strong><\/h3>\n1. Wprowadzenie do Industrial Graphics<\/a>
\n

Edytor Industrial Graphics<\/h4>\n2. Edytor symboli Industrial Graphics<\/a>
\n3. Zaznaczanie i przesuwanie element\u00f3w graficznych<\/a>
\n4. Grupowanie element\u00f3w graficznych<\/a>
\n5. Wyr\u00f3wnywanie element\u00f3w graficznych<\/a>
\n6. Zmiana orientacji element\u00f3w graficznych<\/a>
\n7. Kolejno\u015b\u0107 element\u00f3w w osi Z (z-order)<\/a>
\n8. Dynamiczna zmiana rozmiaru
\n9. Tworzenie symboli na podstawie zmiennych
\n10. Wykorzystanie grafiki SVG w symbolach
\n

Rysowanie w Industrial Graphics<\/h4>\n11. Rysowanie linii
\n12. Rysowanie kszta\u0142t\u00f3w
\n13. Teksty i pola tekstowe
\n14. Wy\u015bwietlanie statusu jako\u015bci danych
\n15. Praca z przyciskami wyboru (radio buttons)
\n16. Praca z kontrolk\u0105 kalendarza
\n17. Praca z kontrolk\u0105 wyboru daty i czasu
\n

Animacje<\/h4>\n18. Wprowadzenie do animacji
\n19. Animacja wype\u0142nienia procentowego
\n20. Animacja wy\u015bwietlania warto\u015bci
\n21. Animacja wprowadzania warto\u015bci
\n

Custom Properties<\/h4>\n22. Wprowadzenie do w\u0142a\u015bciwo\u015bci Custom Properties
\n23. Dodawanie w\u0142a\u015bciwo\u015bci Custom Properties
\n

Style<\/h4>\n24. Wprowadzenie do styl\u00f3w
\n

Skrypty<\/h4>\n25. Wprowadzenie do skrypt\u00f3w
\n26. Edytor skrypt\u00f3w Industrial Graphics
\n<\/div>\n\n\n

Je\u015bli zaznaczymy wi\u0119cej ni\u017c jeden element, mo\u017cna je zgrupowa\u0107 za pomoc\u0105 przycisku Group<\/strong>, znajduj\u0105cego si\u0119 na pasku narz\u0119dzi.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Klikni\u0119cie go spowoduje, \u017ce wszystkie zaznaczone elementy stan\u0105 si\u0119 cz\u0119\u015bci\u0105 jednej grupy. Na li\u015bcie Elements<\/strong> te cztery elementy, kt\u00f3re zgrupowali\u015bmy, s\u0105 po\u0142\u0105czone w postaci drzewka pod nazw\u0105 Group1<\/strong>, co pokazuje, \u017ce wszystkie nale\u017c\u0105 do jednej grupy.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Mo\u017cna je ponownie rozbi\u0107 na cz\u0119\u015bci sk\u0142adowe, klikaj\u0105c przycisk Ungroup<\/strong> na pasku narz\u0119dzi. Grupa zostanie usuni\u0119ta, a elementy ponownie stan\u0105 si\u0119 niezale\u017cne.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Je\u017celi klikniemy w grup\u0119 przyciskiem myszy jeden raz, zaznaczymy j\u0105.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Drugie klikni\u0119cie w grup\u0119 uruchamia tzw. tryb edycji, w kt\u00f3rym obramowanie grupy przybiera posta\u0107, jak poni\u017cej.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Trzecie klikni\u0119cie \u2013 w konkretny element grupy \u2013 pozwala nam na edycj\u0119 tego w\u0142a\u015bnie elementu. Wygl\u0105da to tak, jak poni\u017cej.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Od tej chwili elementy ca\u0142y czas pozostaj\u0105 zgrupowane, ale zaznaczony element mo\u017cemy \u2013 niezale\u017cnie od pozosta\u0142ych \u2013 modyfikowa\u0107. Mo\u017cemy go na przyk\u0142ad przesun\u0105\u0107:<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Mo\u017cemy te\u017c zmienia\u0107 jego rozmiar, wszystko bez rozbijania grupy:<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Poszczeg\u00f3lne elementy z grupy mo\u017cemy te\u017c zaznaczy\u0107, wybieraj\u0105c je z listy Elements.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Grupy tworzymy jednak po to, aby m\u00f3c manipulowa\u0107 nimi jako ca\u0142o\u015bci\u0105. Przyk\u0142adowo chwytaj\u0105c ten element na g\u00f3rze zaznaczenia mo\u017cemy obr\u00f3ci\u0107 ca\u0142\u0105 grup\u0119.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Jak wida\u0107, obr\u00f3cona zosta\u0142a ca\u0142a grupa, a nie indywidualnie poszczeg\u00f3lne elementy:<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Dla ca\u0142ej grupy mo\u017cna r\u00f3wnie\u017c definiowa\u0107 animacje, kt\u00f3re b\u0119dziemy omawia\u0107 w dalszej cz\u0119\u015bci kursu.<\/p>\n\n\n\n

Grupom mo\u017cna nadawa\u0107 przyjazne nazwy, podobnie jak poszczeg\u00f3lnym elementom.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Je\u017celi klikniemy prawym przyciskiem myszy zaznaczony element w grupie, pojawi si\u0119 menu kontekstowe. Wybieraj\u0105c opcj\u0119 Grouping  -> Remove from Group<\/strong> mo\u017cemy usun\u0105\u0107 wybrany element z grupy.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Je\u017celi to zrobimy, stanie si\u0119 on ponownie pojedynczym elementem, kt\u00f3rym mo\u017cna manipulowa\u0107 niezale\u017cnie od reszty grupy, z kt\u00f3rej go usun\u0119li\u015bmy.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Je\u017celi teraz zaznaczymy jednocze\u015bnie grup\u0119 oraz uprzednio usuni\u0119ty z niej element, w menu kontekstowym mo\u017cemy wybra\u0107 Grouping -> Add To Editing Group. W ten spos\u00f3b dodamy ten element z powrotem do grupy.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Zobaczmy teraz grupowanie element\u00f3w na bardziej praktycznym przyk\u0142adzie obiekt\u00f3w, kt\u00f3re grupujemy w rzeczywistym \u015bwiecie. Dodajmy do pola roboczego trzy elementy z biblioteki gotowych obiekt\u00f3w Industrial Graphics, przeci\u0105gaj\u0105c je z zak\u0142adki Toolbox. B\u0119d\u0105 to pompa, rura i zaw\u00f3r.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Umieszczamy te elementy tak, aby tworzy\u0142y prost\u0105 \u201einstalacj\u0119\u201d. Warto nada\u0107 poszszeg\u00f3lnym elementom przyjazne, proste nazwy: \u201eZawor\u201d, \u201eRura\u201d, \u201ePompa\u201d (nazwy nie mog\u0105 zawiera\u0107 polskich znak\u00f3w). Nast\u0119pnie zaznaczamy je wszystkie i grupujemy przyciskiem Group<\/strong>. Ca\u0142ej grupie mo\u017cemy nada\u0107 przyjazn\u0105 nazw\u0119, kt\u00f3ra powinna opisywa\u0107 funkcje tak stworzonego obiektu (np. \u201eWlot1\u201d).<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Jak wida\u0107, mamy w tej chwili grup\u0119, w kt\u00f3rej znajduj\u0105 si\u0119 trzy prosto i czytelnie nazwane elementy.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Dzi\u0119ki temu je\u017celi teraz zduplikujemy tak\u0105 grup\u0119 (klikaj\u0105c prawym przyciskiem myszy i wybieraj\u0105c Duplicate<\/strong> lub naciskaj\u0105c skr\u00f3t klawiszowy Ctrl+D<\/strong>), mo\u017cemy jej nada\u0107 inn\u0105 nazw\u0119 (np. \u201eWlot2\u201d), ale elementy sk\u0142adowe grupy b\u0119d\u0105 nosi\u0142y takie same nazwy, jak w oryginale.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

Grupy odgrywaj\u0105 jeszcze jedn\u0105 rol\u0119 w konwencji nazewnictwa obiekt\u00f3w w aplikacji. Je\u017celi tak\u0105 zgrupowan\u0105 grafik\u0119 osadzimy w innej grafice lub w oknie programu InTouch, lub gdy odwo\u0142ujemy si\u0119 w samej grafice do poszczeg\u00f3lnych element\u00f3w, konwencja nazewnictwa \u0142\u0105czy grupy i poszczeg\u00f3lne elementy. Na przyk\u0142ad, aby mie\u0107 dost\u0119p do w\u0142a\u015bciwo\u015bci zaworu, nale\u017ca\u0142oby zapisa\u0107 odniesienie jako:<\/p>\n\n\n\n

Wlot1.Zawor.nazwa_wlasciwosci<\/em><\/strong><\/p>\n\n\n\n

Mo\u017cliwe jest tak\u017ce grupowanie grup, dzi\u0119ki czemu mo\u017cna je zagnie\u017cd\u017ca\u0107. Je\u017celi zaznaczymy dwie grupy i wybierzemy polecenie Group<\/strong>, utworz\u0105 one now\u0105 grup\u0119. Istotne jest to, \u017ce nie powstaje w ten spos\u00f3b grupa, w kt\u00f3rej sk\u0142ad wchodzi suma element\u00f3w z grup sk\u0142adowych, lecz grupa z\u0142o\u017cona z dw\u00f3ch grup, z kt\u00f3rych ka\u017cda na swoje elementy sk\u0142adowe. Jest wi\u0119c to hierarchiczna, zagnie\u017cd\u017cona struktura. W poni\u017cszym utworzona zosta\u0142a grupa g\u0142\u00f3wna, kt\u00f3ra ma dwie grupy sk\u0142adowe, a ka\u017cda z nich sk\u0142ada si\u0119 z kolejnych grup. Wreszcie na ostatnim poziomi docieramy do poszczeg\u00f3lnych element\u00f3w sk\u0142adowych.<\/p>\n\n\n\n

<\/div>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
<\/div>\n\n\n\n

W nast\u0119pnym odcinku<\/a> poka\u017cemy, jak korzysta\u0107 z funkcji wyr\u00f3wnywania w edytorze Industrial Graphics.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\n
\n
\n

Newsletter Poradnika Automatyka<\/h3><\/div>\n

Czytaj trendy i inspiracje, podstawy automatyki, automatyk\u0119 w praktyce<\/p>\n<\/div>\n

\n
\n