Drag Image Within Frame

Blitz3D Forums/Blitz3D Programming/Drag Image Within Frame

_PJ_	(Posted 2014) [#1]

The simple idea of dragging an image within a frame where only part of the image may be visible is actually a lot more complex than it seems.

I have something that 'sort of' works, but it's not at all ideal. I t would be best if the handle was only updated when the image was first clicked, and the drawing used imageblockrect or whatever to figure out the exact portion of what's drawn - also, I've confused myself about how the 'handle' is being re-calculated anyway, so it's not scrolling in the correct direction.

Finally, this should also allow for the partial image to be drawn with just the top left corner in the bottom-right of the frame - or the bottom right of image shown in top-left of frame if scrolled to these extremes etc.

I hope this makes sense, and if anyone can help with what I have I'd really appreciate it!

A cut-down version containing just the necessary code is here:

[Edited due to some invalid functions. An image "Test.jpg" is required]

Const FRAME_X=100
Const FRAME_Y=100
Const FRAME_W=256
Const FRAME_H=512

Global LAST_DRAWN_X
Global LAST_DRAWN_Y

Global DISPLAY
Global MASTER

Global GW
Global GH

Const MOUSE_IDLE=0
Const MOUSE_DRAG=1
Global MOUSE
Global MOUSE_LAST

Global DESK
Global LAST_DIRECTORY$
Global CANVAS

Initialise
RunTime 

Function Initialise()
	Initial
	ImportImage
End Function

Function Initial()
	;DESK=Desktop()
	
	Graphics 1024,768,32,2
	
	GW=GraphicsWidth();GadgetWidth(DESK)
	GH=GraphicsHeight();GadgetHeight(DESK)
	
	LAST_DIRECTORY$=CurrentDir()
;	CANVAS=CreateCanvas(100,100,256,512,DESK)
	MOUSE=MOUSE_IDLE
	MOUSE_LAST=MOUSE_IDLE
;	SetBuffer(CanvasBuffer(CANVAS))
	SetBuffer(BackBuffer())
End Function

Function RunTime()
	While Not KeyDown(1)
		CheckDisplay
	Wend
End Function

Function CheckDisplay()
	DrawFrame 
	
	GetMouseState
	
	If (MOUSE)
		SetImageHandleToMouse
		DrawToMouse
	End If
	
	Flip
End Function

Function SetImageHandleToMouse()
	Local MX=ImageXHandle(DISPLAY)
	Local MY=ImageYHandle(DISPLAY)
	
	HandleImage DISPLAY,MouseX()-FRAME_X+(ImageWidth(DISPLAY)-MY),MouseY()-FRAME_Y+(ImageHeight(DISPLAY)-MY)
	DebugLog( "Handle: "+ Str( ImageXHandle(DISPLAY) ) +" , "+Str( ImageYHandle(DISPLAY) ) )
End Function

Function DrawToMouse()
	Viewport FRAME_X,FRAME_Y,FRAME_W,FRAME_H
	DrawImage DISPLAY,FRAME_X,FRAME_Y
	Viewport 0,0,GW,GH
End Function	

Function WithinBoundary(nX,nY,X,Y,W,H)
	Return (((nX>=X)And (nX<=X+W)) And ((nY>=Y) And (nY<=nY+H)))
End Function

Function GetMouseState()
	MOUSE_LAST=MOUSE
	If (WithinBoundary(MouseX(),MouseY(),FRAME_X,FRAME_Y,FRAME_W,FRAME_H))
		MOUSE=MouseDown(1)
	Else
		MOUSE=MOUSE_IDLE
	End If
	If (MOUSE<>MOUSE_LAST)
		DebugLog("Mouse updated to: "+Str(MOUSE))
	End If
End Function

Function ImportImage()
	Local FilePath$="Test.jpg";RequestFile("Select Image","jpg,bmp,jpeg,png",False,LAST_DIRECTORY$+"*.*")
	If (FileType(FilePath)=1)
		LAST_DIRECTORY=FilePath
		Local Length=Len(FilePath)
		Local Extender=Instr(FilePath,".")
		If (Extender<Length)
			If(Length>4)
				Local File=LoadImage(FilePath)
				If (File)
					ClearCurrentImage
					DISPLAY=File
					DebugLog("Loaded "+FilePath+" As New Image: "+Str(DISPLAY))
					Return True
				End If
			End If 
		End If 
	End If 
	Return False
End Function

Function ClearCurrentImage()
	If (DISPLAY)
		FreeImage DISPLAY
		DISPLAY=0
	End If
End Function

Function DrawFrame()
	Rect FRAME_X,FRAME_Y,FRAME_W,FRAME_H,False
End Function

RemiD

(Posted 2014) [#2]

The simple idea of dragging an image within a frame where only part of the image may be visible is actually a lot more complex than it seems.

It depends on your approach...

For my GUI i have "windows" and "GUI elements"
Each window is a parent of GUI elements
Each GUI element (button, switch, messagearea, inputtextarea, imagearea, menutitle, menuwindow, etc...) is a child of a window

Each window uses a separate image
Each GUI element uses a separate image

When a GUI element is modified, the image of the window is rebuilt. So a GUI element could be drawn at any position, it will be displayed only if it is within the window. Do you get the idea ?

Kryzon

(Posted 2014) [#3]

When I find myself in the same situation as you, I delete my code and rewrite it from scratch.
Most of the time you rewrite something simpler and more functional.

;DECLARATIONS.

Const STATE_IDLE		= 0
Const STATE_HIGHLIGHT	= 1
Const STATE_DRAG		= 2

Const FRAME_X = 400 - 200 
Const FRAME_Y = 300 - 150
Const FRAME_WIDTH = 400
Const FRAME_HEIGHT = 300


Type DraggableImage
	Field image
	Field x, y
	Field state
End Type


Local display
Local drag.DraggableImage
Local mX, mY
Local mouseClick
Local timer


;STARTUP.

Graphics( 800, 600, 0, 2 )
SeedRnd( 12345 )

display	=	CreateImage( 800, 600 )
			SetBuffer( ImageBuffer( display ) )
			Color( Rand( 0, 50 ), Rand( 0, 50 ), Rand( 0, 50 ) )
			Rect( 0, 0, 800, 600, True )
			For i = 1 To 10
				Color( Rand( 0, 255 ), Rand( 0, 255 ), Rand( 0, 255 ) )
				Oval( Rand( 0, 700 ), Rand( 0, 500 ), Rand( 50, 300 ), Rand( 50, 300 ), True )
			Next
			Color( 255, 0, 0 )
			Rect( 0, 0, 800, 600, False )
			Rect( 1, 1, 798, 598, False )
			Rect( 2, 2, 796, 596, False )
			SetBuffer BackBuffer() ;Return to the BackBuffer.

drag	=	New DraggableImage
			drag\image	= display
			drag\x		= FRAME_X
			drag\y		= FRAME_Y
			drag\state	= STATE_IDLE ;Initial state.

timer = CreateTimer( 30 )


;MAIN LOOP.

While Not KeyHit( 1 )
	
	WaitTimer( timer )
	Cls
	
	mX = MouseX()
	mY = MouseY()
	mouseClick	= MouseDown( 1 )
	
	;Draggable 'update' logic.
	;Each state calls for a certain behaviour and specific tests.
	
	Select drag\state
		
		Case STATE_IDLE
			
			If ( mX	> FRAME_X ) And ( mX < FRAME_X + FRAME_WIDTH ) And ( mY > FRAME_Y ) And ( mY < FRAME_Y + FRAME_HEIGHT ) Then 
				drag\state = STATE_HIGHLIGHT
			EndIf	

		Case STATE_HIGHLIGHT
			
			If mouseClick Then
			
				;Change the state to dragging.
				
				drag\state = STATE_DRAG
				
				;Reset the mouse speeds to start fresh.
				
				MouseXSpeed()
				MouseYSpeed() 
				
			Else				
				If ( mX	< FRAME_X ) Or ( mX > FRAME_X + FRAME_WIDTH ) Or ( mY < FRAME_Y ) Or ( mY > FRAME_Y + FRAME_HEIGHT ) Then 
					drag\state = STATE_IDLE ;Return to idle if the mouse is outside the frame from any direction.
				EndIf
			EndIf	
				
		Case STATE_DRAG
		
			If mouseClick Then
				
				;Coordinates of the capture rectangle inside the image.
				
				drag\x = drag\x - MouseXSpeed()
				drag\y = drag\y - MouseYSpeed()
				
				;Restrain the capture rectangle to the image area.
				
				If drag\x < 0 Then drag\x = 0
				If drag\x > 800 - FRAME_WIDTH Then drag\x = 800 - FRAME_WIDTH
				
				If drag\y < 0 Then drag\y = 0
				If drag\y > 600 - FRAME_HEIGHT Then drag\y = 600 - FRAME_HEIGHT 
				
			Else
				If ( mX	> FRAME_X ) And ( mX < FRAME_X + FRAME_WIDTH ) And ( mY > FRAME_Y ) And ( mY < FRAME_Y + FRAME_HEIGHT ) Then 
					drag\state = STATE_HIGHLIGHT
				Else
					drag\state = STATE_IDLE
				EndIf
			EndIf
		
	End Select

	;Draggable 'render' logic (recommended to keep separate from the update logic).

	Select drag\state
		
		Case STATE_IDLE
		
			DrawBlockRect( drag\image, FRAME_X, FRAME_Y, drag\x, drag\y, FRAME_WIDTH, FRAME_HEIGHT )
	
		Case STATE_HIGHLIGHT, STATE_DRAG
		
			DrawBlockRect( drag\image, FRAME_X, FRAME_Y, drag\x, drag\y, FRAME_WIDTH, FRAME_HEIGHT )
			Color( 255, 255, 0 )
			Rect( FRAME_X, FRAME_Y, FRAME_WIDTH, FRAME_HEIGHT, False )
						
	End Select
	
	Flip( True )
	
Wend 

End

_PJ_	(Posted 2014) [#4]

Kryzon, that's excellent!

I agree with the prionciple of starting over and trying to simplify what I want to focus on the core asects, but I'd done that a few times already and seemed to have just confused myself a bit.

It's great that you've gotten the logic and the display nicely separate, very basic clear instructions and the dragging works perfectly.

Thanks so much for your help :)