Animacja wyświetlania wartości
Kurs Industrial Graphics w oprogramowaniu AVEVA, odc. 20

W tym odcinku poznamy jedną z najważniejszych animacji, powszechnie używanych w aplikacjach wizualizacyjnych: wyświetlanie danych (Value Display).

Zacznijmy od utworzenia serii ciągów znaków, które wykorzystamy, aby zobaczyć tę animację w praktyce.

Istnieją cztery znaki specjalne, które możemy wykorzystać do wyświetlania wartości:

• znak hash (#),
• separator dziesiętny – gdy pracujemy z amerykańskimi ustawieniami regionalnymi, będzie to kropka,
• cyfra zero,
• separator tysięcy – gdy pracujemy z amerykańskimi ustawieniami regionalnymi, będzie to przecinek.

Znak hash jest używany jako symbol zastępczy dla wartości liczbowej. Jeżeli użyjemy tego znaku w tekście lub polu tekstowym, właśnie w jego miejscu zostanie wyświetlona wartość zdefiniowana w animacji Value Display. Jeżeli użyjemy więcej niż jednego symbolu hash, możemy ustalić formatowanie tej wartości. Jeżeli użyjemy zapisu z separatorem dziesiętnym, możemy określić formatowanie wartości jako liczby rzeczywistej, np.:

#.##

Po lewej stronie separatora dziesiętnego pojedynczy hash pozwala wyświetlić część całkowitą wizualizowanej wartości, o dowolnej długości. Po prawej stronie przecinka dziesiętnego każdy hash reprezentuje jedną cyfrę z części ułamkowej. Zapis #.## oznacza więc, że liczba będzie wyświetlana z dokładnością do dwóch miejsc po przecinku.

Zamiast symbolu # można użyć cyfry 0. Działa ona podobnie, stanowiąc symbol zastępczy, podmieniany przez rzeczywistą wartość. Jest jednak ważna różnica. Użycie cyfry 0 pozwala nam dodać tzw. zera wiodące w zapisie liczby. Zobaczmy to na przykładzie wartości 6.7621.

Jeżeli określimy format wyświetlania tej liczby jako:

###.##

to zostanie ona wyświetlona w postaci:

6.76

Innymi słowy, liczba znaków hash ma znaczenie tylko po prawej stronie separatora dziesiętnego – tu decyduje o dokładności wyświetlenia części ułamkowej. Natomiast po lewej stronie część całkowita zawsze będzie wyświetlana bez zmian, niezależnie od liczby symboli #.

Jeżeli natomiast format będzie taki:

000.00

liczba zostanie wyświetlona w takiej postaci:

006.76

Po prawej stronie nic się nie zmieniło, dla części ułamkowej oba te symbole działają tak samo. Natomiast po lewej stronie pojawiły się zera wiodące, „uzupełniające” liczbę do trzech cyfr.

Do formatowania wyświetlanych wartości możemy użyć też separatora tysięcy. Dla przykładu weźmy liczbę 5635,982. Jeżeli użyjemy formatowania w takiej postaci:

#,###.## lub 0,000.00

liczba ta zostanie wyświetlona w ten sposób:

5,635.92

Aby dodać animację wyświetlania wartości, klikamy dwukrotnie element tekstowy – pojawia się znane już nam okno Edit Animations. Dodajemy animację Value Display.

W polu States mamy do wyboru różne typy danych, które mogą być wyświetlane, takie jak wartości dyskretne (Boolean), liczby całkowite i rzeczywiste (Analog) i inne. Poniżej wyświetlany jest opis wyjaśniający, co kryje się pod poszczególnymi opcjami.

Wybierzmy zatem najpierw typ Boolean. W polu Expression or Reference wprowadzamy referencję do wartości, która ma być wyświetlana. Można tu wprowadzić zmienną dyskretną lub dowolne wyrażenie, którego wynik ma typ Boolean (prawda/fałsz).

Poniżej konfigurujemy dwa komunikaty. W polu True Message: Expression or Static String wprowadzamy tekst, który zostanie wyświetlony przez animację dla wartości True – domyślnie jest to „ON”. Z kolei w polu False Message: Expression or Static String wprowadzamy tekst, który zostanie wyświetlony dla wartości False – domyślnie jest to „OFF”.

W polach tych domyślnie wpisujemy po prostu tekst, który zostanie wyświetlony. Można tu jednak również wskazać zmienną typu tekstowego. Po lewej stronie tych pól widzimy małe ikonki z literą „T”, takie jak poniżej.

Taka ikonka oznacza, że w danym polu jest wprowadzony gotowy ciąg znaków, który powinien zostać wyświetlony – w tym przypadku „ON” oraz „OFF”. Jeżeli jednak klikniemy na tę ikonkę, przełączymy pole do drugiego trybu, w który będzie ono zawierać referencję do zmiennej typu tekstowego. Wtedy możemy tu wprowadzić wybraną zmienną.

W naszym przykładzie skonfigurujemy wyświetlanie zmiennej Mixer100.Pump1.PV. Wykorzystamy zdefiniowane dla tej zmiennej pola OnMsg i OffMsg, które zawierają teksty „Running” oraz „Stopped”.

W przypadku wyświetlania wartości typu Boolean trzeba pamiętać o ważnej rzeczy. Otóż dla tego typu wartości teksty zdefiniowany w polach True Message oraz False Message nie będzie wyświetlany w miejscu symbolu hash, ale zastąpi cały tekst, który wpisaliśmy w elemencie, dla którego definiujemy animację.

Zobaczmy jak to wygląda po uruchomieniu aplikacji. Jak widać, w miejscu napisu „This is a value = #” nie pojawia się „This is a value = Running”, ale po prostu „Running”.

Aby zobaczyć, jak to wygląda dla innych rodzajów wartości, zduplikujmy teraz ten pierwszy tekst, umieszczając go poniżej i zmieniając typ animacji.

W okienku Edit Animations zmieniamy ustawienie States na Analog. Nie modyfikujemy zmiennej – będziemy nadal wizualizować Mixer100.Pump1.PV.

Zauważamy, że w polu Text Format znajduje się dokładnie ten sam ciąg znaków, który umieściliśmy w obszarze roboczym symbolu. Jeżeli zmienimy go tutaj, zmieni się również w obszarze roboczym.

Dodatkowo w tym miejscu z listy rozwijalnej możemy wybrać jeden z gotowych, predefiniowanych formatów wyświetlania wartości.

Naciskamy OK, zapisujemy symbol i uruchamiamy aplikację. Jak widzimy, zmienna Mixer100.Pump1.PV jest tym razem wizualizowana w postaci liczbowej – 0 odpowiada wartości False, a 1 – wartości True.

Tym razem jednak wartością nie jest zastępowany cały tekst, jak to było w przypadku wizualizacji Boolean, a jedynie znak #.

Wróćmy do edycji symbolu, zajmiemy się teraz trzecią linijką tekstu, zawierającą znaki „#.##”. Klikamy dwukrotnie i otwieramy okno Edit Animations. Wprowadzamy w polu referencji zmienną Mixer100.Level.PV. Widzimy, że w polu Text Format widnieje ten sam ciąg znaków „#.##”.

Zmienna Mixer100.Level.PV przyjmuje wartości od 0 do 1000. Jak widzimy, jest wyświetlana z dwoma miejscami po kropce (separatorze dziesiętnym).

Jednak ten tekst jest wyrównywany do lewej krawędzi, więc gdy wartość spada poniżej 100, kropka dziesiętna zmienia swoje położenie. nie pozostaje wyrównany.

Jeśli chcielibyśmy, by tak nie było, np. by tekst był wyrównany do prawej strony razem z linijką niżej, musimy zmienić projekt symbolu. Wracamy do edytora, zaznaczamy oba elementy graficzne i wyrównujemy je do prawej krawędzi.

Następnie ustawiamy wyrównywanie tekstu do prawej strony w poziomie i do środka w pionie.

Po uruchomieniu aplikacji widzimy, że teraz wszystko wyrównane jest do prawej strony, a kropka dziesiętna nie zmienia pozycji niezależnie od wyświetlanej wartości.

Przejdźmy do kolejnej linijki tekstu, tym razem zawierającej „0,000.00”. Zdefiniujmy dla niej animację Value Display typu Analog, ponownie wyświetlającą tę samą zmienną Mixer100.Level.PV.

Po uruchomieniu aplikacji możemy zaobserwować, jak tym razem wyświetlana jest ta wartość, poprzedzona zerami wiodącymi.

Pora na ostatni tekst, który dodaliśmy do okna. Figuruje w nim zwykły napis „This is a string”, bez żadnych znaków zastępczych. Wykorzystamy ten tekst do sprawdzenia, jak działa wizualizacja Value Display typu String. Dodajmy taką wizualizację.

W polu Expression Or Reference nie wpiszemy tym razem żadnej zmiennej, lecz wprowadzimy tu funkcję skryptową Now(). Funkcja ta zwraca liczbę sekund, które upłynęły od 1 stycznia 1970 roku, skonwertowaną do postaci stringu (ciągu znaków) zawierającego aktualną datę i godzinę. Zobaczmy, jaki jest efekt działania takiej wizualizacji.

Sprawdźmy jeszcze, jak działa wizualizacja Value Display typu Truth Table. W tym celu zduplikujemy ostatnią linijkę tekstu i zmienimy dla niej typ animacji właśnie na Truth Table. W polu Expression Or Reference wprowadzamy ponownie zmienną Mixer100.Level.PV. Zwróćmy jednak uwagę na dodatkową listę wyboru, pozwalającą zmodyfikować typ tej zmiennej.

Nie zmieni to oczywiście typu zmiennej w aplikacji, ale pozwoli zmienić dokładność obliczeń wykonywanych na potrzeby tej wizualizacji. Możemy mieć np. zmienną typu Double, czyli podwójnej precyzji, ale w tym miejscu pracować z pojedynczą precyzją, czyli Float.

Tabela Truth Table pozwala nam monitorować wartość zmiennej w zdefiniowanych przedziałach. Zobaczmy to na przykładzie. Przyciskiem z plusem dodaję wiersze do tabeli, tak aby liczyła ona trzy wiersze.

W tych wierszach zdefiniujemy teraz trzy warunki. W kolumnie Operator wprowadzamy operator porównania, precyzujący zakres, a w polu Value Or Expression – wartość graniczną, może to być liczba lub wyrażenie.

Wprowadźmy następujące warunki:

> 666

> 333

<= 333

W kolumnie Text wprowadzamy teksty, które będą wyświetlane, jeżeli wartość zmiennej będzie zawierała się w poszczególnych przedziałach. Niech będzie to „Very High”, „Normal” i „Very Low”. Kompletna tabel wygląda tak:

Po uruchomieniu aplikacji przekonujemy się, że w zależności od tego, w jakim przedziale znajduje się wartość zmiennej Mixer100.Level.PV, wyświetlany jest odpowiadający jej tekst.

Warto zwrócić jeszcze uwagę na jeden szczegół. Podczas pracy w oknie Edit Animations zdarza się, że w nagłówku wizualizacji wyświetlany jest ostrzegawczy symbol wykrzyknika na żółtym tle. Oznacza to, że animacja nie jest w pełni skonfigurowana i w niektórych polach brakuje danych lub są one nieprawidłowe. Pola takie są zaznaczone dodatkowo czerwoną ramką. Takiej niekompletnej animacji nie da się zapisać. Uzupełnienie danych powoduje zniknięcie ostrzegawczej ikonki i umożliwia zapisanie animacji.

W następnym odcinku poznamy kolejny rodzaj animacji: User Input.