[VB6Oldguy]

I did some research of the old threads and I can't find where this question has every been asked before (please point me to such a thread if it exists).

Here is the question:
How would one go about simulating the some kind of flickscroll (as on an iPhone/iPod Touch/iPad) using VB6?

For instance --Say you had a thumbnail viewer with the thumbnails arranged in a strip or horizontal row along the top of the form and below that was a large area for viewing the picture "full size" when the thumbnail is clicked on (or at least as large as the area for which the form window is currently resized).

The horizontal thumbanil scrollstrip is actually using a picturebox inside a picturebox arrangement where the inner picturebox is scrollable horizontally only. There is also special code that copies the background graphic of the form from underneath the outer picturebox and uses it as the background of the inner picbox to simulate transparency (with a little alphablended darkening and memDC DMA pixel drawing to give the thumbnails a bit of a custom outline).

Right now the app uses both a scrollbar control and arrow buttons on either end are use to scroll the thumbnails left and right, but the client says this looks "clunky" and old fashioned.
He pulls out his iPhone and says it should be able to flick scroll back and forth -maybe with a little bounce as the scroll movement "settles in".

The computer the VB app is going to run on is an HP touchscreen computer that has the Windows 7 and the Microsoft Surface Touch Pack loaded:
http://www.microsoft.com/surface/en/...ouch-pack.aspx

Unfortunately I don't think there is any way that VB6 can access those dlls.
So how can something like that be simulated?
On a touch screen a finger swipe gesture is generally translated to a mousepointer cursor movement, so I figure it will have to use the Mousemove event of the picturebox control, but I've never seen mousemove event coding sophisticated enough to:
1.) Do a calculation that takes into account vector directionality, stroke length and velocity in way that accurately represents the users "forcefulness" in trying to initiate (and/or continue) a stroke scroll movement.
2.) The "bounce" at the end should have somewhat the characteristics of a ball falling straight down to the ground and have a restricted (dampened) single bounce but at the same time the "settling in" part should have the equivalent of a "snap to grid" soft lock-in -- such that the scrollbar is not showing a partial thumbnail on either end.
It would be similar to a drop snap after a drag and drop movement.
See that attachments to this thread if you need an example of drop snapping:
http://www.xtremevbtalk.com/showthread.php?t=236848

Getting the bounce "dampening" to look right and writing the code in such a way to be able to play with the softness of the soft snapping is something I can't find any code samples in VB6 that are even slightly along these lines.

I know there is some VB.Net code for doing flicker scrolling with WinForms:
http://anoriginalidea.wordpress.com/...g-in-winforms/

Also found this FlickDynamics code:
http://gist.github.com/100855

But am I missing something in my Googling around for VB6-based example somewhere out there of this specialized type of user interface behaviour.
Any help appreciated..thanks

Some other related terms I found/used:
kinetic scrolling, flick panning, inertial scrolling, finger panning, flick scroll gesture

[vb5prgrmr]

Okay, the mouse down, move, and up events are what you need and you could also probably use drag-n-drop right along with it but for now, we will just concentrate on the mouse down, move, up events...

So then, a horizontal display of various thumbs would only need you to track the x postion, while a verticle would need the y checked/monitored. So you capture the mouse position in down, track it in move, and capture it in up.

now while this ignores the move event, which I mentioned so one can make it look like you are dragging...

Option Explicit

Dim MDX As Single, MUX As Single

Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
MDX = X
End Sub

Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
MUX = X
Picture1.Cls
If MDX < MUX Then
  Picture1.Print ">"
Else
  Picture1.Print "<"
End If
End Sub

I hope you can get at to what I am trying to lead you towards...



Good Luck

[VB6Oldguy]

Yes, vb5prgrmr I can see where you are going...and I definitely think your code fragment will come in handy toward achieving the solution, but it's going to be a little more complicated I think.

What if the thumbnail strip is already in motion.
Theoretically this strip could have thousands of thumb pics and once the flick scroll is initiated it's going to keep going until eventually it "runs out of steam" or in other words the velocity is reduced to zero by some sort of drag coefficient (that is adjustable).

If the strip is in motion from left to right and the user makes a right to left flick scroll gesture (in the opposite direction) then that mouse movement may only slow the movement, or stop it or make it reverse direction depending on how much "forcefullness" was used (ie. velocity of mouse movement and duration/distance).

There a bunch of permutations..so I think I'm going to have to make a chart/table to break them all down and wrap my head around the movement logic. Will post again later.
But thanks for your post and help vb5prgrmr!

[vb5prgrmr]

Not a problem but I do have a suggestion on the scrolling in one direction... once the user "grabs" the scrolling images, they stop. Simple. Because if user is wanting to stop the scrolling to see a particular image and the mouse down event does not stop the scrolling, then how far and how fast would the user then have to scroll back to see the image they want displayed?



Good Luck

[mikeTVB]

You are going to need to use the API mouse position. The mouse.down.event will start your flick, then track the mouse x position and how fast the mouse was moved. Then send the thumb pics moving at a velocity relative to the speed of the mouse flick. I wouldn't use the exact mouse flick speed, but just 3 speed choices. The 3 speed choices are selected based on a range of flick speeds (ie; >=3pix/s).
Your drag should be constant I would think, because the faster the thumb pics are moving the longer it will take to slow them down, using the constant drag.

Type POINTAPI ' This holds the logical cursor information
x As Integer
y As Integer
End Type
Declare Sub GetCursorPos Lib "User" (lpPoint As POINTAPI)

I would like to see this when your done.
Thanks

Originally Posted by VB6Oldguy

Yes, vb5prgrmr I can see where you are going...and I definitely think your code fragment will come in handy toward achieving the solution, but it's going to be a little more complicated I think.

What if the thumbnail strip is already in motion.
Theoretically this strip could have thousands of thumb pics and once the flick scroll is initiated it's going to keep going until eventually it "runs out of steam" or in other words the velocity is reduced to zero by some sort of drag coefficient (that is adjustable).

If the strip is in motion from left to right and the user makes a right to left flick scroll gesture (in the opposite direction) then that mouse movement may only slow the movement, or stop it or make it reverse direction depending on how much "forcefullness" was used (ie. velocity of mouse movement and duration/distance).

There a bunch of permutations..so I think I'm going to have to make a chart/table to break them all down and wrap my head around the movement logic. Will post again later.
But thanks for your post and help vb5prgrmr!

[VB6Oldguy]

To vb5prgrmr,
What about the case when the scrolling is going very fast (almost a blur) and the user just wants to slow things down to allow more productive (easier) browsing?
Then a click and hold should just slow things.
However if it is going somewhat slow already then a click and hold will bring it to a stop as you suggested.

To mikeTVB,
I hadn't though of using speed pre-sets. That's an interesting idea and might simplify things over a "free range velocity adjust" approach.
I have a bad feeling you are right about having to use the mouse APIs instead of VB's in-built mouse events (perhaps in combo with a high resolution timer API).
The few tests I done have indicated its going to be hard to get the kind of control I want with VB's Mousedown and Mouseup events, but I haven't abandoned that approach entirely yet.

I'm glad this thread has excited some interest though and am grateful for the continuing replies.
I made up a flickscroll desired behaviors chart and I'll attach it below.
This month has had a bunch of things come up I wasn't expecting, but I am committed to this project long term and I hope to have a "baseline" thumbscroller (that uses just the tradition direction left/right buttons and a custom scrollbar) down in a week or so that I can try out different types of mouse stroking behavior.

Right now I'm playing around with velocity and creating artificial drag.
Wish I hadn't forgotten have the stuff they taught in my high school physics classes from many decades ago.
Ideally the thumbnail images should be bitblt-ed into the inner picturebox but that plays havoc with trying to find if the mouse is over a thumbnail or the background while the thumbnail strip is in motion (scrolling at a variable velocity) and the mouse is in motion.
Maybe tracking the X value of the mouse cursor (either with the POINT API or the Mousemove event) while comparing to the x position of the inner picturebox over some pre-established set to ranges (stored in a private type or array perhaps?). This has to tied in somehow with the "snapback" that prevents the thumbnail strip from stopping with a partial thumbnail showing.

I will keep trying to wrap my head around these things and more later..

[VB6Oldguy]

Only 1 view (so far) of the chart i attached to the previous post - doesn't seem to much interest..oh well.

Well, as promised, I've got a "baseline" project done and will attach it below.

Sorry for the non-optimal quality of the large images. I had to crop them as well as compress them a little more than I notmally feel comfortable with to barely make it under the forum's 2MB upload limit.

And I've been thinking about things for the last week and here's what I came up:
****************Project Notes******************
Why are there 1000s or example of flick scrolling using VB6 already?
Or in other words, what makes the implementation of this behavior so non-trivial?
Maybe because using bitblt-ing from a memDC backbuffer for mouse directed animation requires coordinating (in code) on screen cursor movements with graphic movement patterns that occur (or are directed from) off screen.
As far as I know no one has ever produced any VB6 code to adequately handle something like this.
I could be wrong so if anyone knows of any such code please fee free to volunteer its discover to me.

During my Google Image search research of scoll controls for iPhones/iPods/iPhones I found that such controls are not that common.
"Why not?" I asked myself.
My conclusions:
1.) Since the touch screen for these devices in essence makes the whole screen a scroll control, it makes a scrollbar pretty much redundant.
There are cases where developers porting over an interface to an Apple mobile device don't seem to realize this and/or in some cases a scroll-slider is used because what is happening onscreen is too complex for whole screen based scrolling.
However, in both cases I think it is because the developers have not fully "thought out" their interface and embraced the possibilities of touch gesturing (and the slick paradigm that Apple is pushing in their Xcode/Objective-C samples) that such scroll and slider controls are still used (awkwardly).
2.) The other thing I realized, after spending some time with the baseline example (attached below) and thinking about design considerations, is that a scrollbar is actually "fighting" good interface design in this case.

The fact is one can't scroll past the two ends of the scrollbar (even though it's a very nice look mac-style derived virtual slider)
But this is part of the paradigm of the scrollbar - it presupposes an in-built range.
What if you want to scroll without a range -- a kind of infinity scroll or infini-scroll?
What is the visual paradigm for that can embrace that?

What flick scrolling (and "inifiniscrolling") demands is virtual control that creates a virtual space extending off screen (seemingly) without limits in both directions.
I say "seemingly" because, of course, ram memory for holding graphics is never inifinite...so this is the other issue that must be balanced with performance.

For ultimate performance everything (all graphics) would be loaded from disk at startup and kept cached all the while the program is running for maximal speed in rendering to screen from a memDC backbuffer.

However, what if there is a directory of over 10,000 (or even 100,000) pictures to browse through.
Consider also that these pics could be high resolution screenshots, using various ratios (4:3, 16:9 widescreen, 16:10 widescreen) and large dimensions (1600x900,1920x1080, 1920x1200, 2048x1600, 3840x2400, 6400x4800, 7680x4800).
Even a motherboard with 16GB of fully populated ram running a 64bit operating system would run out of memory trying to do such huge graphics caching!

So performance must be balanced with careful consideration of available system resources. For practical purposes this means the speed of rendering to screen must include a not only bitblt-ing graphics cached in memory, but also some sort of speed hit for runtime loading of graphics from disk (and inherent I/O latency time).
This seems obvious but the actual implementation (the balancing act) is the tricky part.
****************End Project Notes******************
I guess that's enough of me talking to myself for the time being..
Now I have to figure out how to rip out the clunky flickering image controls and make a version that uses bitblt-ing.

[PlausiblyDamp]

In all honesty you might find this a lot easier to do in WPF http://msdn.microsoft.com/en-us/library/ee649090.aspx gives a walkthrough of various means of touch input including the idea of inertia.

I know moving to .Net / wpf may not be an option, however it is worth considering if you are developing a very graphics rich application.

[VB6Oldguy]

First of all, thanks for the 6 "views" of the chart and 3 "views" of my baseline example to date (so far).

And special thanks to PlausiblyDamp for deciding to make a contribution to this thread.

However, my reply must be: "No --VB.Net/WPF is not an option".
..and I say "Why can't a very graphics rich application be developed in VB6?"

Also I want the flick-scroll effect to work whether the computer has a touch screen (and/or touch software) or not. I mean I would love it if the Microsoft Surface Touch Pack software would be made available for all versions of Windows (back to Win98SE) but I don't think Microsoft will be forthcoming in this regard.

Until then what I have found on my Windows7 & Microsoft Surface Touch Pack upgraded touch screen computer is that for applications which have not been re-written to be touch screen "aware" what happens is that finger-on-screen-movements default to mouse-cursor movements --so that is what I am focusing on...using the mouse to initiate a push-drag that turns into an ongoing movement in the same direction when the mouse button is released.

And to those who have been following this thread without posting, I got distracted for a week doing thumbnailing and CSS coding for a client, but I have been playing around a little and I think I've made a a small bit of progress (see the "Push-n-Go___Mouse driven bitblt_movement_using_memDCs_only.zip" attachment below).

It does not yet meet all the design criteria laid out in the Flickscroll desired behaviors chart (that I attached previously) but I think things are headed in the right direction.

[passel]

I'm not around here much anymore, and I haven't seen the flick-scroll capability personally, but I thought I'd spend a few minutes writing a quick example to test the concept.
Nothing fancy. Most XP machines, the timer won't fire any faster than 64 hz, so if you select an interval less than 16 ms, you will get a timer that fires at around 64 hz. I suspect the mouse move events occur no faster than that same 64 hz.
So, I reasoned if we keep track of how far the mouse moved between mouse move events, and then when the mouse was released, enable the timer and continue moving at that same rate, we would get a rough, but simple way, to demo flick-scrolling.

So, drop a small picture control and a timer control on a form, paste in the following code, then run. Click and flick the picturebox. In the timer, the velocities are multiplied by .99 so will slow down. The timer is disabled when the speed is below a crawl.

Dim vx As Single, vy As Single
Dim dragging As Boolean

Private Sub Form_Load()
  Timer1.Enabled = False
  Timer1.Interval = 10
  Picture1.BackColor = vbBlue
End Sub

Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
  If Button = vbLeftButton Then Timer1.Enabled = False
End Sub

Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
  Static lx As Single, ly As Single
  
  If Button = vbLeftButton Then
    dragging = True
    vx = X - lx: vy = Y - ly
    MovePic
  Else
    lx = X: ly = Y
  End If
End Sub

Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
  If Button = vbLeftButton Then
    dragging = False
    Timer1.Enabled = True
  End If
End Sub

Private Sub Timer1_Timer()
  vx = vx * 0.99
  vy = vy * 0.99
  If Abs(vx) < 1 And Abs(vy) < 1 Then
    Timer1.Enabled = False
  End If
  MovePic
End Sub

Private Sub MovePic()
  With Picture1
    .Left = (.Left + vx) Mod ScaleWidth
    .Top = (.Top + vy) Mod ScaleHeight
    If Not dragging Then
      If .Left < 0 Then .Left = .Left + ScaleWidth
      If .Top < 0 Then .Top = .Top + ScaleHeight
    End If
  End With
End Sub

P.S. I added the dragging boolean because if you didn't release the mouse before the picture went into negative coordinates then there was a 50/50 chance that a huge velocity (the size of the form or greater) would be computed and the picturebox would be flying across the form at a very rapid speed, but would slow down eventually.