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

After normal button, Radio button is also done

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

An Aqua like radio button list in Basic-256....

# Aqua inspired Radio button GUI element
# Graphical interfaces often will need to use radio buttons to make selections
# Radio buttons are placed one below the other
# The number of radio buttons is not fixed
# Radio buttons cover a certain area (going top to bottom)
# Radio buttons have captions
# Only a single radio button within a group can be selected
# here we create a subroutine that takes input and creates the radio buttons
# You are responsible for the
# lenght of the caption versus available space
# number of radio buttons versus available vertical space
# Inputs are
# elements : The number of elements in the radio group
# locx : horizontal location of the radio-button group
# locy_top : vertical location of the topmost radio button
# locy_bot : vertical location of the bottom radio button
# active : the position of the active radio button (0 for no button active)
#
# Additionally you need an global array for radio button captions
# You need to copy the local array in the global array (here called radio$)
#
# Copy and Paste the subroutine in your program and pass it the correct parameters
#
#basic initialisation
graphsize 300,250
fastgraphics
clg
#create Aqua 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
#here, you set up and draw your radio buttons
# eg we'll draw a 7-option radio group on the left side the canvas area and a 4-option radio group on the right side
#you MUST declare the array used in the subroutine as Global as arrays cannot be passed as argument
global radio$
dim radio$(7)
# definition and initial drawing of first test array
dim radio1$(7)
radio1$={"radio button 1","radio button 2","radio button 3","radio button 4","radio button 5","radio button 6","radio button 7"}
radio1_elements=7
radio1_locx=30:radio1_locy_top=50:radio1_locy_bot=200
radio1_active=1
for i= 0 to radio1_elements-1
radio$[i]=radio1$[i]
next i
call adrawradio(radio1_elements, radio1_locx, radio1_locy_top, radio1_locy_bot, radio1_active)
# definition and initial drawing of second test array
dim radio2$(4)
radio2$={"A","B","C","D"}
radio2_elements=4
radio2_locx=200:radio2_locy_top=50:radio2_locy_bot=150
radio2_active=1
for i= 0 to radio2_elements-1
radio$[i]=radio2$[i]
next i
call adrawradio(radio2_elements, radio2_locx, radio2_locy_top, radio2_locy_bot, radio2_active)
# a 'real' radio group would trigger a reaction on changing the selection
# here, we just allow switching between radio buttons with the mouse
clickclear
while 1=1
if clickb=1 then
if mousex > radio1_locx-5 and mousex < radio1_locx+5 then
if mousey > radio1_locy_top-4 and mousey < radio1_locy_bot+5 then
for i=0 to radio1_elements
if mousey > radio1_locy_top-5+ (i*(radio1_locy_bot-radio1_locy_top)/(radio1_elements-1)) and mousey < radio1_locy_top+5+ (i*(radio1_locy_bot-radio1_locy_top)/(radio1_elements-1)) then
radio1_active=i+1
for i= 0 to radio1_elements-1
radio$[i]=radio1$[i]
next i
call adrawradio(radio1_elements, radio1_locx, radio1_locy_top, radio1_locy_bot, radio1_active)
end if
next i
end if
else
if mousex > radio2_locx-5 and mousex < radio2_locx+5 then
if mousey > radio2_locy_top-4 and mousey < radio2_locy_bot+5 then
for i=0 to radio2_elements
if mousey > radio2_locy_top-5+ (i*(radio2_locy_bot-radio2_locy_top)/(radio2_elements-1)) and mousey < radio2_locy_top+5+ (i*(radio2_locy_bot-radio2_locy_top)/(radio2_elements-1)) then
radio2_active=i+1
for i= 0 to radio2_elements-1
radio$[i]=radio2$[i]
next i
call adrawradio(radio2_elements, radio2_locx, radio2_locy_top, radio2_locy_bot, radio2_active)
end if
next i
end if
end if
end if
end if
clickclear
pause 0.1
end while
#***************************************************
# sub routine "Draw an Aqua-like radio button list"
#***************************************************
subroutine adrawradio(elements, locx, locy_top, locy_bot, active)

# Do not forget to declare and initialize a global array 'radio$' before calling the subroutine
color black
font "Tahoma",10,100
radio_spacing = (locy_bot-locy_top)/(elements-1)
b_width=12:b_height=12
for j = 0 to (elements -1)
color darkgrey
circle locx, locy_top+(radio_spacing*j), 8
cactive=locy_top+(radio_spacing*j)+1
color rgb(180,180,180)
half=6
circle locx, locy_top+(radio_spacing*j),6
for i = 9 to 1 step -1
color rgb(240-(10-i)*9, 240-(10-i)*9, 240-(10-i)*9)
color rgb(180+i*8, 180+i*8, 180+i*8)
rect sin(-acos(i/10))*abs(half)+locx, cactive-0.6*i-1, 6, 2
refresh
next i
for i = 1 to 9
color rgb(160+i*9, 160+i*9, 160+i*9)
rect -(sin(acos(i/10)))*abs(half)+locx, cactive+0.5*i-1, 7, 2
next i
for i = 9 to 1 step -1
color rgb(240-(10-i)*9, 240-(10-i)*9, 240-(10-i)*9)
color rgb(180+i*8, 180+i*8, 180+i*8)
rect -sin(-acos(i/10))*half+locx-half,cactive-0.6*i-1, 7, 2
refresh
next i
for i = 1 to 9
color rgb(160+i*9, 160+i*9, 160+i*9)
rect (sin(acos(i/10)))*abs(half)+locx-half, cactive+0.5*i-1, 7, 2
next i
refresh

next j
#radio text captions
color black
for i = 0 to elements-1
text locx + 15,locy_top + (radio_spacing*i)-8, radio$[i]
next i
# paint active radio button
if active > 0 then
color rgb(180,180,180)
half=6
cactive=locy_top+(radio_spacing*(active-1))
circle locx, cactive, abs(half+1)
for i = 9 to 1 step -1
color rgb(80+i*15, 240-(10-i)*9, 252-(8-i))
rect sin(-acos(i/10))*abs(half)+locx, cactive-0.5*i, 6, 2
refresh
next i
for i = 1 to 9
color rgb(0, 130+i*9, 243+i)
rect -(sin(acos(i/10)))*abs(half)+locx, cactive+0.5*i, 7, 2
next i
for i = 9 to 1 step -1
color rgb(80+i*15, 240-(10-i)*9, 252-(8-i))
rect -sin(-acos(i/10))*half+locx-half,cactive-0.5*i, 7, 2
refresh
next i
for i = 1 to 9
color rgb(0, 130+i*9, 243+i)
rect (sin(acos(i/10)))*abs(half)+locx-half, cactive+0.5*i, 7, 2
next i
color black
circle locx,cactive,2
refresh
refresh
endif
refresh
end subroutine

Aqua style widgets on website...

by UglyMike ⌂ @, Brussels, Thursday, September 12, 2013, 06:26 (1351 days ago) @ UglyMike

Well, I ported all save one (spinner button) to the new aqua inspired style and loaded examples on my website under the "BTK widgets"-section.
I also ported the Toolkit demo program to use the new interface elements (took me less than an hour) and have downloads and parallel screenshots of both styles on the website.
Go have a look at www.uglymike.net under the Basic256 Demo Programs and let me know what you think (although noone ever does :-( )

Issue with spriteslice?

by UglyMike ⌂ @, Brussels, Thursday, September 12, 2013, 12:11 (1351 days ago) @ UglyMike

Hmmmm.... Just found what seems like a bug in my Aqua Toolkit Demo program. :-(
To overwrite things on the Toolkit Demo screens, I do a spriteslice of the area I will want to hide/overwrite and a spriteplace/spriteshow when I want to do it. (in the old one, I just needed to put a rectangle in the BG color...) Each tab has its own sprite. (Check= 2 / Radio = 3, Slide = 4) If you run them in sequence, no issue. However if you jump from Slide back to Check, when I want to clear the previous message with a 'spriteplace 2/spriteshow 2', it seems that the sprite 4 gets dumped to the screen erasing the checkboxes/radioboxes. In fact several of the sprites seem to be dumped to the screen when doing a spriteshow x, although my tests are somewhat inconclusive here... Is it a bug or am I using spriteslices wrong?

Issue with spriteslice?

by Jim ⌂ @, Russell, KY, Wednesday, September 18, 2013, 16:51 (1344 days ago) @ UglyMike

Mike,

Sprites are layered with higher numbered sprites on top of lower numbered sprites. What you are describing seems to be a Z-order issue. Can you write a small test program to show the behavior?

Jim

Issue with spriteslice?

by UglyMike ⌂ @, Brussels, Thursday, September 19, 2013, 11:07 (1344 days ago) @ Jim

Sure. Here it is:

fastgraphics
spritedim 3
# take a red splice
color red
rect 0,0,300,300
spriteslice 1,50,50,100,100
# take a blue splice
color blue
rect 0,0,300,300
spriteslice 2,75,25,25,100
# take a yellow splice
color yellow
rect 0,0,300,300
spriteslice 3,25,75,100,25
#make the canvas green
color green
rect 0,0,300,300
refresh
while 1=1
cls
print "Input a spritenumber (1, 2 or 3)"
input a
color green
rect 0,0,300,300
spriteplace a,150,150
spriteshow a
refresh
end while

If you give the input sequentially, no problem.
entering 1 shows only 1
entering 2 shows only 2
entering 3 shows only 3

After you entered a "higher" sprite, spriteshow of a lower one will always show the higher one as well but will hide any even-lower ones
entering 1 show 1, 2 and 3
entering 2 shows 2 and 3 but not 1
entering 3 shows only 3 but not 2 and 3

so yes, it looks like Z-buffering issue.

Of course if I do a spritehide of all sprites in my loop, then the issue goes away:
while 1=1
cls
print "Input a spritenumber (1, 2 or 3)"
input a
color green
rect 0,0,300,300
spritehide 1
spritehide 2
spritehide 3
spriteplace a,150,150
spriteshow a
refresh
end while

A bit of a pain though... If I overwrite a sprite (like here with the green) it should remain overwritten if I show another, lower-order sprite, no?

Issue with spriteslice?

by Jim ⌂ @, Russell, KY, Thursday, October 17, 2013, 02:37 (1316 days ago) @ UglyMike

Mike,

Your problem is that you are redrawing the background over top of the sprites. The sprite code tries to optimize and only draw the sprites ABOVE the one being moved/shown.

If you change your code to

fastgraphics
spritedim 3
# take a red splice
color red
rect 0,0,300,300
spriteslice 0,50,50,100,100
# take a blue splice
color blue
rect 0,0,300,300
spriteslice 1,75,25,25,100
# take a yellow splice
color yellow
rect 0,0,300,300
spriteslice 2,25,75,100,25
#make the canvas green
color green
rect 0,0,300,300
refresh
while 1=1
print "Input a spritenumber (0,1, or 2)"
input a
spriteplace a,150,150
spriteshow a
refresh
end while

The issues go away.

Jim

RSS Feed of thread
powered by my little forum