Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Using accelerometer to detect lanscape mode
Started by oquesada Jul 31 2014 12:03 PM

11 replies to this topic
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

oquesada

[GLOBAL: userInfoPane.html]
oquesada
  • Enthusiast

  • 56 posts
  • Corona SDK

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



[TOPIC: post.html]
#2

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,263 posts
  • Enterprise

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).



[TOPIC: post.html]
#3

oquesada

[GLOBAL: userInfoPane.html]
oquesada
  • Enthusiast

  • 56 posts
  • Corona SDK

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;
   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.


[TOPIC: post.html]
#4

bjsorrentino

[GLOBAL: userInfoPane.html]
bjsorrentino
  • Veteran

  • 8,506 posts
  • Corona SDK

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

 



[TOPIC: post.html]
#5

oquesada

[GLOBAL: userInfoPane.html]
oquesada
  • Enthusiast

  • 56 posts
  • Corona SDK

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.



[TOPIC: post.html]
#6

bjsorrentino

[GLOBAL: userInfoPane.html]
bjsorrentino
  • Veteran

  • 8,506 posts
  • Corona SDK

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



[TOPIC: post.html]
#7

oquesada

[GLOBAL: userInfoPane.html]
oquesada
  • Enthusiast

  • 56 posts
  • Corona SDK

Hi,

 

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



[TOPIC: post.html]
#8

bjsorrentino

[GLOBAL: userInfoPane.html]
bjsorrentino
  • Veteran

  • 8,506 posts
  • Corona SDK

Hi @oquesada,

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

 

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 )
 
And in the build.settings "orientation" table, only portrait is set as supported:
 

settings =
{
   orientation =
   {
      default = "portrait",
      supported = { "portrait" }
   },

 

Hope this helps,

Brent



[TOPIC: post.html]
#9

oquesada

[GLOBAL: userInfoPane.html]
oquesada
  • Enthusiast

  • 56 posts
  • Corona SDK

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.



[TOPIC: post.html]
#10

bjsorrentino

[GLOBAL: userInfoPane.html]
bjsorrentino
  • Veteran

  • 8,506 posts
  • Corona SDK

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



[TOPIC: post.html]
#11

oquesada

[GLOBAL: userInfoPane.html]
oquesada
  • Enthusiast

  • 56 posts
  • Corona SDK

Thanks Brent

 

The Webview rotates but all content remains portrait (vertical)

 

I'll keep making more test in another iphone. 



[TOPIC: post.html]
#12

jeff15

[GLOBAL: userInfoPane.html]
jeff15
  • Contributor

  • 106 posts
  • Corona SDK

Thanks Brent

 

The Webview rotates but all content remains portrait (vertical)

 

I'll keep making more test in another iphone. 

 

I have the same problem but only in the simulator. It rotated the web content on an iPhone 5 when I tested it. Perhaps the documentation could be updated to note this behavior so that people know to check it on a device.




[topic_controls]
 
[/topic_controls]