Example

 

jQuery('#swipe').bind('swipeone',eventHandler);



Every jGesture-eventhandler receives a custom object as second argument
containing the original event (originalEvent property) and processed
information (such as delta values and timesptamp).

Second argument

 

{
type: eventtype e.g. "swipeone","swipeleftdown",
originalEvent: {DOM-Event},
// default: just one entry on the delta-array - the first touchpoint
// the first touchpoint is the reference point for every gesture,
// because moving touchpoints in various directions would result in
// a gesture.
// delta and direction details are just provided for touch not for gesture events
delta : [{
lastX:{Number} , // x-axis: relative to the last touchevent (e.g. touchmove!)
lastY:{Number}, // y-axis: relative to the last touchevent (e.g. touchmove!)
moved: {Number}, // distance: relative to the original touchpoint
startX: {Number} , // relative to the original touchpoint
startY: {Number} ,// relative to the original touchpoint
} ],
// based on the first touchpoint
direction : {
// relative to the last touchevent (e.g. touchmove!)
vector: {Number}, // -1|+1, indicates the direction if necessary(pinch/rotate)
orientation: {Number} // window.orientation: -90,0,90,180 || null (window.orienntation)
lastX : {Number}, // -1,0,+1 relative to the last touchevent (e.g. touchmove!)
lastY : {Number}, // -1,0,+1 relative to the last touchevent (e.g. touchmove!)
startX: {Number} , //-1,0,+1 relative to the original touchpoint
startY: {Number} ,// -1,0,+1 relative to the original touchpoint
},
rotation: {Number} || {null}, // gestureonly: amount of rotation relative to the current position NOT the original
scale: {Number} || {null}, // gestureonly: amount of scaling relative to the current position NOT the original
duration: {Number}, // ms: relative to the original touchpoint
description : {String} // details as String: {TYPE *}:{TOUCHES 1|2|3|4}:{X-AXIS 'right'|'left'|'steady'}:{Y-AXIS 'down'|'up'|'steady'} e.g. "swipe:1:left:steady" relative to the last touchpoint
};

 

Notification on native events:

On every native touchstart, touchend, gesturestart and gestureend-event, jgestures triggers a corresponding custom event (jGestures.touchstart,jGestures.touchend,jGestures.gesturestart and jGestures.gestureend) on the event-element.
The eventhandler's second argument represents the original touch event (yes: including all touchpoints).
Use this if you need very detailed control e.g. kinetic scrolling or implementing additional gestures.

 

Available jGesture-events can be grouped into:

 

Device events:


The jGesture-Events in this group are triggered by the device.

event 'orientationchange
The device is turned clockwise or counterclockwise. This event is triggered
by the device and might use an internal gyroscope.

Move events:
The jGesture-Events in this group are triggered during the touch/gesture
execution whenever a touchpoint changes.
In contrast to touchend/gestureend-events which are triggered after
the touch/gesture has completed.

event 'pinch'
Is triggered during a pinch gesture (two fingers moving away from or
towards each other).

event 'rotate'
Is triggered during a rotation gesture (two fingers rotating clockwise
or counterclockwise).

event 'swipemove'
Is triggered during a swipe move gesture (finger(s) being moved around
the device, e.g. dragging)

Toucheend events:


The jGesture-Events in this group are triggered after the touch/gesture
has completed.
In contrast to touchmove-events which are triggered during the touch/gesture
execution whenever a touchpoint changes.

event 'swipeone'
Is triggered after a swipe move gesture with one touchpoint (one finger
was moved around the device)

event 'swipetwo'
Is triggered after a swipe move gesture with two touchpoints (two fingers
were moved around the device)

event 'swipethree'
Is triggered after a swipe move gesture with three touchpoints (three
fingers were moved around the device)

event 'swipefour'
Is triggered after a swipe move gesture with four touchpoints (four
fingers were moved around the device)

event 'swipeup'
Is triggered after an strict upwards swipe move gesture

event 'swiperightup'
Is triggered after a rightwards and upwards swipe move gesture

event 'swiperight'
Is triggered after a strict rightwards swipe move gesture

event 'swiperightdown'
Is triggered after a rightwards and downwards swipe move gesture

event 'swipedown'
Is triggered after a strict downwards swipe move gesture

event 'swipeleftdown'
Is triggered after a leftwards and downwards swipe move gesture

event 'swipeleft'
Is triggered after a strict leftwards swipe move gesture

event 'swipeleftup'
Is triggered after a leftwards and upwards swipe move gesture

event 'tapone'
Is triggered after a single (one finger) tap gesture

event 'taptwo'
Is triggered after a double (two finger) tap gesture

event 'tapthree'
Is triggered after a tripple (three finger) tap gesture

Gestureend events:


A gesture is an interpretation of different touchpoints.
The jGesture-Events in this group are triggered when a gesture has finished
and the touchpoints are removed from the device.

event 'pinchopen'
Is triggered when a pinchopen gesture (two fingers moving away from each
other) occured and the touchpoints (fingers) are removed the device.

event 'pinchclose'
Is triggered when a pinchclose gesture (two fingers moving towards each
other) occured and the touchpoints (fingers) are removed the device.

event 'rotatecw'
Is triggered when a clockwise rotation gesture (two fingers rotating
clockwise) occured and the touchpoints (fingers) are removed the device.

event 'rotateccw'
Is triggered when a counterclockwise rotation gesture (two fingers
rotating counterclockwise) occured and the touchpoints (fingers) are
removed the device.

 

Motion events:

A "motion event" is an interpretation of changes in space, e.g. a "shaking motion"
consists of a specified number of acceleration changes in a given interval.
 
For understanding "directions", place your mobile device on a table with the bottom
(home button) close to you:

  • x-axis: horizontal left / right
  • y-axis: horizontal front / back (through the home button)
  • z-axis: vertical through your device

 
Note: Devicemotion / deviceorientation don't send custom event (such as: jGestures.touchstart).
Note: Devicemotion should be bound on the "window-element" - because the whole device moves

shake
Is triggered when a shaking motion is detected
 
shakefrontback
Is triggered when a shaking motion is detected and the gesture can be interpreted as a mainly front-back movement.
 
shakeleftright
 Is triggered when a shaking motion is detected and the gesture can be interpreted as a mainly left-right movement.
 
shakeupdown
 Is triggered when a shaking motion is detected and the gesture can be interpreted as a mainly up-down movement.

Last edited May 7, 2012 at 5:32 PM by neuedigitale, version 9

Comments

No comments yet.