Controlling Reveal.js Presentations with an Apple Remote

Screen Shot 2013-03-28 at 2.50.53 PM

Lately I’ve been building all of my presentations with Reveal.js. It’s great to be able to talk about all the latest HTML5 technologies all the while using HTML5 to drive very compelling presentations.  Where possible, I can demonstrate new technology right in the presentation itself. The one thing I hadn’t been able to figure out was how to remotely drive my Reveal.js presentations while I’m standing 10 feet away from my computer.

The problem is, I  tend to walk around and flap my arms a lot when giving presentations.  I don’t like to hide behind a podium. And sometimes there’s no room on stage for your laptop. There are many remotes out there that have left/right buttons, but for a Reveal.js presentation, you also need left/right and up/down.  The Apple Remote has left/right and up/down, but it only works with Apple products, or so the kind folks at Apple store thought.

Enter iRed Lite. iRed Lite lets you easily remap the buttons on an Apple Remote to do your bidding.  Here’s how to do it:

1) Download and install iRed Lite from here: http://www.filewell.com/iRedLite/

2) Start the app and you should see the OSD Panel.  You can always bring up this panel by pressing and holding the menu button on your Apple remote.

Screen Shot 2013-03-28 at 2.27.38 PM

3) Click Edit… to bring up the editor

Screen Shot 2013-03-28 at 2.30.30 PM

 

4) Select Settings->New Layer

Screen Shot 2013-03-28 at 2.32.56 PM

 

5) Change the layer title to whatever you want:

Screen Shot 2013-03-28 at 2.34.19 PM

 

6) Select the key that we want to map to the down arrow, currently set to the - key.  This will take you to the Button screen.

  • Change the Application from iTunes to Current Application
  • Select Cursor Movement if it is not already selected
  • Set the action to Down
  • The title should automatically change to Down

Screen Shot 2013-03-28 at 2.44.15 PM

 

7) Repeat the same process for Left, Right and Up.  Then click Save.

You’re all setup.  Let’s try it out.  Open up a Reveal.js presentation:

Screen Shot 2013-03-28 at 2.47.50 PM

Press and hold the Menu button on your Apple Remote and the iRed Lite OSD Panel should appear, most likely with iTunes selected by default:

Screen Shot 2013-03-28 at 2.49.38 PM

 

Hit the down arrow on the remote until your layer is selected.

Screen Shot 2013-03-28 at 2.50.53 PM

 

Click the middle button on the remote to select that layer (the yellow highlight should disappear).

Bring your presentation back into view and you should now be able to control your presentation completely using the left/right/up/down buttons on your Apple Remote.

Let the arm flapping commence.

Reveal.js with CSS Custom Filters

revealshaderlogo

With reveal.js you can create fantastic looking presentations that run in your browser, driven purely with HTML/CSS/JS.  Since you have full control over which browser you use when giving your own presentation, it’s not unreasonable at all to make use of some newer browser features that do not have full cross-browser support yet.

With that in mind, I created a reveal.js presentation that uses CSS Custom Filters to achieve some very compelling transitions. Continue reading