1

I'm trying to detect the device-orientation, of mobile devices, using JavaScript.

I read the documentation, I read other StackOverflow questions, I watched videos on the subject, and this seems super simple, but I just can not get it to work…

This is my current code:

function handleOrientation(event) {
    var absolute = event.absolute;
    var alpha    = event.alpha;
    var beta     = event.beta;
    var gamma    = event.gamma;
    
    document.querySelector(".deviceAbsolute").innerHTML = absolute;
    document.querySelector(".deviceAlpha").innerHTML = alpha;
    document.querySelector(".deviceBeta").innerHTML = beta;
    document.querySelector(".deviceGamma").innerHTML = gamma;
}

window.addEventListener("deviceorientation", handleOrientation, true);
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Build 7</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
    deviceAbsolute = <span class="deviceAbsolute">no input</span><br>
    deviceAlpha = <span class="deviceAlpha">no input</span><br>
    deviceBeta = <span class="deviceBeta">no input</span><br>
    deviceGamma = <span class="deviceGamma">no input</span>
    </body>
</html>

I uploaded this code to my webspace and tested using iPhone and iPad but nothing happens.

EDIT:

I finally found a working demo: https://sensor-js.xyz/demo.html This works on my iPad and my iPhone, on Safari. – Now the problem is: How did they do it?

Simon R.
  • 151
  • 10
  • Does this answer your question? [Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions](https://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad) – Justinas Jan 14 '21 at 07:58
  • @Justinas Thank you for your answer! …but no, I need to get the alpha, beta and gamma values in degrees. I need to access the Gyroscope of a mobile device. This should be somewhat easy: https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation – Simon R. Jan 14 '21 at 08:00
  • The code does not execute on iPhone. I am testing [jsfiddle](https://jsfiddle.net/mplungjan/mLobax51/show) on iPhone – mplungjan Jan 14 '21 at 08:03
  • Your site is also not doing anything in Chrome iOS 14 - so I wonder if we can test if the code works anywhere – mplungjan Jan 14 '21 at 08:06
  • It's experimental feature. It's possible that not working everywhere. – Justinas Jan 14 '21 at 08:07
  • @mplungjan Well, that's the problem. ;) – I can't get it to work. :/ – Simon R. Jan 14 '21 at 08:07
  • @Justinas I tested using different browsers and devices. – Simon R. Jan 14 '21 at 08:08
  • @Justinas according to MDN it does not work in IE11 but if it is supposed to work, it should work on mobiles running newer browsers https://caniuse.com/deviceorientation – mplungjan Jan 14 '21 at 08:08
  • It also does not work for me here https://www.audero.it/demo/device-orientation-api-demo.html – mplungjan Jan 14 '21 at 08:10
  • 1
    Some complaints here https://developer.apple.com/forums/thread/128376 – mplungjan Jan 14 '21 at 08:11
  • @mplungjan The audero demo also doesn't work for me, but I've seen people use it: https://www.youtube.com/watch?v=06MV79PPMEo&t=17s – I understand it might not work on every device and every browser, but I think I should be able to get some value, somewhere, right? – Simon R. Jan 14 '21 at 08:14
  • @SimonR. Yes, I am also wondering – mplungjan Jan 14 '21 at 08:15
  • In the youtube they test the deviceorientationevent is supported – mplungjan Jan 14 '21 at 08:17
  • Maybe Apple did change something, I'm going to try adding a button, but just a random button is probably not going to cut it… – Simon R. Jan 14 '21 at 08:19
  • Seems the demo is getting permission on click of a button. I cannot recreate this – mplungjan Jan 14 '21 at 10:03
  • @mplungjan I read some of the documentation, for this: https://sensor-js.xyz/webs-sixth-sense-ccs18.pdf …and it seems, they are not working with `deviceorientation`, but with `devicemotion`, I thought maybe that's all there's to it, but I tried it and it didn't work: https://jsfiddle.net/q178k263/2/ – I think I'm going to turn of my computer for a bit and then come back later and hopefully find out how they did it. There is some more code in the documentation that I have not yet understood, if I find anything I will update the question. – Simon R. Jan 14 '21 at 10:36
  • When I ask for permission I do not see the permission popup. When they do, it pops immediately (but on click) – mplungjan Jan 14 '21 at 10:37
  • There must be something they do differently. Maybe, if I find out who wrote the code for this demo and send them a mail… There is a way, somewhere… – Simon R. Jan 14 '21 at 10:40
  • Ah, I think I know. Their code is in the root of the page. JSFiddle and StackSnippets are in iFrames ! – mplungjan Jan 14 '21 at 10:44
  • But I uploaded the code from my question to my webspace and it didn't work, but maybe I made a mistake. – Do you still have the code, that you wrote? – I can upload it and we can check if it works… – Simon R. Jan 14 '21 at 10:46
  • 1
    Shortened their code - it works on my server too now https://plungjan.name/SO/orientation/ – mplungjan Jan 14 '21 at 10:57
  • @mplungjan When I visit the file on your server it works! :) – But… I saved the site locally and uploaded it to my GoDaddy-Webspace and when I now visit my site it doesn't work. – Can you maybe send me your file, via wetransfer, or something, this should work, right? – Simon R. Jan 14 '21 at 11:07
  • Sure (contact in my profile). But just right-click and save as: https://plungjan.name/SO/orientation/index.html – mplungjan Jan 14 '21 at 11:08
  • I think, this is what I did, but let me try it one more time. – Simon R. Jan 14 '21 at 11:09
  • I feel stupid, I'm sorry, I don't wanna waste your time, but this is what I did: I open your link, that works perfectly on my iPhone / iPad, I right-click, save as: index.html, I go into my GoDaddy / cPanel / public_html, I delete everything, I paste your file, I visit http://www.simon-reiter.com on my mobile device, I click: "Start demo" and nothing happens… – Simon R. Jan 14 '21 at 11:17

1 Answers1

1

Take a look at this: https://developer.mozilla.org/en-US/docs/Web/API/Gyroscope#example

let gyroscope = new Gyroscope({frequency: 60});

gyroscope.addEventListener('reading', e => {
  console.log("Angular velocity along the X-axis " + gyroscope.x);
  console.log("Angular velocity along the Y-axis " + gyroscope.y);
  console.log("Angular velocity along the Z-axis " + gyroscope.z);
});
gyroscope.start();
Greg
  • 168
  • 1
  • 3
  • 19
  • Thank You, for your answer, but this is not about landscape / portrait, I need to access the device-gyroscope and get alpha, beta and gamma values. This is what I read: https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation – Simon R. Jan 14 '21 at 08:02
  • Assuming youre using Android, hence java perhaps follow this tutorial: https://www.youtube.com/watch?v=8Veyw4e1MX0&ab_channel=SylvainSaurel – Greg Jan 14 '21 at 08:05
  • Hey this is interesting! :) Thank You, I'm looking into it. – Simon R. Jan 14 '21 at 08:20
  • I uploaded you code to my webspace and, right now, it's not working, but this looks promising, I'm going to read the documentation and play around with it and I will let you know, if it worked. :) – Simon R. Jan 14 '21 at 08:32