Display different images at different steps

[vivekse]

Let's say I want to display a 'image-1' at 'step-1' and 'image-2' at 'step-2' of a sequence and so on. Any help over this topic would be appreciated.

I am weak at coding part so a code would help me a lot.

[RolandRaytchev]

Hi @vivekse ,

first, I want to point the following posts/ topic which are related

List of Vuforia Studio events which we could be used as listener by javaScript/angular.js

There the points 2.) , 3,) and 6.) describing the events stepstarted, stepcompleted and new Step

This example could be used as basic for such implementations.

Additionally, we have the post/ topic  : Show sequence step number on 3D label

where you can used the same code with the  only  diffrence : instead of 

$scope.view.wdg['3DLabel-2']['text'] =  _message;

you can use something like

$scope.view.wdg['Image-1']['src'] =  "..your image path..";

 for 2d Images or

$scope.view.wdg['3DImage-1']['imgsrc'] =  "..your image path..";

for 3d images. Then in the Json object you need to have instead of description the path to the object .

[RolandRaytchev]

The following example code :

//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;
 
///////////// Array with the name of your steps shown in label-2
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;
   //this will set the 2d image widget 'image-1' to a particular path
   // if step==4 ==>    app/resources/Uploaded/image-forStep-4.gif"
   $scope.view.wdg['image-1']['src'] = "app/resources/Uploaded/image-forStep-"+step+".gif";
   //this will set the 3d image widget '3DImage-1' to a particular path
   // if step==6 ==>    app/resources/Uploaded/image-forStep-6.gif"
   $scope.view.wdg['3DImage-1']['imgsrc'] = "app/resources/Uploaded/image-forStep-"+step+".gif";
    
}  
  });
///////////

This code will work for widgets with ids "3DLabel-2"-> 3d Label widget , "image-1" - 2d image widget and "3DImage-1" - 3dimage widget

Also it required that you will have uploaded files for each step / according to this code with the names:

app/resources/Uploaded/image-forStep-1.gif
app/resources/Uploaded/image-forStep-2.gif
app/resources/Uploaded/image-forStep-3.gif
app/resources/Uploaded/image-forStep-4.gif
app/resources/Uploaded/image-forStep-5.gif
app/resources/Uploaded/image-forStep-6.gif
... etc