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 PowerPoint. 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 my 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 at 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 documentation 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 and included here:

The Leap Motion plugin lets you utilize your Leap Motion device to control basic navigation of your presentation. The gestures currently supported are:

  • 1 to 2 fingers. Pointer — Point to anything on screen. Move your finger past the device to expand the pointer.
  • 1 hand + 3 or more fingers (left/right/up/down). Navigate through your slides. See config options to invert movements.
  • 2 hands upwards. Toggle the overview mode. Do it a second time to exit the overview.

Config options

You can edit the following options:

Property
Default
Description
autoCenter true Center the pointer based on where you put your finger into the leap motions detection field.
gestureDelay 500 How long to delay between gestures in milliseconds.
naturalSwipe true Swipe as though you were touching a touch screen. Set to false to invert.
pointerColor #00aaff The color of the pointer.
pointerOpacity 0.7 The opacity of the pointer.
pointerSize 15 The minimum height and width of the pointer.
pointerTolerance 120 Bigger = slower pointer.

Example configuration:

Reveal.initialize({

    // other options...

    leap: {
        naturalSwipe   : false,    // Invert swipe gestures
        pointerOpacity : 0.5,      // Set pointer opacity to 0.5
        pointerColor   : '#d80000' // Red pointer
    },

    dependencies: [
        { src: 'plugin/leap/leap.js', async: true }
    ]

});

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

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

Elmer Thomas is SendGrid’s Hacker in Residence. His mission is to help SendGrid live up to its slogan: “Email Delivery. Simplified” by improving the lives of developers, both internally and externally. Follow his exploits on Twitter and GitHubThis post originally appeared on the SendGrid blog.