[CanvasGadget] FaderGadget / TrackBarGadget

Share your advanced PureBasic knowledge/code with the community.
Post Reply
User avatar
TomS
Enthusiast
Enthusiast
Posts: 342
Joined: Sun Mar 18, 2007 2:26 pm
Location: Munich, Germany

[CanvasGadget] FaderGadget / TrackBarGadget

Post by TomS »

Hi, everybody.
Creating new Gadgets on the Canvas seems to be quite popular.
So here's my take on it.
I had something like this using quite a lot of Win-Api.
Now here it is without any Api.
It's a bigger, more touchscreen-friendly TrackbarGadget that looks like a progressbar.

Updated exampled with less flickering of the TextGadgets (thanks to netmaestro) below:

Todo: SetFaderGadgetState(value.i)

Code: Select all

;-
;- BEGIN INCLUDE
;- 

EnableExplicit 

;-Flags
#TG_Fader_Horizontal 	= 1


Structure faderGadget
	id.i
	state.i
	colorF.i
	colorB.i
	height.i
	width.i
	min.i
	max.i
	horizontal.i
	image.i
EndStructure 

Global NewList FaderGadgets.faderGadget()



Macro RePaint(_INIT_)	
	
	Select FaderGadgets()\horizontal
		Case 0
			MouseY = GetGadgetAttribute(eventGadget, #PB_Canvas_MouseY )
			
			If _INIT_ = #True
				MouseY = FaderGadgets()\height
			EndIf
			
			StartDrawing(CanvasOutput(eventGadget))
			Box(0, 0, FaderGadgets()\width, FaderGadgets()\height, FaderGadgets()\colorB)
			
			If  FaderGadgets()\image >= 0
				ImagePos = MouseY
				If ImagePos <0 : ImagePos = 0 : EndIf 
				If  ImagePos >FaderGadgets()\height : ImagePos = FaderGadgets()\height : EndIf 
				DrawImage(ImageID(FaderGadgets()\image), 0, ImagePos - ImageHeight(FaderGadgets()\image)/2)	
				
			Else 			
				Box(0, MouseY, FaderGadgets()\width, FaderGadgets()\height-MouseY, FaderGadgets()\colorF)
				
			EndIf 
			
			State=FaderGadgets()\height-MouseY
			
			If State<0 : State=0:EndIf
			If State>FaderGadgets()\height:State=FaderGadgets()\height:EndIf
						
			FaderGadgets()\state = State
			StopDrawing()
			
			
		Case #True
			MouseX = GetGadgetAttribute(eventGadget, #PB_Canvas_MouseX )
			
			StartDrawing(CanvasOutput(eventGadget))
			Box(0, 0, FaderGadgets()\width, FaderGadgets()\height, FaderGadgets()\colorB)
			
			If  FaderGadgets()\image >= 0
				ImagePos = MouseX
				If ImagePos <0 : ImagePos = 0 : EndIf 
				If  ImagePos >FaderGadgets()\width : ImagePos = FaderGadgets()\width : EndIf 
				DrawImage(ImageID(FaderGadgets()\image), ImagePos - ImageWidth(FaderGadgets()\image)/2, 0)
				
			Else 
				Box(0, 0, MouseX, FaderGadgets()\height , FaderGadgets()\colorF)
			EndIf 
			
			State=FaderGadgets()\width-MouseX
			
			If State<0 : State=0:EndIf 
			If State>FaderGadgets()\width:State=FaderGadgets()\width:EndIf 	
			
			StopDrawing()
			
	EndSelect 
	
	FaderGadgets()\state = 	State
	
EndMacro 

Procedure FaderUpdate(eventGadget.i, eventType.i)
	Static  lDown.i 	;leftMouseDown
	Protected MouseX.i	;
	Protected MouseY.i	;
	Protected State.i	;GadgetState
	Protected ImagePos.i	

	
	ForEach FaderGadgets()
		
		If FaderGadgets()\id = eventGadget
			
			Select eventType	
					
				Case #PB_Ignore
					Repaint(1)
					
				Case #PB_EventType_LeftButtonDown
					lDown = 1					
					RePaint(0)					
					
				Case #PB_EventType_LeftButtonUp
					lDown = 0
					
				Case #PB_EventType_MouseLeave
					lDown = 0
					
				Case #PB_EventType_MouseMove
					
					If lDown = 1
						Repaint(0)						
					EndIf 
					
			EndSelect 			
			
		EndIf 
		
	Next 
	
	
EndProcedure 



Procedure FaderGadget(id.i, x.i, y.i, width.i, height.i, min.i, max.i, FGColor.i, BGColor.i, CanvasFlags.i=0, flags=0, Image.i=-1)
	
	AddElement(FaderGadgets())
	With FaderGadgets()
		
		If id = #PB_Any
			\id = CanvasGadget(#PB_Any, x, y, width, height, CanvasFlags)
		Else 
			CanvasGadget(id, x, y, width, height, CanvasFlags)
			\id = id
		EndIf 
		
		StartDrawing(CanvasOutput(\id))
		Box(0, 0, width, height, BGColor)		
		StopDrawing()
		
		\colorB = BGColor
		\colorF = FGColor
		\min 	= min
		\max 	= max
		\height = height
		\width 	= width
		If IsImage(image)
			\image 	= image
		Else
			\image = -1
		EndIf 
		
		If flags & #TG_Fader_Horizontal
			\horizontal = #True
		EndIf 
		
		FaderUpdate(\id,#PB_Ignore)
		
		ProcedureReturn \id 
		
	EndWith 
EndProcedure 




Procedure GetFaderGadgetState(gadget.i, trueState=#False)
	Protected min.i, max.i	
	Protected state.i
	Protected height.i, width.i
	Protected scala.i	
	Protected position.f
	
	ForEach FaderGadgets()
		If FaderGadgets()\id = gadget
			
			If truestate = #True			
				ProcedureReturn FaderGadgets()\state
			Else
				
				min 	= FaderGadgets()\min
				max 	= FaderGadgets()\max
				state 	= FaderGadgets()\state 
				height 	= FaderGadgets()\height 
				width 	= FaderGadgets()\width 
				Select FaderGadgets()\horizontal
					Case 1
						
						
						If width>0				
							position = state / width							
						EndIf 
						
						scala = max-min
						
						ProcedureReturn max - (position * scala )
						
						
					Default 
						If height>0				
							position = state / height
						EndIf 
						
						scala = max-min
						
						ProcedureReturn position * scala + min
				EndSelect 
			EndIf 
		EndIf
	Next 
EndProcedure 

DisableExplicit 
;-
;- END INCLUDE
;- 





;- Beispiel / Example 

Define event.i
Define Any_Fader

Define OldValue_1.i 
Define OldValue_2.i 
Define OldValue_3.i 
Define OldValue_4.i 
Define OldValue_5.i 

Enumeration 4
	#Text_Static_1
	#Text_Value_1
	#Text_Static_2
	#Text_Value_2
	#Text_Static_3
	#Text_Value_3
	#Text_Static_4
	#Text_Value_4
	#Text_Static_5
	#Text_Value_5
EndEnumeration 


CreateImage(1, 90, 15)
StartDrawing(ImageOutput(1))
Box(0, 0, 90, 15, $0000FF)
LineXY(0, 0, 90, 8, $00CC00)
LineXY(0, 14, 90, 8, $00CC00)
FillArea(0, 8, $00CC00, $00CC00)
StopDrawing()


CreateImage(2, 15, 90)
StartDrawing(ImageOutput(2))
Box(0, 0, 15, 90, $0000FF)
LineXY(0, 0, 8, 90, 0)
LineXY(14, 0, 8, 90, 0)
FillArea(8, 9, 0, 0)
StopDrawing()




OpenWindow(0, 0, 0, 705, 600, "FaderGadget", #PB_Window_ScreenCentered|#PB_Window_SystemMenu)

fadergadget(0, 					  5, 5, 90, 500, 		0, 		500,  	$0000FF, $000000, #PB_Canvas_GrabMouse)
fadergadget(1, 					  105, 5, 90, 500, 		1000, 	99999,  $0000FF, $000022, #PB_Canvas_GrabMouse, 0, 1)
Any_Fader=fadergadget(#PB_Any, 	200, 5, 400, 90, 		1, 		2,		$009900, $330000, #PB_Canvas_GrabMouse)
fadergadget(2, 					200, 100, 400, 90, 		100, 	0, 		$0066cc, $003300, #PB_Canvas_GrabMouse,  #TG_Fader_Horizontal)
fadergadget(3, 					200, 195, 400, 90, 		-10, 	10, 	$0066cc, $003300, #PB_Canvas_GrabMouse,  #TG_Fader_Horizontal, 2)


TextGadget(#Text_Static_1, 5, 510, 40, 20, "Fader 1:") 		:TextGadget(#Text_Value_1, 50, 510, 40, 20, Str(GetFaderGadgetState(0)))
TextGadget(#Text_Static_2, 105, 510, 40, 20, "Fader 2:")	:TextGadget(#Text_Value_2, 155, 510, 40, 20, Str(GetFaderGadgetState(1)))
TextGadget(#Text_Static_3, 605, 5, 40, 20, "Fader 3:")		:TextGadget(#Text_Value_3, 650, 5, 40, 20, Str(GetFaderGadgetState(Any_Fader)))
TextGadget(#Text_Static_4, 605, 105, 40, 20, "Fader 4:")	:TextGadget(#Text_Value_4, 650, 105, 40, 20, Str(GetFaderGadgetState(2)))
TextGadget(#Text_Static_5, 605, 195, 40, 20, "Fader 5:")	:TextGadget(#Text_Value_5, 650, 195, 40, 20, Str(GetFaderGadgetState(3)))

Repeat
	event = WaitWindowEvent(20)
	Select event
		Case #PB_Event_Gadget
			Select EventGadget()
				Case 0, 1, 2, 3, Any_Fader
					FaderUpdate(EventGadget(), EventType())
					
					If OldValue_1 <> GetFaderGadgetState(0)						
						SetGadgetText(#Text_Value_1, Str(GetFaderGadgetState(0)))
						OldValue_1 = GetFaderGadgetState(0)	
					EndIf 
					
					If OldValue_2 <> GetFaderGadgetState(1)						
						SetGadgetText(#Text_Value_2, Str(GetFaderGadgetState(1)))
						OldValue_2 = GetFaderGadgetState(1)	
					EndIf
					
					If OldValue_3 <> GetFaderGadgetState(Any_Fader)						
						SetGadgetText(#Text_Value_3, Str(GetFaderGadgetState(Any_Fader)))
						OldValue_3 = GetFaderGadgetState(Any_Fader)	
					EndIf
					
					If OldValue_4 <> GetFaderGadgetState(2)						
						SetGadgetText(#Text_Value_4, Str(GetFaderGadgetState(2)))
						OldValue_4 = GetFaderGadgetState(2)	
					EndIf
					
					If OldValue_5 <> GetFaderGadgetState(3)						
						SetGadgetText(#Text_Value_5, Str(GetFaderGadgetState(3)))
						OldValue_5 = GetFaderGadgetState(3)	
					EndIf
						
										
				
			EndSelect 
	EndSelect 
Until event = #PB_Event_CloseWindow
Last edited by TomS on Tue Jul 19, 2011 7:19 pm, edited 1 time in total.
Top
User avatar
netmaestro
PureBasic Bullfrog
PureBasic Bullfrog
Posts: 8451
Joined: Wed Jul 06, 2005 5:42 am
Location: Fort Nelson, BC, Canada

Re: [CanvasGadget] FaderGadget / TrackBarGadget

Post by netmaestro »

Nice work! Looks very good. 8)

One good way to avoid the text flicker is to replace this:

Code: Select all

SetGadgetText(4, "Fader 1: "+Str(GetFaderGadgetState(0)))
with something along this line:

Code: Select all

If GetFaderGadgetState(0)<>OldFaderState(0)
  SetGadgetText(4, "Fader 1: "+Str(GetFaderGadgetState(0)))
  OldFaderState(0) = GetFaderGadgetState(0)
EndIf
also consider making separate text gadgets for the "Fader 1:" part, that way those portions will never flicker.
BERESHEIT
Top
User avatar
TomS
Enthusiast
Enthusiast
Posts: 342
Joined: Sun Mar 18, 2007 2:26 pm
Location: Munich, Germany

Re: [CanvasGadget] FaderGadget / TrackBarGadget

Post by TomS »

Thanks for the tips.
It's just a quick example.
In the first version, I had a Button that "debugged" the values, I figured a "live" display would be better.
Top
User avatar
Thunder93
Addict
Addict
Posts: 1788
Joined: Tue Mar 21, 2006 12:31 am
Location: Canada

Re: [CanvasGadget] FaderGadget / TrackBarGadget

Post by Thunder93 »

Thanks TomS,

Using RC1, to compile I had to alter some lines to replace
- #PB_Canvas_GrabMouse > #PB_Canvas_Cursor
ʽʽSuccess is almost totally dependent upon drive and persistence. The extra energy required to make another effort or try another approach is the secret of winning.ʾʾ --Dennis Waitley
Top
User avatar
Kwai chang caine
Always Here
Always Here
Posts: 5494
Joined: Sun Nov 05, 2006 11:42 pm
Location: Lyon - France

Re: [CanvasGadget] FaderGadget / TrackBarGadget

Post by Kwai chang caine »

Good job..thanks for sharing 8)
ImageThe happiness is a road...
Not a destination
Top
Post Reply

Return to “Tricks 'n' Tips”