Skip to main content
R
RK_988041812-Amethyst
12-Amethyst
June 8, 2022
Question

Vuforia project for multiple options

  • June 8, 2022
  • 2 replies
  • 1495 views

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 

2 replies

J
JG_856828811-Garnet
11-Garnet
June 9, 2022

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

JG_8568288_0-1654760417460.png

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

R
RK_988041812-AmethystAuthor
12-Amethyst
June 9, 2022

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 

J
JG_856828811-Garnet
11-Garnet
June 9, 2022

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. 

 

JG_8568288_0-1654771630537.png

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');

 

R
RK_988041812-AmethystAuthor
12-Amethyst
June 9, 2022

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 

Terms & ConditionsCookie settingsAccessibility statement