Skip to main content
21-Topaz I
June 5, 2020

Define functions to check the different mobile platforms:

  • June 5, 2020
  • 1 reply
  • 1323 views

How to define functions to check the different mobile platforms:

  • Checking  if the Preview mode is used:
$scope.app.isPreview=function() {// is in Preview
 if(window.twx.app.isPreview()) return true;
 return false; } // any other device type
  •  Checking if the device called the Studio project is IOS device:
//======================================
$scope.app.isIOS=function() { 
 if(!window.twx.app.isPreview()) // is not in Preview
 if(ionic.Platform.isIOS()) //and is NOT called on IOS = means Android mode detected
 return true;
 return false; }
//======================================
  • Checking if the Studio Project was called on Android device :
//======================================
$scope.app.isAndroid=function() { 
 if(!window.twx.app.isPreview()) // is not in Preview
 if(/android/i.test(navigator.userAgent || navigator.vendor || window.opera) ) // is Android
 return true;
 return false; }
//======================================
  • Checking if the Studio Project was called on Windows Phone :
//======================================
$scope.app.isWinPhone=function() { 
 if(!window.twx.app.isPreview()) // is not in Preview
 if(/windows phone/i.test(navigator.userAgent || navigator.vendor || window.opera) ) // is Android
 return true;
 return false; }
//======================================

 or checking if device is a windows system (similiar)

//======================================
$scope.app.isWindow=function() { 
 if(!window.twx.app.isPreview()) // is not in Preview
 if( navigator.platform.indexOf("Win32") >- 1) // is this WindowsPhone
 return true;
 return false; }
//========================================

 

The Vuforia Studio is based on cordova so that the most component works for all devices , but in some cases we can use some platfrom specific api. In this case it is important to check on which device the Vuforia app is started to select the platform specific API. Here an example:

//========================================
angular.element(document).ready(function () {
 console.warn($scope)
 console.warn($rootScope)
 

if($scope.app.isPreview()) 
 { $scope.setWidgetProp('label-3', 'text', "PREVIEW MODE");
 twx.app.fn.addSnackbarMessage("PREVIEW MODE","twLogo"); }
else 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;}
else if($scope.app.isAndroid()) {
 $scope.setWidgetProp('label-3', 'text', "called on Android Device");
 twx.app.fn.addSnackbarMessage("called on Android Device","twLogo"); }
else if($scope.app.isWindow()) {
 $scope.setWidgetProp('label-3', 'text', "called on Window Plattform");
 alert("called on Windows Phone Device"); }

 //$scope.setWidgetProp('label-3', 'text', navigator.platform.toString())
if($scope.app.isPreview()) 
 twx.app.fn.addSnackbarMessage("PREVIEW MODE","twLogo"); 
 else
 {
 
 $timeout(twx.app.fn.addSnackbarMessage("navigator.platform="+navigator.platform,"twLogo"),3000); //after 3 sec
 
 $timeout(twx.app.fn.addSnackbarMessage("getMobileOperatingSystem()="+getMobileOperatingSystem(),"twLogo"),6000); //after 5 sec
 
 $timeout(twx.app.fn.addSnackbarMessage("getPlatform()="+getPlatform(),"twLogo"),9000); //after 5 sec

 }

 //===========================================================
 angular.element(window).on('resize', function(evt) {
 console.log("resized window evnt : at Time ::"+$scope.getTime());
 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!"
 $scope.$applyAsync();
 }
 else {
 // LANDSCAPE -> do something here your PortraitFunc()
 message = "current orientation is Portrait!" 
 $scope.app.params['myClass']='row3'
 $scope.$applyAsync();
 }
 twx.app.fn.addSnackbarMessage(message,"twLogo");
 
 });
 

 

1 reply

16-Pearl
December 11, 2020

Thanks, this is a great functionality. You can also use this to copy something to the clipboard depending on the operating system:

if (OSName=="Windows"){
var el = document.createElement('textarea');
// Set value (string to be copied)
el.value = str;
el.setAttribute('readonly', '');
el.style = {
position: 'absolute', left: '-9999px'};
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
console.log("copied to windows");
}
if (OSName=="MacOS"){
var oldContentEditable = str.contentEditable,
oldReadOnly = str.readOnly,
range = document.createRange();
str.contentEditable = true;
str.readOnly = false;
range.selectNodeContents(str);
var s = window.getSelection();
s.removeAllRanges();
s.addRange(range);
str.setSelectionRange(0, 999999);
// A big number, to cover anything that could be inside the element.
str.contentEditable = oldContentEditable;
str.readOnly = oldReadOnly;
document.execCommand('copy');
}