Author Topic: How to do Automatic Panning within ScrollView.  (Read 3396 times)

wallabie

  • Full Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 200
    • View Profile
How to do Automatic Panning within ScrollView.
« on: March 12, 2014, 12:09:22 PM »
Hi ArenMook,

I'm still working on the slider inside of a horizontal Scrollview.

Situation:
1. The slider is 2x wider than the Scrollview visible window.
2. When the user drags the thumb of the slider to the left or right edge, I would like for the scrollview to auto pan in the dragging direction.  This way, the user doesn't have to stop and go down to the horizontalScrollBar to drag.

Thanks for any suggestions.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: How to do Automatic Panning within ScrollView.
« Reply #1 on: March 12, 2014, 06:57:22 PM »
I'd be careful with that. Panning the scroll view will move the slider, which will mean that the mouse's screen position, although unchanged, will now be in a different position relative to the slider, which will in turn cause it to move further. It basically becomes a loop.

Nonetheless, you can move the scroll view via SpringPanel.Begin, passing it the target position you want to move to. Center On Child / Center On Click uses this functionality.

wallabie

  • Full Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 200
    • View Profile
Re: How to do Automatic Panning within ScrollView.
« Reply #2 on: March 12, 2014, 09:28:47 PM »
Ok, how to get the Left and Right Clipping Boundary ?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: How to do Automatic Panning within ScrollView.
« Reply #3 on: March 12, 2014, 09:40:15 PM »
UIPanel.finalClipRegion

wallabie

  • Full Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 200
    • View Profile
Re: How to do Automatic Panning within ScrollView.
« Reply #4 on: March 14, 2014, 04:34:07 AM »
I tried various ways to do the panning. 
As per your suggestion, I tried the SpringPanel.Begin but it's not giving the desired effect. 

What I would like is the following:
1. Left thumb button is dragged towards the Left edge of the clipped area.
2. when the button reaches the left edge, the panning begins.
3. The speed of the panning increases as the user drags the mouse further away from the left edge.

Basically this is a typical kind of drag panning effect that is in most common GUI systems that uses a scrollview. 



ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,128
  • Toronto, Canada
    • View Profile
Re: How to do Automatic Panning within ScrollView.
« Reply #5 on: March 14, 2014, 11:14:48 AM »
You can use UIScrollView's SetDragAmount function to move the scroll view:
  1.         /// <summary>
  2.         /// Changes the drag amount of the scroll view to the specified 0-1 range values.
  3.         /// (0, 0) is the top-left corner, (1, 1) is the bottom-right.
  4.         /// </summary>
In your case you will also need to calculate the position of the content relative to the scroll view's area though -- NGUI does this in the UIScrollView.UpdateScrollbars function.

wallabie

  • Full Member
  • ***
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 200
    • View Profile
Re: How to do Automatic Panning within ScrollView.
« Reply #6 on: March 15, 2014, 02:37:16 AM »
I read through the code in the UIScrollView but it's kinda hard to follow.  Could you provide some code snippet to "calculate the position of the content relative to the scroll view's area " for my situation.

Edit1:  For example, I don't quite understand this comment "Changes the drag amount of the scroll view to the specified 0-1 range values. (0, 0) is the top-left corner, (1, 1) is the bottom-right." 

Edit2: Ok, finally figured this out.

1. To get the content bounding box, scrollView.bounds.size
2. dragAmt = thumbPosX/(scrollView.bounds.size.x);
3. scrollView.SetDragAmount(dragAmt,0,true);


Cheers.
« Last Edit: March 15, 2014, 04:55:20 AM by wallabie »