Start a new topic

[Cordova / Phonegap] : Radar on Orientationchange

[Cordova / Phonegap] : Radar on Orientationchange

I'm using the most current version of cordova and the wikitude 4.0 SDK with cordova plugin to position images in an AR World.

Most things work like a charme, but using the radar doesn't work like i would expect.

In Portrait Mode the radar renders correct and the position of the marker in AR World is represented by the radar object. Also the north Indicator is correct.

When rotating the device, the Marker rotates correctly but the radar does not. So the north indicator points to a wrong direction

Is there a way to solve this problem, so that the user can use the radar in portrait and landscape direction?

Hello Johannes,

are you sure that your compass is calibrated? This issue usually occurs if the compass is not calibrated properly.

Hope that helps,

Hmm... This seems to be a missunderstanding.

First: I've 6 testdevices (Android and iOS) - the behaviour is the same on every device.

I try to explain it with an example:

1. In an AR World i have a single POI. This POI is visible on the radar as a green dot.

2. The User want to find the POI in the AR World. (Phone in Portrati Mode)

3. The User rotates around his axis to look to an other direction - when the green dot is at the top of the radar the user will see the ImageDrawable at the POI.

4. Now the user rotates the devices by 90degrees in landscape mode. The POI is still in correct place, but the radar now points to a wrong direction

My english is not the best, but I hope you can get the point.

Unfortunately I cannot reproduce this issue. Could you have a look at our examples app which is delivered with the SDK and check if you have the same issues on your test devices - example "5.2 Adding Radar"? Did you use the AR.radar.container for your implementation?

Looks like you don't receive the orientation event. Have a look at your settings->display if the 'auto-rotate screen' checkbox is checked. If this is switched off the webview won't be rotated.


Where should I configure this? In the App? The AR View? The Phone (iOS and Android behave the same) sends the "onOrientationChange" event. I use it in my application. 

If this is the point, why do the POIS rotate, but not the radar? 
Both are rendered in the AR World - not in the WebView.

Detailed Explanaition in German:


Der Radar scheint stets im Portrait Modus eingenordet zu sein. Im Radar ist die Richtung in die ich blicke stets zum schmalen oberen Ende des Gerätes gerichtet. Wenn ich das Geräte im Portrait Modus halte ist Norden dann dort wo man es erwartet und Drehungen um die eigene Achse werden korrekt durch Änderung der Himmelsrichtung im Kompass dargestellt.

Drehe ich das Gerät in den Landscape Modus, werden alle Interface Elemente korrekt gedreht, die ich im Webview erzeuge. Außerdem kann ich die Neigung des Gerätes mit dem Beschleunigungssensor auslesen (das verwende ich hier um ein Overlay zu drehen) - auch die POIS drehen sich mit, sodass deren Labels weiterhin lesbar sind. Nur der Radar bleibt stock steif und dreht sich mit dem Gerät um 90Grad, sodass Norden dann nach Osten zeigt (oder nach Westen, je nach Drehrichtung). Hierbei ist natürlich zu beachten, dass das Gerät nicht wie im verlinkten Video flach auf dem Tisch liegt, sondern aufrecht gehalten wird - man will ja "hindurchsehen" (siehe Bilder des letzten Posts).

Aus meiner Perspektive sollte dieses Verhalten unabhängig von der Cordova App, da der AR View ja in einer eigenen Activity "darüber" gerendert wird. Es sei denn, es gibt hierfür eine Konfigurationsmöglichkeit, die mir in der Dokument entgangen ist. Oder an all meinen 6 Geräten stimmt was nicht... Oder ich verstehe das Konzept, das hinter diesem Verhalten steht einfach nicht. 


Before we discuss if this is a bug or not I would like to figure out what's wrong and if there is a solution/workaround that fixes the issue.

On Android (4.x): open the settings of the device - Settings->Display check the setting 'auto-rotate screen' checkbox (should be checked)
On iOS: check if the screenlock is switched on (should be switched off)

In case the screenlock is switched on, switch it off and restart the examples app. Check if the issue still occurs and inform me about the outcome. Let's stick to the examples app for now - like that we have a common code base.


on iOS:
Screenlock is switched off on iOS (has been switched off all the time)

-> Behaviour as described above

on Android:
On Android the "auto-rotate screen" was not enabled. If enabled the behaviour seems correct. This is a first step, but sadly does not solve my problem, because the POIS rotate without this setting and the user would expect, that the radar would do the same. 

Perhabs this is more a conceptual problem than a  technical one.

I would prefer, that the radar rotates with the acceleromator, like the POIs. But your answers make me think, that this is not the wanted behaviour. I will sleep about this problem...

Thanks for now



Unfortunately I cannot reproduce this behaviour on iOS with the examples app.

Here an explanation for the lock-screen behavior:
The placemarks or any augmentation elments are rendered with a transformation matrix which includes the compass and the acceleration sensor values/gyroscope values. If we locked the augmentations this wouldn't make any sense, that's not augmented reality. The HTML part is rendered within a webview which takes orientation changes into account. If the screen is locked the orientation event won't be fired for the webview, that's why the radar and the HTML elements are locked.

Hello Johannes,

I tested it on several iOS devices and cannot reproduce the issue. Just to be sure we have the same setup: You downloaded the SDK 4.0 and tested it with the example "5.2 Adding Radar" and you can reproduce the issue that the Webview won't change with a change of the orientation? If this is the case, which iOS device do you use and which iOS version is installed?

It is difficult to help you if I can't reproduce the issue. The only way I can reproduce it is with a screen-lock.


Sorry for my late answer.

I own an iPhone5s with iOS7.0.5, an iPhone4 with iOS6 and an iPhone4s with iOS7.1 installed. Screen-Lock is definitly not enabled. 
I download the latest version of your example app and build it via the included command file. (I've installed the latest node,npm and cordova) 

Then I install it via Xcode on my iPhones. It behaves the same on all 3 Devices...

Perhabs this is a cordova issue and not a wikitude one... 

I'll try to solve this problem, but for now I deal with it in a "graphical" way by not displaying it as a radar, but a little person with an field of view in front. This way, the user should be able to get the correct direction regardless of the orientation.

Thanks for your support.

Which Phonegap version did you use?

I've used Cordova 3.5.0
Login or Signup to post a comment