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

7

32

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.

Portion answered 28/10, 2013 at 3:17 Comment(1)
Take a look at sys-exit.blogspot.com/2015/10/… - related to reveal.js and presentation pilotsMajoriemajority
T
38

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'
}
Transvalue answered 28/10, 2013 at 7:10 Comment(2)
This made the presentation stop working for me. Instead the solution by @Mikeross547 was doing it.Gayden
6 years after your reply, it is still helpful. Thanks, saved my presentationFluorometer
H
6

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!

Harriette answered 28/10, 2013 at 4:31 Comment(3)
Thanks, Sam. I don't want to use a phone remote for 2 reasons. One, I present from localhost to avoid dealing with an unpredictable network. Two, I tend to use a laser pointer a lot and my Nexus 4 doesn't have a laser pointer built into it yet. :-) Still, one more reason that Reveal.js rocks.Portion
@Harriette Did you actually get this to work with remotes.js? I cannot get it to work as even when I look at the remotes.io website, a generic barcode is all I see, no QR code anywhere. Would love this feature for an upcoming presentation but am currently lost!Rosenblum
I've gotten their soft remote (the thing with the QR code) to work as well as the hard remote. You need to uncomment the remotes JS from your index.htmlHarriette
N
6

This worked for me.

Reveal.configure({
    keyboard: {
        38: 'next',
        40: 'prev'
    }
});
Neidaneidhardt answered 24/2, 2016 at 15:46 Comment(0)
H
2

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.

Hateful answered 15/5, 2017 at 18:59 Comment(0)
W
1

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).

Whiteley answered 28/10, 2013 at 3:25 Comment(0)
A
1

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

Astto answered 2/4, 2021 at 14:38 Comment(0)
U
0

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)}`);
}
Untuck answered 4/12, 2019 at 16:15 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.