Skip to main content
1-Visitor
April 16, 2019
Solved

Show sequence step number on 3D label

  • April 16, 2019
  • 2 replies
  • 4999 views

Hello,

 

How can I create logic to grab the currentStep of a sequence, subtract 1 and then bind it to a 3D label?

Each time I try this code (below), I get this error

"TypeError: Cannot read property 'currentStep' of ionic.bundle.min.js:150 undefined"

 

/// Indicate Numbers on Buttons
if($scope.app.view.Home.wdg.pump.currentStep === 'defined')
{
var p = $scope.app.view.Home.wdg.pump.currentStep+1;
var n = $scope.app.view.Home.wdg.pump.currentStep-1;
$scope.app.view.Home.wdg.prevNumber.text = p.toString();
$scope.app.view.Home.wdg.nextNumber.text = n.toString();
}

The model is "pump"

The Studio ID of the 3D labels are prevNumber & nextNumber (to indicate the steps before and after the current step). Please see attached image too.

[currentStep] I think is a number, and wdg.[3D label].text must be a string so this is why I'm trying to use "toString()" 

 

Any ideas would be appreciated. Thanks so much!

-Wes

Best answer by Wes_Tomer

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!

Prev-Cur-Next_StepLabels.png

 

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

2 replies

21-Topaz I
April 17, 2019

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

:

2019-04-17_14-11-10.gif

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 Man Happy )

 

//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;
 
} 
 });
///////////
21-Topaz I
April 17, 2019

- the provided example above was tested on Preview and on adroid device - there was working fine.

Additionally , please see the last 3 comments from ClayHelberg about enddevice compatibility  (IOS)  in the post

https://community.ptc.com/t5/Studio-Tech-Tips/Display-sequence-step-names-from-Creo-Illustrate/td-p/534911/page/3

Wes_Tomer1-VisitorAuthor
1-Visitor
April 22, 2019

Hi Roland,

Thanks for your reply. It works! I cut and paste your code, and changed the label studio ID to match. However I still can't use it to solve my original question about adding / subtracting from the current step #.

 

I would like to create a variable out of the current step number so I can add or subract one. For instance, when on step # 7 I want to have three buttons in a row, each with 3D-label numbers on them. < 6 > for the previous step, < 7 > for the current step, and < 8 > for the next step. 

<6> <7> <8>

And if we were on step 13 for instance, the same three buttons would look now like this:

<12> <13> <14>

Eventually I may even have more buttons, just so the end-user could jump around between steps that are close to each other. For instance <11> <12> <13> <14> <15> with the middle button always representing the current step.

I mostly understood your code, and I think I could use it figure out a solution to my problem if I understood what "/\((\d*)\//" represents. I'm learning from w3schools-regexp but I don't fully understand. Any advice would be great.

 

Thanks so much!

Wes

Wes_Tomer1-VisitorAuthor
1-Visitor
April 24, 2019

Hi Rolland & Leigh,

 

I should clarify -- my original question has not been answered yet.

I need to subtract and add a number from the current step. The code that was provided works well, but it does not include creating new variables by subtracting or adding from the number of the current step:

 

< current step minus one > < current step > < current step plus one >

<12> <13> <14>

 

Thanks for helping 🙂

Wes