Animacja wypełnienia procentowego
Kurs Industrial Graphics w oprogramowaniu AVEVA, odc. 19

W tym odcinku poznamy animacje wypełnienia poziomego i pionowego.

Najpierw narysujmy w edytorze dwa prostokąty: poziomy i pionowy.

Klikając dwukrotnie pionowy prostokąt otwieramy okienko Edit Animations i dodajemy animację % Fill Vertical.

Okienko z ustawieniami animacji wygląda teraz tak:

W polu Expression Or Reference jak zwykle musimy określić zmienną, która będzie kontrolowała animację – w tym przypadku powinna to być zmienna analogowa. Od jej wartości będzie uzależniony poziom wypełnienia prostokąta. Zmienną można zdefiniować wpisując jej nazwę (podczas wpisywania program podpowiada dostępne zmienne), albo można też nacisnąć przycisk z trzema kropkami i wybrać zmienną z przeglądarki Galaxy Browser.

Warto pamiętać, że w polu tym można również wpisać wyrażenie, wykorzystujące obliczenia matematyczne i funkcje skryptowe, którego wynikiem będzie wartość liczbowa.

Wprowadzając odpowiednie dane w obszarach Value oraz Fill możemy określić, w jaki sposób zmiana wartości zmiennej będzie odzwierciedlana w postaci wypełniania. W obszarze Value definiujemy wartość minimalną (At Min Fill) oraz maksymalną (At Max Fill), określające zakres wartości zmiennej sterującej odpowiadający poziomowi wypełnienia. Natomiast w obszarze Fill definiujemy minimalny (Min%) oraz maksymalny (Max%) poziom wypełnienia (w procentach). Dodajmy jeszcze, że w obu tych polach można wpisać konkretne liczby, zmienne albo wyrażenia.

Działa to w taki sposób, że gdy zmienna przyjmie wartość mniejszą lub równą At Min Fill, prostokąt będzie wypełniony w stopniu określonym przez Mix% – domyślną wartością jest tutaj 0, czyli brak wypełnienia. Natomiast gdy zmienna przyjmie wartość równą lub większą od At Max Fill – prostokąt będzie wypełniony w stopniu określonym przez Max% – domyślną wartością jest tutaj 100%, czyli całkowite wypełnienie. Każda wartość zmiennej z wnętrza przedziału (At Min Fill, At Max Fill) przełoży się na proporcjonalnie odpowiedni stopień wypełnienia.

W dolnej części okna znajdują się ustawienia związane z kolorami i wyglądem wypełnienia. Można określić kolor wypełnienia (Fill Color), kolor części niewypełnionej (UnFilled Color).

Opcja Direction decyduje o tym, czy wypełnienie będzie się zwiększało od dołu do góry (Up), czy od góry do dołu (Down).

Ostatnia opcja, Orientation, decyduje o tym, czy kierunek wypełnienia będzie związany z położeniem grafiki (Relative to Graphic), czy będzie z orientacją ekranu (Relative to Screen). W drugim przypadku wypełnienie zawsze będzie „poruszało się” w pionie (góra – dół), niezależnie od rotacji animowanego elementu. Natomiast jeżeli wybierzemy Relative to Graphic obrócenie kształtu skutkować będzie również odpowiednią zmianą kierunku wypełnienia.

Ostatnim elementem jest pole Preview, w którym możemy podejrzeć, jak zachowa się nasza animacja, symulując zmianę wartości zmiennej.

Zobaczmy jak to działa w praktyce. W polu Expression Or Reference wprowadzamy zmienną analogową, która będzie sterować wypełnieniem.

W polach At Min Fill oraz At Max Fill możemy wprowadzić graniczne wartości ręcznie, ale możemy również wykorzystać pola MinEU i MaxEU, zdefiniowane dla tej konkretnej zmiennej. Przechowują one wartość minimalną i maksymalną tej zmiennej, wyrażone w jednostkach inżynierskich.

W obszarze Fill nie wprowadzamy żadnych zmian, domyślne wartości zwykle są tu odpowiednie. Natomiast możemy dostosować kolorystykę – wypełnienie będzie jasnoniebieskie, a niewypełniona część kształtu będzie biała. Zaznaczmy też orientację Relative to Screen. Całość zatwierdzamy naciskając przycisk OK.

Aby sprawdzić działanie opcji Relative to Screen, obróćmy nieco nasz prostokąt.

Teraz analogicznie skonfigurujmy wypełnienie poziome dla drugiego prostokąta. Klikając go dwukrotnie otwieramy okno Edit Animations i dodajemy animację % Fill Horizontal. Ustawienia dla tej animacji są identyczne, jak w przypadku wypełnienia pionowego, z jednym logicznym wyjątkiem. Kierunek wypełnienia, zamiast góra – dół, może być teraz określany w osi prawo – lewo (ustawienia Right oraz Left).

Wprowadzamy zmienną – możemy wybrać inną, niż poprzednią, lub tę samą, jeżeli chcemy zobaczy porównanie obu animacji. Wybieramy też ustawienia koloru – wypełnienie niech będzie tym razem jasnozielone, a obszar niewypełniony czarny. Dodatkowo orientację ustawimy tym razem na Relative to Graphic. Na koniec naciskamy OK.

Po uruchomieniu aplikacji możemy zobaczyć efekt. Jak widzimy, lewy prostokąt wypełnia się w pionie, ale kierunek jest zgodny z osią ekranu. Wygląda to tak, jakby wypełniał się on wodą – górna krawędź wypełnienia jest zawsze pozioma, niezależnie od pochylenia prostokąta. W taki sposób działa ustawienie Relative to Screen.

W kolejnym odcinku poznamy animację wyświetlania danych (Value Display).