Skip to main content
1-Visitor
March 28, 2019
Solved

Adding labels or images at the start of a sequence step Voforia Studio

  • March 28, 2019
  • 1 reply
  • 1556 views

I would like to add a 3D label or 3D image of an arrow that pops up right before a step of a sequence plays. My model has a sequence that shows assembly steps from different angles of the model and you can't see all of the steps from one view. I want to guide the user to rotate the model or walk around the model to a specific view and then press play to see the sequence from that view. Is this possible?  Also would it be possible to then hide the arrow once the sequence plays and then have another arrow appear at the start of a new step? Thanks.

Best answer by tmccombie

Yes this is definitely possible. You can achieve this a few ways. I did the following to get it to work:

 

  1. Create a button and bind the Click event to the 'Play' Service of your model
  2. Create 2  new Application Parameters within Studio.
    • I called mine 'currentStep' and 'hide'. 
  3. Bind the Current Step property of your model to your new app param currentStep as well as set app param hide to 0
  4. Create the labels or images that you want to use for your experience and ensure the 'visible' property is not selected.
    • I created a 3D Label and a 3D Image for this
  5. Add the below code to your home.js file:
    • $scope.showNav = function(){
        
          switch($scope.app.params.currentStep){
              case '1':

              $scope.setWidgetProp('3DLabel-1','visible', true);
              break;

              case '2':

              $scope.setWidgetProp('3DImage-1','visible', true);
              break;
              
            default:
              
              console.log('in show Nav');
              
          }

        $scope.app.params.hide++;
      }


      $scope.hideNav = function(){
        
          switch($scope.app.params.hide){
              
              case 1:

              $scope.setWidgetProp('3DLabel-1','visible', false);
              break;

              case 2:

              $scope.setWidgetProp('3DImage-1','visible', false);
              break;
              
            default:
              console.log('in hide Nav');
          }

      }

  6. Call showNav() on the Play Stopped event of the model and hideNav() on the Play Started event

 

 

 

 

 

1 reply

tmccombie21-Topaz IAnswer
21-Topaz I
March 28, 2019

Yes this is definitely possible. You can achieve this a few ways. I did the following to get it to work:

 

  1. Create a button and bind the Click event to the 'Play' Service of your model
  2. Create 2  new Application Parameters within Studio.
    • I called mine 'currentStep' and 'hide'. 
  3. Bind the Current Step property of your model to your new app param currentStep as well as set app param hide to 0
  4. Create the labels or images that you want to use for your experience and ensure the 'visible' property is not selected.
    • I created a 3D Label and a 3D Image for this
  5. Add the below code to your home.js file:
    • $scope.showNav = function(){
        
          switch($scope.app.params.currentStep){
              case '1':

              $scope.setWidgetProp('3DLabel-1','visible', true);
              break;

              case '2':

              $scope.setWidgetProp('3DImage-1','visible', true);
              break;
              
            default:
              
              console.log('in show Nav');
              
          }

        $scope.app.params.hide++;
      }


      $scope.hideNav = function(){
        
          switch($scope.app.params.hide){
              
              case 1:

              $scope.setWidgetProp('3DLabel-1','visible', false);
              break;

              case 2:

              $scope.setWidgetProp('3DImage-1','visible', false);
              break;
              
            default:
              console.log('in hide Nav');
          }

      }

  6. Call showNav() on the Play Stopped event of the model and hideNav() on the Play Started event

 

 

 

 

 

aoleary1-VisitorAuthor
1-Visitor
March 30, 2019

Thank you very much. It's works great.