RadiobuttonsAndMore

This is Part 3 of a 4 Part Series

• Part 1 - What is a Button?
• Part 2 - What is a Checkbox?
• Part 3 - What is a Radiobutton?
• Part 4 - What is a Groupbox?
• Conclusion - Making the Best Choice

What is a Radiobutton?

Radiobuttons are a bit trickier than checkboxes. For one thing, the GUI setup requires both Set and Reset branch events, but the Reset branch event is not automatically activated. In fact, it isn't even triggered. What this means is that the Set event happens, but the Reset event only happens if you actually code it within the Set event.

In keeping with our previous landscape scene, choosing Draw Sun will not automatically Erase Cloud. The Erase Cloud routine must be included in the Draw Sun routine. What the automatic coding will do is keep only one radiobutton in the visibly Set status. You, the coder, must program both Set and Reset events in the Set handlers.

' Demo Illustrating Radiobuttons
    Nomainwin
    WindowWidth = 800
    WindowHeight = 600
 
    UpperLeftX = Int((DisplayWidth-WindowWidth)/2)
    UpperLeftY = Int((DisplayHeight-WindowHeight)/2)
 
    Radiobutton #main.rbtn1, "Draw Sun", [drawSun], [eraseSun], 20, 530, 100, 24
    Radiobutton #main.rbtn2, "Draw Cloud", [drawCloud], [eraseCloud], 150, 530, 100, 24
    Radiobutton #main.rbtn3, "Draw Yellow Flower", [drawYellowFlower], [eraseYellowFlower], 280, 530, 112, 24
    Radiobutton #main.rbtn4, "Draw Pink Flower", [drawPinkFlower], [erasePinkFlower], 410, 530, 108, 24
    Radiobutton #main.rbtn5, "Draw Ladybug", [drawLadybug], [eraseLadybug], 540, 530, 100, 24
    Radiobutton #main.rbtn6, "Draw Caterpillar", [drawCaterpillar], [eraseCaterpillar], 670, 530, 100, 24
    Graphicbox #main.gb, 1, 1, 791, 500
 
    Open "The Radiobuttons" for Window as #main
    #main "Trapclose [endDemo]"
    #main.gb "Down"
 
'Draw the Blue Sky
    #main.gb "Color Darkblue; Backcolor Darkblue; Place 0 0"
    #main.gb "Boxfilled 790 250"
 
'Draw the Green Ground
    #main.gb "Color Darkgreen; Backcolor Darkgreen; Place 0 250"
    #main.gb "Boxfilled 790 500"
    Wait
 
[endDemo]
    Close #main
    End
 
[drawSun]
    Gosub [drawSunRoutine]
    Gosub [eraseCloudRoutine]
    Wait
 
[drawCloud]
    Gosub [drawCloudRoutine]
    Gosub [eraseSunRoutine]
    Wait
 
[drawYellowFlower]
    Gosub [drawYellowFlowerRoutine]
    Gosub [erasePinkFlowerRoutine]
    Wait
 
[drawPinkFlower]
    Gosub [drawPinkFlowerRoutine]
    Gosub [eraseYellowFlowerRoutine]
    Wait
 
[drawLadybug]
    Gosub [drawLadybugRoutine]
    Gosub [eraseCaterpillarRoutine]
    Wait
 
[drawCaterpillar]
    Gosub [drawCaterpillarRoutine]
    Gosub [eraseLadybugRoutine]
    Wait
 
[drawSunRoutine]
    #main.gb "Color Yellow; Backcolor Yellow"
    For angle = 10 to 360 Step 10
        #main.gb "Place 200 125; North; Turn ";angle
        #main.gb "Go ";Int(Rnd(1) * 20) + 60
    Next angle
    #main.gb "Place 200 125; Circlefilled 50"
    Return
 
[eraseSunRoutine]
    #main.gb "Color Darkblue; Backcolor Darkblue"
    #main.gb "Place 40 0; Boxfilled 300 210"
    Return
 
[drawCloudRoutine]
    #main.gb "Color White; Backcolor White"
    For i = 1 to 10
        x = Int(Rnd(1)*100) + 600
        y = Int(Rnd(1)*100) + 80
        #main.gb "Place ";x;" ";y
        width = Int(Rnd(1)*10) * 5 + 50
        height = Int(Rnd(1)*10) * 2 + 20
        #main.gb "Ellipsefilled ";width;" ";height
    Next i
    Return
 
[eraseCloudRoutine]
    #main.gb "Color Darkblue; Backcolor Darkblue"
    #main.gb "Place 550 50; Boxfilled 750 200"
    Return
 
[drawYellowFlowerRoutine]
    #main.gb "Color Green; Backcolor Green"
    For x = 295 to 305
        #main.gb "Line ";x;" 315 ";x;" 375"
    Next x
    #main.gb "Color Yellow; Backcolor Yellow"
    For angle = 0 to 360 Step 60
        #main.gb "Place 300 300; North; Up; Turn ";angle
        #main.gb "Go 20; Down; Circlefilled 15"
    Next angle
    #main.gb "Color Pink; Backcolor Pink"
    #main.gb "Place 300 300; Circlefilled 10"
    Return
 
[eraseYellowFlowerRoutine]
    #main.gb "Color Darkgreen; Backcolor Darkgreen"
    #main.gb "Place 265 265; Boxfilled 335 380"
    Return
 
[drawPinkFlowerRoutine]
    #main.gb "Color Green"
    For x = 495 to 505
        #main.gb "Line ";x;" 315 ";x;" 375"
    Next x
    #main.gb "Color Pink; Backcolor Pink"
    For angle = 0 to 360 Step 60
        #main.gb "Place 500 300; North; Up; Turn ";angle
        #main.gb "Go 20; Down; Circlefilled 15"
    Next angle
    #main.gb "Color Yellow; Backcolor Yellow"
    #main.gb "Place 500 300; Circlefilled 10"
    Return
 
[erasePinkFlowerRoutine]
    #main.gb "Color Darkgreen; Backcolor Darkgreen"
    #main.gb "Place 465 265; Boxfilled 535 380"
    Return
 
[drawLadybugRoutine]
    #main.gb "Color Red; Backcolor Red"
    #main.gb "Place 100 400"
    #main.gb "Ellipsefilled 80 50"
    #main.gb "Color Black; Backcolor Black"
    #main.gb "Place 80 400; Circlefilled 5"
    #main.gb "Place 90 390; Circlefilled 5"
    #main.gb "Place 90 410; Circlefilled 5"
    #main.gb "Place 110 385; Circlefilled 5"
    #main.gb "Place 105 400; Circlefilled 5"
    #main.gb "Place 110 415; Circlefilled 5"
    #main.gb "Place 125 392; Circlefilled 5"
    #main.gb "Place 125 408; Circlefilled 5"
    #main.gb "Line 136 396 150 380; Circlefilled 3"
    #main.gb "Line 136 404 150 420; Circlefilled 3"
    Return
 
[eraseLadybugRoutine]
    #main.gb "Color Darkgreen; Backcolor Darkgreen"
    #main.gb "Place 50 375; Boxfilled 155 425"
    Return
 
[drawCaterpillarRoutine]
    #main.gb "Color Darkcyan; Backcolor Darkcyan"
    x = 620
    For i = 1 to 4
        y = 400 - 10 * (i/2 = Int(i/2))
        #main.gb "Place ";x;" ";y
        #main.gb "Ellipsefilled 50 20"
        x = x + 30
    Next i
    #main.gb "Color Black; Backcolor Black"
    #main.gb "Place 616 400; Circlefilled 4"
    #main.gb "Place 624 400; Circlefilled 4"
    Return
 
[eraseCaterpillarRoutine]
    #main.gb "Color Darkgreen; Backcolor Darkgreen"
    #main.gb "Place 590 375; Boxfilled 750 425"
    Return

There is no toggling involved with a radiobutton. A click sets that button. Repeated clicks continue to set.

BUT... only one radiobutton may be in Set status at any one time. As you click the radiobuttons, watch to see the selected radiobutton assume Set status, with all others assuming Reset status.

At this point, the output doesn't correlate with the radiobutton status. The coding allows one of each of the three pairs of images to be displayed, but there is only one button displaying Set status at any one time.

Question: How can we code for three separate but distinct choices? Answer: Groupboxes

---