Button3D

This code has been declared by its author to be Public Domain code.

Button3D by Fernhout

2006

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.

;******************************************************************************
;* 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

2006

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

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 Function

Obviously you'd need to put checking so the hightlight/lowlight doesn't go beyond 0-255

mindstorms

2006

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)

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

2006

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

SetBuffer BackBuffer()

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

{Edit} Or change Graphics to Graphics3D

Here is some additional code
use right mouse to change colors
mouse over button 1 - 5 shows 5 different modes

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

2006

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.

Code Archives Forum