Skip to main content
16-Pearl
November 7, 2022
Solved

Displaying multiple 3D Images after a particular interval in Vuforia Studio

  • November 7, 2022
  • 1 reply
  • 2226 views

Hi,

I am trying to show 80 to 90 3D-images one after the other after a particular interval using timeout function in Vuforia Studio(Mobile Experience). It is visible in the preview window without any issue but sometimes its visible & most of the times not in Vuforia View. I am using iPad Pro (11 inch-3 Generation) with latest Vuforia View & Vuforia Studio. Please help me out with this as soon as possible.

 

Thanks & Regards,

Aditya Gupta

Best answer by RolandRaytchev

Hi@Aditya1702 ,

I tested the interval function on IOS , iPad Pro 11 and it was working on some simple interval function showing gif picture in a loop from the Unload directory. I  did not check the case where the data is loaded dynamically from server.

I observed that on iPad Pro 11 there is instability (crash of the view) if you try to set the src property of 3DImage widget to non existing picture. So possibly here you need to pay attention if the picture exist or try to handle some exception. But so far you set always a valid picture it works fine.

In preview it has no issue so possibly you can debug it first to see if there is an error that a picture is not available:

 

 

$scope.NUMB_PICTURES=22
var AnimDelta=800;
let global_count_int=0 
$scope.MyInterval=0;
//----------------------------------------------------------------------------------
angular.element(document).ready(function() { //$timeout(()=>{$scope.setRot(45);},5000) 

/////////////////////////////////////////////////////////////////////
$scope.setMyInterval()
});

/////////////////////////////////////////////////////////////////////


$scope.setMyInterval=function(){
 $scope.MyInterval=$interval( function(){ 
 
 if( global_count_int >= $scope.NUMB_PICTURES ) global_count_int=1;
 else
 {global_count_int++;
 $scope.app.params.Count=global_count_int}
 var url_source= "app/resources/Uploaded/door_type_"+global_count_int+".gif";
 
		 $scope.setWidgetProp('3DImage-1','src',url_source); 
 console.info("Called :: $scope.setWidgetProp('3DImage-1','src','"+url_source+"');") 
		 $scope.$applyAsync()
 
 
 
 }, AnimDelta);}
/////////////////////////////////////////////////////////////////////
$scope.stopMyInterval=function()
{
if($scope.MyInterval!=undefined) $interval.cancel($scope.MyInterval);
}
//-----------------------------------------------------------------------
$scope.startMyInterval=function()
{
if($scope.MyInterval!=undefined) $interval.cancel($scope.MyInterval);
 AnimDelta=$scope.app.params.AnimDelta
 $scope.setMyInterval();
 $scope.$applyAsync()
}

 

 

so in preview looks like this

2022-11-08_12-54-38.gif

I also attached the project , so you can test on IOS iPad pro.

1 reply

21-Topaz I
November 8, 2022

Hi@Aditya1702 ,

I tested the interval function on IOS , iPad Pro 11 and it was working on some simple interval function showing gif picture in a loop from the Unload directory. I  did not check the case where the data is loaded dynamically from server.

I observed that on iPad Pro 11 there is instability (crash of the view) if you try to set the src property of 3DImage widget to non existing picture. So possibly here you need to pay attention if the picture exist or try to handle some exception. But so far you set always a valid picture it works fine.

In preview it has no issue so possibly you can debug it first to see if there is an error that a picture is not available:

 

 

$scope.NUMB_PICTURES=22
var AnimDelta=800;
let global_count_int=0 
$scope.MyInterval=0;
//----------------------------------------------------------------------------------
angular.element(document).ready(function() { //$timeout(()=>{$scope.setRot(45);},5000) 

/////////////////////////////////////////////////////////////////////
$scope.setMyInterval()
});

/////////////////////////////////////////////////////////////////////


$scope.setMyInterval=function(){
 $scope.MyInterval=$interval( function(){ 
 
 if( global_count_int >= $scope.NUMB_PICTURES ) global_count_int=1;
 else
 {global_count_int++;
 $scope.app.params.Count=global_count_int}
 var url_source= "app/resources/Uploaded/door_type_"+global_count_int+".gif";
 
		 $scope.setWidgetProp('3DImage-1','src',url_source); 
 console.info("Called :: $scope.setWidgetProp('3DImage-1','src','"+url_source+"');") 
		 $scope.$applyAsync()
 
 
 
 }, AnimDelta);}
/////////////////////////////////////////////////////////////////////
$scope.stopMyInterval=function()
{
if($scope.MyInterval!=undefined) $interval.cancel($scope.MyInterval);
}
//-----------------------------------------------------------------------
$scope.startMyInterval=function()
{
if($scope.MyInterval!=undefined) $interval.cancel($scope.MyInterval);
 AnimDelta=$scope.app.params.AnimDelta
 $scope.setMyInterval();
 $scope.$applyAsync()
}

 

 

so in preview looks like this

2022-11-08_12-54-38.gif

I also attached the project , so you can test on IOS iPad pro.

16-Pearl
November 14, 2022

Hi @RolandRaytchev ,

The images were uploaded into resources and from there I was calling them using the below mentioned code,

 

$timeout(function(){
      $scope.setWidgetProp("3DImageSpark","src","app/resources/Uploaded/s1.png");
},2000)

$timeout(function(){
      $scope.setWidgetProp("3DImageSpark","src","app/resources/Uploaded/s2.png");
},2100)

18-Opal
January 11, 2023

As I recall, there are some limits on image size for iOS (that don't exist for desktop browsers), which might be why the preview works OK but your iPad doesn't. If some of your images are larger than others, maybe try rescaling the larger ones to match the size of the smaller ones and see if that helps.

 

This thread goes into more detail: https://community.ptc.com/t5/Vuforia-Studio/3D-images-are-not-visible-in-vuforia-view-IOS-devices-only/m-p/711895#M9376