Skip to main content
Y
Yasar1-Visitor
1-Visitor
June 3, 2019
Solved

Turn 3D-Picture On and Off at a specific Step

  • June 3, 2019
  • 1 reply
  • 1359 views

Hi Guys,

I'm new to Vuforia Studio so i try to figure out, how some mechanics work.

What I want to do is, I Want a 3D-Picture turn on, at for example by Step 5 and turn off by Step 8.

 

I already can select a sequence from a 2D-Select Widget, press play and see the animations.

$scope.setsequenceList = function(){
 $scope.app.params.sequenceList = [
 {
 "display":"Item1",
 "value":"app/resources/Uploaded/l-Creo%203D%20-%20Sequence%202.pvi"
 }
 ] 
}

$scope.setsequenceList();

Now only my 3D-Picture "Warning" is missing. I already found some guides but i'm not able to transfer the solutions into my problem (Beginner Level with Coding).

 

https://community.ptc.com/t5/Studio/Play-specific-step-of-PVI-sequence-at-studio/m-p/552906#M3362

and

https://community.ptc.com/t5/Studio/How-to-turn-3D-image-files-on-and-off-when-using-a-2D-select/m-p/611996

 

If you can help, I would appreciate 🙂

 

 

Best answer by ytella

Hi @Yasar ,

 

One of the ways to implement this scenario is as follows:

  • Drag and drop a 3DImage on to the canvas
  • Add the resource by clicking on the + sign next to Resource Property
  • Uncheck the Visible property of the 3DImage
  • Copy and paste the below contents in the Home.js

    • $scope.$on('$ionicView.afterEnter', function(event) {
      let view = event.targetScope.view;
      console.log('viewContentLoaded', view);

      $scope.$watch('view.wdg["model-1"].currentStep', function (stepVal, oldVal) {
      console.log('model step changed', stepVal);
      $timeout(function () {
      $scope.changeImage(stepVal);
      }, 10);
      });

      });

      $scope.changeImage = function (step) {
      if (step == 5)
      {
      $scope.view.wdg['3DImage-1'].visible = true;
      }
      if (step == 😎
      {
      $scope.view.wdg['3DImage-1'].visible = false;
      }

      }

    • This will automatically call the changeImage function and will show/hide the image when the if condition is met

Hope this helps!

1 reply

Y
ytella17-PeridotAnswer
17-Peridot
June 3, 2019

Hi @Yasar ,

 

One of the ways to implement this scenario is as follows:

  • Drag and drop a 3DImage on to the canvas
  • Add the resource by clicking on the + sign next to Resource Property
  • Uncheck the Visible property of the 3DImage
  • Copy and paste the below contents in the Home.js

    • $scope.$on('$ionicView.afterEnter', function(event) {
      let view = event.targetScope.view;
      console.log('viewContentLoaded', view);

      $scope.$watch('view.wdg["model-1"].currentStep', function (stepVal, oldVal) {
      console.log('model step changed', stepVal);
      $timeout(function () {
      $scope.changeImage(stepVal);
      }, 10);
      });

      });

      $scope.changeImage = function (step) {
      if (step == 5)
      {
      $scope.view.wdg['3DImage-1'].visible = true;
      }
      if (step == 😎
      {
      $scope.view.wdg['3DImage-1'].visible = false;
      }

      }

    • This will automatically call the changeImage function and will show/hide the image when the if condition is met

Hope this helps!

    Y
    Yasar1-VisitorAuthor
    1-Visitor
    June 4, 2019

    @ytella Thank you very much!

    It worked perfectly 🙂

     

     

     

    Terms & ConditionsAccessibility statement