Autoscroll when I'm sliding on screen with my finger (like Opera mobile)

pdabasic

Active Member
Licensed User
I tried to managed to do this option but I got stock!

I wrote a little example based on MoveMap by corwin42 (thx).
Now I can move the image with my finger but I need a solution, when I'm sliding with my finger, the image moves onward like opera mobile or internet explorer mobile, regarding the speed of the slide.
Can anybody help me or have a complite solution?

Thank you

In the example i made a mistake: One drawerEx is enough I know this but is not the important
 
Last edited:

Basic4Life

Member
Licensed User
the feature you are trying to achieve is called kinetic scrolling (you can google for some approaches in different programming languages)

Where you probably should start is by seperating user input and image movement. What you really want is an animation according to user input.
So the basic idea is to analyze the user input and determine the according momentum and direction in which the image should move. And then the complete movement is run by a timer making the appropriate movement steps. The kinetic effect is achieved by making bigger steps in the beginning and then reducing the step size over time.

First of all, I'd like to mention that I think you'll run into performance issues in B4PPC (at least on a smartphone)

It would be very helpfull if you could specify what you try to do with it, if you need to draw controls onto the moving background or draw lines, circles with the drawer on it or not.

One idea I have is to use the sprite library and set the image as a sprite and hook up the Mousemove event to the gamewindow via door library (this works). I am not sure if that will have good enough performance with an image of the size you are using, but it'd allow you to set and manipulate velocity and direction of the sprite easier than doing it with a form image or image control

I've attached a quick attempt, it dosn't work (Not even close to working). It's just for inspiration
 
Last edited:

pdabasic

Active Member
Licensed User
the feature you are trying to achieve is called kinetic scrolling (you can google for some approaches in different programming languages)...

Thank you Basic4Life!

I never use the sprite libray before but i read it and try to use it.
But the problem is still the same:

I need a syntax, how to manage the scrolling?!
Because your example is scroll but never stoped and scroll too when I left my finger on the screen.
The original kinetic scrolling is start only when I release the screen.

I thought the webbrowser what Erel suggested (Thank you Erel), but I only found a jquery based kinetic scroll method but it was very slow and I couldn't decrypt the code.

I wana make an image with dzImage ControlCapture from a webbase control what is a report from my work and this would be the "print preview".
 

Basic4Life

Member
Licensed User
You're welcome.

I've attached a file that is working pretty good. I have to admit, that performance isn't an issue when using the imagelib and form.image, so I was wrong. At least the compiled file is running pretty smooth on my old device (400mhz 240x320). The kinetic movement is depending too much on the accuracy of the mousemove event for my taste at the moment, but that's a minor issue and I added comments to solve that. I hope this helps you to solve your problem.
 
Last edited:

pdabasic

Active Member
Licensed User

Thank you again Basic4Life!

I'm very suprised you because i thought you closed this problem.

So i tried your sample but it's a little buggy.

I try to repair it.

When the kinetic scroll is work or worked and I make a simple click It's move an other space.

The perfect solution: when the kinetic scroll is work and i tap on screen it stop the movent.
 

pdabasic

Active Member
Licensed User
Thanks Basic4Life your sample again.
I modified your code some place and now it works perfect. :sign0098:

Here is the complete solution.
 
Last edited:

Basic4Life

Member
Licensed User
Thanks Basic4Life your sample again.
I modified your code some place and now it works perfect. :sign0098:

Here is the complete solution.

Very nice.

I have a little improvment, that I forgot to use in my sample.

In the kinetic timer sub we are using

xk = xk + (distancex * slowdown)
yk = yk + (distancey * slowdown)

So the speed for the kinetic movement is actually constant, since (distance*slowdown) is constant

So I would suggest using

xk = xk + (distancex * slowdown^steps)
yk = yk + (distancey * slowdown^steps)

This way the image is actually reducing it's movement distance every step.
Maybe the slowdown variable needs to be adjusted, since the image won't travel as far as before. Works fine on the desktop with the 0.8 but I didn't test in on a touch device.
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…