{"id":26785,"date":"2026-07-02T11:48:17","date_gmt":"2026-07-02T09:48:17","guid":{"rendered":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?p=26785"},"modified":"2026-07-31T12:36:03","modified_gmt":"2026-07-31T10:36:03","slug":"animacja-wypelnienia-procentowego-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-19","status":"publish","type":"post","link":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/animacja-wypelnienia-procentowego-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-19\/","title":{"rendered":"Animacja wype\u0142nienia procentowego | Kurs\u00a0Industrial Graphics w oprogramowaniu AVEVA, odc. 19"},"content":{"rendered":"\n
<\/div>\n\n\n\n

W tym odcinku poznamy animacje wype\u0142nienia poziomego i pionowego.<\/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

Najpierw narysujmy w edytorze dwa prostok\u0105ty: poziomy i pionowy.<\/p>\n\n\n\n

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

Klikaj\u0105c dwukrotnie pionowy prostok\u0105t otwieramy okienko Edit Animations<\/strong> i dodajemy animacj\u0119 % Fill Vertical<\/strong>.<\/p>\n\n\n\n

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

Okienko z ustawieniami animacji wygl\u0105da teraz tak:<\/p>\n\n\n\n

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

W polu Expression Or Reference<\/strong> jak zwykle musimy okre\u015bli\u0107 zmienn\u0105, kt\u00f3ra b\u0119dzie kontrolowa\u0142a animacj\u0119 \u2013 w tym przypadku powinna to by\u0107 zmienna analogowa. Od jej warto\u015bci b\u0119dzie uzale\u017cniony poziom wype\u0142nienia prostok\u0105ta. Zmienn\u0105 mo\u017cna zdefiniowa\u0107 wpisuj\u0105c jej nazw\u0119 (podczas wpisywania program podpowiada dost\u0119pne zmienne), albo mo\u017cna te\u017c nacisn\u0105\u0107 przycisk z trzema kropkami i wybra\u0107 zmienn\u0105 z przegl\u0105darki Galaxy Browser<\/strong>.<\/p>\n\n\n\n

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

Warto pami\u0119ta\u0107, \u017ce w polu tym mo\u017cna r\u00f3wnie\u017c wpisa\u0107 wyra\u017cenie, wykorzystuj\u0105ce obliczenia matematyczne i funkcje skryptowe, kt\u00f3rego wynikiem b\u0119dzie warto\u015b\u0107 liczbowa.<\/p>\n\n\n\n

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

Wprowadzaj\u0105c odpowiednie dane w obszarach Value<\/strong> oraz Fill<\/strong> mo\u017cemy okre\u015bli\u0107, w jaki spos\u00f3b zmiana warto\u015bci zmiennej b\u0119dzie odzwierciedlana w postaci wype\u0142niania. W obszarze Value<\/strong> definiujemy warto\u015b\u0107 minimaln\u0105 (At Min Fill<\/strong>) oraz maksymaln\u0105 (At Max Fill<\/strong>), okre\u015blaj\u0105ce zakres warto\u015bci zmiennej steruj\u0105cej odpowiadaj\u0105cy poziomowi wype\u0142nienia. Natomiast w obszarze Fill<\/strong> definiujemy minimalny (Min%<\/strong>) oraz maksymalny (Max%<\/strong>) poziom wype\u0142nienia (w procentach). Dodajmy jeszcze, \u017ce w obu tych polach mo\u017cna wpisa\u0107 konkretne liczby, zmienne albo wyra\u017cenia.<\/p>\n\n\n\n

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

Dzia\u0142a to w taki spos\u00f3b, \u017ce gdy zmienna przyjmie warto\u015b\u0107 mniejsz\u0105 lub r\u00f3wn\u0105 At Min Fill<\/strong>, prostok\u0105t b\u0119dzie wype\u0142niony w stopniu okre\u015blonym przez Mix%<\/strong> \u2013 domy\u015bln\u0105 warto\u015bci\u0105 jest tutaj 0, czyli brak wype\u0142nienia. Natomiast gdy zmienna przyjmie warto\u015b\u0107 r\u00f3wn\u0105 lub wi\u0119ksz\u0105 od At Max Fill<\/strong> \u2013 prostok\u0105t b\u0119dzie wype\u0142niony w stopniu okre\u015blonym przez Max%<\/strong> \u2013 domy\u015bln\u0105 warto\u015bci\u0105 jest tutaj 100%, czyli ca\u0142kowite wype\u0142nienie. Ka\u017cda warto\u015b\u0107 zmiennej z wn\u0119trza przedzia\u0142u (At Min Fill<\/strong>, At Max Fill<\/strong>) prze\u0142o\u017cy si\u0119 na proporcjonalnie odpowiedni stopie\u0144 wype\u0142nienia.<\/p>\n\n\n\n

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

W dolnej cz\u0119\u015bci okna znajduj\u0105 si\u0119 ustawienia zwi\u0105zane z kolorami i wygl\u0105dem wype\u0142nienia. Mo\u017cna okre\u015bli\u0107 kolor wype\u0142nienia (Fill Color<\/strong>), kolor cz\u0119\u015bci niewype\u0142nionej (UnFilled Color<\/strong>).<\/p>\n\n\n\n

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

Opcja Direction<\/strong> decyduje o tym, czy wype\u0142nienie b\u0119dzie si\u0119 zwi\u0119ksza\u0142o od do\u0142u do g\u00f3ry (Up<\/strong>), czy od g\u00f3ry do do\u0142u (Down<\/strong>).<\/p>\n\n\n\n

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

Ostatnia opcja, Orientation, decyduje o tym, czy kierunek wype\u0142nienia b\u0119dzie zwi\u0105zany z po\u0142o\u017ceniem grafiki (Relative to Graphic<\/strong>), czy b\u0119dzie z orientacj\u0105 ekranu (Relative to Screen<\/strong>). W drugim przypadku wype\u0142nienie zawsze b\u0119dzie \u201eporusza\u0142o si\u0119\u201d w pionie (g\u00f3ra \u2013 d\u00f3\u0142), niezale\u017cnie od rotacji animowanego elementu. Natomiast je\u017celi wybierzemy Relative to Graphic<\/strong> obr\u00f3cenie kszta\u0142tu skutkowa\u0107 b\u0119dzie r\u00f3wnie\u017c odpowiedni\u0105 zmian\u0105 kierunku wype\u0142nienia.<\/p>\n\n\n\n

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

Ostatnim elementem jest pole Preview<\/strong>, w kt\u00f3rym mo\u017cemy podejrze\u0107, jak zachowa si\u0119 nasza animacja, symuluj\u0105c zmian\u0119 warto\u015bci zmiennej.<\/p>\n\n\n\n

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

Zobaczmy jak to dzia\u0142a w praktyce. W polu Expression Or Reference<\/strong> wprowadzamy zmienn\u0105 analogow\u0105, kt\u00f3ra b\u0119dzie sterowa\u0107 wype\u0142nieniem.<\/p>\n\n\n\n

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

W polach At Min Fill<\/strong> oraz At Max Fill<\/strong> mo\u017cemy wprowadzi\u0107 graniczne warto\u015bci r\u0119cznie, ale mo\u017cemy r\u00f3wnie\u017c wykorzysta\u0107 pola MinEU<\/strong> i MaxEU<\/strong>, zdefiniowane dla tej konkretnej zmiennej. Przechowuj\u0105 one warto\u015b\u0107 minimaln\u0105 i maksymaln\u0105 tej zmiennej, wyra\u017cone w jednostkach in\u017cynierskich.<\/p>\n\n\n\n

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

W obszarze Fill<\/strong> nie wprowadzamy \u017cadnych zmian, domy\u015blne warto\u015bci zwykle s\u0105 tu odpowiednie. Natomiast mo\u017cemy dostosowa\u0107 kolorystyk\u0119 \u2013 wype\u0142nienie b\u0119dzie jasnoniebieskie, a niewype\u0142niona cz\u0119\u015b\u0107 kszta\u0142tu b\u0119dzie bia\u0142a. Zaznaczmy te\u017c orientacj\u0119 Relative to Screen<\/strong>. Ca\u0142o\u015b\u0107 zatwierdzamy naciskaj\u0105c przycisk OK<\/strong>.<\/p>\n\n\n\n

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

Aby sprawdzi\u0107 dzia\u0142anie opcji Relative to Screen<\/strong>, obr\u00f3\u0107my nieco nasz prostok\u0105t.<\/p>\n\n\n\n

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

Teraz analogicznie skonfigurujmy wype\u0142nienie poziome dla drugiego prostok\u0105ta. Klikaj\u0105c go dwukrotnie otwieramy okno Edit Animations<\/strong> i dodajemy animacj\u0119 % Fill Horizontal<\/strong>. Ustawienia dla tej animacji s\u0105 identyczne, jak w przypadku wype\u0142nienia pionowego, z jednym logicznym wyj\u0105tkiem. Kierunek wype\u0142nienia, zamiast g\u00f3ra \u2013 d\u00f3\u0142, mo\u017ce by\u0107 teraz okre\u015blany w osi prawo \u2013 lewo (ustawienia Right<\/strong> oraz Left<\/strong>).<\/p>\n\n\n\n

Wprowadzamy zmienn\u0105 \u2013 mo\u017cemy wybra\u0107 inn\u0105, ni\u017c poprzedni\u0105, lub t\u0119 sam\u0105, je\u017celi chcemy zobaczy por\u00f3wnanie obu animacji. Wybieramy te\u017c ustawienia koloru \u2013 wype\u0142nienie niech b\u0119dzie tym razem jasnozielone, a obszar niewype\u0142niony czarny. Dodatkowo orientacj\u0119 ustawimy tym razem na Relative to Graphic<\/strong>. Na koniec naciskamy OK<\/strong>.<\/p>\n\n\n\n

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

Po uruchomieniu aplikacji mo\u017cemy zobaczy\u0107 efekt. Jak widzimy, lewy prostok\u0105t wype\u0142nia si\u0119 w pionie, ale kierunek jest zgodny z osi\u0105 ekranu. Wygl\u0105da to tak, jakby wype\u0142nia\u0142 si\u0119 on wod\u0105 \u2013 g\u00f3rna kraw\u0119d\u017a wype\u0142nienia jest zawsze pozioma, niezale\u017cnie od pochylenia prostok\u0105ta. W taki spos\u00f3b dzia\u0142a ustawienie Relative to Screen<\/strong>.<\/p>\n\n\n\n

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

W kolejnym odcinku<\/a> poznamy animacj\u0119 wy\u015bwietlania danych (Value Display<\/strong>).<\/p>\n\n\n\n

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