Move controller detection logic from polling to use xrSession inputsourceschange event

Author: dmarcos

examples/showcase/painter/components/brush.js

@@ -14,14 +14,17 @@ AFRAME.registerComponent('brush', {
     this.painting = false;
     this.stroke = null;
     this.buttonsDown = 0;
+    this.touches = 0;
+
+    this.onTouchStarted = this.onTouchStarted.bind(this);
+    el.addEventListener('tiptouchstart', this.onTouchStarted);
+    this.onTouchEnded = this.onTouchEnded.bind(this);
+    el.addEventListener('tiptouchend', this.onTouchEnded);
 
     this.onButtonDown = this.onButtonDown.bind(this);
     el.addEventListener('buttondown', this.onButtonDown);
-    el.addEventListener('touchstart', this.onButtonDown);
-
     this.onButtonUp = this.onButtonUp.bind(this);
     el.addEventListener('buttonup', this.onButtonUp);
-    el.addEventListener('touchend', this.onButtonUp);
 
     this.onControllerConnected = this.onControllerConnected.bind(this);
     el.addEventListener('controllerconnected', this.onControllerConnected);
@@ -35,6 +38,19 @@ AFRAME.registerComponent('brush', {
     this.controllerName = evt.detail.name;
   },
 
+  onTouchStarted: function (evt) {
+    if (!this.data.enabled) { return; }
+    this.startNewStroke();
+    this.painting = true;
+  },
+
+  onTouchEnded: function (evt) {
+    if (!this.data.enabled) { return; }
+    if (!this.painting) { return; }
+    this.stroke = null;
+    this.painting = false;
+  },
+
   onButtonDown: function () {
     if (!this.data.enabled) { return; }
     this.buttonsDown++;

examples/showcase/painter/index.html

@@ -21,10 +21,12 @@
       <a-entity environment hide-on-enter-ar></a-entity>
       <a-entity
         id="right-hand"
+        hand-tracking-controls="hand: right"
         brush="hand: right">
       </a-entity>
       <a-entity
         id="left-hand"
+        hand-tracking-controls="hand: left"
         brush="hand: left">
       </a-entity>
     </a-scene>

src/components/generic-tracked-controller-controls.js

@@ -66,7 +66,6 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
     this.controllerPresent = false;
     this.wasControllerConnected = false;
-    this.lastControllerCheck = 0;
     this.bindMethods();
 
     // generic-tracked-controller-controls has the lowest precedence.

src/components/hand-tracking-controls.js

@@ -112,7 +112,6 @@ module.exports.Component = registerComponent('hand-tracking-controls', {
     this.el.sceneEl.addEventListener('exit-vr', this.updateReferenceSpace);
     this.el.addEventListener('child-attached', this.onChildAttached);
 
-    this.el.object3D.visible = false;
     this.wristObject3D.visible = false;
   },
 

src/components/hp-mixed-reality-controls.js

@@ -52,7 +52,6 @@ module.exports.Component = registerComponent('hp-mixed-reality-controls', {
   init: function () {
     var self = this;
     this.controllerPresent = false;
-    this.lastControllerCheck = 0;
     this.onButtonChanged = this.onButtonChanged.bind(this);
     this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self, self.data.hand); };
     this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self, self.data.hand); };

src/components/logitech-mx-ink-controls.js

@@ -117,8 +117,14 @@ module.exports.Component = registerComponent('logitech-mx-ink-controls', {
       orientationOffset: data.orientationOffset,
       space: 'gripSpace'
     });
-    // Load model.
+    this.loadModel();
+  },
+
+  loadModel: function () {
     if (!this.data.model) { return; }
+    if (this.controllerObject3D) {
+      this.controllerObject3D.visible = this.el.sceneEl.is('vr-mode');
+    }
     this.el.setAttribute('gltf-model', LOGITECH_MX_INK_MODEL_GLB_BASE_URL + 'logitech-mx-ink.glb');
   },
 
@@ -158,8 +164,10 @@ module.exports.Component = registerComponent('logitech-mx-ink-controls', {
       rayOrigin: new THREE.Vector3(0, 0, 0)
     });
 
+    this.controllerObject3D = this.el.getObject3D('mesh');
+
     if (this.el.sceneEl.is('ar-mode')) {
-      this.el.getObject3D('mesh').visible = false;
+      this.controllerObject3D.visible = false;
     }
   },
 

src/components/magicleap-controls.js

@@ -47,7 +47,6 @@ module.exports.Component = registerComponent('magicleap-controls', {
   init: function () {
     var self = this;
     this.controllerPresent = false;
-    this.lastControllerCheck = 0;
     this.onButtonChanged = this.onButtonChanged.bind(this);
     this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self); };
     this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self); };

src/components/oculus-go-controls.js

@@ -60,7 +60,6 @@ module.exports.Component = registerComponent('oculus-go-controls', {
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
     this.controllerPresent = false;
-    this.lastControllerCheck = 0;
     this.bindMethods();
   },
 

src/components/oculus-touch-controls.js

@@ -144,6 +144,7 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     this.onThumbstickMoved = this.onThumbstickMoved.bind(this);
     this.onModelLoaded = this.onModelLoaded.bind(this);
     this.onControllersUpdate = this.onControllersUpdate.bind(this);
+    this.onControllerDisconnected = this.onControllerDisconnected.bind(this);
     this.checkIfControllerPresent = this.checkIfControllerPresent.bind(this);
     this.onAxisMoved = this.onAxisMoved.bind(this);
   },
@@ -155,7 +156,6 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self, self.data.hand); };
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self, self.data.hand); };
     this.controllerPresent = false;
-    this.lastControllerCheck = 0;
     this.previousButtonValues = {};
     this.bindMethods();
     this.triggerEuler = new THREE.Euler();
@@ -207,11 +207,11 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
   loadModel: function (controller) {
     var data = this.data;
     var controllerId;
-
     if (!data.model) { return; }
     // If model has been already loaded
     if (this.controllerObject3D) {
       this.el.setObject3D('mesh', this.controllerObject3D);
+      this.controllerObject3D.visible = true;
       return;
     }
 
@@ -252,10 +252,17 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
 
   addControllersUpdateListener: function () {
     this.el.sceneEl.addEventListener('controllersupdated', this.onControllersUpdate, false);
+    this.el.addEventListener('controllerdisconnected', this.onControllerDisconnected);
   },
 
   removeControllersUpdateListener: function () {
     this.el.sceneEl.removeEventListener('controllersupdated', this.onControllersUpdate, false);
+    this.el.removeEventListener('controllerdisconnected', this.onControllerDisconnected);
+  },
+
+  onControllerDisconnected: function () {
+    if (!this.controllerObject3D) { return; }
+    this.controllerObject3D.visible = false;
   },
 
   onControllersUpdate: function () {

src/components/valve-index-controls.js

@@ -52,7 +52,6 @@ module.exports.Component = registerComponent('valve-index-controls', {
   init: function () {
     var self = this;
     this.controllerPresent = false;
-    this.lastControllerCheck = 0;
     this.onButtonChanged = this.onButtonChanged.bind(this);
     this.onButtonDown = function (evt) { onButtonEvent(evt.detail.id, 'down', self); };
     this.onButtonUp = function (evt) { onButtonEvent(evt.detail.id, 'up', self); };