How can I make Reveal.js work with a presenter remote?

Question

I'm loving Reveal.js so far. One issue I have, though, is that my wireless presentation remote is, as is typical, only capable of generating left/right arrow keystrokes. My Reveal.js slide decks make heavy use of its 2-dimensional capabilities, as well as fragments. That means my remote only goes to the right, not down.

The Reveal.js API looks like it should be strong enough to wire something in so that "right arrow" will first advance down if possible, then right, taking fragments into account. Unfortunately my JS-fu is not that strong, so I figured I'd ask if someone else had done something like this before and had some pointers. If there's some other approach that would work better, I'm open to that, too. I just don't want to be physically bound to my keyboard.

Answer 1

What you want is that it would navigate to "next" instead of "right", which is the default binding for right arrow key. You can achieve this by overriding the default key bindings. There is some documentation here: https://github.com/hakimel/reveal.js/#keyboard-bindings

In your case you would like the right arrow key (keycode 39) to bind to "next" and probably also override left arrow key (keycode 37) to bind to "prev". Here is the sample code (add this to the Reveal.initialize configuration add the end of the file):

keyboard: {
    39: 'next',
    37: 'prev'
}

Answer 2

reveal.js has a built in remote! If you take a look at dependencies in the README, the very last item in Reveal.initialize is the option to activate a remote! It'll pop up a QR code that you can scan; the website it takes you to syncs with your presentation (over the internet, not local wifi/bluetooth) and allows you to control your presentation with your touchscreen device. There is even an app (for iOS) streamlined specifically for using the remote, I believe it's called RemotesLite.

When using the remote, a tap is equivalent to your spacebar, swipes left/right/up/down are left/right/up/down, and pinch in/out is overview mode activate/deactivate.

Hope this helps!

UPDATE 4/21/2014

It appears as if the most recent version of Reveal has built-in presenter remote support. Recently gave a presentation with a Targus presentation remote and it worked out of the box!

Answer 3

This worked for me.

Reveal.configure({
    keyboard: {
        38: 'next',
        40: 'prev'
    }
});

Answer 4

The proposed solutions fix the problem only partially. Either they remap the Up and Down arrow keys or they remap the Left and Right arrow keys. When you don't know which keys your presenter remote uses, simply remap all of them:

// Either Reveal.initialize({ ... or
Reveal.configure({
    keyboard: {
        37: 'prev',
        38: 'prev',
        39: 'next',
        40: 'next'
    }
})

When switching to overview mode (with o) you can still navigate with vim keybindings h, j, k, and l for left, up, down, and right.

Using this configuration you can make sure that every presenter remote works.

Answer 5

I have to make sure that I set up my slides in the proper order, but my Logitech R800 does all the fragments and order correctly (if a slide has sub-content below it, clicking next goes through those before going right again).

Answer 6

Reveal 3.8.0 added an option navigationMode that you can set to linear to scroll down then right by pressing the right arrow or the clicker button.

Reveal.initialize({
  navigationMode: 'linear'
});

https://revealjs.com/vertical-slides/#navigation-mode

Answer 7

I've implemented a more advanced "presenter mode" (see cloudogu/continuous-delivery-slides).

You can toggle it using ,. It even survives reloading your page.
If you prefer to have the presenter mode switched off after reload, see this commit.

Reveal.initialize({
    keyboard: {
        188: () => setPresenterMode(true)
    }
});

setPresenterMode(false);

function setPresenterMode(toggle) {
    const storage = localStorage;
    const storageKey = 'presenterMode';
    if (toggle) {
        storage.setItem(storageKey, JSON.stringify(!JSON.parse(storage.getItem(storageKey))));
    }
    const presenterMode = JSON.parse(storage.getItem(storageKey));
    if (presenterMode) {
        Reveal.addKeyBinding({keyCode: 39}, 'next');
        Reveal.addKeyBinding({keyCode: 37}, 'prev');
    } else {
        Reveal.removeKeyBinding(37);
        Reveal.removeKeyBinding(39);
    }
    console.log(`Set presenter mode: ${storage.getItem(storageKey)}`);
}