{"id":26708,"date":"2026-06-19T11:16:00","date_gmt":"2026-06-19T09:16:00","guid":{"rendered":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?p=26708"},"modified":"2026-07-31T11:46:05","modified_gmt":"2026-07-31T09:46:05","slug":"praca-z-kontrolka-kalendarza-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-16","status":"publish","type":"post","link":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/praca-z-kontrolka-kalendarza-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-16\/","title":{"rendered":"Praca z kontrolk\u0105 kalendarza | Kurs\u00a0Industrial Graphics w oprogramowaniu AVEVA, odc. 16"},"content":{"rendered":"\n
<\/div>\n\n\n\n

W tym odcinku zajmiemy si\u0119 kontrolk\u0105 kalendarza (Calendar<\/strong>).<\/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

Znajdziemy j\u0105 oczywi\u015bcie w panelu Tools<\/strong>. Kontrolka ta umo\u017cliwia wyb\u00f3r przez operatora daty. Mo\u017cna dzi\u0119ki niej okre\u015bli\u0107 pojedyncz\u0105 dat\u0119 lub ca\u0142y zakres dni.<\/p>\n\n\n\n

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

Aby doda\u0107 kontrolk\u0119 do symbolu, wybieramy opcj\u0119 Calendar<\/strong>, a nast\u0119pnie klikamy w odpowiednim punkcie obszaru roboczego.<\/p>\n\n\n\n

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

Aby zmieni\u0107 ustawienia kontrolki klikamy dwukrotnie \u2013 otworzy si\u0119 okienko Edit Animations<\/strong>.<\/p>\n\n\n\n

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

Na g\u00f3rze widzimy opcje znane nam ju\u017c z poprzedniego odcinka.  W polu Date Value<\/strong> musimy wprowadzi\u0107 referencj\u0119 do zmiennej przechowuj\u0105cej dat\u0119. Opcja Submit Value Changes<\/strong> dzia\u0142a analogicznie jak w przypadku elementu Radio Button List<\/strong> \u2013 okre\u015blamy, czy zmiany b\u0119d\u0105 zapisywane natychmiast, czy po spe\u0142nieniu warunku.<\/p>\n\n\n\n

Poni\u017cej mo\u017cemy zdefiniowa\u0107 zakres, z kt\u00f3rego b\u0119dzie mo\u017cna wybra\u0107 dat\u0119. W tym celu mo\u017cemy okre\u015bli\u0107 dat\u0119 pocz\u0105tkow\u0105 (MinDate<\/strong>) oraz ko\u0144cow\u0105 (MaxDate<\/strong>) tego zakresu. Je\u017celi pozostawimy te pola puste, b\u0119dzie mo\u017cna wybra\u0107 dowolny dzie\u0144 z ca\u0142ej historii oraz przysz\u0142o\u015bci.<\/p>\n\n\n\n

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

W te pola mo\u017cemy wprowadzi\u0107 konkretne warto\u015bci albo wyra\u017cenia, r\u00f3wnie\u017c zawieraj\u0105ce funkcje. Przyk\u0142adowo za\u0142\u00f3\u017cmy, \u017ce chcemy mie\u0107 mo\u017cliwo\u015b\u0107 wprowadzenia daty od siedmiu dni wstecz do siedmiu dni naprz\u00f3d pocz\u0105wszy od dzi\u015b. W takim przypadku w polu MinDate<\/strong> wystarczy wprowadzi\u0107 formu\u0142\u0119:<\/p>\n\n\n\n

Now() – 7 * 86400<\/strong><\/p>\n\n\n\n

Dlaczego tak? Ta formu\u0142a odejmuje od chwili obecnej 7 dni (tzn. 7 * 24 * 60 * 60 = 86400 sekund).<\/p>\n\n\n\n

Analogicznie w polu MaxDate<\/strong> wprowadzamy:<\/p>\n\n\n\n

Now() + 7 * 86400<\/strong><\/p>\n\n\n\n

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

W polu Bolded Dates<\/strong> mo\u017cemy okre\u015bli\u0107 daty, kt\u00f3re b\u0119d\u0105 w kalendarzu pogrubione. Ta opcja nie jest dost\u0119pna w programie InTouch HMI, poniewa\u017c nie obs\u0142uguje on wymaganego tutaj tablicowego typu zmiennej.<\/p>\n\n\n\n

Zaznaczenie opcji Show Today<\/strong> powoduje wy\u015bwietlenie w kalendarzu informacji o bie\u017c\u0105cej dacie. Poni\u017cej mo\u017cemy r\u00f3wnie\u017c dostosowa\u0107 kolorystyk\u0119 kontrolki.<\/p>\n\n\n\n

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

Po przej\u015bciu do trybu Runtime widzimy, \u017ce kalendarz wy\u015bwietla tylko daty ze zdefiniowanego przez nas zakresu. Wybrana w kalendarzu data oznaczona jest ciemniejsz\u0105 ramk\u0105.<\/p>\n\n\n\n

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

Je\u017celi teraz klikniemy na inn\u0105 dat\u0119, zobaczymy, \u017ce dodatkowe obramowanie wskazuje dzie\u0144 dzisiejszy. Klikni\u0119cie w pole Today<\/strong> z aktualn\u0105 dat\u0105 w dolnej cz\u0119\u015bci kalendarza pozwala zawsze wr\u00f3ci\u0107 do dnia dzisiejszego, co jest szczeg\u00f3lnie przydatne, je\u017celi wcze\u015bniej zmienimy dat\u0119 na odleg\u0142\u0105.<\/p>\n\n\n\n

Ponadto nale\u017cy pami\u0119ta\u0107, \u017ce kontrolka ustawia wy\u0142\u0105cznie dat\u0119, tzn. informacj\u0119 o dniu. Godzina ustawiana jest zawsze na p\u00f3\u0142noc (czyli 12:00 AM wg ameryka\u0144skich ustawie\u0144 regionalnych).<\/p>\n\n\n\n

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

Zmodyfikujmy teraz ustawienia zakresu dat, likwiduj\u0105c ograniczenie \u2013 wystarczy pola MinDate<\/strong> i MaxDate<\/strong> pozostawi\u0107 puste. Teraz kalendarz wygl\u0105da tak:<\/p>\n\n\n\n

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

Miesi\u0105ce mo\u017cna zmienia\u0107, klikaj\u0105c ikonki strza\u0142ek, ale je\u017celi klikniemy nazw\u0119 miesi\u0105ca, wy\u015bwietlona zostanie lista wszystkich miesi\u0119cy w roku, dzi\u0119ki kt\u00f3rej mo\u017cna \u0142atwo przeskoczy\u0107 do zupe\u0142nie innego miesi\u0105ca.<\/p>\n\n\n\n

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

Je\u017celi teraz klikniemy ponownie na g\u00f3rze kalendarza (teraz wy\u015bwietlany jest tam aktualny rok), otrzymamy list\u0119 10 lat (pi\u0119\u0107 lat wstecz i pi\u0119\u0107 w przysz\u0142o\u015bci).<\/p>\n\n\n\n

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

Je\u017celi jeszcze raz klikniemy w tym samym miejscu, zobaczymy list\u0119 dekad, pozwalaj\u0105c\u0105 porusza\u0107 si\u0119 po ca\u0142ym stuleciu.<\/p>\n\n\n\n

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

Niezale\u017cnie od tego, jak daleko si\u0119 znajdziemy, naci\u015bni\u0119cie Today<\/strong> na dole kalendarza spowoduje natychmiastowy powr\u00f3t do aktualnej daty i normalnego widoku kalendarza.<\/p>\n\n\n\n

W nast\u0119pnym odcinku<\/a> poznamy kontrolk\u0119 wyboru daty i czasu.<\/p>\n\n\n\n

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