Using accelerometer to detect lanscape mode

[oquesada]

Hi,

I’m making an app that should show a webView when device is landscapeLeft oriented. The webVoew will shown a chart. The default orientation of the app is “portrait”. 

I started using orientation event to detect landscape left orientation to display webView landscaped-oriented. However, it does not work. The webView width never changes and the webView content is “portrait”.

I read in another website (stackoverflow.com) I could use accelerometer to detect when device is landscaped oriented, but I’m facing two issues:

1. I’m not sure how to detect when device is landscaped oriented (using accelerometer)

2. I’m not sure accomplishing point 1, the webView content will be landscaped oriented instead of portrayed.

Any thought or suggestion

thanks

Olman

[rob]

Can you post some code.  We fixed a bunch of issues around this.  Also make sure you are using the latest public build that was released yesterday (2014.2381).

[oquesada]

Hi,

Yes, I’m using latest public build 2381.

This is the code to reproduce the issue:

local webView = nil

   local function onOrientation(event)

   if(event.type==“landscapeLeft”)then

      webView = native.newWebView( 0, 0, _H, _W )

      webView.orientaion = -90

      webView.x = _CY;webView.y=_CX

      webView.width=_H; webView.height=_W;

      webView:request("http://www.misfinanzasenlinea.com/data/chart.php?values=bccr")

   end

end

Runtime:addEventListener(“orientation”,onOrientation)

The build.settings support only portrait mode

_CX = the center of the screen “x” coordinate

_CY = the center of the screen “y” coordinate

The idea is to display a webView when user change orientation of the device.

_W = width

_H = height

However, the webView content is not landscape oriented and the control seems not to respect width/height values.

[bjsorrentino]

Hi @oquesada,

First, I would suggest that you try a “resize” event/listener instead of “orientation”. There are subtle differences. Here are the docs on “resize”:

http://docs.coronalabs.com/api/event/resize/index.html

Also, it’s important to remember that the accelerometer readings are based on portrait orientation, so if you need to handle landscape, you need to manually offset the readings by 90 degrees. This is outlined here:

http://docs.coronalabs.com/api/event/accelerometer/xRaw.html

Finally, what is “.orientation” on the webView? Something you use internally for your own needs? That does not appear to be a valid built-in property for a webView, at least not in my recollection (although if you can point out a specific example where you pulled it from, I will stand corrected).

Thanks,

Brent

[oquesada]

Please forget the webView.orientation.

Regarding the resize event, it will work if landscapeLeft orientation is defined in build.settings, and it will be triggered every time the orientations has changed.

In my case, I require a portrait app, but in one single “scene” I want to be able to display more info (a web view) if user changes orientation of the app.

[bjsorrentino]

Hi @oquesada,

Sorry for the confusion… since you want to use portrait primarily, then you were correct to use the “orientation” listener. Just rotate the web view with the .rotation property in the proper part of your app.

Brent

[oquesada]

Hi,

In fact I’m trying to do that, but the webView content keep in portrait mode.

[bjsorrentino]

Hi @oquesada,

I tested the rotation of webViews, and it works fine. Please follow the code below to model your project:

[lua]

local webView = native.newWebView( display.contentCenterX, display.contentCenterY, 200, 280 )

webView:request( “http://www.coronalabs.com” )

local onOrientation = function( event )

   local orientation = event.type

   if ( “landscapeLeft” == orientation ) then

      print( “landscapeLeft” )

      webView.rotation = -90

   elseif ( “landscapeRight” == orientation ) then

      print( “landscapeRight” )

      webView.rotation = 90

   elseif ( “portraitUpsideDown” == orientation ) then

      print( “portraitUpsideDown” )

      webView.rotation = 180

   elseif ( “portrait” == orientation ) then

      print( “portrait” )

      webView.rotation = 0

   end

end

Runtime:addEventListener( “orientation”, onOrientation )

[/lua]

And in the build.settings “orientation” table, only portrait is set as supported:

[lua]

settings =

{

   orientation =

   {

      default = “portrait”,

      supported = { “portrait” }

   },

[/lua]

Hope this helps,

Brent

[oquesada]

Thanks Brent

I tried your code and it worked on simulator but on device, the web content is never “landscaped”. I’m using a iPhone 4.

[bjsorrentino]

Hi @oquesada,

Do you mean, the view doesn’t rotate at all? I assume you don’t have “orientation lock” set on the phone? It works perfectly on my iPhone5, in all four orientations.

Brent

[oquesada]

Thanks Brent

The Webview rotates but all content remains portrait (vertical)

I’ll keep making more test in another iphone. 

[rob]

Can you post some code.  We fixed a bunch of issues around this.  Also make sure you are using the latest public build that was released yesterday (2014.2381).

[oquesada]

Hi,

Yes, I’m using latest public build 2381.

This is the code to reproduce the issue:

local webView = nil

   local function onOrientation(event)

   if(event.type==“landscapeLeft”)then

      webView = native.newWebView( 0, 0, _H, _W )

      webView.orientaion = -90

      webView.x = _CY;webView.y=_CX

      webView.width=_H; webView.height=_W;

      webView:request("http://www.misfinanzasenlinea.com/data/chart.php?values=bccr")

   end

end

Runtime:addEventListener(“orientation”,onOrientation)

The build.settings support only portrait mode

_CX = the center of the screen “x” coordinate

_CY = the center of the screen “y” coordinate

The idea is to display a webView when user change orientation of the device.

_W = width

_H = height

However, the webView content is not landscape oriented and the control seems not to respect width/height values.

[bjsorrentino]

Hi @oquesada,

First, I would suggest that you try a “resize” event/listener instead of “orientation”. There are subtle differences. Here are the docs on “resize”:

http://docs.coronalabs.com/api/event/resize/index.html

Also, it’s important to remember that the accelerometer readings are based on portrait orientation, so if you need to handle landscape, you need to manually offset the readings by 90 degrees. This is outlined here:

http://docs.coronalabs.com/api/event/accelerometer/xRaw.html

Finally, what is “.orientation” on the webView? Something you use internally for your own needs? That does not appear to be a valid built-in property for a webView, at least not in my recollection (although if you can point out a specific example where you pulled it from, I will stand corrected).

Thanks,

Brent

[oquesada]

Please forget the webView.orientation.

Regarding the resize event, it will work if landscapeLeft orientation is defined in build.settings, and it will be triggered every time the orientations has changed.

In my case, I require a portrait app, but in one single “scene” I want to be able to display more info (a web view) if user changes orientation of the app.

[bjsorrentino]

Hi @oquesada,

Sorry for the confusion… since you want to use portrait primarily, then you were correct to use the “orientation” listener. Just rotate the web view with the .rotation property in the proper part of your app.

Brent

[oquesada]

Hi,

In fact I’m trying to do that, but the webView content keep in portrait mode.

[bjsorrentino]

Hi @oquesada,

I tested the rotation of webViews, and it works fine. Please follow the code below to model your project:

[lua]

local webView = native.newWebView( display.contentCenterX, display.contentCenterY, 200, 280 )

webView:request( “http://www.coronalabs.com” )

local onOrientation = function( event )

   local orientation = event.type

   if ( “landscapeLeft” == orientation ) then

      print( “landscapeLeft” )

      webView.rotation = -90

   elseif ( “landscapeRight” == orientation ) then

      print( “landscapeRight” )

      webView.rotation = 90

   elseif ( “portraitUpsideDown” == orientation ) then

      print( “portraitUpsideDown” )

      webView.rotation = 180

   elseif ( “portrait” == orientation ) then

      print( “portrait” )

      webView.rotation = 0

   end

end

Runtime:addEventListener( “orientation”, onOrientation )

[/lua]

And in the build.settings “orientation” table, only portrait is set as supported:

[lua]

settings =

{

   orientation =

   {

      default = “portrait”,

      supported = { “portrait” }

   },

[/lua]

Hope this helps,

Brent

[oquesada]

Thanks Brent

I tried your code and it worked on simulator but on device, the web content is never “landscaped”. I’m using a iPhone 4.

[bjsorrentino]

Hi @oquesada,

Do you mean, the view doesn’t rotate at all? I assume you don’t have “orientation lock” set on the phone? It works perfectly on my iPhone5, in all four orientations.

Brent