Link function to a specific step from Illustrate sequence

[micah]

I want to link a case inside a switch function to a step created in Creo Illustrate.

What's the javascript to achieve this?

[RolandRaytchev]

Hi @micah ,

I am not sure 100% what you meant to link a step. So I belive

1.)you need an event wihc is fired when a particular step is called/ started  to track this event.

2.) you need to idetify the correct step- by number or name... etc.

So the best way to use this is register the stepstarted and stepcompleted event to check when a step is started or finished. The event callback will pass some argument where you can check which step is currently called:

//==================================
$scope.$on('stepstarted', function(evt, arg1, arg2, arg3) { 
 var parsedArg3 = JSON.parse(arg3);

  
  console.log("stepName="+parsedArg3.stepName);// this is the stepName
  console.log("stepDescription="+parsedArg3.stepDescription);//step description
  console.log("nextStep="+parsedArg3.nextStep);// info about the next step

  console.warn("Event: " + evt.name + " arg3 fields, name: " + parsedArg3.stepName + " duration(ms): " + parsedArg3.duration  + " total steps: " + parsedArg3.totalSteps  + " step desc: " + parsedArg3.stepDescription );
//this will paly for step n the  seq_step_n.mp3 from the Uploaded project folder
$scope.app.playAudio('app/resources/Uploaded/seq_step_'+parsedArg3.stepNumber+'.mp3');
if(stepNumber ==3) console.log("step 3 was started!)
}); 

Creo Illustrate you can define an acknowledgment for s step and this will call the event. If you have only one definition for particular step this will be called only for this step.

[micah]

I created a sequence with Creo Illustrate with several steps. But when I bind a button to play the sequence of the model widget, it plays the entire sequence. I want to be able to link the button to play a specific step animation within the sequence.

[RolandRaytchev]

OK, understand, you want to call from code for specific sequence a  certain step. You can use some function like this below:

//////////////////////////////////
//definition of the function
$scope.app.playModelStep = function (sequence,modelName,step_number,play) {
 
 //sequnece -sequnece name e.g. TestFigure1 - as shown in UI
//modelName - model name e.g. model-1 widget
//step_number - set this number to current step
//play   true/false execute play for the model
//================================================ 
   $timeout(function () {
  $scope.$applyAsync(()=>{$scope.setWidgetProp(modelName, 'sequence',  '');});
  },50);
  $timeout(function () {
  $scope.$applyAsync(()=>{$scope.setWidgetProp(modelName, 'sequence',  'resources/Uploaded/'+sequence);});     
  },50);
  $timeout(function () {    
  $scope.$applyAsync(()=>{$scope.setWidgetProp(modelName, 'currentStep', parseInt(step_number));});
 if(play)   //check if play should be applyed 
 $timeout(function () {angular.element(document.getElementById(modelName)).scope().play();  }, 100)
   //angular.element(document.getElementById(modelName)).scope().play(); }, 100);
                      }
           , 500);
};

and the call then from anywhere in your code (also from a case construct)  it could  looks like:

...
$scope.app.playModelStep("Figure 1","model-1",3,true);
...

here we will start in Model Widget "model-1" in the sequence Figure 1  - playing step 3 

The last argument true means it will play the step. if the last argumetn is false, then the function will  set the sequence /firgure and the step as current but it will not play the step.

It is possible to define the function more general. Additional we can set  als the source - the model - pvz file.

...
//////////////
//definition of the function
$scope.app.playModelStepPvz = function (pvz,sequence,modelName,step_number,play) {
 //pvz file
 //sequnece -sequnece name e.g. TestFigure1 - as shown in UI
//modelName - model name e.g. model-1 widget
//step_number - set this number to current step
//play   true/false execute play for the model
  
    $scope.$applyAsync(()=>{$scope.setWidgetProp(modelName, 'src',  '');});   
   $timeout(function () {
  $scope.$applyAsync(()=>{$scope.setWidgetProp(modelName, 'src', 'app/resources/Uploaded/'+pvz +'.pvz');}); 
  },50); 
   $timeout(function () {
  $scope.$applyAsync(()=>{$scope.setWidgetProp(modelName, 'sequence',  '');});    
  },50);
  $timeout(function () {
  $scope.$applyAsync(()=>{$scope.setWidgetProp(modelName, 'sequence',  'app/resources/Uploaded/l-Creo 3D - '+sequence +'.pvi');});     
  },50);
  $timeout(function () {     
  $scope.$applyAsync(()=>{$scope.setWidgetProp(modelName, 'currentStep', parseInt(step_number));});
 if(play)   //check if play should be applyed
 $timeout(function () {angular.element(document.getElementById(modelName)).scope().play();  }, 100)
   //angular.element(document.getElementById(modelName)).scope().play(); }, 100);
                      }
           , 500);
};
//////////////////////////////////
...
$scope.app.playModelStepPvz("engine_high","Figure 1","model-1",3,true)

where we will call "engine_high.pvi" , sequence Figure Figure 1 , model Widget model-1 and step 3  will be set . The call will also play this step (last argument = true) The location of all files is the Upload project folder.

[micah]

That worked for linking to a specific step, however now the model being animated remains visible. I set the model visibility to false but it remains throughout the experience.

[RolandRaytchev · Accepted solution]

I think we have a similar issue as mention in the posts:

"Model Item colors are not showing up in View" and "Facing problem while switching one model to another model"

OK not the same appearance  of the issue but the same reasons that the issue occurs  and same solution

-problem is that the sequence will override the current status 

We can try to unset the sequence:

$scope.setWidgetProp('model-1','sequence', undefined);
$scope.$applyAsync();

or try this:

...
tml3dRenderer.setProperties('model-1-/',        { decal:false, hidden:false});
$scope.setWidgetProp('model-1','sequence', undefined);
$scope.$applyAsync();
...

It needs to  be tested which code will lead to the best results.

Additionally you can try to see if the force hide will override the  sequence settings

something like this:

//model widget 'model-1'
$timeout(function () {
//set the forceHiden propery to true - only as additional option
$scope.setWidgetProp('model-1', 'forceHidden', true);
//or the same as calling this line below
//$scope.view.wdg['model-1']['forceHidden'] = true;
// set model to not visible
 
 $scope.$applyAsync(()=>{$scope.setWidgetProp('model-1', 'visbile', false); });

$scope.setWidgetProp('model-1', 'forceHidden', false);
},50);

[micah]

What does the below code do?

$scope.$applyAsync();

I was able to hide the widget just by applying the widget property sequence to undefined.

$scope.view.wdg['model-1']['sequence'] = undefined;