[bb] Button3D by Fernhout [ 1+ years ago ]

[BlitzBot]

Title : Button3D
Author : Fernhout
Posted : 1+ years ago

Description : This is a include code to make a 3D look button. There is no need for a library or another texture.
This code only work in a BB windowed enviroment.
You give in your size and colors you need.
This file need SetColors.bb include file.

Code :

Code (blitzbasic) Select Expand

;******************************************************************************
;* Button3D. Version 1.00                                                     *
;* Created: march 2006                                                        *
;* Created by: Bart Fernhout.  *
;******************************************************************************
;* Description                                                                *
;* Create a button in a 3D look.  Its drawing on the backbuffer screen.       *
;* Then it wil be fliped to the front. The 3D colors is given during the call *
;* to this function. The function gives a true back if the button is released *
;* color 2 for button pressed is given in the input. Button down is color     *
;* 2 and 3 swaped.   Call of the function is a follow:                        *
;* Button3D (Xpos_LeftUp,Ypos_LeftUP,WithButton,HeihtButton,Color1,Color2, _  *
;*           Color3,Color4,Color5,Text)                                       *
;* Color 1 = button color                                                     *      
;* Color 2 = Left And Up side of button                                       *
;* Color 3 = Right and down side color of the button                          *
;* Color 4 = Button down color                                                *
;* Color 5 = Text color                                                       *
;*                                                                            *
;* NOTE: Even if the placing of the button is outside the visual screen there *
;* will be no checking for this.                                              *
;*                                                                            *
;* The text font is used by the standard font what is used in the program.    *
;* to change the font do this in the main program. And change back after      *
;* call of this program. Font color is not changed                            *
;******************************************************************************

;* * * *
;* Extra in main program include is SetColors_inc.BB
;* * * *

Function Button3D (XposButton,YposButton,ButWith,ButHeight,Col1$,Col2$,Col3$,Col4$,Col5$,ButText$)
;Make sure the back buffer is the target.

; Side colors
Col20$ = Col2$
Col30$ = Col3$
; Button color
Col10$ = Col1$
Col40$ = Col4$

; now everything what was visable is in the drawing area.
; And make a repeating area so the swapping of the button is always on screen
Repeat
;Flip
; Check if the mouse button left is down then swap colors
If (MouseX()>XposButton And MouseX()<XposButton+ButWith) And (MouseY()>YposButton And MouseY()<YposButton+ButHeight) And MouseDown(1) = 1 Then
; Swap button in colors
Col2$=Col30$
Col3$=Col20$
; button
Col1$=Col40$
Col4$=Col10$
Else
; make button in colors
Col2$=Col20$
Col3$=Col30$
; button
Col1$=Col10$
Col4$=Col40$
EndIf

; Draw the left and uppers side.
SetColor Col2$
Line XposButton,YposButton,XposButton+ButWith,YposButton
Line XposButton,YposButton+1,XposButton+ButWith,YposButton+1
Line XposButton,YposButton,XposButton,YposButton+ButHeight
Line XposButton+1,YposButton,XposButton+1,YposButton+ButHeight

;Draw the right and down side
SetColor Col3$
Line XposButton+ButWith,YposButton+1,XposButton+ButWith,YposButton+ButHeight
Line XposButton+ButWith-1,YposButton+2,XposButton+ButWith-1,YposButton+ButHeight
Line XposButton+1,YposButton+ButHeight,XposButton+ButWith,YposButton+ButHeight
Line XposButton+2,YposButton+ButHeight-1,XposButton+ButWith,YposButton+ButHeight-1

;Draw the button
SetColor Col1$
Rect XposButton+2,YposButton+2,ButWith-3,ButHeight-3

;Place the text in the center of the button program wil find out font height and with
SetColor Col5$
Text XposButton+(ButWith/2),YposButton+(ButHeight/2),ButText$,True,True

; bring it al to the front
Flip

;Check to see if the button is hit on a button if so hold program for releas mouse on button
If MouseX()>XposButton And MouseX()<XposButton+ButWith And MouseY()>YposButton And MouseY()<YposButton+ButHeight And MouseDown(1) = 1 Then
Mouse = True
Else
If MouseX()>XposButton And MouseX()<XposButton+ButWith And MouseY()>YposButton And MouseY()<YposButton+ButHeight And Mouse=1 Then
Mouse = False
MouseReleas = True
Else
Mouse = False
MouseReleas = False
EndIf
EndIf
Until Mouse = False

; Send back the button status
Return MouseReleas
End Function

Comments :


Rob Farley(Posted 1+ years ago)

 A couple of thoughts here:* The line command is very slow, considering you are only drawing horizonal or vertical lines you're better off with the rect command.* Why not just pass the button one colour and it automatically creates the highlight and lowlight colours?* Use the rectsoverlap command instead of a complete if mousex()>blah blah stuff* Why have you got a flip within the function?Personally I'd do something like this

Code Select Expand

Graphics 800,600,32,2

Global UIR = 192
Global UIG = 192
Global UIB = 192


; Example code
ClsColor uir,uig,uib
Repeat
Cls
For n=1 To 10
If Button(n*50,n*30,100,20,"Button "+n) Then Color 255,0,0:Text 0,0,"Button "+n+" clicked!!"
Next
Flip
Until KeyHit(1)


Function Button(x,y,Width,Height,Label$)
Over = False

If RectsOverlap (x,y,width,height,MouseX(),MouseY(),1,1) Then over = True

If over Then Color uir+30,uig+30,uib+30 Else Color uir,uig,uib
Rect x+1,y+1,width-2,height-2

Color uir+50,uig+50,uib+50
Rect x,y,width,1
Rect x,y,1,height

Color uir-50,uig-50,uib-50
Rect x+width-1,y,1,height
Rect x,y+height-1,width,1

Color 0,0,0
Text x+(width/2),y+(height/2),label,True,True

If over And MouseDown(1) Then Return True Else Return False
End FunctionObviously you'd need to put checking so the hightlight/lowlight doesn't go beyond 0-255


mindstorms(Posted 1+ years ago)

 I added a depress idea and put checking on high/low for the sides, but not for the depress/highlight so that you can get the base color to be red while the highlight color is green and the depress color is blue (or something like that)

Code Select Expand

Graphics 800,600,32,2

Global UIR = 0
Global UIG = 192
Global UIB = 255


; Example code
ClsColor 255,255,255
Repeat
Cls
For n=1 To 10
If Button(n*50,n*30,100,20,"Button "+n) Then Color 255,0,0:Text 0,0,"Button "+n+" clicked!!"
Next
Flip
Until KeyHit(1)


Function Button(x,y,Width,Height,Label$)
Over = False

If RectsOverlap (x,y,Width,Height,MouseX(),MouseY(),1,1) Then
over = 1
If MouseDown(1) Then over = 2
EndIf

If over = 1 Then Color UIR+30,UIG+30,UIB+30  ElseIf over = 2 Then Color uir-30,uig-30,uib-30 Else Color UIR,UIG,UIB
Rect x+1,y+1,width-2,height-2

If UIR+50 < 255 And UIG+50 < 255 And UIB+50 < 255 Then Color UIR+50,UIG+50,UIB+50 Else Color UIR,UIG,UIB
Rect x,y,width,1
Rect x,y,1,height

If uir-50 > 0 And uig-50 > 0 And uib-50 > 0 Then Color uir-50,uig-50,uib-50 Else Color UIR,UIG,UIB
Rect x+width-1,y,1,height
Rect x,y+height-1,Width,1


Color 0,0,0
Text x+(width/2),y+(height/2),label,True,True

If over = 2 Then Return True Else Return False
End Function




RGR(Posted 1+ years ago)

 And in case you wonder why the window flickers ... add:

Code Select Expand

SetBuffer BackBuffer()in line 2(I needed 3 Minutes plus an FPS-check-routine until I found out)

Code Select Expand

{Edit} Or change Graphics to Graphics3DHere is some additional codeuse right mouse to change colorsmouse over button 1 - 5 shows 5 different modes

Code Select Expand

Graphics 800,600,32,2
SetBuffer BackBuffer()

Global ButCol_r = 240
Global ButCol_g = 192
Global ButCol_b = 130

; Example code
ClsColor 200,180,160
Repeat
Cls
For n=1 To 10
modus=n-1:If modus>4 Then Modus=Mode
If Button(n*50,n*32,100,20,4,"Button "+n,modus)
Color 255,0,0:Text 0,0,"Button "+n+" clicked!!"
EndIf
Next
If MouseHit(2)
ButCol_r=Rand(0,200)
ButCol_g=Rand(0,200)
ButCol_b=Rand(0,200)
mode=Rand(0,4)
EndIf
Text 0,400,ButCol_r+" "+ButCol_g+" "+ButCol_b
Text 0,416,"Mode: "+mode
Flip
Until KeyHit(1)


Function Button(x,y,Width,Height,Border,Label$,mode=0)
Local Over = False
Local r,g,b

If RectsOverlap (x,y,width,height,MouseX(),MouseY(),1,1) Then over = True

If over Then
If mode=0 r=(ButCol_r+$80) And $ff : g=(ButCol_g+$80) And $ff : b=(ButCol_b+$80) And $ff
If mode=1 b=ButCol_r Xor $ff And $ff : g=ButCol_g Xor $ff And $ff : r=ButCol_b Xor $ff And $ff
If mode=2
r=(ButCol_r+(255-ButCol_r)/2);+$10 : If r>255 Then r=255
g=(ButCol_g+(255-ButCol_g)/2);+$10 : If g>255 Then g=255
b=(ButCol_b+(255-ButCol_b)/2);+$10 : If b>255 Then b=255
EndIf
If mode=3 r=$ff : g=$ff : b=$ff
If mode=4 r=$20 : g=$20 : b=$20
tr=ButCol_r : tg=ButCol_g : tb=ButCol_b
Else
r=ButCol_r : g=ButCol_g : b=ButCol_b
tr=ButCol_r : tg=ButCol_g : tb=ButCol_b
EndIf
tr=(tr+(255-tr)/2)+$40 : If tr>255 Then tr=255
tg=(tg+(255-tg)/2)+$40 : If tg>255 Then tg=255
tb=(tb+(255-tb)/2)+$40 : If tb>255 Then tb=255

If Not (over And MouseDown(1)) x=x+1:y=y+1

Color r,g,b
Rect x,y,width,height

If over And MouseDown(1)
Color ButCol_r-ButCol_r/3,ButCol_g-ButCol_g/3,ButCol_b-ButCol_b/3
Else
Color ButCol_r+(255-ButCol_r)/3,ButCol_g+(255-ButCol_g)/3,ButCol_b+(255-ButCol_b)/3
EndIf
Rect x-border,y-border,width+border*2,border
Rect x-border,y-border,border,height+border*2

If over And MouseDown(1)
Color ButCol_r+(255-ButCol_r)/3,ButCol_g+(255-ButCol_g)/3,ButCol_b+(255-ButCol_b)/3
Else
Color ButCol_r-ButCol_r/3,ButCol_g-ButCol_g/3,ButCol_b-ButCol_b/3
EndIf
Rect x+width,y,border,height+border
Rect x,y+height,width+border,border
For i=0 To border-1
Line x+width,y,x+width+border-1,y-i
Line x,y+height,x-i,y+height+border-1
Next

Color 16,16,16
Text x+(width/2)+3,y+(height/2)+2,label,True,True
Text x+(width/2)+2,y+(height/2)+1,label,True,True
Color tr,tg,tb
Text x+(width/2)+1,y+(height/2),label,True,True

Color 0,0,0

If over And MouseDown(1) Return True Else Return False
End Function



Fernhout(Posted 1+ years ago)

 I am already reprogram the button. Because there some drawbacks on this function. The new function is not waiting for the mouse. But give the state of the button back according to the status of the button given to the function. And yes there will be one color given so the light and dark color wil be calculated from there. But for now i busy making a book for beginners using Blits3D in Dutch. I did not found one book in dutch, so i wil give my country members a change to learn Blit3D to. If i use the code from someone his name wil be mentioned in my book. If i'am finished the book wil be free. Every help or ideas for making the book is welcom. The book is devide in 2 parts. Part wil discus every command thats in Blits3D and give an working exsample to see hou its work. There must be no media or graphics in the exsampels. the rest is welcom. [/i]