CheckboxesAndMore

Edit 2 …
Older Version Newer Version

JanetTerra JanetTerra Aug 26, 2010

This is Part 2 of a 4 Part Series


What is a 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

'Demo Illustrating Checkboxes
    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.