Animacje obiektów na ekranie

Animacje umożliwiają dynamiczną zmianę wyglądu obiektów na ekranie w zależności od wartości powiązanego taga.
Animowane mogą być obiekty proste oraz wybrane elementy (ścieżki) obiektów złożonych.

Dodawanie animacji do obiektu

Aby przypisać animację do obiektu:

1. Zaznacz obiekt lub element obiektu na ekranie lub w eksploratorze.
2. Z górnego panelu narzędziowego wybierz ANIMACJE.
3. Otworzy się okno konfiguracji animacji.
4. Po lewej stronie dostępne jest drzewo animacji.
5. Po wskazaniu wybranej właściwości animacji (zaznacz checkbox), po prawej stronie pojawią się właściwości konfiguracyjne.
6. Kliknij Wybierz, aby z listy wybrać tag, którego wartości będą sterować animacją.
7. Następnie wybierz sposób animacji (konwersji danych) - Zakres dla zmian płynnych lub Tabela dla zmian skokowych animowanych właściwości.
8. Dla zmian płynnych wybierz zakres wartości wejściowych i wyjściowych. Dla zmian skokowych możesz wskazać wiele przedziałów, które będą zapisane w tabeli.
9. Na koniec kliknij przycisk Zaakceptuj.

W dalszej części tego rozdziału przedstawiono opis poszczególnych elementów oraz kolejne kroki ich konfiguracji.

Drzewo animacji

Animacje są pogrupowane w logiczne kategorie, odpowiadające właściwościom obiektów, które mogą podlegać animowaniu.

Kolor
   ├── Kolor wypełnienia
   └── Kolor krawędzi

Tekst
   ├── Napis
   ├── Nazwa czcionki
   ├── Rozmiar czcionki
   └── Styl czcionki

Gradient
   ├── Kolor podstawowy
   ├── Kolor drugorzędny
   ├── Kąt
   └── Mix

Krycie
   ├── Krycie
   └── Wyświetlanie

Rozmiar
   ├── Skalowanie poziome
   └── Skalowanie pionowe

Pozycja
   ├── Poziome przemieszczenie
   └── Pionowe przemieszczenie

Obrót
   └── Kąt

Styl
   ├── Styl wypełnienia wzorem
   ├── Styl krawędzi
   ├── Grubość krawędzi
   ├── Zaokrąglenie X
   └── Zaokrąglenie Y

Wypełnienie
   ├── Procentowe wypełnienie poziome
   └── Procentowe wypełnienie pionowe

Skrypt
   ├── onClick
   ├── onDoubleClick
   └── Nieaktywny

Możesz wybrać i skonfigurować dowolną liczbę właściwości z dostępnej listy.

Przykładowo, animacji mogą podlegać treść napisu, jego kolor oraz rozmiar. Dodatkowo każda z tych właściwości może być powiązana z wartością innego tagu, który będzie sterował jej zachowaniem.

Wybór taga sterującego animacją

Po wskazaniu w drzewie animacji właściwości, którą chcesz animować, po prawej stronie ekranu zostaną wyświetlone ustawienia główne animacji. Pierwszym parametrem jest Źródło danych.

Aby wybrać tag sterujący animacją, kliknij przycisk Wybierz. Zostanie otwarte okno z listą dostępnych tagów, z którego należy wskazać odpowiedni tag.

W oknie wyboru taga możesz skorzystać z narzędzi ułatwiających wyszukiwanie:

• wyszukiwarki tagów po nazwie taga,
• filtrowania listy po formacie taga, źródle danych oraz rodzaju taga.

Dodatkowo możesz określić, która informacja z taga ma być wykorzystana do sterowania animacją. Pole taga umożliwia wybór następujących opcji:

• value – aktualna wartość taga (opcja domyślna),
• quality – jakość danych,
• time_stamp – czas pomiaru,
• alarm_hihi, alarm_hi, alarm_lo, alarm_lolo – wybrany poziom alarmowy.

Po wskazaniu odpowiedniego taga w tabeli kliknij przycisk Wybierz tag, aby zatwierdzić wybór taga sterującego animacją.

Animacja płynna (Zakres)

Animacja płynna to sposób animowania, w którym wartości właściwości zmieniają się ciągle i liniowo wraz ze zmianą wartości wejściowej. Pozwala ona na uzyskanie naturalnych, płynnych przejść pomiędzy stanami, bez widocznych skoków.

Poniżej, jako przykład, przedstawiono krok po kroku proces konfiguracji koloru wypełnienia obiektu, który zmienia się płynnie w zależności od wartości temperatury zwracanej przez tag Temperatura.

1. Wybór obiektu i otwarcie panelu animacji

Na początku wybierz obiekt, dla którego chcesz skonfigurować animację koloru.
Następnie z panelu narzędziowego wybierz opcję ANIMACJE.

Po jej wybraniu zostanie wyświetlone okno Animacje, w którym dostępne są wszystkie opcje związane z konfiguracją animacji dla wybranego obiektu.

2. Wybór animowanej właściwości

W kolejnym kroku należy wskazać właściwość, która ma podlegać animacji.
W tym celu zaznacz checkbox znajdujący się przy wybranej właściwości w drzewie animacji. W naszym przykłądzie jest to Kolor wypełnienia.

Zaznaczenie właściwości powoduje jej aktywację oraz umożliwia dalszą konfigurację parametrów animacji.

3. Wybór taga sterującego

W sekcji Ustawienia główne kliknij przycisk Wybierz.

Zostanie otwarte okno z listą dostępnych tagów.

W wyświetlonym oknie wskaż odpowiedni tag sterujący animacją, a następnie wybierz Pole taga, które ma być wykorzystane do sterowania. W naszym przykładzie tagiem tym jest Temperatura (zostawiamy domyślną opcję pole taga value.)

Po dokonaniu wyboru zatwierdź ustawienia, aby przypisać wybrany tag jako źródło sterowania animacją.

4. Wybór sposobu animacji

W kolejnym kroku wybierz sposób animacji w polu wyboru Konwersja danych.

Dostępne są dwa tryby animacji:

• Zakres – animacja płynna, w której wartości wyjściowe zmieniają się liniowo w zależności od wartości wejściowej,
• Tabela – animacja skokowa, w której dla określonych wartości lub zakresów wejściowych przypisywana jest stała wartość wyjściowa.

Wybierz tryb odpowiedni do efektu, jaki chcesz uzyskać, w tym przykładzie - Zakres.

5. Definicja zakresu wartości wejściowych i wyjściowych

W przypadku animacji płynnej (tryb Zakres) należy zdefiniować zakres wartości wejściowych oraz odpowiadające im wartości wyjściowe, pomiędzy którymi zmiana będzie przebiegać liniowo.

Wpisz odpowiednie wartości w pola Wejście min oraz Wejście max, a następnie określ kolor wyświetlany dla wartości minimalnej (pole Wyjście min) oraz dla wartości maksymalnej (pole Wyjście max). Wartości pośrednie pomiędzy minimum a maksimum będą prezentowane kolorem płynnie przechodzącym od pierwszego do drugiego.

W naszym przykładzie są to wartości:

• Wartości wejściowe:
  • Wejście min: 0
  • Wejście max: 100
• Wartości wyjściowe:
  • Wyjście min: 4FFF6F (kolor zielony)
  • Wyjście max: FF4242 (kolor czerwony)

W efekcie kolor wypełnienia obiektu zmienia się płynnie wraz ze zmianą temperatury — od koloru zielonego do czerwonego, proporcjonalnie do aktualnej wartości taga:

• 0°C → kolor zielony
• 100°C → kolor czerwony

Animacja skokowa (Tabela)

Animacja skokowa polega na zmianie wartości właściwości w określonych punktach lub zakresach, bez przejść pośrednich. Dla zdefiniowanych wartości wejściowych przypisywana jest jedna, stała wartość wyjściowa lub — w trybie migania — dwie wartości wyjściowe przełączane naprzemiennie, co pozwala uzyskać efekt często wykorzystywany do sygnalizacji stanów alarmowych lub ostrzegawczych.

Mapowanie punktowe (opcja: "Dokładnie")

Opcja Dokładnie służy do animacji skokowych opartych na wartościach dyskretnych taga (np. 0, 1, 2, 3).

W celu skonfigurowania animcji skokowej z mapowaniem punktowym, postępuj podobnie jak w poprzednim przykładzie:

1. Wybierz obiekt, a następnie w panelu narzędziowym polecenie ANIMACJE.
2. W oknie animacji wskaż animowaną właściwość.
3. Wskaż tag sterujący (jak w animacji płynnej).
4. W polu Konwersja danych wybierz Tabela.

5. Zaznacz opcję Dokładnie i kliknij Dodaj.

   

   Otworzy się okno dialogowe konfiguracji wpisu.

   

6. Wypełnij pola:

   • Wejście – konkretna wartość taga (np. 0, 1, 2, 3)
   • Wyjście – wartość wyjściowa, w tym przykładzie jest to Podstawowy kolor wypełnienia.

7. Opcjonalnie: efekt przełączania (migania). Jeśli chcesz, aby dla danej wartości taga kolor wypełnienia zmieniał się naprzemiennie (efekt przełączania), zaznacz opcję Włącz przełączanie i wybierz kolor Przełączany (drugi kolor, z którym kolor podstawowy będzie się zmieniał).

8. Na koniec kliknij Akceptuj zmiany, aby dodać wpis w tabeli.

Wiele wpisów w tabeli

Można dodać wiele wierszy w tabeli – każda wartość wejściowa ma przypisany własny kolor (stały lub przełączany). Aby utworzyć nowy wpis, ponownie kliknij przycisk Dodaj.

Mapowanie przedziałów (opcja: "W przedziale")

Opcja W przedziale umożliwia przypisanie wartości wyjściowych animacji dla zakresu wartości wejściowych taga.
Działa analogicznie do opcji Dokładnie, z tą różnicą, że zamiast jednej wartości definiowany jest przedział.

W celu skonfigurowania animcji skokowej z mapowaniem zakresu wartości, postępuj podobnie jak w poprzednim przykładzie:

1. Wybierz obiekt, a następnie w panelu narzędziowym polecenie ANIMACJE.
2. W oknie animacji wskaż animowaną właściwość.
3. Wskaż tag sterujący (jak w animacji płynnej).
4. W polu Konwersja danych wybierz Tabela.

5. Zaznacz opcję W przedziale i kliknij Dodaj.

   

   Otworzy się okno dialogowe konfiguracji wpisu.

   

6. Wypełnij pola:

   • Niski – początek przedziału wartości wejściowych
   • Wysoki – koniec przedziału wartości wejściowych
     Dla wartości taga mieszczących się w tym przedziale animowana właściwość przyjmie zdefiniowaną wartość wyjściową.
7. Opcjonalnie: efekt przełączania (migania). Jeśli chcesz, aby dla danego zakresu wartości taga kolor wypełnienia zmieniał się naprzemiennie (efekt przełączania), zaznacz opcję Włącz przełączanie i wybierz kolor Przełączany (drugi kolor, z którym kolor podstawowy będzie się zmieniał).
8. Na koniec kliknij Akceptuj zmiany, aby dodać wpis w tabeli.

Wiele przedziałów

Możesz dodać wiele wierszy w tabeli, definiując różne przedziały wartości – każdy z własnym kolorem (stałym lub migającim).

Modyfikacja i usuwanie wpisów w tabeli

Aby zmodyfikować lub usunąć wpis w tabeli animacji skokowych (Konwersja danych: Tabela):

1. Kliknij wybrany wiersz w tabeli, aby go zaznaczyć.
2. Wybierz odpowiednią akcję:
   • Modyfikuj – umożliwia edycję parametrów wpisu,
   • Usuń – trwale usuwa wpis z tabeli.

Modyfikacja wpisu w tabeliUsuwanie wpisu w tabeli

Podsumowanie

Dla większości animacji proces konfiguracji parametrów wygląda w bardzo podobny sposób. Podstawowym krokiem jest wybór rodzaju przekształcenia, który określa, jak wartości wejściowe (np. z taga) wpływają na zmianę właściwości obiektu.

W przypadku większości animacji dostępne są dwa tryby transformacji:

• Zakres – umożliwia płynną zmianę wartości pomiędzy zdefiniowanym minimum i maksimum
• Tabela – umożliwia skokową zmianę wartości na podstawie zdefiniowanych progów, z dodatkowymi trybami:
• Dokładnie – zmiana następuje tylko przy dokładnym dopasowaniu wartości
• W przedziale – zmiana następuje, gdy wartość mieści się w określonym zakresie

Nie wszystkie animacje obsługują oba tryby transformacji. Dla animacji, w których nie jest możliwa płynna zmiana parametrów, dostępna jest wyłącznie Tabela. Dotyczy to m.in.:

• zmiany czcionki w tekście
• zmiany stylu wypełnienia lub krawędzi

Część animacji posiada dodatkowe ustawienia zależne od ich rodzaju. Przykładowo:

• dla animacji tekstu można dodatkowo określić:
  • wyrównanie tekstu,
  • sposób jego wyświetlania (liczba linii i znaków w linii),
  • liczbę cyfr całkowitych i dziesiętnych w przypadku prezentowania wartości liczbowych,
• dla animacji skalowania wybierany jest punkt transformacji, określający, czy obiekt ma być skalowany:
  • od środka,
  • od jednej z krawędzi,
• dla animacji obrotu definiowany jest punkt, względem którego obiekt będzie obracany.

Wyjątkiem od powyższych zasad jest animacja Skrypt. Dla tego typu animacji konfiguracja polega na:

• wyborze akcji wykonywanej po pojedynczym kliknięciu,
• wyborze akcji wykonywanej po podwójnym kliknięciu myszy,
• określeniu zakresu lub zakresów (w trybie Tabela), dla których animacja ma być nieaktywna.