The rectangle behind you

Building your own presentation remote

Let’s say you’re like me: your slide deck is an HTML website dressed up as a presentation, and your laptop is a vessel for carrying that presentation from a web server on that laptop (or just a file) to the projector.

It’s not hard to imagine another HTML website, from the same server, that presents a mobile-friendly user interface for your phone, geared for you as the presenter: giving you buttons or gestures to move around the slides, perhaps some slide-specific user interface, maybe a countdown clock…

Essentially, a remote. But not just a usual remote.

How do those two websites talk to one another? Node.js. You already know JavaScript for your presentation; you just need a bit more to write an actual server.

The communication could be one-way only: the remote sends commands (next slide, previous slide) to the presentation.

But the communication could be two-way, too: the presentation tells the remote about the time remaining, slide number, or whether the specific slide that’s displayed requires an extra UI.

Two examples of custom remote apps I built: one for iPhone 4S, another one for Nexus 7.

Possibilities

Building your own remote gives you so many possibilities:

• Buttons (or gestures) on your remote that advance slides
• General buttons (for example changing volume, showing the console, blanking the entire slide if you just want to talk)
• Slide-specific buttons that show up only when they’re used for a specific slide (for example to activate something on that slide)
• Slide-specific sliders that you slide with your finger and the slide behind you responds immediately. Say that thing four times in a row. (Seriously, though, the data can be transfered fast enough so that the response seems real-time)
• Sending accelerometer data from your remote to the presentation

Some details

For a setup like this, I usually bring my own Airport Express base station, creating a separate private wi-fi network between my laptop and my iPhone. I just plug it in to power; it doesn’t have to be connected to internet (since my talks usually don’t require internet connectivity), it is just used to provide enough ether for the computer and the phone to talk to one another. It gives me peace of mind; relying on conference wireless doesn’t really lead anywhere good.

The way I usually write the code is via the most simple broadcast communication: messages from every computer connected to the server are sent to every other computer. Usually, it’s two computers/websites: one for remote, one for presentation.

(Are you interested in the source code I use…? Please, let me know and I will gladly open source it.)

It gets better

Since you’re in absolute control of the software on the remote, you can now imagine enhancing it:

Left: Interactive talk companion, allowing the audience to follow the slides and save/share them. | Middle: A voting app remote, allowing the audience to engage with the talk. | Right: A tablet-sized remote, allowing a confidant in the audience to automagically illustrate what the panel is talking about.

• Talk companion: Imagine handing a remote to everyone in your audience. Maybe that remote couldn’t control the slides, but it could follow them and allow people to tweet them or save them for future use. I’ve built and used it recently — read more about the talk companion and peruse all of its code
• Audience voting: For a few of my talks, I built another type of remote, allowing people to vote on the answers for their respective teams.

• Remotes for more than just the presenter: For a Computer History Museum setup, we built a sophisticated network of secret remotes, ceding control over the presentation not just to the panelists, but also confidants in the audience and the A/V crew.

The rectangle behind you, a series of articles about interactive presentations.

By Marcin Wichary (@mwichary)