参加 PyCon China 上海站的时候，因为现场条件限制，不得不用翻页笔，但是发现翻页笔只支持上下翻页，不支持左右翻页，而使用 reveal.js 做的幻灯片常常会包含上下左右四个方向的切换。当时还和其他志愿者说这是个潜在的商机——做一个支持上下左右四个方向的翻页笔。

回来去网上搜了一下，发现真的没有支持四个方向的翻页笔。想想也没有多少人会需要用到四个方向切换。市场份额最大的幻灯片制作软件是 PPT、Keynote 和 Prezi。前两者上下翻页，Prezi 左右翻页，所以有一些翻页笔会支持在「上下」和「左右」两种模式切换，还有一些会支持切换成「PageUp 和 PageDown」翻页模式，用来给 PDF 文件翻页。

接着，我调整方向开始找有没有只有四个方向键的蓝牙小键盘，找的过程中突然想到以前用手柄映射键盘按键来玩一些不支持手柄的电脑游戏，那么 Wii Remote（Wii 右手控制器）也许也可以通过映射按键来当做一个翻页笔用。搜了一些资料，发现真的可以！找到了一个叫做 WiinRemote 的程序来做按键映射（macOS 可以使用 Darwiin Remote，另外还有其他通用的替代选项）。

以 Windows 10 为例，你需要先通过蓝牙把 Wii Remote 连接到电脑，基本步骤如下：

• 任务栏蓝牙图标右键
• 加入个人区域网
• 添加设备
• 同时按住 Wii Remote 的 1 和 2 键进入匹配模式（四个指示灯闪烁）
• 选择设备，一般名称会显示 Nintendo RVL-CNT，点下一步
• PIN 码留空点下一步

第一次和电脑配对会有些麻烦，后续就可以很容易连接了。

连接成功后打开 WiinRemote 配置按钮。在 Options – Preferences – Button Assign 选项里可以定义按键映射。除了设置上下左右四个方向切换以外，Wii Remote 上的其他按钮也可以利用起来，比如分别用来映射 Enter、Esc 这些按钮。

设置按键映射

唯一的缺点就是 Wii Remote 和常见的翻页笔相比有点大……

和翻页笔比大小

虽然看起来很完美，但后来我还是采用了另一个替代方案，买了一个支持切换 PageDown 和 PageUp 翻页模式的翻页笔，这样可以让 reveal.js 的幻灯片按照从左到右，从上到下的顺序逐页切换。

也许下次演讲你会看到我用 Wii Remote 来翻页。

P.S. 除了用来当翻页笔，Wii Remote 甚至可以用来实现数字白板、触控屏幕和 3D 头戴显示器（Free or cheap Wii Remote hacks）。

SimpleWords是一个HTML幻灯片生成工具，你只需要按照格式把幻灯片写在文本文档里，就可以轻松生成一个HTML幻灯片（使用浏览器打开）。SimpleWords支持Markdown和HTML标签，可以设置背景颜色。支持两种样式：

• pure：它适用于制作简单的概括性的幻灯片：每页只有少量的文字或关键词；每页只放一张图片，或是一个视频。这种样式没有页面边框，文字和元素将居中显示。
• rich：适合更复杂的页面布局。有页面边框，文字和元素靠左对齐。

GitHub 地址：https://github.com/greyli/simplewords

用法

设置样式

在文档第一行设置页面的样式，默认为pure样式。在两个百分号后面写上样式名称（pure或rich），独占一行，小写：

%%pure

或

%%rich

设置背景颜色或图片

在文档的最后一行设置背景颜色，默认为灰色。在两个美元符号后接上你要设置的颜色，RGB值，如下所示：

$$red

或

$$rgb(123, 45, 45)

需要注意的是，所有的字符都要是英文半角字符。所以不应该出现￥￥或是（）。

文件结构

SimpleWords\
– js\
– css\
– images\
– videos\
– words.txt
– slide.py
– slide.html

• 根目录下的words.txt是你写幻灯片的地方。
• 你要插入的图片和视频要分别放在images和videos文件夹内。
• slides!.py是生成你的幻灯片的程序。
• slides.html是你的幻灯片，点击它就可以打开你的幻灯片了。

幻灯片分隔符

每一张幻灯片的分隔方式有两种：第一种，使用独占一行的五个横线分隔“—–”；第二种，使用换行符作为分隔，即一行代表一张幻灯片。两种分隔方式不可混用。当没有发现横线换行符时，采用默认的行分隔。

注意：设置样式和背景颜色的语句同样需要使用分隔符！

文字效果

支持Markdown和HTML两种标记语言（可以混用），所以你可以方便的为你的幻灯片实现你想要的效果。比如下面是一些常用的Markdown标签：

# 这是H1
## 这是H2
### 这是H3
这是一个段落。 
*这是斜体*
**这是粗体** 
***这是粗体+斜体***
一段文字后打上两个空格表示另起一行  

了解更多有关HTML和Markdown的信息：MDN HTML文档、Markdown

添加图片和视频

图片：

![alt text](images/photo.jpg) 

或

<img src="images/photo.jpg" height="600">

视频：

<video width="800" height="600" controls><source src="videos/movie.mp4"></video>

注意：当使用行分隔时，不要让标签分行。建议不要让height值超过600。

版权声明

SimpleWords基于简化了的impress.js生成。

这是一门建筑材料课，最后一次课是两个班分成若干组，各小组把课题调研结果做成幻灯片展示。恍恍惚惚两节课，像是在用幻灯片做演讲稿的朗读比赛现场。等啊等，终于轮到我们组了。按照之前预演过的程序，我离开座位，靠窗的同学帮我拉上窗帘，我上前关上所有的灯，连接电脑，氛围就绪！

因为幻灯片里放了很多录音和视频，我就没有站在讲台上，拿着任天堂的小键盘在下面当了放映员。看着自己做出来的东西，听着身后响起的一阵阵掌声和欢笑，真是开心又感动。

观看提示：

1. 这个幻灯片的主题是吊顶材料。
2. 里面出现的人物都是我的舍友和小组成员（感谢陈中华和董淑松的支持！）。
3. 关于制作这个幻灯片的细节，见做个有趣的幻灯片和用HTML写幻灯片。

Addition Notes：

• 幻灯片：http://greyli.com/slides/2016-building-material（包含大量视频，考虑到网速和浏览器支持情况，建议直接看视频）
• 幻灯片使用 Impress.js 制作，混杂了很多效果，比如 CSShake，其中的动画用了 iPad 上的 Chomp。用 AHK 做了启动放映的快捷键。因为想做成一个类似动画的东西，所以严格来说不算是演讲。关灯后用蓝牙键盘在第一排控制放映。现在来看，有些内容大概有些恶趣味……><。放映的现场效果很好，可惜没有录像。