Simultaneously on-hold w/ two fingers

ionic-v1
1

hej there –

i was trying to implement an interaction within my app where two buttons have to be on-hold simultaneously.
that means: a function is only called when both buttons are touched (with two fingers) at the same time.

i tried my best using the on-hold method on both buttons but it seems that they won’t work together simultaneously?!
any help on this?

thanks!
– stephan

2

Not sure how to deal with this in ionic, but are you sure your device supports multitouch? It could be that your device is just not giving off multitouch (or always assuming it’s scaling intention and not giving up the events to the app? maybe this is webview specific?)

3

well – i’m using an ipad – so that’s probably not the problem. maybe it’s webview specific? i have no idea!
if there’s any idea or hint someone could give me?

4

ok – i just ran the actual app on the ipad and it seems to work! it’s not working while testing the app with the actual safari browser on the ipad (accessing a server) – that’s at least something.

5

i wrote a touch directive on my own to solve this problem. the event is beeing sent everytime a touch is initiated.
works pretty fine even with mixing it with other ng-events like click or tap.

6

Hi, could you please post the directive code here? Ran into the same situation! thanks.

7

Hi can someone please let me know how they implemented a fix to this? I’m having the same problem. Using two buttons with on-hold directives doesn’t seem to work, it only ever recognizes the first touch event and not the other. Here is a link to my code http://stackoverflow.com/questions/28903877/how-to-enable-ionic-multi-touch-events Please let me know what can be done to work with this issue. I know my device supports mult-touch I’m using an android htc one M8 and testing it on my phone does not work.

8

try to implement own directive…

using touchstart, touchmove, touchend.
on event.touches you should get an array of simultanious touches if the browsers supports it.

9

Okay I’ll go that direction and let you know what I come up with

1 Like
10

hej –

i wrote my own directive using touchstart and touchend … and i came up with the idea to set a boolean to check if both buttons were pressed simultanously.

that pretty much worked for me. to give you a kickstart heres a snippet for the directive:

// CHECK FOR TOUCH EVENTS, OTHERWISE USE MOUSE EVENTS (FOR BROWSER TESTING)
if ('ontouchstart' in document.documentElement) {
	var touchEventStart = 'touchstart';
	var touchEventEnd = 'touchend';
} else {
	var touchEventStart = 'mousedown';
	var touchEventEnd = 'mouseup';
}

angular.module […] .directive('myTouchstart', [function() {
	return function(scope, element, attr) {
		element.on(touchEventStart, function(event) {
			scope.$apply(function() { 
				scope.$eval(attr.myTouchstart); 
			});
		});
	};
}]).directive('myTouchend', [function() {
	return function(scope, element, attr) {
		element.on(touchEventEnd, function(event) {
			scope.$apply(function() { 
				scope.$eval(attr.myTouchend); 
			});
		});
	};
}]);
2 Likes
11

Thanks for the help guys. Here’s how I implemented my own directive and service to handle this particular issue:

.factory('clickHandler', ['$interval', '$rootScope', '$location', '$document', function ($interval, $rootScope, $location, $document) {
// Service logic
// ...

$document = $document[0];



var
  touchStart,
  touchEnd;

touchStart = ('ontouchstart' in $document.documentElement) ? 'touchstart' : 'mousedown';
touchEnd = ('ontouchend' in $document.documentElement) ? 'touchend' : 'mouseup';

var clickState = {
  yT:         false,
  pT:         false,
  ready:      false,
  watching:   false,
  watcher:    false,
  startEvent: touchStart,
  endEvent:   touchEnd
};

// Public API here
return {
  setClickState: function (which, what) {
    clickState[which] = what;
  },

  getClickState: function (which) {
    return clickState[which]
  },

  getReadyState: function () {
    return ( (clickState.yT) && (clickState.pT) );
  },

  watchForReady: function () {
    var self = this;

    //prevent multiple redundant watchers

    if (clickState.watching) {
      return;
    }

    clickState.watching = $interval(function () {
      clickState.ready = self.getReadyState();
    }, 50);

    clickState.watcher = $rootScope.$watch(function () {
      return clickState.ready
    }, function redirect(newValue) {
      if (newValue) {
        self.stopWatching();
        $location.path('/scan');
      }
    })
  },

  stopWatching: function () {
    if (clickState.watching) {
      $interval.cancel(clickState.watching);
      clickState.watcher();
      clickState.watching = false;
      clickState.watcher = false;

    }
  },

  getTouchEvents: function () {
    return {
      start: clickState.startEvent,
      end:   clickState.endEvent
    }
  }




  };
}])

.directive('simultaneousTouch', ['clickHandler', '$document', function (clickHandler) {
  return {
    restrict: 'A',
    link:     function (scope, elem, attr) {
      var touchEvents = clickHandler.getTouchEvents();
      
      elem.on(touchEvents.start, function () {
      
        clickHandler.watchForReady();
        clickHandler.setClickState(attr.simultaneousTouch, true);
      });

      elem.on(touchEvents.end, function () {
        clickHandler.stopWatching();
        clickHandler.setClickState(attr.simultaneousTouch, false);
      })
    }
  }
}]);
12

Any particular reason why the built in directives are blocking in this regard?