Strategy for translating a UX `pan` gesture to set a linear value without an upper bound

Question

I'm trying to set a slider (actually a kitchen timer) using a pan gesture in ionic2 see: http://ionicframework.com/docs/v2/components/#gestures

The slider/timer has an open upper-bound that could be set by a panright, but go down to zero on a panleft.

How can I best translate the pan event to be speed-sensitive to allow an upper bounds near 36000 but sensitive enough to set increments as small as 10? The max deltaX would be around 400px, but I suppose the user could use a few pan gestures to reach a large value.

Is there some ready-built easing function that I can use to achieve this?

Have you tried to combine the deltaX and velocityX params given by hammer ? Then compute your transformation through an easing curve of your choice - Something like easing-in while "paning", and easing-out then. — Riron
– Riron, Commented Feb 28, 2017 at 21:56

AlvinfromDiaspar · Accepted Answer · 2017-03-02 23:47:01Z

0

Just thinking abstractly:

You could detect the magnitude between 2 consecutive pan events. If its small enough, then you can allow the smaller granularity of incrementation. On the other hand, if you decide its big enough, then you can allow for larger increments. In theory you can do this check continuously during the pan event(s), even affecting the upper-bound dynamically (though not sure why this is relevant).

I don't see why you need to worry about the upper bound in this case. Can you explainwhy?

answered Mar 2, 2017 at 23:47

AlvinfromDiaspar

6,92014 gold badges86 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

et_l · Accepted Answer · 2017-03-03 20:55:32Z

Using Riron's comment, you can just multiply the velocityX by the deltaX. I saw in a quick test that the speed can easily get higher than 8 and lower than 1 (0.5 for example). The delta can be in the tens or in the hundreds so it allows for both required sensitivities. Here's a code for that:

hammerObj.on("panright panleft",
  function(ev){
      if(ev.type == "panright"){
          timer += ev.speedX * ev.deltaX; 
            //timer = Math.min(36000, ev.speedX*ev.deltaX+timer); for an upper bound of 36000 instead of unbound
      } else if (ev.type == "panleft"){
          timer = Math.max(0, timer - (ev.speedX * ev.deltaX));
      }
    }

Collectives™ on Stack Overflow

Strategy for translating a UX `pan` gesture to set a linear value without an upper bound

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related