guest (78.144.128.140)
Dec 4, 2009
**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 [[ButtonCoordinates|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.
[[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.
OR, use a single button. Buttons can be made to do multiple things; use a toggle variable for two functions or a counter for more.
[[code]]
'Demo Illustrating Buttons Modified from Janets code above.
Nomainwin
WindowWidth = 800
WindowHeight = 600
UpperLeftX = Int((DisplayWidth-WindowWidth)/2)
UpperLeftY = Int((DisplayHeight-WindowHeight)/2)
Button #main.bttn1a, "Draw Sun", [Sun], UL, 20, 510, 100, 24
Button #main.bttn2a, "Draw Cloud", [Cloud], UL, 140, 510, 100, 24
Button #main.bttn3a, "Draw Yellow Flower", [YellowFlower], UL, 290, 510, 110, 24
Button #main.bttn4a, "Draw Pink Flower", [PinkFlower], UL, 410, 510, 100, 24
Button #main.bttn5a, "Draw Ladybug", [Ladybug], UL, 560, 510, 100, 24
Button #main.bttn6a, "Draw Caterpillar", [Caterpillar], UL, 680, 510, 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
[Sun]
sun=1-sun
if sun then
#main.bttn1a, "Erase Sun"
#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"
else
#main.bttn1a, "Draw Sun"
#main.gb, "Color Darkblue; Backcolor Darkblue"
#main.gb, "Place 40 0; Boxfilled 300 210"
end if
Wait
[Cloud]
cloud=1-cloud
if cloud then
#main.bttn2a, "Erase Cloud"
#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
else
#main.bttn2a, "Draw Cloud"
#main.gb, "Color Darkblue; Backcolor Darkblue"
#main.gb, "Place 550 50; Boxfilled 750 200"
end if
Wait
[YellowFlower]
yellflow=1-yellflow
if yellflow then
#main.bttn3a, "Erase Yellow Flower"
#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"
else
#main.bttn3a, "Draw Yellow Flower"
#main.gb, "Color Darkgreen; Backcolor Darkgreen"
#main.gb, "Place 265 265; Boxfilled 335 380"
end if
Wait
[PinkFlower]
pinkflow=1-pinkflow
if pinkflow then
#main.bttn4a, "Erase Pink Flower"
#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"
else
#main.bttn4a, "Draw Pink Flower"
#main.gb, "Color Darkgreen; Backcolor Darkgreen"
#main.gb, "Place 465 265; Boxfilled 535 380"
end if
Wait
[Ladybug]
ladybug=1-ladybug
if ladybug then
#main.bttn5a, "Erase Ladybug"
#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"
else
#main.bttn5a, "Draw Ladybug"
#main.gb, "Color Darkgreen; Backcolor Darkgreen"
#main.gb, "Place 50 375; Boxfilled 155 425"
end if
Wait
[Caterpillar]
caterpill=1-caterpill
if caterpill then
#main.bttn6a, "Erase Caterpillar"
#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"
else
#main.bttn6a, "Draw Caterpillar"
#main.gb, "Color Darkgreen; Backcolor Darkgreen"
#main.gb, "Place 590 375; Boxfilled 750 425"
end if
Wait
[[code]]
----