Display different images at different steps

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 .

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