A button is a control that can be mouseclicked by the user. Like other GUI controls, buttons must be defined before the window is opened. (For a discussion of locating the button, read John Davidson's description of UL, UR, LL and LR.) Part of the button definition includes the assignment of action to transpire when the button is clicked. The helpfile refers to this as the returnVar.

From the helpfile:

Wouldn't you like to just 'toggle' the image on and off without having to use separate buttons? Well, actually, you can. Rather than using a button, use a checkbox.

The Checkbox

Checkboxes, like buttons, can also be clicked by the user. A checkbox is assigned two branch events, one for the checked or SET state and the other for the unchecked or RESET state. If the box is checked, perform Action A, if the box is unchecked, perform Action B. As with buttons, checkboxes can be assigned to events with either bracketed branch events or with subroutines. This demo will continue with branch events. By using checkboxes instead of buttons, the images can be either drawn (checked) or erased (unchecked) with the control. This is the toggling effect. Rather than placing the actual block of code in the appropriate branch event, a Gosub is employed. The use of Gosubs is for a smooth transition to the next demo. Could you just place the actual code beneath each branch event as you did with the buttons? Absolutely.

For more information about Gosubs, read Subroutines and Gosubs by Alyce Watson in Liberty BASIC Newsletter #114

          Nomainwin
          WindowWidth = 800
          WindowHeight = 600

          UpperLeftX = Int((DisplayWidth-WindowWidth)/2)
          UpperLeftY = Int((DisplayHeight-WindowHeight)/2)

          Checkbox #main.ckbx1, "Draw Sun", [drawSun], [eraseSun], 20, 530, 120, 24
          Checkbox #main.ckbx2, "Draw Cloud", [drawCloud], [eraseCloud], 150, 530, 120, 24
          Checkbox #main.ckbx3, "Draw Yellow Flower", [drawYellowFlower], [eraseYellowFlower], 280, 530, 120, 24
          Checkbox #main.ckbx4, "Draw Pink Flower", [drawPinkFlower], [erasePinkFlower], 410, 530, 120, 24
          Checkbox #main.ckbx5, "Draw Ladybug", [drawLadybug], [eraseLadybug], 540, 530, 120, 24
          Checkbox #main.ckbx6, "Draw Caterpillar", [drawCaterpillar], [eraseCaterpillar], 670, 530, 120, 24

          Graphicbox #main.gb, 1, 1, 791, 500
          Open "The Checkboxes" 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]
          Wait

      [eraseSun]
          Gosub [eraseSunRoutine]
          Wait

      [drawCloud]
          Gosub [drawCloudRoutine]
          Wait

      [eraseCloud]
          Gosub [eraseCloudRoutine]
          Wait

      [drawYellowFlower]
          Gosub [drawYellowFlowerRoutine]
          Wait

      [eraseYellowFlower]
          Gosub [eraseYellowFlowerRoutine]
          Wait

      [drawPinkFlower]
          Gosub [drawPinkFlowerRoutine]
          Wait

      [erasePinkFlower]
          Gosub [erasePinkFlowerRoutine]
          Wait

      [drawLadybug]
          Gosub [drawLadybugRoutine]
          Wait

      [eraseLadybug]
          Gosub [eraseLadybugRoutine]
          Wait

      [drawCaterpillar]
          Gosub [drawCaterpillarRoutine]
          Wait

      [eraseCaterpillar]
          Gosub [eraseCaterpillarRoutine]
          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

A checkbox is great way to gather yes/no or on/off type of information from the user. Each checkbox is independent of the other checkboxes. Sometimes this isn't desirable. Supposing you don't want your user to have both a sunny day and a cloudy day. Rather than a simple toggling, you might want to restrict the user to just one option. Enter Radiobuttons.

The 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.

          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

The Groupbox

All radiobuttons within the same window are seen as one radio-set, or group. From the helpfile

Buttons, checkboxes and radiobuttons are useful commands to retrieve user selections. In general, when options can be any number of many, checkboxes would be more appropriate. When two or more options are available, but only one can be selected at any one time, radiobuttons would be the better choice.