search

dorukeker / gyronorm.js

JavaScript project for accessing and normalizing the accelerometer and gyroscope data on mobile devices
MIT License
641 stars 65 forks source link

getting "DeviceOrientation is not supported" even though it is #14

Closed verybigelephants closed 8 years ago

verybigelephants commented 8 years ago

if you fire up chrome debug console, or open the website on chrome on my android browser i get "DeviceOrientation is not supported"

is this a normal thing? i get this even when running the demos

dorukeker commented 8 years ago

Yes it is a normal thing :)

In short, this happens because the emulation in the Chrome dev console is not 100% same as the real device. Below some use cases, details and work arounds

1) On a Mac Book Pro The Mac Book Pro actually has gyroscope. So the DeviceOrientation will be fired. But you will only see alpha values change. You can still use the emulator in the developer console. More about this below.

2) On a desktop with the developer console open but emulator NOT checked I think this is the scenario you experience. Since the hardware does not have gyroscope, you will get "DeviceOrientation is not supported"

3) On a desktop with the developer console open but emulator IS checked This kind of tricky. You expect that since Chrome is emulating the device orientation you expect it to work as a real device. But there is one difference: If you first turn on the device emulator and load the page. Chrome will not fire the deviceorientation event until you first move the block in the emulator. And Gyronorm will think deviceorientation is not supported.

Workaround1:

Workaround 2:

Workaround 3: You can use a device orientation emulator DOE https://github.com/richtr/doe

Workaround 4: Use a real device :) This is what I normally do. There are remote debug tools build in Safari for iOS. And also you can use PushBullet app to send to your devices.

There is also a closed thread about this here: https://github.com/adtile/Full-Tilt/issues/7

I hope these help. Cheers, Doruk

dorukeker commented 8 years ago

Let me know if this is useful so I can close the issue. Cheers, D.

verybigelephants commented 8 years ago

thanks for your response! thanks for the workaround so i can debug things out in the browser

however, i can't seem to get it working on a real device neither. i can make it work on iphone 5 but on my android i get "devicemotion not supported". however, i can access the gyroscope values via other library (gyro.js) and via deviceorientation just fine

what can i do with this devicemotion error message? i only need to access the orientation of the device

dorukeker commented 8 years ago

Hello, There can be many reasons for that indeed :) Can you post the related code piece here so I can have a look. Cheers, D.

verybigelephants commented 8 years ago

i am using this demo code http://pastebin.com/VFtiRQFY

dorukeker commented 8 years ago

Hi, I test this code on a Samsung Galaxy S6 and it worked as expected. Which phone and Android version are you testing it with?

P.s. Here is the code that I tested. Just removed the default args. Since you are not changing them you don't need them.

<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="bower_components/gyronorm/dist/gyronorm.complete.js"></script>
    <title></title>
</head>
<body>
    <div id="main">
        <div class="stats" style="position:absolute; left:0;top:0; color:red;"></div>
    </div>

<script type="text/javascript">
    var gn = new GyroNorm();
    gn.init().then(function(){
        alert('success');
        gn.start(function(data){

                    $(".stats").html(
                        'alpha: '+data.do.alpha+', beta:'+data.do.beta+', gamma:'+data.do.gamma
                    );
        });
    }).catch(function(e){
        alert(e);
    });
</script>
</body>
</html>
dorukeker commented 8 years ago

@verybigelephants how id it go? If all is good I want to close this issue. Can you please let me know. Cheers, Doruk

verybigelephants commented 8 years ago

hey there, i just wanted to let you know that i have tried to, but haven't managed to get the phone that i was testing it on running again, so i guess nevermind :(

jedierikb commented 7 years ago

I am trying to get this running on iOS 10 on an iphone 7 plus. https://codepen.io/jedierikb/project/editor/ZvoNYX/#

Getting the error 'DeviceOrientation is not supported'. Any suggestions?

jedierikb commented 7 years ago

looks like this is the issue: https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

Warning: Firefox (including Firefox for Android) and Safari [...] does not dispatch deviceorientation event to cross-origin pages in iframes.

dorukeker commented 7 years ago

@jedierikb thanks for the info. Let me know if you have any other questions.