Ember Addon to use tuio.js with ember
Tuio.js Client which recives OSC/TUIO messages from a websocket and transforms those to touch events. The addon ships with a component mixin that integrates hammer.js gestures.
Available Gestures:
Your Browser neads to allow touch input.
Chrome
Go to chrome://flags/ and set “Enable touch events” to enabled.
Firefox
Go to about:config and set “dom.w3c_touch_events.enabled” to enable=(1)
ember install ember-cli-tuio
Add customEvents to application (if ember.js < 1.13.9)
// app/app.js
customEvents: {
objectadded: 'objectAdded',
objectmoved: 'objectMoved',
objectremoved: 'objectRemoved'
}
Install and Start Tuio.js Server
// app/components/touchable-component.js
import Ember from 'ember';
// Import mixin to get hammer.js gestures
import Gestures from 'ember-cli-tuio/mixins/gestures';
const {
Component,
computed
} = Ember;
export default Component.extend(Gestures, {
// allowed gestures in this component (default: tap, doubletap, press, pan, swipe)
// hammer gestures are lowercase (pinchstart NOT pinchStart)
gestures: ['tap', 'press', 'pinch'],
// change default recognizer settings
// available options are documented in the hammer.js [documentation](http://hammerjs.github.io/recognizer-pan/)
recognizers: {
press: {time: 400},
pinch: {enable: true}
},
tap: function(event) {
// act on tap
this.$().hide();
},
press: function(event) {
// act on press
console.log(event);
},
pinch: function(event) {
// act on pinchstart, pinchmove & pinchend
console.log(event);
},
// Object/Fiducial events don't need the gestures mixin
objectAdded: function(e) {
// act if a object is added to the table
if(e.symbolId === 1) {
console.log('Object one is added');
}
},
objectMoved: function() {
// act on move
},
objectRemoved: function() {
// act if a object is removed from the table
}
});
This triggers pressAction on press
You nead to add the actions to the customEvents object in app.js to use the helper.
// app/app.js
customEvents: {
tap: 'tap',
press: 'press',
pinchstart: 'pinchStart'
}
ember server
ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.
ember release
npm publish