HammerDeviceMotion

device_hammer.js

/**
 * @author Francois Weber - V 1.0
 * Reading device motion to use phone as 'hammer'
 * 
 * How to: 
 *  var hammer = new DeviceHammer();
 *  // Overwrite:
 *  hammer.onHit = function() { yourCode() };
 * 
 * @param {Object} options
 *                 @property {Number} beta_orientation_max_hit - at which max angle the hammer triggers
 *                 @property {Number} beta_orientation_min_hit - at which min angle the hammer triggers
 *                 @property {Number} beta_orientation_min_unlock - at which angle the hammer is in normal state
 *                 @property {Boolean} debug - Print debug on the screen
 */
var DeviceHammer = function(options) {
  options = options || {};
  this.is_locked = false;
  this.beta_orientation = 0;
  this.beta_orientation_max_hit = options.beta_orientation_max_hit || 60;
  this.beta_orientation_min_hit = options.beta_orientation_min_hit || 0;
  // Unlocking
  this.beta_orientation_min_unlock = options.beta_orientation_min_unlock || 61;
  //
  this.bindEvents();
  this.debug = options.debug || false;
  this.debug_ele = null;
  if (this.debug) {
    this.createDebugDivs();
  }
};

DeviceHammer.prototype.bindEvents = function() {
  if (!this.isSupported()) {
    alert("DeviceOrientation or DeviceMotionEvent is NOT supported with this device");
  } else {
    window.addEventListener('devicemotion', this.handleDeviceMotion.bind(this));
    window.addEventListener('deviceorientation', this.handleDeviceOrientation.bind(this));
  }
};

DeviceHammer.prototype.isSupported = function() {
  return window.DeviceOrientationEvent && window.DeviceMotionEvent;
};

DeviceHammer.prototype.handleDeviceOrientation = function(event) {
  this.beta_orientation = event.beta;
  if (this.debug_ele) {
    var d = "Alpha: " + event.alpha + "<br>" +
            "Beta: " + this.beta_orientation + "<br>" +
            "Gamma: " + event.gamma;
    this.debug_ele_motion.innerHTML = d;
  }
};

DeviceHammer.prototype.handleDeviceMotion = function(event) {
  var acc = event.acceleration;
  var acc_x = acc.x;
  this.checkLock(acc_x);
  this.hit(acc_x);
  if (this.debug_ele) {
    var d = "Acc-X: " + acc_x + "<br>" +
            "Acc-Y: " + acc.y + "<br>" +
            "Acc-Z: " + acc.z;
    this.debug_ele_acceleration.innerHTML = d;
  }
};

DeviceHammer.prototype.hit = function() {
  if (this.beta_orientation < this.beta_orientation_max_hit &&
      this.beta_orientation > this.beta_orientation_min_hit &&
      !this.is_locked) {
    this.lock();
    this.onHit();
  }
};

DeviceHammer.prototype.lock = function() {
  this.is_locked = true;
};

DeviceHammer.prototype.unlock = function() {
  this.is_locked = false;
  this.onLock();
};

DeviceHammer.prototype.checkLock = function(acc_x) {
  if (this.beta_orientation > this.beta_orientation_min_unlock) {
    this.unlock();
  }
};

DeviceHammer.prototype.createDebugDivs = function() {
  this.debug_ele = document.createElement('DIV');
  this.debug_ele.id = "debug";
  this.debug_ele.style.position = 'absolute';
  this.debug_ele.style.left = '10%';
  this.debug_ele.style.top = '30%';
  this.debug_ele.style.fontSize = '14px';
  // Acceleration
  this.debug_ele_acceleration = document.createElement('DIV');
  this.debug_ele_acceleration.id = "debug_acceleration";
  this.debug_ele.appendChild(this.debug_ele_acceleration);
  // Motion
  this.debug_ele_motion = document.createElement('DIV');
  this.debug_ele_motion.id = "debug_motion";
  this.debug_ele.appendChild(this.debug_ele_motion);

  document.body.appendChild(this.debug_ele);
};

// To be overwritten when in a lock mode
DeviceHammer.prototype.onLock = function() {
  return;
};

// To be overwritten when a hit happens
DeviceHammer.prototype.onHit = function() {
  return;
};

// To be overwritten when hammer not in a hit mode
DeviceHammer.prototype.onLock = function() {
  return;
};