如何让Reveal.js与演示者遥控器配合使用？

Question

我目前很喜欢使用Reveal.js。不过，我有一个问题，那就是我的无线演示遥控器一般只能产生左/右箭头按键。我的Reveal.js幻灯片集大量使用其二维功能，以及片段。这意味着我的遥控器只能向右移动，而不能向下移动。

Reveal.js API看起来足够强大，可以将“右箭头”先向下移动（如果可能），再向右移动，并考虑片段。不幸的是，我的JS技术不是很强，所以我想问问是否有其他人曾经做过类似的事情，并给出了一些指示。如果有其他更好的方法，我也可以采纳。我只是不想被键盘束缚住。

- Crell

---

请查看http://sys-exit.blogspot.com/2015/10/revealjs-presentation-pilot-up-down-left-right.html - 与reveal.js和演示文稿飞行员有关。 - ducin

Answer 1

你想要的是将按键绑定从默认的右箭头键改为“下一页”，你可以通过覆盖默认的按键绑定来实现。这里有一些文档：https://github.com/hakimel/reveal.js/#keyboard-bindings 在你的情况下，你想将右箭头键（键码39）绑定到“下一页”，并可能还想覆盖左箭头键（键码37）以绑定到“上一页”。以下是示例代码（将其添加到Reveal.initialize配置文件末尾）。

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

- Cvuorinen

---

这使得演示文稿对我来说停止工作了。相反，@Mikeross547的解决方案却起作用了。 - Max N

6年后你的回复仍然很有帮助。感谢，它挽救了我的演示文稿。 - Vinicius Dantas

Answer 2

这对我很有用。

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

- Mike547

Answer 3

reveal.js内置远程控制功能！如果您查看README中的依赖项，在Reveal.initialize的最后一项是激活远程控制的选项！它将弹出一个QR代码，您可以扫描它；它带您进入一个网站，与您的演示文稿同步（通过互联网，而非本地wifi /蓝牙），并允许您使用触摸屏设备控制演示文稿。甚至有一个应用程序（适用于iOS），专门整合了使用远程控制，我相信它被称为RemotesLite。

在使用远程控制时，轻击相当于按下空格键，向左/右/上/下滑动相当于向左/右/上/下滑动，捏合放大/缩小是概述模式的激活/取消激活。

希望这可以帮助到您！

更新于2014年4月21日

最近的Reveal版本似乎已经内置了演讲者远程控制支持。最近使用Targus演讲遥控器进行演示，并且它可以开箱即用！

- Snugug

---

谢谢，Sam。我不想使用手机遥控器有两个原因。一是我从本地主机演示，以避免处理不可预测的网络。二是我倾向于经常使用激光笔，而我的 Nexus 4 还没有内置激光笔。 :-) 不过，这也是 Reveal.js 的另一个优点。 - Crell

@Snugug，你真的用remotes.js做到了吗？我无法让它工作，即使我查看remotes.io网站时，也只能看到一个通用的条形码，没有任何QR码。我很想在即将到来的演示中使用这个功能，但目前我还是一头雾水！ - Duffmaster33

我已经成功让他们的软遥控器（带有QR码的那个东西）和硬遥控器一样工作了。您需要从index.html中取消注释遥控器的JS代码。 - Snugug

Answer 4

提出的解决方案只能部分地解决问题。它们要么重新映射上下箭头键，要么重新映射左右箭头键。当你不知道你的演示遥控器使用哪些键时，只需重新映射所有键：

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

当切换到概览模式（使用o）时，您仍然可以使用vim键绑定h、j、k和l来向左、上、下和右导航。

使用此配置，您可以确保每个演示者遥控器都可以正常工作。

- niklaas

Answer 5

我必须确保幻灯片按正确顺序设置，但我的罗技R800可以正确处理所有的片段和顺序（如果幻灯片下有子内容，则点击“下一步”会先浏览这些内容，然后再向右移动）。

- Dave Reid

Answer 6

Reveal 3.8.0增加了一个选项navigationMode，您可以将其设置为linear，通过按右箭头或点击器按钮向下滚动然后向右滚动。

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

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

- csanchez

Answer 7

我实现了一个更先进的“主持人模式”（请参见cloudogu/continuous-delivery-slides）。

您可以使用,切换它。 它甚至可以在重新加载页面后继续存在。
如果您希望在重新加载后关闭演示文稿模式，请参见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)}`);
}

- schnatterer