CODEWITHSUNDEEP
javascripthtmldevicemotion
user3525785
user3525785

Reputation: 59

HTML5/Javascript (devicemotion/deviceorientation) Reset rotation values to zero depending on how the user is holding the device when code is run

At the moment my code looks like this:

window.ondevicemotion = function(event) {
  if ( offsetX === undefined) {
    offsetX = event.accelerationIncludingGravity.x;
  } else {
    event.stopPropogation;
  }
  var x = (event.accelerationIncludingGravity.x) - offsetX; 
  $('.wrapper').css({'perspective-origin': (50+(-x*4))+'% 0%'});
};

This works by grabbing the initial X rotation and removing it from the current device rotation, allowing my code to run based on how the device is held.

The trouble is, whilst this works fine if the device is held normally, doesn't work very well if the device begins at an extreme angle, or upside down like in bed (in this case the numbers are inverted and my code works backwards!).

How do I get this working no matter how the device is held?

Upvotes: 2

Views: 341

Answers (0)

Related Questions