CODEWITHSUNDEEP
angularjscordovaionic-frameworkcordova-pluginshybrid-mobile-app
varun aaruru
varun aaruru

Reputation: 2940

How to detect multi finger touch in ionic app

I am developing an Ionic app.In that I want to apply 1 finger swipe and 2 finger swipe and 3 finger swipe ( If it is possible ). In a div if user swipes with single finger, it should scroll and If user swipes with multi finger , it should select the content and select,copy options should be shown and 3 finger swipe for one more action.

edit: I checked the question before posting this question.I am able to detect multi touch but not 2finger / 3 finger swipe. I am looking for any plugins for this actions.

Help me in this issue.

Upvotes: 16

Views: 3364

Answers (3)

Edison Augusthy
Edison Augusthy

Reputation: 1573

try this one for more https://codepen.io/edisonpappi/pen/LyqrXw 

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl',  function($scope, $ionicGesture) {

  $scope.messages = [];
  var touchpad = angular.element(document.querySelector('#touchpad'));
  var maxFingers = 10;
  var fingers = [];
  for(var i=0; i<maxFingers; i++)  fingers.push(angular.element(document.querySelector('#t'+i)))
  $scope.touches = new Array;
  
  var resetTransformations = function(){
    for(var i=0;i<maxFingers;i++)
      fingers[i].css({"transform": "translate3D(0px, 0px, 0px)"});
  }
  
  $ionicGesture.on('dragstart',
                   function (event) {
    $scope.messages.push({txt: "dragstart"});
  }, touchpad);
    $ionicGesture.on('dragend',
                   function (event) {
    $scope.messages.push({txt: "dragend"});
  }, touchpad);
  $ionicGesture.on('transformstart',
                   function (event) {
    $scope.messages.push({txt: "transformstart"});
  }, touchpad);
  $ionicGesture.on('transformend',
                   function (event) {
    $scope.messages.push({txt: "transformend"});
  }, touchpad);
  
  // keep track if a finger is released: 
  var fingersDown = 0;
  
  // drag = 1 finger, transform = more
  $ionicGesture.on('transform drag',
                   function (event) {
    if(fingersDown > event.gesture.touches.length)
      resetTransformations();  
    fingersDown = event.gesture.touches.length;

    $scope.touches = [];
    var identifier = 0;
    for(var i=0; i<event.gesture.touches.length; i++){
      identifier = parseInt(event.gesture.touches[i].identifier);
      $scope.touches[i] = {pageX: parseInt(event.gesture.touches[i].pageX), pageY: parseInt(event.gesture.touches[i].pageY), id: identifier};
      
      fingers[identifier].css({"transform": "translate3D("+event.gesture.touches[i].pageX+"px, "+event.gesture.touches[i].pageY+"px, 0px)"});
    }

      $scope.$apply();
  }, touchpad);
  
 
  $ionicGesture.on('release',
                   function (event) {
    $scope.touches = [];
    $scope.$apply();
    $scope.messages.push({txt: "release"});
    resetTransformations();
  }, touchpad);  
  $ionicGesture.on('touch',
                   function (event) {
    $scope.messages.push({txt: "touch"});
  }, touchpad);
  

  
  
});


  
body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.full{
  width: 100%;
  height: 100%;
}
h4.full{
  color: #FFF;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;  
}
.debug{
  color: #fff;
  padding-left: 10px;
  font-size: 12px;
  line-height: 12px;
}
.circle{
  position: absolute;
  color: #fff;
  top: -44px;
  left: 0px;
  margin-left: -30px;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: rgba(255,255,255,0.62);
}
#container{
  padding-top: 38%;
  z-index: 1;
  position: absolute;
  background: url("https://unsplash.imgix.net/46/yzS7SdLJRRWKRPmVD0La_creditcard.jpg?q=75&fm=jpg&s=7cc01cbdd45363cc0e2e8340b185bca2");
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}
<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>VELOCITY + IONIC</title>
    
    <!-- add touch emulation hold SHIFT-key while using the mouse -->
    <script src="http://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script>
    <script>TouchEmulator();</script>

    <link href="//code.ionicframework.com/1.0.0-beta.13/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>

  </head>

  <body ng-controller="MainCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">TRACKING MANY FINGERS</h1>
    </ion-header-bar>
             
    <ion-content class="full" scroll="false"> 
      <h4 id="touchpad" class="full padding">Drag below with > 1 fingers.<br />Press and hold Shift + mouse key to emulate multitouch on a computer.</h4>
      <div class="full world padding">
        <div id="container">
          <div class="debug" ng-repeat="touch in touches">
            touches[{{$index}}] = FINGER <strong>{{touch.id}}</strong>:  ({{touch.pageX}},  {{touch.pageY}})
          </div>
          <div class="debug" ng-repeat="msg in messages">{{msg.txt}}</div>
          
          <div id="t0" class="circle">0</div>
          <div id="t1" class="circle">1</div>
          <div id="t2" class="circle">2</div>
          <div id="t3" class="circle">3</div>
          <div id="t4" class="circle">4</div>
          <div id="t5" class="circle">5</div>
          <div id="t6" class="circle">5</div> 
          <div id="t7" class="circle">7</div> 
          <div id="t8" class="circle">8</div>
          <div id="t9" class="circle">9</div> 
          
        </div>
   
        
      </div>
      
     
    </ion-content>
    
  </body>
</html>

Upvotes: 0

Priyanka Thombre
Priyanka Thombre

Reputation: 232

I am not quite sure but you might try adding a jQuery plugin jGestures that enables you to add gesture events such as 'pinch', 'rotate', 'swipe', 'tap' and 'orientationchange' just like native jQuery events. Includes event substitution: a "tapone" event can be triggered by "clicking", a "swipe" by performing a swipe-ish mousegesture.

Upvotes: 0

daserge
daserge

Reputation: 1512

Look how 4-touch for reload is implemented in the Phonegap Developer App:

var currentTouches = {},
    eventName = { touchstart: 'touchstart', touchend: 'touchend' };

if (window.navigator.msPointerEnabled) {
    eventName = { touchstart: 'MSPointerDown', touchend: 'MSPointerUp' };
}

document.addEventListener(eventName.touchstart, function(evt) {
    var touches = evt.touches || [evt],
        touch;
    for(var i = 0, l = touches.length; i < l; i++) {
        touch = touches[i];
        currentTouches[touch.identifier || touch.pointerId] = touch;
    }
});

document.addEventListener(eventName.touchend, function(evt) {
    var touchCount = Object.keys(currentTouches).length;
    currentTouches = {};
    if (touchCount === 4) {
        evt.preventDefault();
        window.location.reload(true);
    }
}, false);

Hope this helps.

Upvotes: 3

Related Questions