Ooops
November 28, 2020, 11:13:42 AM

Author Topic: [bb] Button3D by Fernhout [ 1+ years ago ]  (Read 397 times)

Offline BlitzBot

  • Jr. Member
  • **
  • Posts: 1
[bb] Button3D by Fernhout [ 1+ years ago ]
« on: June 29, 2017, 12:28:40 AM »
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
  1. ;******************************************************************************
  2. ;* Button3D. Version 1.00                                                     *
  3. ;* Created: march 2006                                                        *
  4. ;* Created by: Bart Fernhout.                                                                                             *
  5. ;******************************************************************************
  6. ;* Description                                                                *
  7. ;* Create a button in a 3D look.  Its drawing on the backbuffer screen.       *
  8. ;* Then it wil be fliped to the front. The 3D colors is given during the call *
  9. ;* to this function. The function gives a true back if the button is released *
  10. ;* color 2 for button pressed is given in the input. Button down is color     *
  11. ;* 2 and 3 swaped.   Call of the function is a follow:                        *
  12. ;* Button3D (Xpos_LeftUp,Ypos_LeftUP,WithButton,HeihtButton,Color1,Color2, _  *
  13. ;*           Color3,Color4,Color5,Text)                                       *
  14. ;* Color 1 = button color                                                     *      
  15. ;* Color 2 = Left And Up side of button                                       *
  16. ;* Color 3 = Right and down side color of the button                          *
  17. ;* Color 4 = Button down color                                                *
  18. ;* Color 5 = Text color                                                       *
  19. ;*                                                                            *
  20. ;* NOTE: Even if the placing of the button is outside the visual screen there *
  21. ;* will be no checking for this.                                              *
  22. ;*                                                                            *
  23. ;* The text font is used by the standard font what is used in the program.    *
  24. ;* to change the font do this in the main program. And change back after      *
  25. ;* call of this program. Font color is not changed                            *
  26. ;******************************************************************************
  27.  
  28. ;* * * *
  29. ;* Extra in main program include is SetColors_inc.BB
  30. ;* * * *
  31.  
  32. Function Button3D (XposButton,YposButton,ButWith,ButHeight,Col1$,Col2$,Col3$,Col4$,Col5$,ButText$)
  33. ;Make sure the back buffer is the target.
  34.        
  35. ; Side colors
  36. Col20$ = Col2$
  37. Col30$ = Col3$
  38. ; Button color
  39. Col10$ = Col1$
  40. Col40$ = Col4$
  41.  
  42. ; now everything what was visable is in the drawing area.
  43. ; And make a repeating area so the swapping of the button is always on screen
  44. Repeat
  45. ;Flip
  46. ; Check if the mouse button left is down then swap colors
  47. If (MouseX()>XposButton And MouseX()<XposButton+ButWith) And (MouseY()>YposButton And MouseY()<YposButton+ButHeight) And MouseDown(1) = 1 Then
  48.         ; Swap button in colors
  49.         Col2$=Col30$
  50.         Col3$=Col20$
  51.         ; button
  52.         Col1$=Col40$
  53.         Col4$=Col10$
  54. Else
  55.         ; make button in colors
  56.         Col2$=Col20$
  57.         Col3$=Col30$
  58.         ; button
  59.         Col1$=Col10$
  60.         Col4$=Col40$
  61. EndIf
  62.  
  63. ; Draw the left and uppers side.
  64. SetColor Col2$
  65. Line XposButton,YposButton,XposButton+ButWith,YposButton
  66. Line XposButton,YposButton+1,XposButton+ButWith,YposButton+1
  67. Line XposButton,YposButton,XposButton,YposButton+ButHeight
  68. Line XposButton+1,YposButton,XposButton+1,YposButton+ButHeight
  69.  
  70. ;Draw the right and down side
  71. SetColor Col3$
  72. Line XposButton+ButWith,YposButton+1,XposButton+ButWith,YposButton+ButHeight
  73. Line XposButton+ButWith-1,YposButton+2,XposButton+ButWith-1,YposButton+ButHeight
  74. Line XposButton+1,YposButton+ButHeight,XposButton+ButWith,YposButton+ButHeight
  75. Line XposButton+2,YposButton+ButHeight-1,XposButton+ButWith,YposButton+ButHeight-1
  76.  
  77. ;Draw the button
  78. SetColor Col1$
  79. Rect XposButton+2,YposButton+2,ButWith-3,ButHeight-3
  80.  
  81. ;Place the text in the center of the button program wil find out font height and with
  82. SetColor Col5$
  83. Text XposButton+(ButWith/2),YposButton+(ButHeight/2),ButText$,True,True
  84.  
  85. ; bring it al to the front
  86. Flip
  87.  
  88. ;Check to see if the button is hit on a button if so hold program for releas mouse on button
  89.         If MouseX()>XposButton And MouseX()<XposButton+ButWith And MouseY()>YposButton And MouseY()<YposButton+ButHeight And MouseDown(1) = 1 Then
  90.                 Mouse = True
  91.         Else
  92.                 If MouseX()>XposButton And MouseX()<XposButton+ButWith And MouseY()>YposButton And MouseY()<YposButton+ButHeight And Mouse=1 Then
  93.                         Mouse = False
  94.                         MouseReleas = True
  95.                 Else
  96.                         Mouse = False
  97.                         MouseReleas = False
  98.                 EndIf
  99.         EndIf
  100. Until Mouse = False
  101.  
  102. ; Send back the button status
  103. Return MouseReleas
  104. 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]
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(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]
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]
SetBuffer BackBuffer()in line 2(I needed 3 Minutes plus an FPS-check-routine until I found out)
Code: [Select]
{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]
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]

 

SimplePortal 2.3.6 © 2008-2014, SimplePortal