Languages

Menu
Sites
Language
about orientation.SOS...

 My web application needs to support orientation feature.I put the code like this

 

  1. (function(){  
  2. var init = function() {  
  3.   var updateOrientation = function() {  
  4.     var orientation = window.orientation;  
  5.       
  6.     switch(orientation) {  
  7.       case 90: case -90:  
  8.         orientation = 'landscape';  
  9.       break;  
  10.       default:  
  11.         orientation = 'portrait';  
  12.     }  
  13.       
  14.     // set the class on the HTML element (i.e. )  
  15.     document.body.parentNode.setAttribute('class', orientation);  
  16.   };  
  17.     
  18.   // event triggered every 90 degrees of rotation  
  19.   window.addEventListener('orientationchange', updateOrientation, false);  
  20.     
  21.   // initialize the orientation  
  22.   updateOrientation();  
  23. }  
  24.   
  25. window.addEventListener('DOMContentLoaded', init, false);  
  26.   
  27. })(); 

 

and in my config.xml : <tizen:setting screen-orientation="portrait" contextmenu="enable"/> 

 

and I aslo tried like :<tizen:setting  contextmenu="enable"/> 

 

Neither works well,it can't detect the event of orientationchange .Souds like bind event failed.

Edited by: Brock Boland on 17 Mar, 2014 Reason: Paragraph tags added automatically from tizen_format_fix module.
List

Responses

12 Replies
Srinivasa Rao S
Hi wanjin ma, To get the deivce orientation , you need to add event listner , once device orientation changes "OnSuccessCallback" is called. tizen.systeminfo.addPropertyValueChangeListener("DeviceOrientation", onSuccessCallback, onErrorCallback, {lowThreshold : 0.2}); function onSuccessCallback(orientation) { switch(orientation.status) { case 0: console.log(" Device current Orientation " + "portrait-primary" ); break ; case 1: console.log(" Device current Orientation " + "portrait-secondary" ); break ; case 2: console.log(" Device current Orientation " + "landscape-primary" );//Reverse landscape in emulator break ; case 3: console.log(" Device current Orientation " + "landscape-secondary" );//Landscape in emulator break ; }
wanjin ma
Your code is fine,event can be captured well,but why the layout is not changed.
Srinivasa Rao S
For any Application, developer has to define layout for all orientations, after receivng orientation change event , layout has to be updated from javascript. For more details go through sample application https://01.org/html5webapps/webapps/shopping-list
wanjin ma
The sample application - shopping-list I have checked .After receiving orientation change event,the javascript would be changed .I did it completely the same way. After orientation change event happends, the page should rotate.But now only javascript changed , page didn't rotate.
Raghu Kona
Hi Wanjin Ma, The shopping list application is using windows events such as onorientationchange and onresize to detect the orientation changes, which are not supported in Tizen. I modified the Shopping list application accordingly and attached it to the article posted in developer site. https://developer.tizen.org/documentation/developer-application-case-study-shopping-list Please refer to the code in main.js or even you can see the log messages while running the application in Emulator. I modified self.setOrientation method and added the following piece of code in self.initOnLoad() method. isSupported = tizen.systeminfo.isSupported['DeviceOrientation'); if(isSupported)( console.log[' DeviceOrientation is supported'); tizen.systeminfo.addPropertyValueChangeListener(“DeviceOrientation”, ShoppingListApp.onSuccessCallback, ShoppingListApp.onErrorCallback,{lowThreshold: 1.2}); ) Two callback methods to handle the success and failure of event listener self.onSuccessCallback and self.onErrorCallback resp. Hope this will help you in fixing the issue.
wanjin ma
Raghu Kona, I 'm obliged to you for your help.It works.
Aries Brune Tyson Antony Raj
I tried to run the code in emulator and i got 1010 error. And also do we have to write separate style for doing this. In the code i saw in Shopping the css is updated according to the orientation. Is there any other way to do this? like doing it without using css stylings and with the help of tizen api or something.
Lakshmi Grandhi
Hi Aries, Shopping list application is developed using jquery, if you use Tizen framework it will take care of scaling based on resolution and orientation changes.
Aries Brune Tyson Antony Raj
Hi Lakshmi Thanks for the update. But I'm also looking for doing this in webapp developed in tizen(jquery mobile). What i'm trying to do is getting the event with the below code tizen.systeminfo.addPropertyValueChangeListener("DEVICE_ORIENTATION", onSuccessCallback,onFailure); and in success i'm trying to change the orientation of my app with the help of tizen api destined for webapp. because apart from triggering orientationchange event, tizen framework is not doing anything to rotate my page to match the orientation. I opted for the below api's and failed tizen.systeminfo - >By getting the sys setting and playing around with that tizen.systemsetting - >By chaning the sys setting tizen.application -> by doing some thing with current app handle widget -> by altering the screen orientation from config.xml can solve this. but couldn't achieve
Lakshmi Grandhi
Hi Aries, I came to know that tizen framework doesn't change any screen once rotation is changed, application has to register to rotation events and should do the changes for portrait/landscape
Florian TRAON
Note : for addPropertyValueChangeListener("DEVICE_ORIENTATION", onSuccessCallback,onFailure); you made an error on "onFailure" : according https://developer.tizen.org/help/index.jsp?topic=%2Forg.tizen.web.device.apireference%2Ftizen%2Fsysteminfo.html : unsigned long addPropertyValueChangeListener( SystemInfoPropertyId property, SystemInfoPropertySuccessCallback successCallback, optional SystemInfoOptions? options); sample : function onSuccessCallback(orientation) { console.log(" Device current Orientation onSuccessCallback orientation.status = "+orientation.status ); switch(orientation.status) { case "PORTRAIT_PRIMARY": console.log(" Device current Orientation " + "portrait-primary" ); break ; case "PORTRAIT_SECONDARY": console.log(" Device current Orientation " + "portrait-secondary" ); break ; case "LANDSCAPE_PRIMARY": console.log(" Device current Orientation " + "landscape-primary" );//Reverse landscape in emulator break ; case "LANDSCAPE_SECONDARY": console.log(" Device current Orientation " + "landscape-secondary" );//Landscape in emulator break ; default: console.log(" Device current Orientation " + orientation.status );//?? break; } } tizen.systeminfo.addPropertyValueChangeListener("DEVICE_ORIENTATION", onSuccessCallback, {lowThreshold : 0.2}); reminder : add Privilege: http://tizen.org/privilege/systeminfo
Raghu Kona
You have to add privilege in config.xml file. You can enable permissions for the SystemInfo API in the config.xml file. http://tizen.org/api/systeminfo: Privilege to allow access to all features of the SystemInfo API. It is recommended that you edit config.xml file by using the Tizen IDE interface. config.xml -> Privileges -> click Add - to add the privileges Regards, Raghu Kona