fix vive-controls button colors (#2772)

* fix vive-controls button colors

* allow trackpad touch events, but not color change for vive-controls

Author: ngokevin

src/components/vive-controls.js

@@ -1,75 +1,95 @@
 var registerComponent = require('../core/component').registerComponent;
-var bind = require('../utils/bind');
-var checkControllerPresentAndSetup = require('../utils/tracked-controls').checkControllerPresentAndSetup;
-var emitIfAxesChanged = require('../utils/tracked-controls').emitIfAxesChanged;
+var utils = require('../utils/');
+
+var bind = utils.bind;
+var checkControllerPresentAndSetup = utils.trackedControls.checkControllerPresentAndSetup;
+var emitIfAxesChanged = utils.trackedControls.emitIfAxesChanged;
 
 var VIVE_CONTROLLER_MODEL_OBJ_URL = 'https://cdn.aframe.io/controllers/vive/vr_controller_vive.obj';
 var VIVE_CONTROLLER_MODEL_OBJ_MTL = 'https://cdn.aframe.io/controllers/vive/vr_controller_vive.mtl';
 
 var GAMEPAD_ID_PREFIX = 'OpenVR ';
 
 /**
- * Vive Controls Component
- * Interfaces with vive controllers and maps Gamepad events to
- * common controller buttons: trackpad, trigger, grip, menu and system
- * It loads a controller model and highlights the pressed buttons
+ * Vive controls.
+ * Interface with Vive controllers and map Gamepad events to controller buttons:
+ * trackpad, trigger, grip, menu, system
+ * Load a controller model and highlight the pressed buttons.
  */
 module.exports.Component = registerComponent('vive-controls', {
   schema: {
     hand: {default: 'left'},
     buttonColor: {type: 'color', default: '#FAFAFA'},  // Off-white.
     buttonHighlightColor: {type: 'color', default: '#22D1EE'},  // Light blue.
     model: {default: true},
-    rotationOffset: {default: 0} // use -999 as sentinel value to auto-determine based on hand
+    rotationOffset: {default: 0}
   },
 
-  // buttonId
-  // 0 - trackpad
-  // 1 - trigger ( intensity value from 0.5 to 1 )
-  // 2 - grip
-  // 3 - menu ( dispatch but better for menu options )
-  // 4 - system ( never dispatched on this layer )
+  /**
+   * Button IDs:
+   * 0 - trackpad
+   * 1 - trigger (intensity value from 0.5 to 1)
+   * 2 - grip
+   * 3 - menu (dispatch but better for menu options)
+   * 4 - system (never dispatched on this layer)
+   */
   mapping: {
     axes: {'trackpad': [0, 1]},
     buttons: ['trackpad', 'trigger', 'grip', 'menu', 'system']
   },
 
-  // Use these labels for detail on axis events such as thumbstickmoved.
-  // e.g. for thumbstickmoved detail, the first axis returned is labeled x, and the second is labeled y.
+  /**
+   * Labels for detail on axis events such as `thumbstickmoved`.
+   * For example, on `thumbstickmoved` detail, the first axis returned is labeled x, and the
+   * second is labeled y.
+   */
   axisLabels: ['x', 'y', 'z', 'w'],
 
-  bindMethods: function () {
-    this.onModelLoaded = bind(this.onModelLoaded, this);
-    this.onControllersUpdate = bind(this.onControllersUpdate, this);
-    this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);
-    this.removeControllersUpdateListener = bind(this.removeControllersUpdateListener, this);
-    this.onAxisMoved = bind(this.onAxisMoved, this);
-  },
-
   init: function () {
     var self = this;
     this.animationActive = 'pointing';
+    this.checkControllerPresentAndSetup = checkControllerPresentAndSetup;  // To allow mock.
+    this.controllerPresent = false;
+    this.emitIfAxesChanged = emitIfAxesChanged;  // To allow mock.
+    this.lastControllerCheck = 0;
     this.onButtonChanged = bind(this.onButtonChanged, this);
     this.onButtonDown = function (evt) { self.onButtonEvent(evt.detail.id, 'down'); };
     this.onButtonUp = function (evt) { self.onButtonEvent(evt.detail.id, 'up'); };
-    this.onButtonTouchStart = function (evt) { self.onButtonEvent(evt.detail.id, 'touchstart'); };
     this.onButtonTouchEnd = function (evt) { self.onButtonEvent(evt.detail.id, 'touchend'); };
+    this.onButtonTouchStart = function (evt) { self.onButtonEvent(evt.detail.id, 'touchstart'); };
     this.onAxisMoved = bind(this.onAxisMoved, this);
-    this.controllerPresent = false;
-    this.lastControllerCheck = 0;
     this.previousButtonValues = {};
+
     this.bindMethods();
-    this.checkControllerPresentAndSetup = checkControllerPresentAndSetup; // to allow mock
-    this.emitIfAxesChanged = emitIfAxesChanged; // to allow mock
+  },
+
+  play: function () {
+    this.checkIfControllerPresent();
+    this.addControllersUpdateListener();
+    // Note that due to gamepadconnected event propagation issues, we don't rely on events.
+    window.addEventListener('gamepaddisconnected', this.checkIfControllerPresent, false);
+  },
+
+  pause: function () {
+    this.removeEventListeners();
+    this.removeControllersUpdateListener();
+    // Note that due to gamepadconnected event propagation issues, we don't rely on events.
+    window.removeEventListener('gamepaddisconnected', this.checkIfControllerPresent, false);
+  },
+
+  bindMethods: function () {
+    this.onModelLoaded = bind(this.onModelLoaded, this);
+    this.onControllersUpdate = bind(this.onControllersUpdate, this);
+    this.checkIfControllerPresent = bind(this.checkIfControllerPresent, this);
+    this.removeControllersUpdateListener = bind(this.removeControllersUpdateListener, this);
+    this.onAxisMoved = bind(this.onAxisMoved, this);
   },
 
   addEventListeners: function () {
     var el = this.el;
     el.addEventListener('buttonchanged', this.onButtonChanged);
     el.addEventListener('buttondown', this.onButtonDown);
     el.addEventListener('buttonup', this.onButtonUp);
-    el.addEventListener('touchstart', this.onButtonTouchStart);
-    el.addEventListener('touchend', this.onButtonTouchEnd);
     el.addEventListener('model-loaded', this.onModelLoaded);
     el.addEventListener('axismove', this.onAxisMoved);
   },
@@ -79,42 +99,35 @@ module.exports.Component = registerComponent('vive-controls', {
     el.removeEventListener('buttonchanged', this.onButtonChanged);
     el.removeEventListener('buttondown', this.onButtonDown);
     el.removeEventListener('buttonup', this.onButtonUp);
-    el.removeEventListener('touchstart', this.onButtonTouchStart);
-    el.removeEventListener('touchend', this.onButtonTouchEnd);
     el.removeEventListener('model-loaded', this.onModelLoaded);
     el.removeEventListener('axismove', this.onAxisMoved);
   },
 
+  /**
+   * Once OpenVR returns correct hand data in supporting browsers, we can use hand property.
+   * var isPresent = this.checkControllerPresentAndSetup(this.el.sceneEl, GAMEPAD_ID_PREFIX,
+                                                        { hand: data.hand });
+   * Until then, use hardcoded index.
+   */
   checkIfControllerPresent: function () {
     var data = this.data;
-    // Once OpenVR / SteamVR return correct hand data in the supporting browsers, we can use hand property.
-    // var isPresent = this.checkControllerPresentAndSetup(this.el.sceneEl, GAMEPAD_ID_PREFIX, { hand: data.hand });
-    // Until then, use hardcoded index.
     var controllerIndex = data.hand === 'right' ? 0 : data.hand === 'left' ? 1 : 2;
-    this.checkControllerPresentAndSetup(this, GAMEPAD_ID_PREFIX, { index: controllerIndex });
-  },
-
-  play: function () {
-    this.checkIfControllerPresent();
-    this.addControllersUpdateListener();
-    // Note that due to gamepadconnected event propagation issues, we don't rely on events.
-    window.addEventListener('gamepaddisconnected', this.checkIfControllerPresent, false);
-  },
-
-  pause: function () {
-    this.removeEventListeners();
-    this.removeControllersUpdateListener();
-    // Note that due to gamepadconnected event propagation issues, we don't rely on events.
-    window.removeEventListener('gamepaddisconnected', this.checkIfControllerPresent, false);
+    this.checkControllerPresentAndSetup(this, GAMEPAD_ID_PREFIX, {index: controllerIndex});
   },
 
   injectTrackedControls: function () {
     var el = this.el;
     var data = this.data;
-    // handId: 0 - right, 1 - left, 2 - anything else...
-    var controller = data.hand === 'right' ? 0 : data.hand === 'left' ? 1 : 2;
-    // if we have an OpenVR Gamepad, use the fixed mapping
-    el.setAttribute('tracked-controls', {idPrefix: GAMEPAD_ID_PREFIX, controller: controller, rotationOffset: data.rotationOffset});
+
+    // If we have an OpenVR Gamepad, use the fixed mapping.
+    el.setAttribute('tracked-controls', {
+      idPrefix: GAMEPAD_ID_PREFIX,
+      // Hand IDs: 0 = right, 1 = left, 2 = anything else.
+      controller: data.hand === 'right' ? 0 : data.hand === 'left' ? 1 : 2,
+      rotationOffset: data.rotationOffset
+    });
+
+    // Load model.
     if (!this.data.model) { return; }
     this.el.setAttribute('obj-model', {
       obj: VIVE_CONTROLLER_MODEL_OBJ_URL,
@@ -130,17 +143,23 @@ module.exports.Component = registerComponent('vive-controls', {
     this.el.sceneEl.removeEventListener('controllersupdated', this.onControllersUpdate, false);
   },
 
-  onControllersUpdate: function () { this.checkIfControllerPresent(); },
+  onControllersUpdate: function () {
+    this.checkIfControllerPresent();
+  },
 
+  /**
+   * Rotate the trigger button based on how hard the trigger is pressed.
+   */
   onButtonChanged: function (evt) {
     var button = this.mapping.buttons[evt.detail.id];
     var buttonMeshes = this.buttonMeshes;
     var analogValue;
+
     if (!button) { return; }
 
     if (button === 'trigger') {
       analogValue = evt.detail.state.value;
-      // Update button mesh, if any.
+      // Update trigger rotation depending on button value.
       if (buttonMeshes && buttonMeshes.trigger) {
         buttonMeshes.trigger.rotation.x = -analogValue * (Math.PI / 12);
       }
@@ -151,9 +170,13 @@ module.exports.Component = registerComponent('vive-controls', {
   },
 
   onModelLoaded: function (evt) {
-    var controllerObject3D = evt.detail.model;
     var buttonMeshes;
+    var controllerObject3D = evt.detail.model;
+    var self = this;
+
     if (!this.data.model) { return; }
+
+    // Store button meshes object to be able to change their colors.
     buttonMeshes = this.buttonMeshes = {};
     buttonMeshes.grip = {
       left: controllerObject3D.getObjectByName('leftgrip'),
@@ -163,41 +186,60 @@ module.exports.Component = registerComponent('vive-controls', {
     buttonMeshes.system = controllerObject3D.getObjectByName('systembutton');
     buttonMeshes.trackpad = controllerObject3D.getObjectByName('touchpad');
     buttonMeshes.trigger = controllerObject3D.getObjectByName('trigger');
-    // Offset pivot point
+
+    // Set default colors.
+    Object.keys(buttonMeshes).forEach(function (buttonName) {
+      self.setButtonColor(buttonName, self.data.buttonColor);
+    });
+
+    // Offset pivot point.
     controllerObject3D.position.set(0, -0.015, 0.04);
   },
 
-  onAxisMoved: function (evt) { this.emitIfAxesChanged(this, this.mapping.axes, evt); },
+  onAxisMoved: function (evt) {
+    this.emitIfAxesChanged(this, this.mapping.axes, evt);
+  },
 
   onButtonEvent: function (id, evtName) {
     var buttonName = this.mapping.buttons[id];
+    var color;
     var i;
+    var isTouch = evtName.indexOf('touch') !== -1;
+
+    // Only trackpad has touch. Ignore for the rest, even if Gamepad API says touched.
+    if (isTouch && buttonName !== 'trackpad') { return; }
+
+    // Emit events.
     if (Array.isArray(buttonName)) {
       for (i = 0; i < buttonName.length; i++) {
         this.el.emit(buttonName[i] + evtName);
       }
     } else {
       this.el.emit(buttonName + evtName);
     }
-    this.updateModel(buttonName, evtName);
-  },
 
-  updateModel: function (buttonName, evtName) {
-    var i;
     if (!this.data.model) { return; }
+
+    // Don't change color for trackpad touch.
+    if (isTouch) { return; }
+
+    // Update colors.
+    color = evtName === 'up' ? this.data.buttonColor : this.data.buttonHighlightColor;
     if (Array.isArray(buttonName)) {
       for (i = 0; i < buttonName.length; i++) {
-        this.updateButtonModel(buttonName[i], evtName);
+        this.setButtonColor(buttonName[i], color);
       }
     } else {
-      this.updateButtonModel(buttonName, evtName);
+      this.setButtonColor(buttonName, color);
     }
   },
 
-  updateButtonModel: function (buttonName, state) {
-    var color = state === 'up' ? this.data.buttonColor : this.data.buttonHighlightColor;
+  setButtonColor: function (buttonName, color) {
     var buttonMeshes = this.buttonMeshes;
+
     if (!buttonMeshes) { return; }
+
+    // Need to do both left and right sides for grip.
     if (buttonName === 'grip') {
       buttonMeshes.grip.left.material.color.set(color);
       buttonMeshes.grip.right.material.color.set(color);