ButtonsAndMore

**This is Part 1 of a 4 Part Series**

* Part 1 - What is a Button?
* Part 2 - [[CheckboxesAndMore|What is a Checkbox?]]
* Part 3 - [[RadiobuttonsAndMore|What is a Radiobutton?]]
* Part 4 - [[GroupboxesAndMore|What is a Groupbox?]]
* Conclusion - [[ButtonChoicesAndMore|Making the Best Choice]]

==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[[ButtonCoordinates|John Davidson's description of UL, UR, LL and LR.)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.

[[code format="vbnet"]]
'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
[[code]]

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.



----