Getting Orientation of Mobile Device via Javascript and detecting of device rotation on runtime.
In some cases it could be a goal to get change the text of a widget based on the mobile devices orientation. This could be done via Javascript and css. Follwong possible solutions:
In CSS. More details here https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
In Javascript with various method:
Here is some documentation :
https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
As we can read, it is not supported in Safari web browser for iOS.
In a new Project, in 2D canevas, I have added one Button and one Label named label-Result.
In home.js, we can create this function very similar to the one provided in documentation above.
$scope.screenOrientation = function()
{
var orientation = screen.msOrientation || (screen.orientation || screen.mozOrientation || {}).type;
if (orientation === "landscape-primary" || orientation === "landscape-secondary")
{
$scope.setWidgetProp("label-Result", "text", "landscape");
console.log("landscape");
}
else if (orientation === "portrait-primary" || orientation === "portrait-secondary")
{
$scope.setWidgetProp("label-Result", "text", "portrait");
console.log("portrait");
}
else if (orientation === undefined)
{
$scope.setWidgetProp("label-Result", "text", "The orientation API isn't supported in this browser");
console.log("The orientation API isn't supported in this browser :(");
}
}
The following observation when we test it :
In Preview, in Chrome web browser, in my workstation in Windows when clicking the button, result is always landscape
on Samsung S7 and S9+, in Vuforia View when clicking the button, result is always portrait. Vuforia View doesn't change screen position and rotating the mobile
In iPad 6 generation, in Vuforia View when clicking the button, result is The orientation API isn't supported in this browser. Vuforia View screen is changing when rotating tablet
So the JavaScript solution above has some problems which we can try to fix using another approach:
As mentioned the previous solution could be used only on start- but it will not detect a dyncamic change - e.g. rotate the device.This solution was tested and working in preview and on android. It seems that it does not work on IOS. ON HoloLens we have only landscape mode- so that this has no relvance.
For Preview mode and Android devices the following code is working fine:
//============================================
angular.element(document).ready(function() {
angular.element(window).on('resize', function(evt) {
//console.log("resized window evnt :");console.warn(evt);
var message = ''
var win = evt.path[0];
if(win.innerWidth > win.innerHeight){
// LANDSCAPE -> do something here call your landscapeFunc()
message = "current orientation is Landscape!"
}
else {
// PORTRAIT -> do something here your PortraitFunc()
message = "current orientation is Portrait!"
}
twx.app.fn.addSnackbarMessage(message,"twLogo");
});
})
//////////////////////
We need to pay attion here that we are in angular js environment and the windows variable seems to be static an is passed on system start - therefore it will not update dynamicaly. There is also an soluton for IOS which was verfied in a tests - e.g. it works fine (IPad 6 generation). Possibly this solution will work also on window -need to be testet. Following code:
function readDeviceOrientation() { //only for IOS
var orient="unknown"
switch (window.orientation) {
case 0:
orient= "Portrait"
break;
case 180:
orient= "Portrait Upside-down"// Portrait (Upside-down)
break;
case -90:
orient= "Landscape (Clockwise)"// Landscape (Clockwise)
break;
case 90:
orient= "Landscape (Counterclockwise)"// Landscape (Clockwise)// Landscape (Counterclockwise)
break;
}
twx.app.fn.addSnackbarMessage("IOS Orientation: "+orient,"twLogo");
}
And register the event on orientation change:
angular.element(document).ready(function () {
if($scope.app.isIOS()){
$scope.setWidgetProp('label-3', 'text', "called on IOS Device");
twx.app.fn.addSnackbarMessage("called on IOS Device","twLogo");
window.onorientationchange = readDeviceOrientation;}
}
});
Here is a function for testing of the current device -> please, check for more details this post( How to define functions to check the different mobile platforms ).
So, to go deeper, we can see this thread in stackoverflow.com :
https://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-d...
IOS Reference:
http://www.williammalone.com/articles/html5-javascript-ios-orientation/#:~:text=The%20JavaScript%3A,%3D%20%22LANDSCAPE%20%22%20%2B%20window.
View full tip
