Play sequence by buttons

[NPEasonChan]

Hi there,
I am working on a demonstration and there is a 3D model containing 2 - 3 sequences.
I knew that I can use the select widget to choose the target sequence, but I would prefer play different sequence by clicking buttons for a better trial experience.
For example, if I click button A, the first sequence is played. Likewise, if I click button B, another sequence will be played.
Is there any way to perform such function in Vuforia Studio? Or can I do that through writing a script?

[AllanThompson]

Yes, you'd just need to write some JS functions to set the sequence for the model widget and then kick off the playing of the sequence.

There's plenty of examples of setting the sequence via JS here in the forums, but here's and example of what you would do:

$scope.animation1 = function () {

  $scope.view.wdg['model-1']['sequence'] = "app/resources/Uploaded/l-Creo 3D - Figure 1.pvi";

   angular.element(document.getElementById('model-1')).scope().play();

}

Hope this helps. 

[NPEasonChan]

Thanks for the help and sorry for the late reply.
Is this line: angular.element(document.getElementById('model-1')).scope().play();,
is the javascript for playing next step of the sequence?

So, if I want to rewind and play my sequence by clicking a button, can I write something like this?
angular.element(document.getElementById('model-1')).scope().rewind();
angular.element(document.getElementById('model-1')).scope().play();

[InfinityX]

yes it is possible i guess 

just you need to use 2 button instead of 1

like for button 1 you need to apply  javascript:

angular.element(document.getElementById('model-1')).scope().rewind();

for button 2 you need to apply javascript:

angular.element(document.getElementById('model-1')).scope().play();

[AllanThompson]

If you want to rewind, etc. then the simplest option would be to create a rewind button and bind the click action on the button to the rewind service on the model.  No need to write JS functions.

It sounds like this is deviating away from what you originally wanted where the user just had couple of buttons to click - one for each sequence.  If you want to have more controls, why not just have a generic set of controls (rewind, forward, play, etc.) all bound to the equivalent model widget services (so you don't have to write any code) and then just have another set of buttons to just set the particular sequence on the model that use the JS?

Alternatively, you can use the list widget to create a drop-down list that shows all the different sequences in the model, so the user can pick that and then use the generic playback controls.  With this method, you don't have to write any code at all but the UI might not quite look like what you want.

[NPEasonChan]

Thanks for the help and suggestions.
As I am trying different options for providing a better animation play experience to users, the target might be a bit different than my original plan.
I have tried and the following code works for combining rewind + play to perform a replay for the current step:

$scope.replay = function()
{
angular.element(document.getElementById('model-2')).scope().rewind();
angular.element(document.getElementById('model-2')).scope().play();
}

Thank you so much! @AllanThompson @InfinityX 

[InfinityX · Accepted solution]

yes it is possible

u might have .pvz model with you . so do one thing save that file as .zip by renaming. and extract the file, you will get a lot files including .obj and .pvi

so in that .pvi files are nothing sequence file to run , suppose you have 4 sequences then you will find 4 .pvi files

now with the help of these files You can run 4 sequences with 4 different buttons

you need to provide 4 button in 2D canvas and bind all those button with model first and in home.js view you need to write javascript code for that given below:

$scope.r1= function()
{
$scope.view.wdg['model-1']['sequence'] = 'app/resources/Uploaded/l-Creo 3D - RED.pvi';

}

now this is javascript to run only 1 sequence , so if u have 4 sequence then you need to write above lines 4 times by making some changes in that

now in above javascript 

"r1" is assinged to respective button binding 

"l-Creo 3D - RED.pvi" is respective sequence file which we get from extract of zip file

suppose to bind A button to model to run sequence then u need to right below code in click area of A button 

r1();

means if u click on A button respective Sequence file will run

similarly u need to perform same procedure to other button by changing the red part in javascript