{"id":26707,"date":"2026-06-17T11:16:00","date_gmt":"2026-06-17T09:16:00","guid":{"rendered":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/?p=26707"},"modified":"2026-07-31T11:39:06","modified_gmt":"2026-07-31T09:39:06","slug":"praca-z-przyciskami-wyboru-radio-buttons-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-15","status":"publish","type":"post","link":"https:\/\/www.astor.com.pl\/poradnikautomatyka\/praca-z-przyciskami-wyboru-radio-buttons-kurs-industrial-graphics-w-oprogramowaniu-aveva-odc-15\/","title":{"rendered":"Praca z przyciskami wyboru (radio buttons) | Kurs\u00a0Industrial Graphics w oprogramowaniu AVEVA, odc. 15"},"content":{"rendered":"\n
<\/div>\n\n\n\n

W tym odcinku kontynuujemy zapoznawanie si\u0119 z elementami graficznymi, z kt\u00f3rych mo\u017cna budowa\u0107 symbole Industrial Graphics.<\/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

W\u015br\u00f3d tych element\u00f3w znajduj\u0105 si\u0119 r\u00f3wnie\u017c kontrolki typowe dla okienek systemu Windows, takie jak pola zaznaczenia (Checkbox<\/strong>), listy rozwijalne czy kontrolki kalendarza. Zaczniemy jednak od przycisk\u00f3w wyboru opcji typu \u201eradio\u201d (Radio Button Group<\/strong>). Narz\u0119dzie do ich wstawiania znajduje si\u0119 w panelu Tools<\/strong>.<\/p>\n\n\n\n

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

Za pomoc\u0105 przycisk\u00f3w typu \u201eradio\u201d mo\u017cemy utworzy\u0107 narz\u0119dzie do wybierania pojedynczej opcji z listy zawieraj kilka opcji. Oznacza to, \u017ce grupa takich przycisk\u00f3w daje nam mo\u017cliwo\u015b\u0107 jednokrotnego wyboru \u2013 z listy opcji wybieramy zawsze dok\u0142adnie jedn\u0105. Kontrolki tego typu s\u0105 powszechne w oprogramowaniu komputerowym, wi\u0119c s\u0105 intuicyjne \u2013 ich dzia\u0142anie jest doskonale znane ka\u017cdemu, kto u\u017cywa komputera.<\/p>\n\n\n\n

Wybierzmy teraz narz\u0119dzie Radio Button Group<\/strong> \u2013 sama nazwa narz\u0119dzia wskazuje, \u017ce b\u0119dziemy dodawa\u0107 grup\u0119 przycisk\u00f3w. To logiczne, pojedynczy przycisk \u201eradio\u201d nie ma sensu. Dlatego aby umie\u015bci\u0107 element w polu roboczym, nie wystarczy klikn\u0105\u0107 kursorem w wybranym miejscu, ale naciskamy klawisz myszy i rozci\u0105gamy element, aby utworzy\u0107 grup\u0119 o po\u017c\u0105danym rozmiarze. Wielko\u015b\u0107 umieszczonego elementu mo\u017cna p\u00f3\u017aniej zmieni\u0107, skaluj\u0105c go w standardowy spos\u00f3b.<\/p>\n\n\n\n

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

Element zosta\u0142 dodany i jak widzimy, ma trzy opcje, na razie nazwane roboczo RadioButton1, RadioButton2 i RadioButton3. Aby to zmieni\u0107, dwukrotnie klikamy przyciskiem myszy na li\u015bcie \u2013 otwiera si\u0119 okno Edit Animations<\/strong>.<\/p>\n\n\n\n

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

G\u00f3rna cz\u0119\u015b\u0107 tego okienka zawiera podstawowe ustawienia, kt\u00f3re s\u0105 takie same w przypadku wszystkich kontrolek systemu Windows, o czym przekonamy si\u0119 w kolejnych odcinkach.<\/p>\n\n\n\n

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

W polu Selected Radio Button Value<\/strong> zdefiniujemy referencj\u0119 (a wi\u0119c zmienn\u0105 lub Custom Property), kt\u00f3ra b\u0119dzie odzwierciedla\u0142a wyb\u00f3r dokonany za pomoc\u0105 listy. Natomiast w polu Submit Value Changes okre\u015blimy, czy zmiany wyboru opcji dokonywane przez operatora maj\u0105 by\u0107 przesy\u0142ane do referencji natychmiast (Immediately<\/strong>), czy po spe\u0142nieniu dodatkowego warunku (On Trigger Condition<\/strong>). Ta druga opcja jest przydatna w sytuacji, gdy lista opcji do wyboru jest cz\u0119\u015bci\u0105 wi\u0119kszego formularza, na kt\u00f3rym znajduj\u0105 si\u0119 te\u017c inne opcje. Wtedy najcz\u0119\u015bciej chcieliby\u015bmy, aby dane przes\u0142ane by\u0142y z ca\u0142ego formularza jednorazowo, np. po naci\u015bni\u0119ciu przycisku \u201eWy\u015blij\u201d. W tym przypadku nale\u017cy r\u00f3wnie\u017c zdefiniowa\u0107 warunek typu Boolean<\/strong> i wprowadzi\u0107 go w polu Boolean Expression<\/strong>. Mo\u017ce to by\u0107 zmienna, Custom Property lub wyra\u017cenie typu Boolean \u2013 je\u017celi przyjmie ono warto\u015b\u0107 True, spowoduje to przes\u0142anie danych z listy wyboru.<\/p>\n\n\n\n

W dolnej cz\u0119\u015bci okna widzimy pole Static Values and Captions<\/strong>, za pomoc\u0105 kt\u00f3rego mo\u017cemy dostosowa\u0107 nasz\u0105 list\u0119: zmieni\u0107 liczb\u0119 opcji, nazwa\u0107 je i nada\u0107 im warto\u015bci. W kolumnie Caption widzimy opisy, jakie b\u0119d\u0105 wy\u015bwietlane na li\u015bcie, a w kolumnie Value pojawi\u0105 si\u0119 konkretne warto\u015bci, kt\u00f3re im odpowiadaj\u0105. Mog\u0105 to by\u0107 liczby lub teksty \u2013 powinny by\u0107 to warto\u015bci takiego samego typu, jaki jest typ referencji wprowadzonej w polu Selected Radio Button Value<\/strong>.<\/p>\n\n\n\n

Aby doda\u0107 dodatkow\u0105 pozycj\u0119 do listy, wystarczy u\u017cy\u0107 przycisku ze znakiem plusa.<\/p>\n\n\n\n

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

Znajduj\u0105cy si\u0119 obok przycisk usuwania pozwoli nam usun\u0105\u0107 wybran\u0105 pozycj\u0119 z listy.<\/p>\n\n\n\n

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

Aby zmieni\u0107 kolejno\u015b\u0107 opcji na li\u015bcie, nale\u017cy u\u017cy\u0107 przycisk\u00f3w ze strza\u0142kami, kt\u00f3re przesun\u0105 wybran\u0105 opcj\u0119 w g\u00f3r\u0119 lub w d\u00f3\u0142.<\/p>\n\n\n\n

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

Poni\u017cej widzimy opcj\u0119 Use Values as Captions<\/strong>. Je\u017celi j\u0105 zaznaczymy, zamiast opis\u00f3w opcji wy\u015bwietlane b\u0119d\u0105 bezpo\u015brednio odpowiadaj\u0105ce im warto\u015bci. Poni\u017cej mo\u017cemy jeszcze okre\u015bli\u0107, czy lista opcji b\u0119dzie wy\u015bwietlana pionowo (Vertical<\/strong>) czy poziomo (Horizontal<\/strong>).<\/p>\n\n\n\n

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

W poni\u017cszym przyk\u0142adzie przygotujemy list\u0119, kt\u00f3ra pozwoli nam wybra\u0107 jedn\u0105 z czterech grafik, kt\u00f3re zostan\u0105 wy\u015bwietlone na ekranie.<\/p>\n\n\n\n

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

W kolumnie Caption<\/strong> wpiszemy zatem ich nazwy.<\/p>\n\n\n\n

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

Dla tego symbolu przygotowana jest ju\u017c w\u0142a\u015bciwo\u015b\u0107 Custom Property o nazwie GraphicSelected<\/strong>, kt\u00f3ra b\u0119dzie odpowiada\u0142a za wyb\u00f3r grafiki. Przypisane do tej w\u0142a\u015bciwo\u015bci warto\u015bci 1, 2, 3 i 4 b\u0119d\u0105 oznacza\u0142y wyb\u00f3r konkretnej grafiki. Wystarczy j\u0105 przypisa\u0107 w polu Selected Radio Button Value<\/strong>.<\/p>\n\n\n\n

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

Teraz nale\u017cy uzupe\u0142ni\u0107 kolumn\u0119 Value<\/strong> na li\u015bcie opcji. Poszczeg\u00f3lnym opcjom przypisujemy odpowiadaj\u0105ce im warto\u015bci.<\/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 przycisku OK<\/strong> zmiany zostan\u0105 zapisane, a efekt ko\u0144cowy wygl\u0105da tak:<\/p>\n\n\n\n

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

Teraz mo\u017cna przej\u015b\u0107 do trybu Runtime, aby zobaczy\u0107 efekt.<\/p>\n\n\n\n

List\u0119 mo\u017cemy tak\u017ce umie\u015bci\u0107 w uk\u0142adzie poziomym, wtedy mo\u017ce wygl\u0105da\u0107 tak:<\/p>\n\n\n\n

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

Warto jeszcze zauwa\u017cy\u0107, \u017ce domy\u015blnie kontrolka listy wyboru ma bia\u0142e t\u0142o. Je\u017celi wi\u0119c umie\u015bcimy j\u0105 w oknie, kt\u00f3re ma inne t\u0142o, nie b\u0119dzie dobrze wygl\u0105da\u0107.<\/p>\n\n\n\n

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

Aby to zmieni\u0107, wystarczy zaznaczy\u0107 kontrolk\u0119 i u\u017cy\u0107 opcji Fill Color<\/strong>, aby zmieni\u0107 kolor wype\u0142nienia dla listy.<\/p>\n\n\n\n

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

Aby mie\u0107 pewno\u015b\u0107, \u017ce b\u0119dzie to taki sam kolor, jakie jest t\u0142o okna, mo\u017cemy u\u017cy\u0107 pr\u00f3bnika kolor\u00f3w.<\/p>\n\n\n\n

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

W nast\u0119pnym odcinku<\/a> zajmiemy si\u0119 kontrolk\u0105 kalendarza.<\/p>\n\n\n\n

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