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

Community Tip - Stay updated on what is happening on the PTC Community by subscribing to PTC Community Announcements. X

Trouble with Animation with buttons in Published AR

RK_9880418
12-Amethyst

Trouble with Animation with buttons in Published AR

Hi,

 

I'm creating an AR experience on mobile. In the preview, the sequences play with a single click, but when I publish and view them on mobile devices, the animations require two clicks to activate. Any idea why this might be happening?"

 

$scope.sequence1 = function () {


$scope.view.wdg['model-1']['sequence'] = 'app/resources/Uploaded/Texler_26-05-2023/l-Creo 3D - Sidepanel.pvi';
  
   $timeout (function () {
        if ($scope.view.wdg ['model-1'] ['sequence'] == 'l-Creo 3D - Sidepanel.pvi')
            $scope.setWidgetProp ("3DImage-2", 'visible', true);
        else
            $scope.setWidgetProp ("3DImage-1", 'visible', false);
        $scope.$applyAsync ();
    },50);

$scope.$on('sequenceloaded', function(event) {
  twx.app.fn.triggerWidgetService('model-1', 'play');

}); 
   $scope.view.wdg['3DImage-1'].visible=false;
  $scope.view.wdg['3DImage-2'].visible=true;
  $scope.view.wdg['3DImage-3'].visible=false;
  $scope.view.wdg['3DImage-4'].visible=false;
    $scope.view.wdg['3DImage-5'].visible=false;
    $scope.view.wdg['3DImage-6'].visible=false;
   $scope.view.wdg['button-2']['margin'] = '5px';
  
  $scope.view.wdg['toggleButton-2']['pressed'] = true;
};


$scope.sequence2 = function (step) {
  

$scope.view.wdg['model-1']['sequence'] = 'app/resources/Uploaded/Texler_26-05-2023/l-Creo 3D - Sheet.pvi';
  $timeout (function () {
        if ($scope.view.wdg ['model-1'] ['sequence'] == 'l-Creo 3D - Sheet.pvi')
            $scope.setWidgetProp ("3DImage-3", 'visible', true);
        else
            $scope.setWidgetProp ("3DImage-2", 'visible', false);
        $scope.$applyAsync ();
    },50);
  $scope.$on('sequenceloaded', function(event) {

// call a widget service to trigger the model to play the first step for the given sequence
  twx.app.fn.triggerWidgetService('model-1', 'play');

});
   $scope.view.wdg['3DImage-2'].visible=false;
  $scope.view.wdg['3DImage-3'].visible=true;
  $scope.view.wdg['3DImage-1'].visible=false;
  $scope.view.wdg['3DImage-4'].visible=false;
  $scope.view.wdg['3DImage-5'].visible=false;
  $scope.view.wdg['3DImage-6'].visible=false;
  $scope.view.wdg['button-6']['margin'] = '5px';
  };

$scope.sequence3 = function () {



$scope.view.wdg['model-1']['sequence'] = 'app/resources/Uploaded/Texler_26-05-2023/l-Creo 3D - Access Cover.pvi';


 //sequenceloaded event listener triggers when the sequence property is updated
$scope.$on('sequenceloaded', function(event) {

// call a widget service to trigger the model to play the first step for the given sequence
  twx.app.fn.triggerWidgetService('model-1', 'play');
});
   $timeout (function () {
        if ($scope.view.wdg ['model-1'] ['sequence'] == 'l-Creo 3D - Access Cover.pvi')
            $scope.setWidgetProp ("3DImage-4", 'visible', true);
        else
            $scope.setWidgetProp ("3DImage-3", 'visible', false);
        $scope.$applyAsync ();
    },50);
  $scope.view.wdg['3DImage-1'].visible=false;
  $scope.view.wdg['3DImage-2'].visible=false;
  $scope.view.wdg['3DImage-3'].visible=false;
  $scope.view.wdg['3DImage-4'].visible=false;
  
    $scope.view.wdg['3DImage-5'].visible=false;
    $scope.view.wdg['3DImage-6'].visible=false;
  $scope.$on('sequenceloaded', function(event) {
  twx.app.fn.triggerWidgetService('model-1', 'play');

}); 
  
           };



$scope.sequence4 = function () {

//$scope.reset1();

$scope.view.wdg['model-1']['sequence'] = 'app/resources/Uploaded/Texler_26-05-2023/l-Creo 3D - UV Cover.pvi';
  
  
$scope.$on('sequenceloaded', function(event) {

// call a widget service to trigger the model to play the first step for the given sequence
  twx.app.fn.triggerWidgetService('model-1', 'play');

});
   $timeout (function () {
        if ($scope.view.wdg ['model-1'] ['sequence'] == 'l-Creo 3D - Sludge_5Fcollector.pvi')
            $scope.setWidgetProp ("3DImage-6", 'visible', true);
        else
            $scope.setWidgetProp ("3DImage-4", 'visible', false);
        $scope.$applyAsync ();
    },50);
  $scope.view.wdg['3DImage-2'].visible=false;
  $scope.view.wdg['3DImage-3'].visible=false;
  $scope.view.wdg['3DImage-1'].visible=false;
  $scope.view.wdg['3DImage-4'].visible=false;
  $scope.view.wdg['3DImage-5'].visible=false;
  $scope.view.wdg['3DImage-6'].visible=true;
};

$scope.sequence5 = function () {
  

$scope.view.wdg['model-1']['sequence'] = 'app/resources/Uploaded/Texler_26-05-2023/l-Creo 3D - Sludge_5Fcollector.pvi';
  
  $scope.$on('sequenceloaded', function(event) {

// call a widget service to trigger the model to play the first step for the given sequence
  twx.app.fn.triggerWidgetService('model-1', 'play');

});
  $timeout (function () {
        if ($scope.view.wdg ['model-1'] ['sequence'] == 'l-Creo 3D - Sludge_5Fcollector.pvi')
            $scope.setWidgetProp ("3DImage-5", 'visible', true);
        else
            $scope.setWidgetProp ("3DImage-4", 'visible', false);
        $scope.$applyAsync ();
    },50);
  $scope.view.wdg['3DImage-2'].visible=false;
  $scope.view.wdg['3DImage-3'].visible=false;
  $scope.view.wdg['3DImage-1'].visible=false;
  $scope.view.wdg['3DImage-4'].visible=false;
  $scope.view.wdg['3DImage-5'].visible=true;
  $scope.view.wdg['3DImage-6'].visible=false;
};
  
$scope.reset1 = function () {
  
 $scope.$applyAsync(()=>{angular.element(document.getElementById('model-1')).scope().reset();}); 
  $scope.view.wdg['3DImage-2'].visible=false;
  $scope.view.wdg['3DImage-3'].visible=false;
  $scope.view.wdg['3DImage-1'].visible=false;
  $scope.view.wdg['3DImage-4'].visible=false;
  $scope.view.wdg['3DImage-5'].visible=false;
   $scope.view.wdg['3DImage-6'].visible=false;
}


  $scope.sequence7 = function () {
     $scope.$applyAsync(()=>{angular.element(document.getElementById('model-1')).scope().reset();});
   $scope.view.wdg['3DImage-2'].visible=false;
  $scope.view.wdg['3DImage-3'].visible=false;
  $scope.view.wdg['3DImage-1'].visible=true;
  $scope.view.wdg['3DImage-4'].visible=false;
  $scope.view.wdg['3DImage-5'].visible=false;
   $scope.view.wdg['3DImage-6'].visible=false;
  };

 

 

 

@CatMcc @tmccombie @AlexK 

2 REPLIES 2
AlexK
15-Moonstone
(To:RK_9880418)

Hi,

 

Is there enough time for the sequence to load before the play command gets triggered? Maybe it needs async or a timeout, even with the sequence loaded listener.

 

Do you need to write the whole Illustration path for a mobile experience?

app/resources/Uploaded/Texler_26-05-2023/

 I usually just load it with the PVI name:

$scope.setWidgetProp( 'model1', 'sequence', 'l-Creo 3D - Figure 2.pvi');

 

Best wishes

 

Alex

my guess is that your call the 

 

 

$scope.$on('sequenceloaded', function(event) {

// call a widget service to trigger the model to play the first step for the given sequence
  twx.app.fn.triggerWidgetService('model-1', 'play');
});

 

 

inside the click function. so possibly you can add it directly in the <View>.js e.g.  Home.js

 

 

// $scope, $element, $attrs, $injector, $sce, $timeout, $http, $ionicPopup, and $ionicPopover services are available
$scope.$on('sequenceloaded', function(event) {

// call a widget service to trigger the model to play the first step for the given sequence
  twx.app.fn.triggerWidgetService('model-1', 'play');
});

 

 

So far I see this was embedded always in the function call - inside the play sequence functions which should be called via click button.

What I suspect - that  in this particular implementation you will need 2 time click for the first play but the second play should work with one click , but also possibly not ... if  is busy with the setting of the event trigger because each function will try to set it again. There could be some difference in the behavior of preview and device mode.

In case that you need some synchronization  - so means that  e.g. the play should fire  only if some variable is set and possibly some delay

 

 

$scope.$on('sequenceloaded', function(event) {
let delay =500
if($scope.app.PLAY)
   $timeout(()=>{twx.app.fn.triggerWidgetService($scope.app.MODELWIDGET, 'play');},delay)

});

 

 

where in you call function you will set the play option to true or false and possibly if you need the model widget if you have more then one modelwidget

 

 

...
$scope.app.PLAY=true
$scope.app.MODELWIDGET="model-1"
...

 

 

 

Announcements

Top Tags