How to detect swipe direction?

Scott Rossi scott at tactilemedia.com
Sun Oct 6 21:23:55 EDT 2013


I imagine you need to implement swipe detection before triggering
scrolling, and scrolling needs to be triggered only after exceeding a
distance threshold.  The mail app is a good example.  If you look
carefully, scrolling doesn't begin until touch exceeds a small distance,
so swipe to delete has a chance to operate before scrolling takes place.

That's my guess anyway...

Regards,

Scott Rossi
Creative Director
Tactile Media, UX/UI Design




On 10/6/13 5:24 PM, "Terry Judd" <terry.judd at unimelb.edu.au> wrote:

>Thanks for the code Scott. On a related issue, I've tried a number of
>different approaches for implementing side-to-side swiping within a
>vertically scrolling group (a day-per-view calendar object) but haven't
>managed to come up with anything that works reliably - especially on iOS.
>
>A combination of touchStart and touchRelease handlers works sort of OK on
>Android (touchMove and touchEnd messages don't seem to get sent reliably)
>but on iOS  I don't seem to be able to prevent the group from scrolling
>vertically if the swipe is more than a little bit off the horizontal.
>
>Any ideas?
>
>Terry...
>
>On 07/10/2013, at 10:26 AM, Scott Rossi wrote:
>
>> Hi Roger:
>> 
>> Might be wrong, but I don't believe there's a built-in swipe
>> monitor/property.  I put together the following to detect course swipe
>> direction and added the ability to track the swipe angle.  You can set
>>the
>> swipe distance threshold to control when an event is triggered from a
>> swipe.  The code is written to place direction output in a field.
>> 
>> 
>> -- 50 PIXEL SWIPE THRESHOLD
>> 
>> local hStart, vStart, theSwipeData
>> local theThreshold = 50
>> 
>> on touchStart theID
>>   put item 1 of mouseLoc() into hStart
>>   put item 2 of mouseLoc() into vStart
>> end touchStart
>> 
>> on touchmove theID, X, Y
>>   put empty into theSwipeData
>>   if Y > vStart and abs(vStart - Y) > theThreshold  then put "down,"
>> after theSwipeData
>>   if Y < vStart and abs(vStart - Y) > theThreshold  then put "up," after
>> theSwipeData
>>   if X > hStart and abs(hStart - X) > theThreshold  then put "right,"
>> after theSwipeData
>>   if X < hStart and abs(hStart - X) > theThreshold  then put "left,"
>> after theSwipeData
>>   if theSwipeData is not empty then put locToAngle(X,Y,hStart,vStart)
>> after theSwipeData
>> end touchmove
>> 
>> on touchEnd theID
>>   put "swipe: " into theResult
>>   if theSwipeData is not empty then put theSwipeData after theResult
>>   set text of fld 1 to theResult
>> end touchEnd
>> 
>> function locToAngle pX,pY,pXorigin,pYorigin
>>   put atan2(pY - pYorigin,pXorigin - pX) into R
>>   return round(180+(R*(180/pi)))
>> end locToAngle
>> 
>> 
>> 
>> 
>> 
>> Hope this helps.
>> 
>> Regards,
>> 
>> Scott Rossi
>> Creative Director
>> Tactile Media, UX/UI Design
>> 
>> 
>> 
>> 
>> On 10/6/13 2:09 PM, "Roger Eller" <roger.e.eller at sealedair.com> wrote:
>> 
>>> I want a different action to occur based on the direction the user
>>>swipes
>>> a
>>> control.  For example:
>>> 
>>>  on swipeLeft
>>>       set the backgroundColor of me to red
>>>  end swipeLeft
>>> 
>>>  on swipeRight
>>>       set the backgroundColor of me to green
>>>  end swipeRight
>>> 
>>> Is there a one liner on mobile that can give me the direction, or
>>> true/false, or l/r/u/d?
>>> 
>>> ~Roger
>>> _______________________________________________
>>> use-livecode mailing list
>>> use-livecode at lists.runrev.com
>>> Please visit this url to subscribe, unsubscribe and manage your
>>> subscription preferences:
>>> http://lists.runrev.com/mailman/listinfo/use-livecode
>>> 
>> 
>> 
>> 
>> _______________________________________________
>> use-livecode mailing list
>> use-livecode at lists.runrev.com
>> Please visit this url to subscribe, unsubscribe and manage your
>>subscription preferences:
>> http://lists.runrev.com/mailman/listinfo/use-livecode
>> 
>
>Dr Terry Judd
>Senior Lecturer in Medical Education
>Medical Education Unit
>Faculty of Medicine, Dentistry & Health Sciences
>The University of Melbourne
>
>
>
>
>
>
>_______________________________________________
>use-livecode mailing list
>use-livecode at lists.runrev.com
>Please visit this url to subscribe, unsubscribe and manage your
>subscription preferences:
>http://lists.runrev.com/mailman/listinfo/use-livecode
>






More information about the use-livecode mailing list