Vuforia project for multiple options

[RK_9880418]

I’m trying vuforia project with following option

Having 3 Animation and placing 4+ 3D images on the model.

Step-1: When user is opening the model in Vuforia view, they have to see the Image 1, if they click the Image-1 they have to see an Animation 1 and Image-2, Image-3 and Image-4. Image-1 has to disappear .

Step-2: If user click on Image -2, it should show the animation-2 and Image-5 (Image-2, Image-3 and Image-4 can hide)

Step-3: If user click on Image-5, it should close and show again Image-2, Image-3 and Image-4 (As step-1, without animation) Same way I need Image-3 and Image-4 has to show Image-6 and Image-7 with Step-3 options.

How can I write a script?

@tmcrae @gtheo 

[JG_8568288]

For the visibilities you could use bindings, but I would recommend solving this with a switch in js

To change the step you need $scope.setWidgetProp('model-1', 'currentStep', stepnr); });

Just add playStep() with the correct number to you 3DImage

and add the code to your home.js:

$scope.playStep = function (stepnr) {

switch (stepnr) {
case 1:
{
$scope.view.wdg['3DImage-1'].visible=false;
$scope.view.wdg['3DImage-2'].visible=true;
$scope.view.wdg['3DImage-3'].visible=true;
}
break;

case 2:
{
}
break;

}

$scope.$applyAsync(() => {
$scope.setWidgetProp('model-1', 'currentStep', stepnr); });
$timeout(function () {
angular.element(document.getElementById('model-1')).scope().play();
}, 500);
}

of course you need to fill up the cases. 

Regards

[RK_9880418]

Thanks, visible option is working fine. But, How can i call the animation?. I used below code

// $scope, $element, $attrs, $injector, $sce, $timeout, $http, $ionicPopup, and $ionicPopover services are available

$scope.setWidgetProp('model-1', 'currentStep', 'stepnr');
$scope.playStep = function (stepnr) {

switch (stepnr) {
case 1:
{
$scope.view.wdg['3DImage-1'].visible=false;
$scope.view.wdg['3DImage-2'].visible=true;
$scope.view.wdg['3DImage-3'].visible=true;
}
break;

case 2:
{
$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=true;
}
break;
case 3:
{
$scope.view.wdg['3DImage-1'].visible=false;
$scope.view.wdg['3DImage-2'].visible=false;
$scope.view.wdg['3DImage-3'].visible=true;
$scope.view.wdg['3DImage-4'].visible=false;
$scope.view.wdg['3DImage-5'].visible=true;
}

}

$scope.$applyAsync(() => {
$scope.setWidgetProp('model-1', 'currentStep', stepnr); });
$timeout(function () {
angular.element(document.getElementById('model-1')).scope().play();
}, 500);
}

$scope.hide = function(){
$scope.view.wdg['3DImage-4']['visible'] = false;
$scope.view.wdg['3DImage-2']['visible'] = true;
$scope.view.wdg['3DImage-3']['visible'] = true;
}

@JG_8568288 

[JG_8568288]

The animation is in called in a timeout and starts shortly (500ms) after the step has been set. Please make sure, the model name is correct. 

I haven't tried it in hololens, only in preview. Does it work here?

Maybe you will have to try this instead: 

$scope.$root.$broadcast('app.view["Home"].wdg["model-1"].svc.play');

[RK_9880418]

Yes, The "model-1" is correct, but still the animation is not working. I have three figures, each has three animations. how can i assign those to individual image.

@JG_8568288