Community Tip - Did you get called away in the middle of writing a post? Don't worry you can find your unfinished post later in the Drafts section of your profile page. X
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:
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 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 :
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 ).