cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Define functions to check the different mobile platforms:

No ratings

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");
    
    });
 

 

Version history
Revision #:
1 of 1
Last update:
‎06-05-2020 11:51 AM
Updated by:
 
Labels (3)
Contributors
Comments

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');
}