Wprowadzenie do stylów
Kurs Industrial Graphics w oprogramowaniu AVEVA, odc. 24

W tym odcinku poznamy style elementów i dowiemy się, jak możemy je wykorzystać.

Style elementów umożliwiają zdefiniowanie standardu wyglądu graficznego elementów symboli Industrial Graphics, tak aby można go było łatwo używać w całej aplikacji. Gdy mamy zdefiniowany gotowy styl, można go jednym kliknięciem zastosować do każdego elementu graficznego, takiego jak linia, kształt, czy tekst.

Przykładem zastosowania styli jest biblioteka symboli Situational Awareness, która używa stylów, by zapewnić spójność wyglądu wszystkich elementów występujących w tej bibliotece.

W edytorze symboli mamy dodanych kilka podstawowych elementów: linię, prostokąt wypełniony białym kolorem oraz tekst.

Style dostępne są z listy rozwijanej, dostępnej na pasku narzędziowym edytora.

Domyślnie każdy element ma przypisany styl None, czyli brak stylu. Lista zawiera zestaw predefiniowanych stylów.

Zaznaczmy pierwszy element, czyli odcinek, a następnie z listy wybierzmy przykładowy styl Control_line.

Jak widać, wygląd odcinka zmienił się na zgodny z wybranym stylem.

Gdy zaznaczymy ten element, przekonamy się, że wiele opcji edycyjnych na pasku narzędzi jest teraz niedostępnych – te ustawienia są teraz kontrolowane przez ustawiony styl.

Zaznaczmy teraz prostokąt i wybierzmy dla niego styl. Na liście rozwijalnej znajdziemy również wyszukiwarkę. Jeżeli znamy nazwę stylu, możemy ją tu wpisać, bez konieczności szukania na długiej liście.

Wybieramy styl Active i widzimy, jak zmienił się wygląd elementu. Ponownie ustawienia na pasku narzędziowym są teraz niedostępne.

Na koniec zobaczmy, jak to wygląda w przypadku tekstu. Zaznaczamy go i wyszukujemy styl Heading.

Tekst zmienił wygląd, a większość ustawień ponownie jest niedostępna.

Zauważmy jeszcze, że styl można również wybierać w panelu Properties. W grupie właściwości Appearance znajdziemy pole ElmentStyle, gdzie dostępna jest lista wszystkich stylów.

Wszystkie powyższe przykłady pokazywały wykorzystanie predefiniowanych stylów. To jednak nie wszystko. Każdy z tych predefiniowanych stylów można modyfikować, możliwe jest również tworzenie własnych. Możemy to zrobić z poziomu biblioteki stylów (Style Library). To, gdzie ją znajdziemy, zależy od konkretnego oprogramowania SCADA, którego używamy. Na potrzeby tego kursu posłużymy się przykładem programu InTouch HMI.

W programie WindowMaker przechodzimy na zakładkę wstążki File, wybieramy opcję Configure, a następnie Styles. Po prawej stronie zobaczymy zawartość biblioteki stylów, uporządkowaną wg grup elementów.

Typowe style dla podstawowych elementów graficznych znajdziemy na zakładce HMI element. Znajdziemy tu wszystkie przykładowe style, których używaliśmy powyżej.

Dla każdego stylu widzimy jego nazwę, podgląd, a także wyrażoną za pomocą prostych ikonek informację, jaki rodzaj ustawień modyfikuje dany styl. Dla przykładu poniżej widoczny styl Active modyfikuje ustawienia wypełnienia oraz linii.

Aby zmienić ustawienia stylu, klikamy tę ikonkę:

W przypadku stylów predefiniowanych nie można zmienić ich nazwy (nie można ich też usunąć), natomiast wszystkie pozostałe ustawienia są konfigurowalne. Te, które są obecnie nadpisywane przez styl, mają włączone checkboxy.

Na czterech zakładkach możemy zmienić parametry:

• tekstu (wielkość i kolor czcionki, migotanie),
• wypełnienia (kolor, migotanie),
• linii (grubość, typ, kolor, migotanie),

a także dodać obramowanie.

Po zmianie ustawień wystarczy nacisnąć przycisk Apply, by zapisać styl. Jeżeli chcemy przywrócić domyśle ustawienia, naciskamy Restore defaults.

Oprócz zbioru predefiniowanych stylów do dyspozycji mamy również 24 style definiowane przez użytkownika. Znajdują się one na zakładce User defined.

Tutaj możemy zaprojektować własny styl od podstaw. Spróbujemy przygotować taki styl dla kształtów wypełnionych. Wybieramy User_Defined_01 i klikamy w ikonkę edycji. Otworzy się okno edytowania stylu. W polu Name możemy mu nadać własną nazwę.

Następnie przechodzimy na zakładkę Fill, zaznaczamy Fill color override i wybieramy kolor, np. żółty.

Przechodzimy na zakładkę Line i zmieniamy ustawienia Line pattern override, Line weight override i Line color override jak poniżej. W górnej części okna wyświetlany jest ogólny podgląd, jak będzie wyglądał nasz styl.

Naciskamy Apply, by zapisać styl. Nasz styl pojawia się na liście. Mała niebieska ikonka wskazuje, że konieczne jest jeszcze zapisanie całej biblioteki.

Naciskamy klawisz Save na dole okna, by to zrobić. Konieczne jest zrestartowanie programu WindowViewer, aby zmiany zostały uwzględnione w aplikacji.

Wracamy teraz do edytora symboli. Rysujemy prostokąt i otwieramy listę styli.

Jak widać, pojawił się na niej nasz styl, w sekcji User Defined. Możemy go teraz użyć dla narysowanego wcześniej prostokąta.

Biblioteka styli, w ramach której zmodyfikowaliśmy standardowe style lub zdefiniowaliśmy własne, może być wykorzystana w wielu aplikacjach, również na innych komputerach. Aby to było możliwe, możemy ją wyeksportować do pliku, a następnie zaimportować na innym stanowisku.

W przypadku oprogramowania InTouch HMI wystarczy wejść na zakładkę wstążki File, wybrać Export, a następnie Styles.

W okienku zapisu możemy wskazać lokalizację na dysku, nadać plikowi nazwę i nacisnąć Save.

Tak wyeksportowany plik można później zaimportować do innej aplikacji. Tym razem wchodzimy na zakładkę File, wybieramy Import, a następnie Styles.

Wskazujemy plik na dysku i naciskamy Open – biblioteka zostanie zaimportowana.

W następnym odcinku poznamy podstawy skryptów w symbolach Industrial Graphics.