ButtonsAndMore

Edit 4 …
This is Part 1 of a 4 Part Series


What is a Button?


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:

BUTTON #handle.ext, "label", returnVar, corner, x, y {, width, height}

The returnVar can be assigned as either a sub or a branch event. When a branch event is used, that branch must be enclosed in brackets. This tutorial uses the branch event form.
This demo offers the user 12 options:
Draw a Sun - Erase the Sun
Draw a Cloud - Erase the Cloud
Draw a Yellow Flower - Erase the Yellow Flower
Draw a Pink Flower - Erase the Pink Flower
Draw a Ladybug - Erase the Ladybug
Draw a Caterpillar - Erase the Caterpillar

Note that the 'erasure' is accomplished by simply drawing a solid box over the image.

There are no external image files required to be loaded. The buttons are nothing fancy, just click-it and do-it.

'Demo Illustrating Buttons
    Nomainwin
    WindowWidth = 800
    WindowHeight = 600
 
    UpperLeftX = Int((DisplayWidth-WindowWidth)/2)
    UpperLeftY = Int((DisplayHeight-WindowHeight)/2)
 
    Button #main.bttn1a, "Draw Sun", [drawSun], UL, 20, 510, 100, 24
    Button #main.bttn1b, "Erase Sun", [eraseSun], UL, 20, 540, 100, 24
    Button #main.bttn2a, "Draw Cloud", [drawCloud], UL, 140, 510, 100, 24
    Button #main.bttn2b, "Erase Cloud", [eraseCloud], UL, 140, 540, 100, 24
    Button #main.bttn3a, "Draw Yellow Flower", [drawYellowFlower], UL, 290, 510, 100, 24
    Button #main.bttn3b, "Erase Yellow Flower", [eraseYellowFlower], UL, 290, 540, 100, 24
    Button #main.bttn4a, "Draw Pink Flower", [drawPinkFlower], UL, 410, 510, 100, 24
    Button #main.bttn4b, "Erase Pink Flower", [erasePinkFlower], UL, 410, 540, 100, 24
    Button #main.bttn5a, "Draw Ladybug", [drawLadybug], UL, 560, 510, 100, 24
    Button #main.bttn5b, "Erase Ladybug", [eraseLadybug], UL, 560, 540, 100, 24
    Button #main.bttn6a, "Draw Caterpillar", [drawCaterpillar], UL, 680, 510, 100, 24
    Button #main.bttn6b, "Erase Caterpillar", [eraseCaterpillar], UL, 680, 540, 100, 24
    Graphicbox #main.gb, 1, 1, 791, 500
 
    Open "The Buttons" 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]
    #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"
    Wait
 
[eraseSun]
    #main.gb, "Color Darkblue; Backcolor Darkblue"
    #main.gb, "Place 40 0; Boxfilled 300 210"
    Wait
 
[drawCloud]
    #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
    Wait
 
[eraseCloud]
    #main.gb, "Color Darkblue; Backcolor Darkblue"
    #main.gb, "Place 550 50; Boxfilled 750 200"
    Wait
 
[drawYellowFlower]
    #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"
    Wait
 
[eraseYellowFlower]
    #main.gb, "Color Darkgreen; Backcolor Darkgreen"
    #main.gb, "Place 265 265; Boxfilled 335 380"
    Wait
 
[drawPinkFlower]
    #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"
    Wait
 
[erasePinkFlower]
    #main.gb, "Color Darkgreen; Backcolor Darkgreen"
    #main.gb, "Place 465 265; Boxfilled 535 380"
    Wait
 
[drawLadybug]
    #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"
    Wait
 
[eraseLadybug]
    #main.gb, "Color Darkgreen; Backcolor Darkgreen"
    #main.gb, "Place 50 375; Boxfilled 155 425"
    Wait
 
[drawCaterpillar]
    #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"
    Wait
 
[eraseCaterpillar]
    #main.gb, "Color Darkgreen; Backcolor Darkgreen"
    #main.gb, "Place 590 375; Boxfilled 750 425"
    Wait

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.