^Technical

Create the Ultimate Interactive Presentation: Reveal.js, Leap Motion, Google Glass and SendGrid

_{Elmer Thomas

March 14, 2014 • 4 min read}

When a developer demos their software, especially at a hackathon, it’s best to “do it live.” For longer form presentations, a slide deck is generally the tool of choice, either using Keynote or Power Point. Having attended hundreds, if not thousands, of technical talks and hackathon presentations in the past few years, I can tell you definitively, even a small dash of interactivity goes a long way towards keeping the audience engaged. Of course, a slick presentation is not necessary, but it doesn’t hurt either, especially if it does not cost a great deal of time to create.

In this post, we’ll use the best interactive presentation tools available today to create a beautiful and interactive presentation in minutes. In fact, in just over four minutes, as you can see in this screencast (also embedded below). You can also clone GitHub repo to get started.

Technology Note

I have tested this project on a Macbook Pro Retina, running OS X Mavericks 10.9.2 with Node.js v0.10.26 installed using Chrome Version 34.0.1847.11 beta as the slide viewer. The instructions for getting the project running and setup on your machine are at Github. If you test with configurations other than what I have described, I would appreciate your feedback.

Reveal.js Brings the Presentation In-Browser

Reveal.js, according to its author, Hakim El Hattab, “is a framework for easily creating beautiful presentations using HTML.” I agree. If you need some convincing, go take a look a the live demo.

In this project, we will run Reveal.js within the express, a Node.js web application framework. I suggest you take a moment to read through the Reveal.js documenation to get familiar with the various options, they are quite impressive.

We will also make use of the Leap Motion controller and Highlight.js Reveal.js plugins for the slide navigation and code syntax highlighting.

To edit the content of the slides, you will do so in the views/index.html file, as explained in the Reveal.js documentation.

Leap Motion Gives Your Hand Waves Meaning

Using the Leap Motion controller with the Reveal.js Leap Motion plugin we can control our presentation with simple hand waves. For example, point 1 or 2 fingers at your screen to simulate a laser pointer. Swipe your hand left/right/up/down to navigate through the slides. Raise both hands upward to enter/exit overview mode. Now, all your hand waving will actually have a practical effect 😉

If you want to modify the functionality of the Leap Motion controller, check out the Reveal.initialize function in the views/index.html file, which is documented under the Leap Motion heading.

SendGrid’s Inbound Parse Webhook Adds Audience Interactivity

The SendGrid Inbound Parse Webhook takes an incoming email, parses it into a JSON object, then posts it to your endpoint. w00t! We will use this feature to allow for interactive near-realtime voting. During your presentation, live of course, you will ask your audience to send an email to a pre-configured email address with their vote in the subject line.

This software will then store the vote in a database and update your presentation right before your speechless audience’s eyes, using Highcharts.js to create the magical chart. The code that parses the incoming email, stores the result in a MySQL database, and then emails your audience is located in the app.get function.

Google Glass Becomes a Teleprompter

Using the Mirror API, we can post text to our Google Glass timeline. Every time we change a slide, we will grab the notes from that slide and push them to our Google Glass timeline, effectively creating a teleprompter that is synced with our slide notes.

To get this part of our project going, you will need to go through the process of creating an Glassware application on App Engine to obtain your Glass credentials. These credentials tell this app where to post the notes to.

You can follow the tutorial I wrote about Sending and Tracking Email with Google Glass to get your app started quickly. Then, to understand how the code works, I suggest you read the tutorial Getting Started with the Mirror API Using Node.js.

See It In Action

The above video shows each step in action as I piece together these different technologies into the ultimate interactive presentation.

The truly ultimate presentation will be the one you create and I’d love to hear about what you make with these tools. Please take a moment to share your creations with us! As always, we appreciate your feedback and are always open to ideas towards improvement.

Happy Hacking!

References

Following are resources that I used to craft this post and references that should help take your presentation game to the next level: