Skip to main content
L
LarryP3-Newcomer
3-Newcomer
July 31, 2023
Question

Vuforia version 9.12 Sequence models with Previous & Next buttons to turn on/off models.

  • July 31, 2023
  • 1 reply
  • 760 views

This is my first go at writing a script in Vuforia so I would appreciate the help in where I am going wrong. I have about 8 part models and I would like to toggle them on/off with a previous and next button in order to run through a sequence. This is what I have but I'm struggling with tying in the steps to the button functions. 

 

// Increment Step when NEXT button is pressed
$scope.pressNextButton = function() {
currentStep = parseInt($scope.app.params[currentStepParam], 10);
if (currentStep < maxStep && !playing) {
$scope.app.params[currentStepParam] = currentStep + 1;
} else {
$scope.show(buttonAnimInProgress);
$timeout(function() {
$scope.hide(buttonAnimInProgress);
}, 2500);
}
$timeout(function() {
currentlyShowingNextButton = $scope.app.params[showNextButtonParam];
$scope.hideNextButtons();
}, 50);
$timeout(function() {
if (currentlyShowingNextButton) {
$scope.showNextButtons();
}
}, 2500);
}
// Return to previous Step when BACK button is pressed
$scope.pressBackButton = function() {
currentStep = parseInt($scope.app.params[currentStepParam], 10);
var currentlyShowingNext = $scope.app.params[showNextButtonParam];
if (currentStep > minStep && !playing) {
$scope.app.params[currentStepParam] = currentStep - 1;
} else {
$scope.show(buttonAnimInProgress);
$timeout(function() {
$scope.hide(buttonAnimInProgress);
}, 2500);
}
$timeout(function() {
currentlyShowingNextButton = $scope.app.params[showNextButtonParam];
$scope.hideNextButtons();
}, 50);
$timeout(function() {
if (currentlyShowingNextButton) {
$scope.showNextButtons();
}
}, 2500);
}

// #########################
// STEP FUNCTIONS
// #########################
$scope.$on("currentStepParam", () =>
{
let currentStep = $scope.getCurrentStep("CowlModel")
if (currentStep == 1)
{
$scope.view.wdg['Damaged Panel']['visible'] = true;
$scope.view.wdg['Cleaned Panel']['visible'] = false;
$scope.view.wdg['Filler']['visible'] = false;
$scope.view.wdg['1st Ply']['visible'] = false;
$scope.view.wdg['2nd Ply']['visible'] = false;
$scope.view.wdg['3rd Ply']['visible'] = false;
$scope.view.wdg['Outer Ply']['visible'] = false;
$scope.view.wdg['Cowl - Repaired']['visible'] = false;
}
else if (currentStep == 2)
{
$scope.view.wdg['Damaged Panel']['visible'] = false;
$scope.view.wdg['Cleaned Panel']['visible'] = true;
$scope.view.wdg['Filler']['visible'] = false;
$scope.view.wdg['1st Ply']['visible'] = false;
$scope.view.wdg['2nd Ply']['visible'] = false;
$scope.view.wdg['3rd Ply']['visible'] = false;
$scope.view.wdg['Outer Ply']['visible'] = false;
$scope.view.wdg['Cowl - Repaired']['visible'] = false;
}
else if (currentStep == 3)
{
$scope.view.wdg['Damaged Panel']['visible'] = false;
$scope.view.wdg['Cleaned Panel']['visible'] = true;
$scope.view.wdg['Filler']['visible'] = true;
$scope.view.wdg['1st Ply']['visible'] = false;
$scope.view.wdg['2nd Ply']['visible'] = false;
$scope.view.wdg['3rd Ply']['visible'] = false;
$scope.view.wdg['Outer Ply']['visible'] = false;
$scope.view.wdg['Cowl - Repaired']['visible'] = false;
}
else if (currentStep == 4)
{
$scope.view.wdg['Damaged Panel']['visible'] = false;
$scope.view.wdg['Cleaned Panel']['visible'] = true;
$scope.view.wdg['Filler']['visible'] = true;
$scope.view.wdg['1st Ply']['visible'] = true;
$scope.view.wdg['2nd Ply']['visible'] = false;
$scope.view.wdg['3rd Ply']['visible'] = false;
$scope.view.wdg['Outer Ply']['visible'] = false;
$scope.view.wdg['Cowl - Repaired']['visible'] = false;
}
else if (currentStep == 5)
{
$scope.view.wdg['Damaged Panel']['visible'] = false;
$scope.view.wdg['Cleaned Panel']['visible'] = true;
$scope.view.wdg['Filler']['visible'] = true;
$scope.view.wdg['1st Ply']['visible'] = true;
$scope.view.wdg['2nd Ply']['visible'] = true;
$scope.view.wdg['3rd Ply']['visible'] = false;
$scope.view.wdg['Outer Ply']['visible'] = false;
$scope.view.wdg['Cowl - Repaired']['visible'] = false;
}
else if (currentStep == 6)
{
$scope.view.wdg['Damaged Panel']['visible'] = false;
$scope.view.wdg['Cleaned Panel']['visible'] = true;
$scope.view.wdg['Filler']['visible'] = true;
$scope.view.wdg['1st Ply']['visible'] = true;
$scope.view.wdg['2nd Ply']['visible'] = true;
$scope.view.wdg['3rd Ply']['visible'] = true;
$scope.view.wdg['Outer Ply']['visible'] = false;
$scope.view.wdg['Cowl - Repaired']['visible'] = false;
}
else if (currentStep == 7)
{
$scope.view.wdg['Damaged Panel']['visible'] = false;
$scope.view.wdg['Cleaned Panel']['visible'] = true;
$scope.view.wdg['Filler']['visible'] = true;
$scope.view.wdg['1st Ply']['visible'] = true;
$scope.view.wdg['2nd Ply']['visible'] = true;
$scope.view.wdg['3rd Ply']['visible'] = true;
$scope.view.wdg['Outer Ply']['visible'] = true;
$scope.view.wdg['Cowl - Repaired']['visible'] = false;
}
else if (currentStep == 😎
{
$scope.view.wdg['Damaged Panel']['visible'] = false;
$scope.view.wdg['Cleaned Panel']['visible'] = false;
$scope.view.wdg['Filler']['visible'] = false;
$scope.view.wdg['1st Ply']['visible'] = false;
$scope.view.wdg['2nd Ply']['visible'] = false;
$scope.view.wdg['3rd Ply']['visible'] = false;
$scope.view.wdg['Outer Ply']['visible'] = false;
$scope.view.wdg['Cowl - Repaired']['visible'] = true;
}
else
{
$scope.app.params[showNextButtonParam] = true;
}
})

 

 

 

1 reply

S
sgreywilson16-Pearl
16-Pearl
August 3, 2023

Larry,

 

Initially from a code observation 

 

your pasted code currentStep = parseInt($scope.app.params[currentStepParam], 10);to access the params property 

 

you would use $scope.app.params.currentStepParam

 

and maybe you would do 

let currentStep = 0;

if ($scope.app.params.currentStepParam != null && $scope.app.params.currentStepParam != "") {

        currentStep = parseInt($scope.app.params.currentStepPara)

} else {

         currentStep = 1;

}

 

$scope.view.wdg['3rd Ply']['visible'] = false;

 

This should be

 

$scope.app.setWidgetProp('3rd Ply', 'visible', false)

or

$scope.view.wdg['3rd Ply'].visible' = false;

 

 

Also 

There is always different ways to achieve this - many is Creo Illustrate to define a sequence of steps and the use the events to listern to next step click binding but you have 8 models and I'm not sure where they are etc. 

 

$scope.$on('stepstarted', function(evt, arg1,arg2,arg3) {
    console.log( "possible parsedArguments on event stepstarted =" + "arg1="+ arg1 + " arg2="+ arg2 + " arg3="+  arg3);
    var parsedArguments = JSON.parse(arg3);
    $scope.app.params.StepTitle = parsedArguments.stepDescription;
    console.log( "acknowledge =" + parsedArguments.acknowledge);
    console.log( "acknowledgeMessage =" + parsedArguments.acknowledgeMessage);
    console.log( "duration =" + parsedArguments.duration);
    console.log( "nextStep =" + parsedArguments.nextStep);
    console.log( "stepDescription =" + parsedArguments.stepDescription);
    console.log( "nextStep =" + parsedArguments.nextStep);
    console.log( "stepName =" + parsedArguments.stepName);
    console.log( "stepNumber =" + parsedArguments.stepNumber);
    console.log( "totalSteps =" + parsedArguments.totalSteps);
    }
);

 

$scope.$on('sequenceloaded', function(evt, arg1,arg2,arg3) {

 

    console.log( "possible parsedArguments on event sequenceloaded =" + "arg1="+ arg1 + " arg2="+ arg2 + " arg3="+  arg3);
   
    }
);

 

$scope.$on('newStep', function(evt, arg1,arg2,arg3) {

 

     console.log( "possible parsedArguments on event newStep =" + "arg1="+ arg1 + " arg2="+ arg2 + " arg3="+  arg3);
   
    }
);

 

Hope this helps

    Terms & ConditionsCookie settingsAccessibility statement