Skip to main content
R
RK_988041812-Amethyst
12-Amethyst
November 20, 2023
Question

Trouble with Animation with buttons in Published AR

  • November 20, 2023
  • 2 replies
  • 975 views

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

A
AlexK15-Moonstone
15-Moonstone
November 20, 2023

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

R
RolandRaytchev21-Topaz I
21-Topaz I
November 20, 2023

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"
...

 

 

 

Terms & ConditionsCookie settingsAccessibility statement