{"id":26796,"date":"2026-07-22T11:53:11","date_gmt":"2026-07-22T09:53:11","guid":{"rendered":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?p=26796"},"modified":"2026-07-31T14:09:09","modified_gmt":"2026-07-31T12:09:09","slug":"wprowadzenie-do-stylow-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-24","status":"publish","type":"post","link":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/wprowadzenie-do-stylow-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-24\/","title":{"rendered":"Wprowadzenie do styl\u00f3w | Kurs\u00a0Industrial Graphics w oprogramowaniu AVEVA, odc. 24"},"content":{"rendered":"\n
<\/div>\n\n\n\n

W tym odcinku poznamy style element\u00f3w i dowiemy si\u0119, jak mo\u017cemy je wykorzysta\u0107.<\/p>\n\n\n

\n

Kurs projektowania symboli Industrial Graphics w oprogramowaniu wizualizacyjnym AVEVA<\/strong><\/h3>\n1. Wprowadzenie do Industrial Graphics<\/a>
\n\n
\n
Edytor Industrial Graphics<\/h5>\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<\/a>
\n9. Tworzenie symboli na podstawie zmiennych<\/a>
\n10. Wykorzystanie grafiki SVG w symbolach<\/a><\/td>\n
Projektowanie symboli<\/h5>\n11. Rysowanie linii<\/a>
\n12. Rysowanie kszta\u0142t\u00f3w<\/a>
\n13. Teksty i pola tekstowe<\/a>
\n14. Wy\u015bwietlanie statusu jako\u015bci danych<\/a>
\n15. Praca z przyciskami wyboru (radio buttons)<\/a>
\n16. Praca z kontrolk\u0105 kalendarza<\/a>
\n17. Praca z kontrolk\u0105 wyboru daty i czasu<\/a>
\n
Animacje<\/h5>\n18. Wprowadzenie do animacji<\/a>
\n19. Animacja wype\u0142nienia procentowego<\/a><\/td>\n
20. Animacja wy\u015bwietlania warto\u015bci<\/a>
\n21. Animacja wprowadzania warto\u015bci<\/a>
\n
Narz\u0119dzia zaawansowane<\/h5>\n22. Wprowadzenie do w\u0142a\u015bciwo\u015bci Custom Properties<\/a>
\n23. Dodawanie w\u0142a\u015bciwo\u015bci Custom Properties<\/a>
\n24. Wprowadzenie do styl\u00f3w<\/a>
\n25. Wprowadzenie do skrypt\u00f3w<\/a>
\n26. Edytor skrypt\u00f3w Industrial Graphics<\/a>
\n27. U\u017cywanie zewn\u0119trznych bibliotek w skryptach<\/a><\/td>\n<\/tr><\/tbody><\/table>\n<\/div>\n\n\n

Style element\u00f3w umo\u017cliwiaj\u0105 zdefiniowanie standardu wygl\u0105du graficznego element\u00f3w symboli Industrial Graphics, tak aby mo\u017cna go by\u0142o \u0142atwo u\u017cywa\u0107 w ca\u0142ej aplikacji. Gdy mamy zdefiniowany gotowy styl, mo\u017cna go jednym klikni\u0119ciem zastosowa\u0107 do ka\u017cdego elementu graficznego, takiego jak linia, kszta\u0142t, czy tekst.<\/p>\n\n\n\n

Przyk\u0142adem zastosowania styli jest biblioteka symboli Situational Awareness, kt\u00f3ra u\u017cywa styl\u00f3w, by zapewni\u0107 sp\u00f3jno\u015b\u0107 wygl\u0105du wszystkich element\u00f3w wyst\u0119puj\u0105cych w tej bibliotece.<\/p>\n\n\n\n

W edytorze symboli mamy dodanych kilka podstawowych element\u00f3w: lini\u0119, prostok\u0105t wype\u0142niony bia\u0142ym kolorem oraz tekst.<\/p>\n\n\n\n

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

Style dost\u0119pne s\u0105 z listy rozwijanej, dost\u0119pnej na pasku narz\u0119dziowym edytora.<\/p>\n\n\n\n

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

Domy\u015blnie ka\u017cdy element ma przypisany styl None<\/strong>, czyli brak stylu. Lista zawiera zestaw predefiniowanych styl\u00f3w.<\/p>\n\n\n\n

Zaznaczmy pierwszy element, czyli odcinek, a nast\u0119pnie z listy wybierzmy przyk\u0142adowy styl Control_line<\/strong>.<\/p>\n\n\n\n

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

Jak wida\u0107, wygl\u0105d odcinka zmieni\u0142 si\u0119 na zgodny z wybranym stylem.<\/p>\n\n\n\n

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

Gdy zaznaczymy ten element, przekonamy si\u0119, \u017ce wiele opcji edycyjnych na pasku narz\u0119dzi jest teraz niedost\u0119pnych \u2013 te ustawienia s\u0105 teraz kontrolowane przez ustawiony styl.<\/p>\n\n\n\n

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

Zaznaczmy teraz prostok\u0105t i wybierzmy dla niego styl. Na li\u015bcie rozwijalnej znajdziemy r\u00f3wnie\u017c wyszukiwark\u0119. Je\u017celi znamy nazw\u0119 stylu, mo\u017cemy j\u0105 tu wpisa\u0107, bez konieczno\u015bci szukania na d\u0142ugiej li\u015bcie.<\/p>\n\n\n\n

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

Wybieramy styl Active<\/strong> i widzimy, jak zmieni\u0142 si\u0119 wygl\u0105d elementu. Ponownie ustawienia na pasku narz\u0119dziowym s\u0105 teraz niedost\u0119pne.<\/p>\n\n\n\n

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

Na koniec zobaczmy, jak to wygl\u0105da w przypadku tekstu. Zaznaczamy go i wyszukujemy styl Heading<\/strong>.<\/p>\n\n\n\n

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

Tekst zmieni\u0142 wygl\u0105d, a wi\u0119kszo\u015b\u0107 ustawie\u0144 ponownie jest niedost\u0119pna.<\/p>\n\n\n\n

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

Zauwa\u017cmy jeszcze, \u017ce styl mo\u017cna r\u00f3wnie\u017c wybiera\u0107 w panelu Properties<\/strong>. W grupie w\u0142a\u015bciwo\u015bci Appearance<\/strong> znajdziemy pole ElmentStyle<\/strong>, gdzie dost\u0119pna jest lista wszystkich styl\u00f3w.<\/p>\n\n\n\n

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

Wszystkie powy\u017csze przyk\u0142ady pokazywa\u0142y wykorzystanie predefiniowanych styl\u00f3w. To jednak nie wszystko. Ka\u017cdy z tych predefiniowanych styl\u00f3w mo\u017cna modyfikowa\u0107, mo\u017cliwe jest r\u00f3wnie\u017c tworzenie w\u0142asnych. Mo\u017cemy to zrobi\u0107 z poziomu biblioteki styl\u00f3w (Style Library<\/strong>). To, gdzie j\u0105 znajdziemy, zale\u017cy od konkretnego oprogramowania SCADA, kt\u00f3rego u\u017cywamy. Na potrzeby tego kursu pos\u0142u\u017cymy si\u0119 przyk\u0142adem programu InTouch HMI.<\/p>\n\n\n\n

W programie WindowMaker<\/strong> przechodzimy na zak\u0142adk\u0119 wst\u0105\u017cki File<\/strong>, wybieramy opcj\u0119 Configure<\/strong>, a nast\u0119pnie Styles<\/strong>. Po prawej stronie zobaczymy zawarto\u015b\u0107 biblioteki styl\u00f3w, uporz\u0105dkowan\u0105 wg grup element\u00f3w.<\/p>\n\n\n\n

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

Typowe style dla podstawowych element\u00f3w graficznych znajdziemy na zak\u0142adce HMI element<\/strong>. Znajdziemy tu wszystkie przyk\u0142adowe style, kt\u00f3rych u\u017cywali\u015bmy powy\u017cej.<\/p>\n\n\n\n

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

Dla ka\u017cdego stylu widzimy jego nazw\u0119, podgl\u0105d, a tak\u017ce wyra\u017con\u0105 za pomoc\u0105 prostych ikonek informacj\u0119, jaki rodzaj ustawie\u0144 modyfikuje dany styl. Dla przyk\u0142adu poni\u017cej widoczny styl Active<\/strong> modyfikuje ustawienia wype\u0142nienia oraz linii.<\/p>\n\n\n\n

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

Aby zmieni\u0107 ustawienia stylu, klikamy t\u0119 ikonk\u0119:<\/p>\n\n\n\n

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

W przypadku styl\u00f3w predefiniowanych nie mo\u017cna zmieni\u0107 ich nazwy (nie mo\u017cna ich te\u017c usun\u0105\u0107), natomiast wszystkie pozosta\u0142e ustawienia s\u0105 konfigurowalne. Te, kt\u00f3re s\u0105 obecnie nadpisywane przez styl, maj\u0105 w\u0142\u0105czone checkboxy.<\/p>\n\n\n\n

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

Na czterech zak\u0142adkach mo\u017cemy zmieni\u0107 parametry:<\/p>\n\n\n\n