Scrolling Menu (using the finger)

Author

Message

Richard_6

7

Years of Service

User Offline

Joined: 3rd Feb 2017

Location:

Posted: 26th Feb 2017 05:50

Link

Hi everyone.

I want to develop a scrolling menu where we can slide the menu options with the index finger.

That's the best I could get so far:

SetWindowTitle("Sliding Fingers" )
SetWindowSize(1024,768,0)
SetVirtualResolution( 1024, 768 )

X as integer
Clicked as integer
dim Obj[10] as integer

Back=CreateSprite(0)
setspritesize(back,2048,128)
SetSpriteColor(back,256,256,0,256)
SetSpritePosition(back,0,GetVirtualHeight()/2-GetSpriteHeight(back)/2)

X=128

for i=1 to 10
	Obj[i]=CreateSprite(obj[i])
	setspritesize(obj[i],64,64)
	SetSpriteColor(obj[i],100,0,256,256)
	SetSpritePositionByOffset(obj[i],getspritex(back)+x,GetSpriteYByOffset(back))
	x=x+128
next i

do
	if GetPointerPressed()
		if GetSpriteHitTest(back,getpointerx(),getpointery())
			Clicked=1
			XCursorToSpriteDiff=GetPointerX()-GetSpriteX(back)
		endif
	endif
	
	if Clicked=1
		if GetPointerState()			
			SetSpritePosition(back,GetPointerX()-XCursorToSpriteDiff,getspritey(back))
			if getspritex(back)>0
				SetSpritePosition(back,0,GetVirtualHeight()/2-GetSpriteHeight(back)/2)
			elseif getspritex(back)+GetSpriteWidth(back)<GetVirtualWidth()
				SetSpritePosition(back,-GetVirtualWidth(),GetVirtualHeight()/2-GetSpriteHeight(back)/2)
			endif	
			x=128
			for i=1 to 10
				SetSpritePositionByOffset(obj[i],getspritex(back)+x,GetSpriteYByOffset(back))
				x=x+128
			next i
		else
			Clicked=0
		endif
	endif

sync()
loop

+ Code Snippet

SetWindowTitle("Sliding Fingers" )
SetWindowSize(1024,768,0)
SetVirtualResolution( 1024, 768 )

X as integer
Clicked as integer
dim Obj[10] as integer

Back=CreateSprite(0)
setspritesize(back,2048,128)
SetSpriteColor(back,256,256,0,256)
SetSpritePosition(back,0,GetVirtualHeight()/2-GetSpriteHeight(back)/2)

X=128

for i=1 to 10
	Obj[i]=CreateSprite(obj[i])
	setspritesize(obj[i],64,64)
	SetSpriteColor(obj[i],100,0,256,256)
	SetSpritePositionByOffset(obj[i],getspritex(back)+x,GetSpriteYByOffset(back))
	x=x+128
next i

do
	if GetPointerPressed()
		if GetSpriteHitTest(back,getpointerx(),getpointery())
			Clicked=1
			XCursorToSpriteDiff=GetPointerX()-GetSpriteX(back)
		endif
	endif
	
	if Clicked=1
		if GetPointerState()			
			SetSpritePosition(back,GetPointerX()-XCursorToSpriteDiff,getspritey(back))
			if getspritex(back)>0
				SetSpritePosition(back,0,GetVirtualHeight()/2-GetSpriteHeight(back)/2)
			elseif getspritex(back)+GetSpriteWidth(back)<GetVirtualWidth()
				SetSpritePosition(back,-GetVirtualWidth(),GetVirtualHeight()/2-GetSpriteHeight(back)/2)
			endif	
			x=128
			for i=1 to 10
				SetSpritePositionByOffset(obj[i],getspritex(back)+x,GetSpriteYByOffset(back))
				x=x+128
			next i
		else
			Clicked=0
		endif
	endif

	sync()
loop

The result is not smooth as scrolling in a phone. It seems the phones have an "inertia" feature so the objects keep moving after you slide. I'm sure you can come up with something much better.

Back to top

Profile PM

Markus

Valued Member

20

Years of Service

User Offline

Joined: 10th Apr 2004

Location: Germany

Posted: 26th Feb 2017 10:37

Link

maybe like this?

rem
rem AGK Application 2017.01.09
rem MR

SetWindowTitle("Sliding Fingers" )
SetWindowSize(1024,768,0)
SetVirtualResolution( 1024, 768 )

Main()
End

Function Main()

Clicked as integer
	Obj as integer[10]

Back=CreateSprite(0)
	setspritesize(back,2048,128)
	SetSpriteColor(back,256,256,0,256)
	SetSpritePosition(back,0,GetVirtualHeight()/2-GetSpriteHeight(back)/2)

for i=1 to 10
		Obj[i]=CreateSprite(obj[i])
		setspritesize(obj[i],64,64)
		SetSpriteColor(obj[i],100,0,256,256)
		SetSpritePositionByOffset(obj[i],i*128-64,GetSpriteYByOffset(back))
	next i

do
		if GetPointerPressed()
			if GetSpriteHitTest(back,getpointerx(),getpointery())
				Clicked=1
				ClickX1=GetPointerX()
			endif
		endif

if GetPointerState()
			if GetSpriteHitTest(back,getpointerx(),getpointery())
				ClickX2=GetPointerX()
			endif				
		else
			Clicked=0
		endif
		
		if Clicked=1  
			Offset=ClickX2-ClickX1
			if Abs(Offset)<8 then Offset=0 
		endif

if Clicked=1 or Offset<>0
				x1#=GetSpriteXByOffset(obj[1])+Offset / 16.0
				if x1#<-512 then x1#=-512
				if x1#> 512 then x1#= 512
				SetSpritePositionByOffset(obj[1],x1#,GetSpriteYByOffset(obj[1]))
				for i=2 to 10
					SetSpritePositionByOffset(obj[i],GetSpriteXByOffset(obj[i-1])+128,GetSpriteYByOffset(obj[i]))
				next
		endif
	 
		for i= 1 to 8
		 if Offset>0 then Offset=Offset - 1
		 if Offset<0 then Offset=Offset + 1
		next
		
		sync()
	loop
	
EndFunction

+ Code Snippet

rem
rem AGK Application 2017.01.09
rem MR

SetWindowTitle("Sliding Fingers" )
SetWindowSize(1024,768,0)
SetVirtualResolution( 1024, 768 )

Main()
End

Function Main()

	Clicked as integer
	Obj as integer[10]

	Back=CreateSprite(0)
	setspritesize(back,2048,128)
	SetSpriteColor(back,256,256,0,256)
	SetSpritePosition(back,0,GetVirtualHeight()/2-GetSpriteHeight(back)/2)

	for i=1 to 10
		Obj[i]=CreateSprite(obj[i])
		setspritesize(obj[i],64,64)
		SetSpriteColor(obj[i],100,0,256,256)
		SetSpritePositionByOffset(obj[i],i*128-64,GetSpriteYByOffset(back))
	next i

	do
		if GetPointerPressed()
			if GetSpriteHitTest(back,getpointerx(),getpointery())
				Clicked=1
				ClickX1=GetPointerX()
			endif
		endif

		if GetPointerState()
			if GetSpriteHitTest(back,getpointerx(),getpointery())
				ClickX2=GetPointerX()
			endif				
		else
			Clicked=0
		endif
		
		if Clicked=1  
			Offset=ClickX2-ClickX1
			if Abs(Offset)<8 then Offset=0 
		endif

		if Clicked=1 or Offset<>0
				x1#=GetSpriteXByOffset(obj[1])+Offset / 16.0
				if x1#<-512 then x1#=-512
				if x1#> 512 then x1#= 512
				SetSpritePositionByOffset(obj[1],x1#,GetSpriteYByOffset(obj[1]))
				for i=2 to 10
					SetSpritePositionByOffset(obj[i],GetSpriteXByOffset(obj[i-1])+128,GetSpriteYByOffset(obj[i]))
				next
		endif
	 
		for i= 1 to 8
		 if Offset>0 then Offset=Offset - 1
		 if Offset<0 then Offset=Offset + 1
		next
		
		sync()
	loop
	
EndFunction

AGK (Steam) V2017.01.09 : Windows 10 Pro 64 Bit : AMD (16.12.1) Radeon R7 265 : Mac mini OS Sierra (10.12.2)

Back to top

Profile PM Email

Richard_6

7

Years of Service

User Offline

Joined: 3rd Feb 2017

Location:

Posted: 26th Feb 2017 15:01

Link

Looks awesome, Markus!! Thanks!!

The only problem I found is that if we keep clicking in the end in a static point it keeps scrolling.

Back to top

Profile PM

Markus

Valued Member

20

Years of Service

User Offline

Joined: 10th Apr 2004

Location: Germany

Posted: 26th Feb 2017 17:09

Link

you mean if you will just click without scroll?
i try to stop the movement here if the distance the finger moved is to small.

Quote: "if Abs(Offset)<8 then Offset=0"

AGK (Steam) V2017.01.09 : Windows 10 Pro 64 Bit : AMD (16.12.1) Radeon R7 265 : Mac mini OS Sierra (10.12.2)

Back to top

Profile PM Email

Richard_6

7

Years of Service

User Offline

Joined: 3rd Feb 2017

Location:

Posted: 26th Feb 2017 18:07

Link

I mean, let's say we click on 0,0 and move the cursor to 128,0 and then stop moving but keep clicking (like staying with the finger pressed but not moving). Right now the sprites are moving continuously.

Back to top

Profile PM

Markus

Valued Member

20

Years of Service

User Offline

Joined: 10th Apr 2004

Location: Germany

Posted: 26th Feb 2017 21:49

Link

then in pointerstate the
ClickX1=GetPointerX()
need a update after some milliseconds

AGK (Steam) V2017.01.09 : Windows 10 Pro 64 Bit : AMD (16.12.1) Radeon R7 265 : Mac mini OS Sierra (10.12.2)

Back to top

Profile PM Email

Richard_6

7

Years of Service

User Offline

Joined: 3rd Feb 2017

Location:

Posted: 26th Feb 2017 23:02

Link

I was thinking about that. In order to do the update after the milliseconds, you think the best method is to set a timer?

Thank you.

Back to top

Profile PM

hoyoyo80

8

Years of Service

User Offline

Joined: 11th May 2016

Location:

Posted: 27th Feb 2017 10:33

Link

Hope can get a code for scrolling gui from this topic

Back to top

Profile PM

Markus

Valued Member

20

Years of Service

User Offline

Joined: 10th Apr 2004

Location: Germany

Posted: 27th Feb 2017 12:20 Edited at: 27th Feb 2017 12:28

Link

this way.
(the logic can now be simplified.)

rem
rem AGK Application 2017.01.09
rem MR
 
SetWindowTitle("Sliding Fingers" )
SetWindowSize(1024,768,0)
SetVirtualResolution( 1024, 768 )
 
Main()
End
 
Function Main()
 
    Clicked as integer
    Obj as integer[10]
 
    Back=CreateSprite(0)
    setspritesize(back,2048,128)
    SetSpriteColor(back,256,256,0,256)
    SetSpritePosition(back,0,GetVirtualHeight()/2-GetSpriteHeight(back)/2)
 
    for i=1 to 10
        Obj[i]=CreateSprite(obj[i])
        setspritesize(obj[i],64,64)
        SetSpriteColor(obj[i],100,0,256,256)
        SetSpritePositionByOffset(obj[i],i*128-64,GetSpriteYByOffset(back))
    next i
 
    do
        if GetPointerPressed()
            if GetSpriteHitTest(back,getpointerx(),getpointery())
                Clicked=1
                ClickX1=GetPointerX()
                t#=Timer()
            endif
        endif
 
        if GetPointerState()
            if GetSpriteHitTest(back,getpointerx(),getpointery())
                ClickX2=GetPointerX()
            endif               
        else
            Clicked=0
        endif
         
        if Clicked=1
			if Timer()-t# > 0.5
			 ClickX1=GetPointerX()
			endif
			  
            Offset=ClickX2-ClickX1
            if Abs(Offset)<8 then Offset=0 
        endif
 
        if Clicked=1 or Offset<>0
                x1#=GetSpriteXByOffset(obj[1])+Offset / 16.0
                if x1#<-512 then x1#=-512
                if x1#> 512 then x1#= 512
                SetSpritePositionByOffset(obj[1],x1#,GetSpriteYByOffset(obj[1]))
                for i=2 to 10
                    SetSpritePositionByOffset(obj[i],GetSpriteXByOffset(obj[i-1])+128,GetSpriteYByOffset(obj[i]))
                next
        endif
      
        for i= 1 to 8
         if Offset>0 then Offset=Offset - 1
         if Offset<0 then Offset=Offset + 1
        next
         
        sync()
    loop
     
EndFunction

+ Code Snippet

rem
rem AGK Application 2017.01.09
rem MR
 
SetWindowTitle("Sliding Fingers" )
SetWindowSize(1024,768,0)
SetVirtualResolution( 1024, 768 )
 
Main()
End
 
Function Main()
 
    Clicked as integer
    Obj as integer[10]
 
    Back=CreateSprite(0)
    setspritesize(back,2048,128)
    SetSpriteColor(back,256,256,0,256)
    SetSpritePosition(back,0,GetVirtualHeight()/2-GetSpriteHeight(back)/2)
 
    for i=1 to 10
        Obj[i]=CreateSprite(obj[i])
        setspritesize(obj[i],64,64)
        SetSpriteColor(obj[i],100,0,256,256)
        SetSpritePositionByOffset(obj[i],i*128-64,GetSpriteYByOffset(back))
    next i
 
    do
        if GetPointerPressed()
            if GetSpriteHitTest(back,getpointerx(),getpointery())
                Clicked=1
                ClickX1=GetPointerX()
                t#=Timer()
            endif
        endif
 
        if GetPointerState()
            if GetSpriteHitTest(back,getpointerx(),getpointery())
                ClickX2=GetPointerX()
            endif               
        else
            Clicked=0
        endif
         
        if Clicked=1
			if Timer()-t# > 0.5
			 ClickX1=GetPointerX()
			endif
			  
            Offset=ClickX2-ClickX1
            if Abs(Offset)<8 then Offset=0 
        endif
 
        if Clicked=1 or Offset<>0
                x1#=GetSpriteXByOffset(obj[1])+Offset / 16.0
                if x1#<-512 then x1#=-512
                if x1#> 512 then x1#= 512
                SetSpritePositionByOffset(obj[1],x1#,GetSpriteYByOffset(obj[1]))
                for i=2 to 10
                    SetSpritePositionByOffset(obj[i],GetSpriteXByOffset(obj[i-1])+128,GetSpriteYByOffset(obj[i]))
                next
        endif
      
        for i= 1 to 8
         if Offset>0 then Offset=Offset - 1
         if Offset<0 then Offset=Offset + 1
        next
         
        sync()
    loop
     
EndFunction

@hoyoyo80
you just need a modul which handle the input for your needings.
i made a slider bar example, you can find here in this agk threads or in online help examples.

AGK (Steam) V2017.01.09 : Windows 10 Pro 64 Bit : AMD (16.12.1) Radeon R7 265 : Mac mini OS Sierra (10.12.2)

Back to top

Profile PM Email

Richard_6

7

Years of Service

User Offline

Joined: 3rd Feb 2017

Location:

Posted: 27th Feb 2017 16:00

Link

Works well now! Thanks!!

Back to top

Profile PM

Sorry your browser is not supported!

AppGameKit Classic Chat / Scrolling Menu (using the finger)