Community Tip - Learn all about PTC Community Badges. Engage with PTC and see how many you can earn! X
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;
};
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"
...