Tutorial : how to play a sequence with print screen of step number and step description

Hi everyone, 

I want to share some tips about how play a sequence and retrive some information archived into pvz file. 

1. In creo illustrate create your sequence with related step description; 

2. in 2D canvas I put three bottons that when clicked fire a javascript call (e.g. sequencePlay(), sequenceNext()..) :

-play sequence 

-next sequence

-previous sequence

3. For the visualization of step number I used a label (idStudio: stepNumber) and for the description a text area (idStudio: stepDescription). 

The result is something like the image attached.

Into the javascript file copy past the folowing lines of code: 

//modificare subito "Home"--> nome vista | "saldatura_trasversale"--> nome modello 
$scope.app.percorso = 'app.view["Home"].wdg["saldatura_trasversale"]'; 

var labelDescription= 'stepDescription'
var labelStep = 'stepNumber'

// -- UPDATE LABEL: STAMPA SEQUENZA DESCRIZIONI -- 
$scope.updateLabel = function(){ 
	console.log("----updateLabel started----")
 
 	$scope.$on('stepstarted', function(evt, arg1, arg2, arg3) {
 	console.log("----STEP STARTED----")
 		var parsedArg3 = JSON.parse(arg3);
		console.warn(arg3);
	
 	console.log("stepNumber="+parsedArg3.stepNumber);
 	console.log("stepDescription="+parsedArg3.stepDescription);
 	console.log("nextStep="+parsedArg3.nextStep);
 
 	
 	console.log(">> Arg1: "+ arg1); //nome dell'animazione
 	console.log(">> Arg3: "+ arg3); //stringhe contenute nel pvz
 	
 	text=parsedArg3.stepDescription;
		$scope.setWidgetProp(labelDescription, "text", text) //step-description è il nome della label in cui di vanno a stampare le indicazioni dei passi 
	});
 	
 	$scope.$on("stepcompleted", function (){ //questa chiamata attende il completamento del passo prima di azzerare la stringa "text"
		console.log("----STEP COMPLETED----")	
 text=""
		$scope.setWidgetProp(labelDescription, "text", text) //step-description è il nome della label in cui di vanno a stampare le indicazioni dei passi 
	});
 	
 	$scope.$on('newStep', function(evt, arg) {
 	console.log("----NEW STEP----")
		console.log(">> Arg1: "+ arg); //nome dell'animazione
 	text=arg
		$scope.setWidgetProp(labelStep, "text", text) //tiene conto del numero dei passi in esecuzione 

	});

}


// --------------------------------
// -- DEFINZIONE FUNZIONI PULSANTI -- 

// -- PLAY BUTTON -- --> Funzione da inserire in "Eventi JS": sequencePlay(); sequenceNext(); sequencePrev();
$scope.sequencePlay = function () {
	$scope.$root.$broadcast($scope.app.percorso + '.svc.play');
	$scope.updateLabel();
 };
 
// -- NEXT BUTTON --
$scope.sequenceNext = function () {
	$scope.$root.$broadcast($scope.app.percorso + '.svc.forward');
	$scope.updateLabel();
};

// -- PREVIOUS BUTTON --
$scope.sequencePrev = function () {
 	$scope.$root.$broadcast($scope.app.percorso + '.svc.rewind');
	$scope.updateLabel();
};
// --------------------------------


// DEBUG
console.log($scope.app.view.Home.wdg);
//console.log(window)

 When you click into the play( or next or previous) buttons the relative function call $scope.updateLabel(). This one launch $scope.on("stepstarted") etc.. for print the stepNumber and stepDescription. 

I hope it could be helpful.