ACCEPTED SOLUTION
Accepted Solutions
Hi Roland,
Thanks for helping with this!
It took me awhile, but I finally got it.
// important code that I don't fully understand ;D
$scope.$on('newStep', function(evt,arg) {
var getStepRegex = /\((\d*)\//;
let new_arg=arg;
var numbers = new_arg.match(/\d+/g).map(Number);
// below is the math section I spoke about earlier. numbers[0] = current step
var numA = numbers[0]-1;
var numB = numbers[0];
var numC = numbers[0]+1;
// convert the numbers to strings so I can assign them to the 3D label "text" property
var strA = numA.toString();
var strB = numB.toString();
var strC = numC.toString();
// assign the strings I created to the 3D labels
$scope.view.wdg['stepNumPrev']['text']=strA;
$scope.view.wdg['stepNum']['text']=strB;
$scope.view.wdg['stepNumNext']['text']=strC;
})
// IT WORKS!
The next step for me personally is to add something behind each number with a clickable functionality -- (go back a step; pause/play; and go forward a step).
This also lays the groundwork for some other powerful features such as showing an image associated with the previous step, current step & next step -- and to have these images change dynamically depending on the current step.
Thanks Roland!
Wes
Hi @Wes_Tomer,
I think the best way is to use one of the events for steps.
Newstep or stepstarted or stepcompleted as was mentioned in the post:
https://community.ptc.com/t5/Studio/List-of-all-throw-events-in-Experience-Lifecycle/td-p/597270
I think I have an example where I did similar task with "newStep" but need to find it first...
OK here the example where I used a model with a sequence and a 3d Label widget
:
Here the code for it - so it should change the lable when a new step is started. I added also there some comments to the code to make it more clear (I hope 
)
//sequnece
//array with the steps what should be played here
// it could contains any string for a particular step number
// we could assess it via the stepnumber
// e.g. stepArray[step]
$scope.message = 0;
/////////////
var stepArray = ['0-Start Step',
'1-DoorLock installation',
'2-mount the DoorFrame',
'3-Assemble the Isolation',
'4-Assemble the Door panel',
'5-Assembly the Door Handles',
'6-Check the Door Mechanism and clean',
'step 6',
'step 7'];
$scope.$on('newStep', function(evt,arg) {
console.debug("console.debug: $scope.$on -> newStep:".concat("started") );
var getStepRegex = /\((\d*)\//;
// this expression getStepRegex.exec(arg)[1] - returns the step number 1,2 ... etc.
$scope.message = getStepRegex.exec(arg)[1];
//print info about the message to the console
console.info('message='+$scope.message);
});
//this message object will convert the number by assigneeing to property
// it will convert to the message
Object.defineProperty($scope, 'message', {
get: function () { return _message; },
set: function (step) {
if(stepArray[step]) {
_message = 'PLAY STEP: ' + stepArray[step];
} else {
_message = "Something going wrong- retry,please!";
}
//set the 3d Widget lable to the message
$scope.view.wdg['3DLabel-2']['text'] = _message;
}
});
///////////
Hi Wes,
I am sorry for the delay.
Yes, I could agree that my solution is not the best.
I used often in the past a RegEx expressions without to have a really deep knowledge on it (especially on the syntax - it could be a quite complex) but mostly I was able to solve my problem after few minutes searching in google. I think for the most tasks there are already a lot of examples.
Ok the solution what I provided was more concentrated to map the array to the step number and to use some object oriented approach. We do not need an object actually to get/set the message variable. Also, I think that the provided particular regEx expression is not the best one to understand.
The fore let make it more simple.
Consider the following: - e.g. I have no idea what is the content of the New Step argument. Therefore I will simple print it to the console: " arg=(2/7) Step 2"
$scope.$on('newStep', function(evt,arg) {
console.warn("arg=".concat(arg));
});
So means it is a string with the format : " ( current_step / last_step_number ) Step current_step" - where the blue text means variables current_step := 1....x and last_step: = 1...y >= current_step
When we search with google we could find in few minutes the following solutions:
1.) https://stackoverflow.com/questions/10003683/extract-get-a-number-from-a-string
2.) https://codereview.stackexchange.com/questions/115885/extract-numbers-from-a-string-javascript
Let test it now and check what is the output in the console
$scope.$on('newStep', function(evt,arg) {
console.debug("console.debug: $scope.$on -> newStep:".concat("started") );
var getStepRegex = /\((\d*)\//;
console.warn("arg=".concat(arg));
let new_arg=arg;
//https://stackoverflow.com/questions/10003683/extract-get-a-number-from-a-string
console.warn("new_arg(replaced) =".concat(new_arg.replace( /[^0-9\.]/g, '')))
var numbers = new_arg.match(/\d+/g).map(Number);
//https://codereview.stackexchange.com/questions/115885/extract-numbers-from-a-string-javascript
console.log("numbers:");console.warn(numbers)
console.log(" ((14 / 27) Step14");console.warn(" ((14 / 27) Step14".match(/\d+/g).map(Number))
});
The 1.) e.g. new_arg.replace( /[^0-9\.]/g, '') will create a string for (current sttep=2 and last step=15) result="2152" what means that is not so useable.
The second link 2.) will provide a solution which could be used. For the same example above (current step=2 and last step=15) result=[2,15,2] -> means is an array where you will get directly result[0} and result[2] for the current step and result[1] for the last step.
Example:
let new_arg=arg; //https://codereview.stackexchange.com/questions/115885/extract-numbers-from-a-string-javascript var numbers = new_arg.match(/\d+/g).map(Number); var new_step=numbers[0]
var last_step=numbers[1] console.log("new_step="+new_step+" last_step="+last_step)
So now we have the new_step and the last_step and calculate : next_step is (new_step+1 if new_step < last_step) and pervious step is (new_step -1) if new_step >0 ... etc.
Hi Roland,
Thanks for helping with this!
It took me awhile, but I finally got it.
// important code that I don't fully understand ;D
$scope.$on('newStep', function(evt,arg) {
var getStepRegex = /\((\d*)\//;
let new_arg=arg;
var numbers = new_arg.match(/\d+/g).map(Number);
// below is the math section I spoke about earlier. numbers[0] = current step
var numA = numbers[0]-1;
var numB = numbers[0];
var numC = numbers[0]+1;
// convert the numbers to strings so I can assign them to the 3D label "text" property
var strA = numA.toString();
var strB = numB.toString();
var strC = numC.toString();
// assign the strings I created to the 3D labels
$scope.view.wdg['stepNumPrev']['text']=strA;
$scope.view.wdg['stepNum']['text']=strB;
$scope.view.wdg['stepNumNext']['text']=strC;
})
// IT WORKS!
The next step for me personally is to add something behind each number with a clickable functionality -- (go back a step; pause/play; and go forward a step).
This also lays the groundwork for some other powerful features such as showing an image associated with the previous step, current step & next step -- and to have these images change dynamically depending on the current step.
Thanks Roland!
Wes
