Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

  • is there a workaround for this? - how can this event be detected?
  • does this bug shows only on Android, or are other platforms affected?

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
...
like image 220
Gisela Avatar asked Mar 18 '23 04:03

Gisela


2 Answers

var orientation = window.orientation % 180 === 0 ? 'portrait' : 'landscape'
like image 102
user6312012 Avatar answered Mar 28 '23 19:03

user6312012


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.

like image 35
Michael Cornetto Avatar answered Mar 28 '23 17:03

Michael Cornetto