Making a 2D Image or a 3D image visible at the beginning of a particular step from a sequence.

[Ace_Rothstein]

I have made a Sequence in Creo Illustrate of about 10 steps. I have also made a button in Vuforia Studio and the binding property for that button is play. So whenever I click on that button, the steps from the sequence will be played one at a time. I want to make a 2D Image or a 3D Image visible on the 5th step. And automatically make it disappear at the end of the 5th step. Is there some kind of a code to trigger a function at that particular step.

[RolandRaytchev]

Hi @Ace_Rothstein ,

I think, one possible way that you can manage this by using the step completed event and here a possible example which should demonstrate this approach:

/=============================================
$scope.$on('stepcompleted', function(evt, arg1, arg2, arg3) { 
 var parsedArg3 = JSON.parse(arg3);
  //console.warn(arg3)
console.log("stepcompleted stepNumber="+parsedArg3.stepNumber + "nextStep="+parsedArg3.nextStep);
if(parseInt(parsedArg3.stepNumber) == 5){ // the step 5 finished also need to deactivate 
                     // the widget
  $scope.$applyAsync(()=>{ //set a praramter which is linked to property
                         $scope.app.params['enabled']=true;
                            // or below setting the property directly
                         // $scope.setWidgetProp("image-1", 'visible',false) 
                           
                         })  }
//=======
if(parseInt(parsedArg3.stepNumber) == 4){ // this is the previous step where 
                       // we need to activate the image for the 5 step
  $scope.$applyAsync(()=>{ //set a praramter which is linked to property
                         $scope.app.params['enabled']=false;
                            // or below setting the property directly
                         // $scope.setWidgetProp("image-1", 'visible',true) 
                           
                         })  } 
}); 
//============================================= 

So, means in the event step complete we will check the step number. When the step number ()  is 4 then we will activate the image widget (or 3D Image widget) making it visible

When the step(parsedArg3.stepNumber) number is 5 - completed means we need to make invisible the image widget again. 

By default  on start the visibility of the image widget should be false.

You can set the image property directly or alternative set a parameter which has a property binding   to a widget property / or to many widget properties

[Ace_Rothstein]

Thank you for a prompt reply, this does work. I just have one concern, I have multiple figures made in Creo Illustrate, for example 4 figures. Now when I entered the above mentioned code, the 3D Image was getting visible for the 5th step of every figure. I want to restrict it the sequence of figure 1 for the same model. Is it possible?

[sebben · Accepted solution]

Hi,

one Solution is to write two functions like this:

$scope.checkStep = function(){
  if($scope.view.wdg['model']['currentStep'] == 5){
    $scope.view.wdg["3DImage-1"].visible = true;
  }
}

$scope.hideImage = function(){
  $scope.view.wdg["3DImage-1"].visible = false;
}

Then call checkStep(); in the Play Started event of your model and hideImage(); in Play Stopped.

Make sure to change the widget names in the code above.

[Ace_Rothstein]

Thank you for a prompt reply. Your solution works! I just have one concern, I have multiple figures made in Creo Illustrate, for example 4 figures. Now when I entered the above mentioned code, the 3D Image was getting visible for the 5th step of every figure. I want to restrict it the sequence of figure 1 for the same model. Is it possible?

[sebben]

You can add another if statement like this:

$scope.checkStep = function(){
  console.log($scope.view.wdg['model']['sequence']);
  if($scope.view.wdg['model']['sequence'] == 'app/resources/Uploaded/Filename/l-Creo%203D%20-%20Figure1.pvi'){
  	if($scope.view.wdg['model']['currentStep'] == 2){
    	$scope.view.wdg["3DImage-1"].visible = true;
  	}
  }
}

The console.log will tell you which path you have to enter. It will be something like in this example.

[Ace_Rothstein]

Works great! Thanks a lot. Really appreciate your help.