CODEWITHSUNDEEP
cordovaorientation
Gisela
Gisela

Reputation: 1244

cordova detecting orientation change

the app I am currently working on needs to know the orientation of the device, so I use this code to detect orientationchange events:

window.addEventListener('orientationchange', function(){
    theApp.orientationChange();
});

and this property to get the actual orientation value:

window.orientation

The problem: when switching between the 2 landscape modes, no event will be fired and the orientation stays at the now wrong 90 or -90 deg respectively.

I'm testing on 2 Android devices, running 2.3.5 and 4.4.4, both show the same behavior.

So, the questions are:

clarification
I want my app to show the direction from the user's location to a target geolocation.

To do this I need to 2 different orientation informations:

  1. compass heading
  2. screen orientation

To get the compass heading this plugin is used:

org.apache.cordova.device-orientation 0.3.10 "Device Orientation"

I use

navigator.compass.watchHeading

to get heading updates - this part is working.

To make an arrow element pointing to the target location, the app needs to know not only the compass heading, but also the screen orientation (the 0, 90, -90 and 180 deg values from the window.orientation property).
But this window.orientation property will be wrong on the tested Android devices, when changing the device orientation from landscape 1 to landscape 2 directly, without going over portrait mode. In addition the orientationchange event is NOT fired in this case.

The IOS sample code (btw: there is nothing IOS specific in the sample, the code SHOULD run in every WebView) KRIZTE is referencing relies on correct window.orientation values. The issue mentioned (delayed initial update) is not a problem with my code.

(Test-)Code used to check window.orientation:

setInterval(function(){
    console.log('WO ' + window.orientation);
}, 1000);

waiting for orientationchange events:

window.addEventListener('orientationchange', function(){
    console.log('window.orientation : ' + window.orientation);
});

annotated Log:

[starting app]
[check function returns correct value:]
"WO 0"
...

[change device orientation to landscape 1]
[got orientationchanged event, value is correct]
"window.orientation : 90"
[check function returns correct value:]
"WO 90"
...

[change device orientation back to portrait]
[got orientationchanged event, value is correct]
"window.orientation : 0"
[check function returns correct value:]
"WO 0"
...

[change device orientation to landscape 2]
[got orientationchanged event, value is correct]
"window.orientation : -90"
[check function returns correct value:]
"WO -90"
...

[change device orientation to landscape 1]
...       < Problem 1: no orientationchanged event
"WO -90"  < Problem 2: wrong window.orientation value, value should be +90 deg
...

Upvotes: 4

Views: 13973

Answers (4)

Baron Afutu
Baron Afutu

Reputation: 41

According to the documentation, "The screen.orientation property will not update when the phone is rotated 180 degrees" for the android platform. https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-screen-orientation/

Upvotes: 1

user6312012
user6312012

Reputation: 51

var orientation = window.orientation % 180 === 0 ? 'portrait' : 'landscape'

Upvotes: 5

Michael Cornetto
Michael Cornetto

Reputation: 64

Just wanted to add that the solution code above is a bit inefficient. Much better to use this instead. 

    var orientation = 'portrait';

    if (Math.floor(Math.abs(window.orientation)/90) === 1) {
        orientation = 'landscape';
    }

Would have left this as a comment but I'm still too new to this to be allowed to leave one.

Upvotes: 1

locknies
locknies

Reputation: 1355

Hope you have added the above mentined plugin right? then use it like this,

<html>
<head>
    <title>Hello World</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script>
        function onload() {
            window.addEventListener("orientationchange", orientationChange, true);

            function orientationChange(e) {

                var currentOrientation = "";

                if (window.orientation == 0) {
                    currentOrientation = "portrait";
                } else if (window.orientation == 90) {
                    currentOrientation = "landscape";
                } else if (window.orientation == -90) {
                    currentOrientation = "landscape";
                } else if (window.orientation == 180) {
                    currentOrientation = "portrait";
                }
                document.getElementById("status").innerHTML = currentOrientation;

            }
        }
    </script>

</head>
<body onload="onload()">

    <h2>Orientation Test</h2>
    <div id="status"></div>

</body>
</html>

window.addEventListener("orientationchange", orientationChange, true); once you initialize it then it will trigger every time you change orientation and calls "orientationChange". so you dont have to put serInterval or anything. The above code is self explanatory.

Hope it helps!

Upvotes: 0

Related Questions