项目作者: kennstenicht

项目描述 :
Ember Addon to use tuio.js with ember
高级语言: JavaScript
项目地址: git://github.com/kennstenicht/ember-cli-tuio.git
创建时间: 2015-09-13T13:32:49Z
项目社区:https://github.com/kennstenicht/ember-cli-tuio

开源协议:MIT License

下载


Ember-cli-tuio

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:

  • tap
  • doubletap
  • press
  • pan (only horizontal by default)
  • swipe (only horizontal by default)
  • pinch (disabled by default)
  • rotate (disabled by default)

Installation

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)

  1. ember install ember-cli-tuio

Setup

Add customEvents to application (if ember.js < 1.13.9)

  1. // app/app.js
  2. customEvents: {
  3. objectadded: 'objectAdded',
  4. objectmoved: 'objectMoved',
  5. objectremoved: 'objectRemoved'
  6. }

Usage

Install and Start Tuio.js Server

  1. // app/components/touchable-component.js
  2. import Ember from 'ember';
  3. // Import mixin to get hammer.js gestures
  4. import Gestures from 'ember-cli-tuio/mixins/gestures';
  5. const {
  6. Component,
  7. computed
  8. } = Ember;
  9. export default Component.extend(Gestures, {
  10. // allowed gestures in this component (default: tap, doubletap, press, pan, swipe)
  11. // hammer gestures are lowercase (pinchstart NOT pinchStart)
  12. gestures: ['tap', 'press', 'pinch'],
  13. // change default recognizer settings
  14. // available options are documented in the hammer.js [documentation](http://hammerjs.github.io/recognizer-pan/)
  15. recognizers: {
  16. press: {time: 400},
  17. pinch: {enable: true}
  18. },
  19. tap: function(event) {
  20. // act on tap
  21. this.$().hide();
  22. },
  23. press: function(event) {
  24. // act on press
  25. console.log(event);
  26. },
  27. pinch: function(event) {
  28. // act on pinchstart, pinchmove & pinchend
  29. console.log(event);
  30. },
  31. // Object/Fiducial events don't need the gestures mixin
  32. objectAdded: function(e) {
  33. // act if a object is added to the table
  34. if(e.symbolId === 1) {
  35. console.log('Object one is added');
  36. }
  37. },
  38. objectMoved: function() {
  39. // act on move
  40. },
  41. objectRemoved: function() {
  42. // act if a object is removed from the table
  43. }
  44. });

Action helper

This triggers pressAction on press

Press Me!

You nead to add the actions to the customEvents object in app.js to use the helper.

  1. // app/app.js
  2. customEvents: {
  3. tap: 'tap',
  4. press: 'press',
  5. pinchstart: 'pinchStart'
  6. }

Running

Running Tests

  • ember test
  • ember test --server

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Publishing

  1. ember release
  2. npm publish