PDA

View Full Version : Handling 'Two Fingers Tap' custom gesture in a sencha touch app



cpremkumar
10 Feb 2012, 4:48 AM
Hi,

I'm trying to implement a custom gesture 'Two Fingers Tap' at once in my SenchaTouch/Phonegap app on the Map component (Google maps) targeted for iPhone.

Objective: On 'twofingerstap' the map should zoom out.

I'm able to trap the 'touchstart', 'touchmove' and 'touchend' events, and I'm not really sure on what basis we need to differentiate this custom event. I tried to get the distance between the starting two touches and ending two touches. I'm trying to check if they're equal and doing my functionality in 'touchend'. It is working in most of the instances. But the problem is that it is affecting the default 'pinch open' and 'pinch close' events. During the pinch open or pinch close my handling is overriding and zooming out the map.

Could someone please help me understand where I'm going wrong?
Here is my code,


listeners : {
delay : 1000,
afterrender : function() {
console.log('inside afterrender');
this.mon(this.el, {
touchstart : this.handleEvent,
touchend : this.handleEvent,
touchmove : this.handleEvent,
gesturestart : this.handleEvent,
scope : this
});
addMarker(this.map, this.markerPos);
.
.
.

//handling touch events
handleEvent : function(e) {
console.log(e.type);
var touches = e.touches;
var noOfTouches = touches.length;
console.log('no. of touches: ' + touches.length);
switch(e.type) {
case 'touchstart':
{
if(noOfTouches == 2) {
e.preventDefault();
this.startFirstTouch = e.touches[0];
this.startSecondTouch = e.touches[1];
this.startDistance = getDistance(this.startFirstTouch, this.startSecondTouch);
console.log('startDistance: ' + this.startDistance);
this.touchStart = true;
}
}
break;
case 'touchmove':
{
isTouchMoveDetected = true;
if(noOfTouches == 2 && this.touchStart == false) {
this.startFirstTouch = e.touches[0];
this.startSecondTouch = e.touches[1];
this.startDistance = getDistance(this.startFirstTouch, this.startSecondTouch);
console.log('startDistance: ' + this.startDistance);
console.log('scale inside touchmove: ' + e.scale);
}
}
break;
case 'touchend':
{
if(noOfTouches == 2) {
e.preventDefault();
this.endFirstTouch = e.touches[0];
this.endSecondTouch = e.touches[1];
this.endDistance = getDistance(this.endFirstTouch, this.endSecondTouch);
console.log('endDistance: ' + this.endDistance);
console.log('scale: ' + e.scale);
//console.log('variance: ' + this.endTouch1PageX - this.startTouch1PageX);
console.log('isTOuchMoveDetected: ' + isTouchMoveDetected);
if((this.startDistance == this.endDistance)) {
var mapInstance = Ext.getCmp('mapCompId');
//console.log(mapInstance);
var currentZoomLevel = mapInstance.map.getZoom();
console.log('current zoom level: ' + currentZoomLevel);
mapInstance.map.setZoom(currentZoomLevel - 1);
}
this.touchStart = false;
}
}
break;
default:
{
//do nothing
}
break;
}

//get Distance function
function getDistance(firstTouch, secondTouch) {
return Math.sqrt(Math.pow(Math.abs(firstTouch.pageX - secondTouch.pageX), 2) + Math.pow(Math.abs(firstTouch.pageY - secondTouch.pageY), 2));
}



Any kind of help is much appreciated :-)

Thanks,
Prem

mitchellsimoens
10 Feb 2012, 5:15 AM
Have you tried tap and then check number of touches?

cpremkumar
10 Feb 2012, 6:15 AM
Hi mitchellsimoens,

I tried just handling 'tap' event and tried printing the length of 'touches', 'changedTouches' and 'targetTouches'. Here is the log pattern I'm seeing,

2012-02-10 19:33:46.727 xxxxxx[505:707] [INFO] tap
2012-02-10 19:33:46.730 xxxxxx[505:707] [INFO] touches: 1
2012-02-10 19:33:46.733 xxxxxx[505:707] [INFO] changedTouches: 1
2012-02-10 19:33:46.738 xxxxxx[505:707] [INFO] targetTouches: 1
2012-02-10 19:33:46.742 xxxxxx[505:707] [INFO] tap
2012-02-10 19:33:46.746 xxxxxx[505:707] [INFO] touches: 2
2012-02-10 19:33:46.749 xxxxxx[505:707] [INFO] changedTouches: 1
2012-02-10 19:33:46.759 xxxxxx[505:707] [INFO] targetTouches: 2
2012-02-10 19:34:04.284 xxxxxx[505:707] [INFO] tap
2012-02-10 19:34:04.288 xxxxxx[505:707] [INFO] touches: 2
2012-02-10 19:34:04.292 xxxxxx[505:707] [INFO] changedTouches: 1
2012-02-10 19:34:04.296 xxxxxx[505:707] [INFO] targetTouches: 2
2012-02-10 19:34:06.805 xxxxxx[505:707] [INFO] tap
2012-02-10 19:34:06.807 xxxxxx[505:707] [INFO] touches: 2
2012-02-10 19:34:06.810 xxxxxx[505:707] [INFO] changedTouches: 1
2012-02-10 19:34:06.812 xxxxxx[505:707] [INFO] targetTouches: 2
2012-02-10 19:34:14.485 xxxxxx[505:707] [INFO] tap
2012-02-10 19:34:14.488 xxxxxx[505:707] [INFO] touches: 2
2012-02-10 19:34:14.491 xxxxxx[505:707] [INFO] changedTouches: 1
2012-02-10 19:34:14.493 xxxxxx[505:707] [INFO] targetTouches: 1


What is that I need consider to handle the event 'twofingerstap'??

Thanks,
Prem