Liberty BASIC Programmer's Encyc

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 - What is a Checkbox?
Part 3 - What is a Radiobutton?
Part 4 - What is a Groupbox?
Conclusion - 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 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.

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.

'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

ButtonsAndMore

What is a Button?