Skip to main content
1-Visitor
September 22, 2020
Solved

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

  • September 22, 2020
  • 2 replies
  • 2677 views

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.

Best answer by sebben

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.

2 replies

21-Topaz I
September 22, 2020

Hi @Ace_Rothstein_315546 ,

 

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

 

1-Visitor
September 22, 2020

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?

sebben14-AlexandriteAnswer
14-Alexandrite
September 22, 2020

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.

1-Visitor
September 22, 2020

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?

14-Alexandrite
September 22, 2020

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.