New style of BTK2 GUI elements (Sample Programs)

by UglyMike ⌂ @, Brussels, Thursday, August 29, 2013, 06:46 (1365 days ago)

Hi guys!
Here a new look and feel to the BTK2 Button element. (Currently the only one changed)
What do you think? Should I create a completely new set of GUI elements based on this style? I guess Mac users might like this one, no?

Here's the same program as the 'standard' Button demo program but with the new look and feel

# Aqua inspired Button GUI element
# This version no longer contains labels/gotos or gosub/return statements.
# It uses the new CALL SUBROUTINE() statement
# Graphical interfaces need to paint buttons
# Buttons come in different sizes
# Butons also need captions in different sizes
# Buttons need a way to show that they are pressed.
# here we create a subroutine that takes input and creates the button
# The logic of what happens when a button is pressed is not relevant here
# You are responsible for the lenght of the caption versus width of the button
# and for the centering of the caption itself
# Inputs are
# x,y location of the upper left corner of the button front
# height and width of the button
# Size of caption (small:8, medium:10, large:14)
# Caption
# offset of text from left and top button side
# init: 0 (draw unclicked), 1 (draw clicked) or 2 (on/off click)
# Copy and Paste the subroutine in your program and pass it the correct parameters

#basic initialisation
graphsize 300,200
fastgraphics
clg
#create Mac-like background
color rgb(240,240,240)
rect 0,0,499,499
color rgb(250,250,250)
for i = 1 to 500 step 10
rect 0,i,500,5
next i

refresh

#here, you set up and draw a first button
# eg draw button "A" in the middle of the screen
color black
b_locx_a=50:b_locy_a=145
b_width_a=80:b_height_a=20
b_text_a$="A":b_textsize_a=10
b_offsetx_a=35:b_offsety_a= 2
b_init_a=0
#now we call the subroutine and pass it the parameters of button "A"
call abutton (b_locx_a, b_locy_a, b_width_a, b_height_a, b_text_a$, b_textsize_a, b_offsetx_a, b_offsety_a, b_init_a)
#here, you set up and draw a second button
# eg draw button "B" in the middle of the screen
b_locx_b=180:b_locy_b=145
b_width_b=80:b_height_b=20
b_text_b$="B":b_textsize_b=10
b_offsetx_b=35:b_offsety_b= 2
b_init_b=0 #indicates to the subroutine that we just want to draw the button
#now we call the subroutine and pass it the parameters of button "B"
call abutton (b_locx_b, b_locy_b, b_width_b, b_height_b, b_text_b$, b_textsize_b, b_offsetx_b, b_offsety_b, b_init_b)
# This is all the code we need to draw our buttons.
#activate the "end" statement here and you will see the buttons on the canvas.
#end
# the logic to handle the buttons is up to you
# here, we program the buttons just to switch a light on and off
color grey
for i = 0 to 3
for j = 0 to 3
circle 48+(i*28), 30+(j*28), 10
next j
next i
color grey
for i = 0 to 3
for j = 0 to 3
circle 178+(i*28), 30+(j*28), 10
next j
next i
col=1
color darkred
#circle 90,60,20
for i = 0 to 3
for j = 0 to 3
circle 48+(i*28), 30+(j*28), 7
next j
next i
color red
#circle 85,55,5
for i = 0 to 3
for j = 0 to 3
circle 46+(i*28), 28+(j*28), 1
next j
next i
color darkgreen
#circle 220,60,20
for i = 0 to 3
for j = 0 to 3
circle 178+(i*28), 30+(j*28), 7
next j
next i
color green
#circle 215,55,5
for i = 0 to 3
for j = 0 to 3
circle 176+(i*28), 28+(j*28), 1
next j
next i
refresh
#set up an endless loop checking for a click-event
#b_init_a=2 #indicates to the subroutine that we want to 'click/unclick' the button
#b_init_b=2 #indicates to the subroutine that we want to 'click/unclick' the button
while 1=1
if clickb=1 then
if mousex > b_locx_a and mousex < b_locx_a+ b_width_a then
if mousey > b_locy_a and mousey < b_locy_a+b_height_a then
# to keep the button depressed when light are on, uncomment the following
# if construct and comment out the b_init_a=2 six lines up
#if b_init_a=0 then
# b_init_a=1
#else
# b_init_a=0
#endif
clickclear
if pixel(48,28)=darkred then
col=1
else
col=2
end if
b_init_a=2
call abutton (b_locx_a, b_locy_a, b_width_a, b_height_a, b_text_a$, b_textsize_a, b_offsetx_a, b_offsety_a, b_init_a)
if col=1 then
color rgb(180,100,100)
# circle 90, 60, 30
for i = 0 to 3
for j = 0 to 3
circle 48+(i*28), 30+(j*28), 10
next j
next i
color red
else
color darkgrey
# circle 90, 60, 30
for i = 0 to 3
for j = 0 to 3
circle 48+(i*28), 30+(j*28), 10
next j
next i
color darkred
endif
# circle 90, 60, 20
for i = 0 to 3
for j = 0 to 3
circle 48+(i*28), 30+(j*28), 7
next j
next i
if col=1 then
color white
else
color red
endif
# circle 85,55,5
for i = 0 to 3
for j = 0 to 3
circle 46+(i*28), 28+(j*28), 1
next j
next i
refresh
end if
else
if mousex > b_locx_b and mousex < b_locx_b+ b_width_b then
if mousey > b_locy_b and mousey < b_locy_b+b_height_b then
clickclear
# to keep the button depressed when light are on, uncomment the following
# if construct and comment out the b_init_b=2 ten lines down
#if b_init_b=0 then
# b_init_b=1
#else
# b_init_b=0
#endif
if pixel(178,30)=darkgreen then
col=1
else
col=2
end if
b_init_b=2
call abutton (b_locx_b, b_locy_b, b_width_b, b_height_b, b_text_b$, b_textsize_b, b_offsetx_b, b_offsety_b, b_init_b)
if col=1 then
color rgb(100,100,200)
for i = 0 to 3
for j = 0 to 3
circle 178+(i*28), 30+(j*28), 10
next j
next i
color green
else
color darkgrey
for i = 0 to 3
for j = 0 to 3
circle 178+(i*28), 30+(j*28), 10
next j
next i
color darkgreen
endif
for i = 0 to 3
for j = 0 to 3
circle 178+(i*28), 30+(j*28), 7
next j
next i
if col=1 then
color white
else
color green
endif
for i = 0 to 3
for j = 0 to 3
circle 176+(i*28), 28+(j*28), 1
next j
next i
refresh
end if
end if
end if
clickclear
end if
pause 0.01
end while
#*********************************
# sub routine "Draw a Aqua-like button"
#*********************************
# Inputs are
# x,y location of the upper left corner of the button front
# height and width of the button
# Size of caption (small:8, medium:10, large:14)
# Caption
# offset of text from left and top button side
# init: 0 (draw unclicked), 1 (draw clicked) or 2 (on/off click)
# Copy and Paste the subroutine in your program and pass it the correct parameters
subroutine abutton(b_locx, b_locy, b_width, b_height, b_text$, b_textsize, b_offsetx, b_offsety, b_init)
if b_init=2 then #draw pressed, wait, draw unpressed
color rgb(200,200,200)
if b_width>b_height then
half=(b_height)/2
else
half=(b_width)/2
endif
rect b_locx+half, b_locy,b_width-2*half,b_height+1
circle b_locx+half, b_locy+half, abs(half)
circle b_locx+b_width-half, b_locy+half, abs(half)
for i = 10 to 1 step -1
color rgb(80+i*15, 240-(11-i)*9, 252-(8-i))
rect sin(-acos(i/10))*abs(half)+2+b_locx+half, b_locy+half-(b_height/22)*i, b_width/2, 2
refresh
next i
for i = 1 to 11
color rgb(0, 130+i*9, 243+i)
rect -(sin(acos(i/11)))*abs(half)+b_locx+half+2, b_locy+half+(b_height/22)*i-2, b_width/2, 2
next i

for i = 11 to 1 step -1
color rgb(80+i*15, 240-(11-i)*9, 252-(8-i))
rect -sin(-acos(i/10))*half+2+b_locx+b_width/2-half,b_locy+half-(b_height/22)*i, b_width/2, 2
refresh
next i
for i = 1 to 11
color rgb(0, 130+i*9, 243+i)
rect (sin(acos(i/11)))*abs(half)+2+b_locx+b_width/2-half, b_locy+half+(b_height/22)*i-2, b_width/2, 2
next i
refresh
color black
font "Tahoma",b_textsize,100
text b_locx+b_offsetx,b_locy+b_offsety,b_text$
refresh
pause 0.2
color rgb(200,200,200)
if b_width>b_height then
half=(b_height)/2
else
half=(b_width)/2
endif
rect b_locx+half, b_locy,b_width-2*half,b_height+1
circle b_locx+half, b_locy+half, abs(half)
circle b_locx+b_width-half, b_locy+half, abs(half)
for i = 10 to 1 step -1
color rgb(199+i*5, 199+i*5, 199+i*5)
# Top Left
rect sin(-acos(i/10))*abs(half)+2+b_locx+half, b_locy+half-(b_height/22)*i, b_width/2, 2
next i
for i = 1 to 11
color rgb(178+i*7, 178+i*7, 178+i*7)
# Botom Left
rect -(sin(acos(i/11)))*abs(half)+b_locx+half+2, b_locy+half+(b_height/22)*i-2, b_width/2, 2
next i

for i = 11 to 1 step -1
color rgb(199+i*5, 199+i*5, 199+i*5)
# Top Right
rect -sin(-acos(i/10))*half+2+b_locx+b_width/2-half,b_locy+half-(b_height/22)*i, b_width/2, 2
next i
for i = 1 to 11
color rgb(178+i*7, 178+i*7, 178+i*7)
# Bottom Right
rect (sin(acos(i/11)))*abs(half)+2+b_locx+b_width/2-half, b_locy+half+(b_height/22)*i-2, b_width/2, 2
next i
color black
font "Tahoma",b_textsize,100
text b_locx+b_offsetx,b_locy+b_offsety,b_text$
refresh
refresh
else
if b_init=1 then #draw pressed
color rgb(200,200,200)
if b_width>b_height then
half=(b_height)/2
else
half=(b_width)/2
endif
rect b_locx+half, b_locy,b_width-2*half,b_height+1
circle b_locx+half, b_locy+half, abs(half)
circle b_locx+b_width-half, b_locy+half, abs(half)
for i = 10 to 1 step -1
color rgb(80+i*15, 240-(11-i)*9, 252-(8-i))
rect sin(-acos(i/10))*abs(half)+2+b_locx+half, b_locy+half-(b_height/22)*i, b_width/2, 2
refresh
next i
for i = 1 to 11
color rgb(0, 130+i*9, 243+i)
rect -(sin(acos(i/11)))*abs(half)+b_locx+half+2, b_locy+half+(b_height/22)*i-2, b_width/2, 2
next i

for i = 11 to 1 step -1
color rgb(80+i*15, 240-(11-i)*9, 252-(8-i))
rect -sin(-acos(i/10))*half+2+b_locx+b_width/2-half,b_locy+half-(b_height/22)*i, b_width/2, 2
refresh
next i
for i = 1 to 11
color rgb(0, 130+i*9, 243+i)
rect (sin(acos(i/11)))*abs(half)+2+b_locx+b_width/2-half, b_locy+half+(b_height/22)*i-2, b_width/2, 2
next i
refresh
color black
font "Tahoma",b_textsize,100
text b_locx+b_offsetx,b_locy+b_offsety,b_text$
refresh

else #draw unpressed
color rgb(200,200,200)
if b_width>b_height then
half=(b_height)/2
else
half=(b_width)/2
endif
rect b_locx+half, b_locy,b_width-2*half,b_height+1
circle b_locx+half, b_locy+half, abs(half)
circle b_locx+b_width-half, b_locy+half, abs(half)
for i = 10 to 1 step -1
color rgb(199+i*5, 199+i*5, 199+i*5)
# Top Left
rect sin(-acos(i/10))*abs(half)+2+b_locx+half, b_locy+half-(b_height/22)*i, b_width/2, 2
next i
for i = 1 to 11
color rgb(178+i*7, 178+i*7, 178+i*7)
# Botom Left
rect -(sin(acos(i/11)))*abs(half)+b_locx+half+2, b_locy+half+(b_height/22)*i-2, b_width/2, 2
next i

for i = 11 to 1 step -1
color rgb(199+i*5, 199+i*5, 199+i*5)
# Top Right
rect -sin(-acos(i/10))*half+2+b_locx+b_width/2-half,b_locy+half-(b_height/22)*i, b_width/2, 2
next i
for i = 1 to 11
color rgb(178+i*7, 178+i*7, 178+i*7)
# Bottom Right
rect (sin(acos(i/11)))*abs(half)+2+b_locx+b_width/2-half, b_locy+half+(b_height/22)*i-2, b_width/2, 2
next i
color black
font "Tahoma",b_textsize,100
text b_locx+b_offsetx,b_locy+b_offsety,b_text$
refresh
endif
end if
refresh
end subroutine


Complete thread:

 RSS Feed of thread

powered by my little forum