CODEWITHSUNDEEP
javascriptfamo.us
HP.
HP.

Reputation: 19896

Multi-touch with Famo.us

I followed this example

http://famo.us/university/famous-102/input/5/

It mentioned multitouch with no example

Famo.us also has support for multitouch gestures such as rotating, pinching and scaling. To familiarize yourself with these, please visit [LINK TO EXAMPLES.GIT]

What is a simple example to get touches via array or something like that? I assume it has something to do with TouchTracker https://famo.us/docs/0.2.0/inputs/TouchTracker ?

Upvotes: 0

Views: 355

Answers (1)

johntraver
johntraver

Reputation: 3612

This one took me a while.

First a bug..

In TouchSync.js on line 84:

payload.touch = data.identifier;

should be..

payload.touch = data.touch.identifier;

Next, if you want to keep track of all your events, you can do so manually though each of TouchSyncs start, update, and end events. TouchSync simply uses TouchTracker to manage the multitouch, but that is a class you should not need to use yourself.

Here is my example tracking multiple touch inputs. Notice I needed to clone the data objects as they came in to the event handlers to keep proper reference to them. That also took a while to figure out. Hope this helps you!

var Engine    = require("famous/core/Engine");
var TouchSync = require("famous/inputs/TouchSync");
var Surface   = require("famous/core/Surface");

var mainContext = Engine.createContext();

var touches = {};

var touchSync = new TouchSync(function() { return position; });

Engine.pipe(touchSync);

var contentTemplate = function() {

    var string = "Touches:<br/>";

    for (var key in touches ) {
      var touch = touches[key];
      var x     = touch.clientX ? touch.clientX : "" ;
      var y     = touch.clientY ? touch.clientY : "" ;
      string += "key: "+key+", x: "+ x+", y: "+ y +"<br/>";
    }

    return string;
};

var surface = new Surface({
    size: [undefined, undefined],
    classes: ['grey-bg'],
    content: contentTemplate(),
    properties: {
      padding:'10px'
    }
});

var clone = function(obj){
  var newObj = {};
  for ( var key in obj ) { newObj[key] = obj[key]; }
  return newObj;
}

touchSync.on("start", function(data) {
    touches[data.touch] = clone(data);
    surface.setContent(contentTemplate());
});

touchSync.on("update", function(data) {
    touches[data.touch] = clone(data);
    surface.setContent(contentTemplate());
});

touchSync.on("end", function(data) {
    delete touches[data.touch];
    surface.setContent(contentTemplate());
});

mainContext.add(surface);

Upvotes: 2

Related Questions