Navigator friendly dizmos

One of the unique features on dizmo is that one dizmo can remotely control another one. Take for example the Navigator dizmo: not only can it move from one dizmo to another (which is very helpful for a non-linear presentation) but also navigate from image to image inside the Slides dizmo!

How does that work? Let’s find out by creating an example dizmo that can be remotely controlled.

For demonstration purposes, we’re going to implement a very basic audio player. It contains a list of audio tracks, and the user can navigate through them. We’ll only implement the track list and the navigation, but not the actual loading and playing of an audio file.

Create a new grace project and name it “AudioPlayer”. Edit project.cfg and add this key-value “helper_version”:”1.0″. This will enable the dizmoHelper library, which contains helper functions to remote control a dizmo. You can read more about it here.

In index.html, add the necessary html elements for the track list and the buttons for navigation.

<div><ul id="list"><li class="active">Song 1 </li><li>Song 2</li><li>Song 3</li><li>Song 4</li></ul></div>
        <button id="b1" data-type="dizmo-button">First</button>
        <button id="b3" data-type="dizmo-button">Next</button>
        <button id="b4" data-type="dizmo-button">Prev</button>
        <button id="b5" data-type="dizmo-button">Last</button>
<div id="status">/</div>

Usually, you would add a click handler to each button, and then update a variable in your dizmo that keeps track of the current song. Since the dizmo also needs to be remote controlled, that won’t work. Luckily, the dizmoHelper library comes to the rescue with functions to keep and change state (steps) and is remotely controllable by default. Remote control can command dizmos that deal with steps, for example the Slides dizmo, which can step through a list of images, or our AudioPlayer, which can step through a list of tracks.

At the initalization of the dizmo, first initialize the DizmoHelper library and set the maximum number of steps, as well as the initial step:

DizmoHelper.Controller.init();
DizmoHelper.Controller.setTotalSteps(4);
DizmoHelper.Controller.setStep(1);

Now, if someone clicks on the Next button for example, the AudioPlayer dizmo should step forward to the next audio track. We can use the following helper function for that:

DizmoHelper.Controller.nextStep();

Now, if someone clicks on the Next button for example, the AudioPlayer dizmo should step forward to the next audio track. We can use the following helper function for that:

document.getElementById('b3').onclick = function() {      DizmoHelper.Controller.nextStep();
}

We can’t update the current song and display in the above click handler, otherwise remote control would not work, since it only updates the step, but doesn’t click any buttons for us. Instead, we need to use another dizmoHelper function, this time DizmoHelper.Controller.onNextStep:

DizmoHelper.Controller.onNextStep(function(step)) {
    document.getElementById('status').innerHTML=step+"/4";
    updateList(step); 
});

Here, we update the status display, showing the current Track and also the list, highlighting the current Track. This function will be called of the AudioPlayer dizmo calls the nextStep function, but also when the dizmo remote controlling advances to the next step!

Since DizmoHelper doesn’t advance to the last step automatically, we’ll need to handle this special case in the function that reacts to a click on the next button. With DizmoHelper.Controller.getStep() you can always get the current step, in our case the current Track:

// next
    document.getElementById('b3').onclick = function() {
        if (DizmoHelper.Controller.getStep()<4) {
            DizmoHelper.Controller.nextStep();
        } else {
            DizmoHelper.Controller.lastStep();
        }
    };

After you have added similar functions to the First, Last and Previous buttons, it’s time to try out remote control. Open an instance of the Navigator dizmo and on its back, add AudioPlayer as a new scene. Then, tick the checkbox “Control dizmos”. Now you can control the AudioPlayer from the Navigator!

We are curious with what other use cases for remote control you can come up with.

Check out the full source code on Github: github.com/dizmo/AudioPlayer