{"id":26790,"date":"2026-07-06T11:50:47","date_gmt":"2026-07-06T09:50:47","guid":{"rendered":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?p=26790"},"modified":"2026-07-31T12:55:29","modified_gmt":"2026-07-31T10:55:29","slug":"animacja-wprowadzania-wartosci-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-21","status":"publish","type":"post","link":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/animacja-wprowadzania-wartosci-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-21\/","title":{"rendered":"Animacja wprowadzania warto\u015bci | Kurs\u00a0Industrial Graphics w oprogramowaniu AVEVA, odc. 21"},"content":{"rendered":"\n
<\/div>\n\n\n\n

W tym odcinku poznamy kolejny rodzaj animacji: User Input<\/strong>. S\u0142u\u017cy ona do wprowadzania \u00a0danych przez u\u017cytkownika.<\/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

Na pocz\u0105tek narysujemy prosty przycisk, a nast\u0119pnie dodamy do niego animacj\u0119 za pomoc\u0105 okna Edit Animations<\/strong>. B\u0119dzie to animacja User Input<\/strong>.<\/p>\n\n\n\n

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

Pocz\u0105tkowy widok ustawie\u0144 dla tej animacji jest podobny, jak w przypadku Value Display<\/strong>. W g\u00f3rnej cz\u0119\u015bci okna, w polu States<\/strong>, mo\u017cemy wybra\u0107, jaki typ danych b\u0119dzie wprowadzany za pomoc\u0105 tej animacji. Mog\u0105 to by\u0107 warto\u015bci dyskretne (Boolean<\/strong>), liczby ca\u0142kowite i rzeczywiste (Analog<\/strong>) i inne. Poni\u017cej wy\u015bwietlany jest opis wyja\u015bniaj\u0105cy, co kryje si\u0119 pod poszczeg\u00f3lnymi opcjami.<\/p>\n\n\n\n

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

Zacznijmy od pierwszej opcji, warto\u015bci Boolean<\/strong>. Tradycyjnie w polu Reference<\/strong> nale\u017cy poda\u0107 referencj\u0119 do zmiennej typu dyskretnego, kt\u00f3ra przyjmie warto\u015b\u0107 wprowadzon\u0105 przez u\u017cytkownika. Wprowadzimy tu zmienn\u0105 Mixer100.Pump1.CMD<\/strong>. W przyk\u0142adowej aplikacji s\u0142u\u017cy ona do uruchamiania nap\u0119du pompy \u2013 warto\u015b\u0107 1 oznacza uruchomienie, a warto\u015b\u0107 0 \u2013 zatrzymanie.<\/p>\n\n\n\n

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

W polu Message to User<\/strong> mo\u017cemy wprowadzi\u0107 komunikat wy\u015bwietlany przez animacj\u0119 po naci\u015bni\u0119ciu przycisku. Mo\u017ce on zawiera\u0107 monit o podanie danych albo dodatkowe podpowiedzi. Mo\u017cna tu wprowadzi\u0107 tekst wprost albo poda\u0107 referencj\u0119 do zmiennej tekstowej. Wyboru dokonujemy klikaj\u0105c w ikonk\u0119 po lewej stronie pola \u2013 om\u00f3wili\u015bmy to w poprzedniej cz\u0119\u015bci kursu.<\/p>\n\n\n\n

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

Animacja User Input<\/strong> typu Boolean<\/strong> wy\u015bwietli nam okienko dialogowe z dwoma przyciskami, kt\u00f3re b\u0119dzie mo\u017cna klikn\u0105\u0107, aby wybra\u0107 jedn\u0105 z dw\u00f3ch warto\u015bci: prawda lub fa\u0142sz. Pola Prompt -> True Message<\/strong> oraz Prompt -> False Message <\/strong>pozwalaj\u0105 skonfigurowa\u0107 napisy, kt\u00f3re znajd\u0105 si\u0119 na tych przyciskach. S\u0105 to po prostu opisy dw\u00f3ch opcji, jakie u\u017cytkownik ma do wyboru. Domy\u015blnie s\u0105 tu napisy \u201eON\u201d i \u201eOFF\u201d, ale mo\u017cemy wprowadzi\u0107 inne (w naszym przypadku \u201eStart\u201d i \u201eStop\u201d), lub poda\u0107 referencj\u0119 do zmiennej tekstowej, uprzednio klikaj\u0105c znan\u0105 nam ju\u017c ikonk\u0119.<\/p>\n\n\n\n

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

W polu Shortcut<\/strong> mo\u017cna zdefiniowa\u0107 skr\u00f3t klawiszowy, kt\u00f3rego naci\u015bni\u0119cie b\u0119dzie odpowiada\u0142o klikni\u0119ciu przycisku na ekranie. Mo\u017cemy wybra\u0107 klawisz z listy rozwijanej Key<\/strong>, dodaj\u0105c do niego modyfikatory Ctrl<\/strong> lub Shift<\/strong>.<\/p>\n\n\n\n

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

Ostatnie ustawienie pozwoli nam okre\u015bli\u0107, co b\u0119dzie wy\u015bwietlane na przycisku w czasie pracy aplikacji. Napis wprowadzony w polu Display Value -> True Message<\/strong> b\u0119dzie wy\u015bwietlany na przycisku, je\u017celi zmienna b\u0119dzie mia\u0142a warto\u015b\u0107 True<\/strong>, natomiast odpowiednio tekst Display Value -> False Message<\/strong> zostanie wy\u015bwietlony w czasie, gdy zmienna przyjmie warto\u015b\u0107 False<\/strong>.<\/p>\n\n\n\n

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

Je\u017celi jednak nie chcemy, by napis na przycisku by\u0142 modyfikowany, lecz by stale wy\u015bwietla\u0142 tekst, kt\u00f3ry na nim pierwotnie umie\u015bcili\u015bmy, wystarczy zaznaczy\u0107 pole Input Only<\/strong>. Wy\u0142\u0105czymy w ten spos\u00f3b opcj\u0119 Display Value<\/strong> (co zostanie uwidocznione przez wyszarzenie odpowiednich p\u00f3l).<\/p>\n\n\n\n

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

Zapisujemy teraz nasz symbol i uruchamiamy aplikacj\u0119. Jak wida\u0107, w okienku wy\u015bwietla si\u0119 przycisk z napisem \u201eStopped\u201d, co oznacza, \u017ce pompa nie pracuje.<\/p>\n\n\n\n

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

Po klikni\u0119ciu przycisku pojawi si\u0119 mo\u017cliwo\u015b\u0107 wprowadzenia danych. W g\u00f3rnej cz\u0119\u015bci wy\u015bwietlany jest wcze\u015bniej zdefiniowany monit, a poni\u017cej widzimy dwa przyciski do wyboru opcji. Na dole pojawia si\u0119 dodatkowy przycisk Cancel<\/strong>, kt\u00f3ry umo\u017cliwia zamkni\u0119cie okna bez wprowadzania warto\u015bci.<\/p>\n\n\n\n

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

Je\u017celi teraz naci\u015bniemy przycisk Start<\/strong>, przekonamy si\u0119, \u017ce zmienna zmieni\u0142a warto\u015b\u0107 i pompa zosta\u0142a uruchomiona.<\/p>\n\n\n\n

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

Nale\u017cy pami\u0119ta\u0107, \u017ce napis na przycisku nie jest wizualizacj\u0105 w sensie \u015bcis\u0142ym i nie powinien by\u0107 jedynym sposobem informowania operatora o pracy pompy. Pe\u0142ni on jedynie funkcj\u0119 pomocnicz\u0105.<\/p>\n\n\n\n

Czas przej\u015b\u0107 dalej. Teraz  zobaczymy, w jaki spos\u00f3b skonfigurowa\u0107 wprowadzanie danych liczbowych. W tym celu dodamy do symbolu element Text Box<\/strong> (pole tekstowe) i zdefiniujemy dla niego animacj\u0119 User Input<\/strong>. Tym razem wybieramy typ Analog<\/strong>.<\/p>\n\n\n\n

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

W polu Reference<\/strong> wprowadzamy zmienn\u0105, kt\u00f3rej warto\u015b\u0107 chcemy modyfikowa\u0107 za pomoc\u0105 tej animacji. W naszym przypadku b\u0119dzie to zmienna Mixer100.Agitator.Speed.SP<\/strong>. Pole Message to User<\/strong> pe\u0142ni identyczn\u0105 rol\u0119, jak w przypadku typu Boolean<\/strong> \u2013 wprowadzamy tu tekst monitu, kt\u00f3ry zostanie wy\u015bwietlony po klikni\u0119ciu w element, dla kt\u00f3rego definiujemy animacj\u0119.<\/p>\n\n\n\n

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

Poni\u017cej widzimy opcje Value Limits<\/strong>, dzi\u0119ki kt\u00f3rym mo\u017cemy okre\u015bli\u0107 dozwolony zakres dla wprowadzonych informacji. Je\u017celi opcja Restrict Values<\/strong> jest zaznaczona, wprowadzenie warto\u015bci Minimum<\/strong> i Maximum<\/strong> jest obowi\u0105zkowe. Mo\u017cna tu wprowadzi\u0107 warto\u015bci wprost, ale mo\u017cna u\u017cy\u0107 r\u00f3wnie\u017c zmiennych lub p\u00f3l zmiennych. Wykorzystamy t\u0119 ostatni\u0105 mo\u017cliwo\u015b\u0107, wprowadzaj\u0105c tu warto\u015bci p\u00f3l MinEU<\/strong> i MaxEU<\/strong>. Je\u017celi definiuj\u0105c zmienn\u0105 okre\u015blili\u015bmy dla niej minimum i maksimum wyra\u017cone w jednostkach in\u017cynierskich, warto\u015bci te znajduj\u0105 si\u0119 w\u0142a\u015bnie w tych polach.<\/p>\n\n\n\n

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

Analogicznie, jak poprzednio, mo\u017cemy zdefiniowa\u0107 skr\u00f3t klawiszowy, tak\u017ce okre\u015bli\u0107, czy element b\u0119dzie wy\u015bwietla\u0142 wprowadzon\u0105 warto\u015b\u0107. Je\u017celi tego nie chcemy, wystarczy zaznaczy\u0107 opcj\u0119 Input Only<\/strong>. W przeciwnym razie pole b\u0119dzie wy\u015bwietla\u0142o now\u0105 warto\u015b\u0107 po jej wprowadzeniu. Dodatkowo w polu Text Format<\/strong> mo\u017cemy zdefiniowa\u0107 dok\u0142adny format, w jakim liczba b\u0119dzie wy\u015bwietlona. Stosowana jest tu taka sama konwencja, oparta na znakach hash, jak\u0105 poznali\u015bmy w poprzednim odcinku. Dodatkowo z listy mo\u017cna wybra\u0107 jeden z predefiniowanych format\u00f3w.<\/p>\n\n\n\n

Mo\u017cemy r\u00f3wnie\u017c zezwoli\u0107 na wy\u015bwietlanie operatorowi klawiatury numerycznej do wprowadzenia danych z ekranu. W tym celu zaznaczamy opcj\u0119 Use Keypad<\/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 w polu tekstowym wy\u015bwietlona jest aktualna warto\u015b\u0107 zmiennej.<\/p>\n\n\n\n

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

Po klikni\u0119ciu pojawia si\u0119 klawiatura ekranowa. Widzimy tu aktualn\u0105 warto\u015b\u0107 zmiennej, zdefiniowany zakres dozwolonych warto\u015bci, pole New Value<\/strong>, w kt\u00f3rym mo\u017cemy wpisa\u0107 now\u0105 warto\u015b\u0107, oraz przyciski numeryczne, za pomoc\u0105 kt\u00f3rych mo\u017cemy wprowadza\u0107 cyfry. Oczywi\u015bcie mo\u017cemy to zrobi\u0107 r\u00f3wnie\u017c po prostu z klawiatury komputera. Po wprowadzeniu liczby naciskamy OK<\/strong>, aby zapisa\u0107 now\u0105 warto\u015b\u0107, albo Cancel<\/strong>, aby zrezygnowa\u0107.<\/p>\n\n\n\n

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

Dodamy teraz kolejny przycisk do obszaru roboczego, dla kt\u00f3rego zdefiniujemy animacj\u0119 User Input<\/strong> typu String<\/strong>. Jak wida\u0107, okno ustawie\u0144 wygl\u0105da bardzo podobnie. W polu Reference<\/strong> okre\u015blamy tym razem zmienn\u0105 typu tekstowego. Pola Message to User<\/strong> oraz Shortcut<\/strong> dzia\u0142aj\u0105 identycznie, jak poprzednio. Dla przyk\u0142adu u\u017cyjemy tutaj zmiennej systemowej InToucha o nazwie $OperatorEntered<\/strong>, kt\u00f3ra zawiera login operatora zalogowanego do aplikacji. W polu Message to User<\/strong> wprowadzamy adekwatny tekst monitu.<\/p>\n\n\n\n

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

W polu Interaction<\/strong> ponownie widzimy opcj\u0119 Input Only<\/strong>. Je\u017celi jest wy\u0142\u0105czona, przycisk b\u0119dzie wy\u015bwietla\u0142 aktualn\u0105 warto\u015b\u0107 zmiennej, a my nie musimy ju\u017c nic wi\u0119cej konfigurowa\u0107. Natomiast je\u017celi w\u0142\u0105czymy t\u0119 opcj\u0119, warto\u015b\u0107 zmiennej nie b\u0119dzie wy\u015bwietlana na przycisku, ale dost\u0119pne staj\u0105 si\u0119 dodatkowe opcje, kt\u00f3re pozwalaj\u0105 zabezpieczy\u0107 wprowadzan\u0105 warto\u015b\u0107, je\u017celi to jest konieczne ze wzgl\u0119d\u00f3w bezpiecze\u0144stwa. Je\u017celi odznaczymy Echo Characters<\/strong>, znaki wprowadzane przez u\u017cytkownika nie b\u0119d\u0105 widoczne na ekranie. Je\u017celi zaznaczymy \u2013 b\u0119d\u0105 one widoczne, ale wtedy mo\u017cemy w\u0142\u0105czy\u0107 Password<\/strong>, dzi\u0119ki czemu wprowadzane znaki b\u0119d\u0105 zast\u0119powane znakiem maskuj\u0105cym, domy\u015blnie jest to \u201e*\u201d. Je\u017celi dodatkowo wymagane jest szyfrowanie hase\u0142, mo\u017cemy to zrobi\u0107 zaznaczaj\u0105c opcj\u0119 Encrypt<\/strong>.<\/p>\n\n\n\n

Mo\u017cemy r\u00f3wnie\u017c zezwoli\u0107 na wy\u015bwietlanie operatorowi klawiatury ekranowej do wprowadzenia danych z ekranu. W tym celu zaznaczamy opcj\u0119 Use Keypad<\/strong>.<\/p>\n\n\n\n

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

Uruchamiamy aplikacj\u0119 i obserwujemy efekt. Jak wida\u0107, przycisk jest pusty. Jest tak dlatego, \u017ce zmienna $OperatorEntered<\/strong> zawiera pusty ci\u0105g znak\u00f3w.<\/p>\n\n\n\n

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

Po klikni\u0119ciu w przycisk otwiera si\u0119 klawiatura, tym razem pe\u0142notekstowa \u2013 mo\u017cemy wprowadzi\u0107 tekst, kt\u00f3ry zostanie zapisany do zmiennej $OperatorEntered<\/strong>.<\/p>\n\n\n\n

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

Po naci\u015bni\u0119ciu OK<\/strong> widzimy, \u017ce tekst zosta\u0142 zapisany i wy\u015bwietlony na przycisku.<\/p>\n\n\n\n

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

Na koniec zr\u00f3bmy jeszcze jeden eksperyment. Wracamy do drugiego elementu \u2013 pola tekstowego, w kt\u00f3rym wpisywali\u015bmy liczby. W oknie Edit Animations<\/strong> odznaczamy opcj\u0119 Use keypad<\/strong>, wy\u0142\u0105czaj\u0105c klawiatur\u0119 ekranow\u0105.<\/p>\n\n\n\n

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

Po uruchomieniu aplikacji i klikni\u0119ciu w pole tekstowe widzimy r\u00f3\u017cnic\u0119. Nie pojawia si\u0119 klawiatura ekranowa, lecz jedynie ma\u0142e pole do wprowadzenia warto\u015bci z klawiatury komputera. Po jej wprowadzeniu konieczne jest naci\u015bni\u0119cie Enter<\/strong>. Je\u017celi tego nie zrobimy, klikaj\u0105c gdzie\u015b w innym obszarze okna, warto\u015b\u0107 nie zostanie zapisana.<\/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 w\u0142a\u015bciwo\u015bci Custom Properties.<\/p>\n\n\n\n

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