Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve device orientation detection/fallback to device motion #194

Closed
lbssousa opened this issue May 12, 2017 · 5 comments
Closed

Improve device orientation detection/fallback to device motion #194

lbssousa opened this issue May 12, 2017 · 5 comments
Labels
enhancement

Comments

@lbssousa
Copy link

Some low-end mobile devices (like my old Moto E 1st gen, which doesn't have a gyroscope) may give a "false positive" for device orientation: it passes the window.DeviceOrientationEvent availability test, but deviceorientation event data alpha, beta, and gamma are always null, so that parallax doesn't work at all for these devices.

Please go further in device orientation event detection, checking whether rotation data alpha, beta, and gamma are null, and falling back to device motion event if it's the case (note, however, that even devicemotion event's rotationRate.alpha, rotationRate.beta, and rotationRate.gamma may also be null, so that, in the last case, one should fall back to x/y/z acceleration data).

There's a simple HTML test page which can be used to test a mobile device's motion/orientation capabilities, whose code is published at mobiForge. The HTML code is transcribed below:

<DOCTYPE html>
<html>
  <head>
    <script>
    function init() {
      //Find our div containers in the DOM
      var dataContainerOrientation = document.getElementById('dataContainerOrientation');
      var dataContainerMotion = document.getElementById('dataContainerMotion');
 
      //Check for support for DeviceOrientation event
      if(window.DeviceOrientationEvent) {
        window.addEventListener('deviceorientation', function(event) {
                var alpha = event.alpha;
                var beta = event.beta;
                var gamma = event.gamma;
               
                if(alpha!=null || beta!=null || gamma!=null) 
                  dataContainerOrientation.innerHTML = 'alpha: ' + alpha + '<br/>beta: ' + beta + '<br />gamma: ' + gamma;
              }, false);
      }
 
      // Check for support for DeviceMotion events
      if(window.DeviceMotionEvent) {
      window.addEventListener('devicemotion', function(event) {
                var x = event.accelerationIncludingGravity.x;
                var y = event.accelerationIncludingGravity.y;
                var z = event.accelerationIncludingGravity.z;
                var r = event.rotationRate;
                var html = 'Acceleration:<br />';
                html += 'x: ' + x +'<br />y: ' + y + '<br/>z: ' + z+ '<br />';
                html += 'Rotation rate:<br />';
                if(r!=null) html += 'alpha: ' + r.alpha +'<br />beta: ' + r.beta + '<br/>gamma: ' + r.gamma + '<br />';
                dataContainerMotion.innerHTML = html;                  
              });
      }
    }   
    </script>
  </head>
  <body onload="init()">
    <div id="dataContainerOrientation">
      No device orientation data
    </div>
    <div id="dataContainerMotion">
      No device motion data
    </div>
  </body>
</html>
@snooksv3
Copy link

Who uses a moto lol...

@reneroth
Copy link
Collaborator

I'm really tempted to just agree with @theOGl and close this issue, but that's just me being lazy 😋

The hardest part about this is developing without having access to the hardware in question. Keeping this open until someone with a device donates either a pull request or the device itself.

@lbssousa
Copy link
Author

I've done something similar for the tilting effect in quasar-default-template project:

quasarframework/quasar-template-default@b7a1984

I'll try to port this heuristics to parallax and send you a PR.

@RaSMiY
Copy link

RaSMiY commented Jan 26, 2018

Hi!
It seems I have such a device. What do you need to test?

@taypixelbright
Copy link

It would be great if you could help me. I'm planning to set parallax up into a Nokia 3310. Sounds like a big challenge, right?... R U IN?. xD

@reneroth reneroth closed this as completed Apr 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@taypixelbright @lbssousa @reneroth @snooksv3 @RaSMiY