PureBoard

Verfasst: **19.07.2011 16:45**

Hi.
Wenn man sich im englischen Forum umsieht, merkt man, dass selbst erstellte Gadgets auf Canvas-Basis "voll in" sind.
Seit ich einen Touchscreen habe, benutze ich einen modifizierten Code von Hroudtwolf (90% Windows Api) als Touch-Kompatibles TrackbarGadget, denn die sind bei normaler Bildschirmauflösung arg schwer zu treffen und verschwinden aus manchen Winkeln ganz, mangels Kontrast.

Jetzt ohne Api mit CanvasGadget.
Das ganze ist nicht wirklich ein TrackbarGadget, eher ein Fortschrittsbalken, dessen Position man mit der Maus bestimmen kann.
Da aber alles selber gezeichnet wird, kann man auch ein einzelnen Zeiger auf einer Schiene darstellen.

Das Border-Flag wird derzeit nicht unterstützt, da sich dadurch die effektive Nutzfläche verringert und ich bis jetzt nur einen Windows-Api-Code zum ermitteln eben jener habe.

==EDIT==
Rev 1:

Horizontale Fader
Eigene Images als "Anfasser", "Tracker" oder "Marker" (oder wie auch immer man das nennen will)

Code: Alles auswählen

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

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(4, 5, 510, 80, 20, "Fader 1:")
TextGadget(5, 105, 510, 80, 20, "Fader 2:")
TextGadget(6, 605, 5, 100, 20, "Fader 3:")
TextGadget(7, 605, 105, 100, 20, "Fader 4:")
TextGadget(8, 605, 195, 100, 20, "Fader 5:")

Repeat
	event = WaitWindowEvent(20)
	Select event
		Case #PB_Event_Gadget
			Select EventGadget()
				Case 0, 1, 2, 3, Any_Fader
					FaderUpdate(EventGadget(), EventType())
					
					SetGadgetText(4, "Fader 1: "+Str(GetFaderGadgetState(0)))
					SetGadgetText(5, "Fader 2: "+Str(GetFaderGadgetState(1)))
					SetGadgetText(6, "Fader 3: "+Str(GetFaderGadgetState(Any_Fader)))
					SetGadgetText(7, "Fader 4: "+Str(GetFaderGadgetState(2)))
					SetGadgetText(8, "Fader 5: "+Str(GetFaderGadgetState(3)))					
				
			EndSelect 
	EndSelect 
Until event = #PB_Event_CloseWindow

Verfasst: **19.07.2011 16:51**

Ich finds toll, wenn Beispielcodes über die Verwendung von CanvasGadget geschrieben werden. Danke für das tolle Beispiel, gute Arbeit.

Verfasst: **19.07.2011 19:22**

Danke.
Hab den Code oben angepasst.
Neuerungen siehe Edit ganz oben^^

PureBoard

[CanvasGadget] FaderGadget / TrackBarGadget

[CanvasGadget] FaderGadget / TrackBarGadget

Re: [CanvasGadget] FaderGadget / TrackBarGadget

Re: [CanvasGadget] FaderGadget / TrackBarGadget