Impressive Presentations With Impress.js and Extensions

Recently, there have been numerous JavaScript libraries released that make creating presentations in the web browser _somewhat_simple, and many geeks are jumping on the chance to depend less on Microsoft and start using their web development skills in new domains. This is an introduction to one of those libraries and a demonstration on how to extend it to make your job as a presenter even easier.

Hello Impress.js

Impress.js is well named because it is pretty impressive what can be done with it with just simple HTML and CSS work. They also say that “It’s an (un)fortunate coincidence that an Open/LibreOffice presentation tool is called Impress” right on their readme page. Impress.js is hosted on GitHub for the whole world to mess with. There is a demo that shows you a good chunk of the capabilities within Impress.js and the HTML, CSS, and JavaScript files are all chock full of comments for you to read to help you understand exactly what can be done and how to do it. In fact, the source files for the demo are essentially all the documentation you’ll get, but it’s definitely enough.

In fact I’m just going to let you peruse around the demo and GitHub page and let you learn how to use it from that because I don’t feel like there’s any good reason teach you how to use it, especially because all the real demo material is in the HTML and CSS and this is a JavaScript blog.

Extending Impress.js

I _am_, however, going to show you a great way to extend Impress.js to make it even more useful. This part actually will be largely in JavaScript, so it actually belongs on this blog. Anyway, what we’re going to do is allow the presenter to add notes to slides that will show up on a different screen so that the people you’re presenting to don’t see them. I “stole” the concept behind this from Christian Heilmann’s post titled “Browers Have a Presenter Mode: Console Info!“

In his post, he states that he realized that most presentation libraries don’t offer a mode where the presenter can see his notes on one screen and the presentation can be on the other, and the ones that do provide that capability don’t get it quite right. He realized, though, that the console window can be detached from the browser window and moved to another screen, so it can display the notes for the current slide to the presenter.

The trick is getting the notes into the console window, which isn’t really that difficult at all, but it’s worth going over. Sadly, even though this is a JavaScript tutorial, we have to talk a wee bit about some HTML. I’m sure you all won’t mind. Anyway, the first thing that we have to do is add the notes into the HTML source. So here’s an example of what that could look like:

<div class="step">
    // Slide Content Goes Here
    <div class="notes">
        // Put whatever notes you want in here. They'll get
        // displayed to the console window for ya.
    </div>
</div>

So it’s simple. Just throw an element into each slide with the class of “notes” and we’re golden. Now we’re done with the HTML, but there’s a tiny bit of CSS involved too. It’s small but important: make sure that you set .notes { display:none; } so that no one will see your notes showing up in the slides. Technically, you could do that within JavaScript, but there’s no good reason to.

Now for the JavaScript. All we’re going to do is listen for an event, in this case “impress:stepenter”, that tells us when a new slide is showing. I couldn’t actually find this event listed in any of the documentation, but I found it by going through the source file, which is probably the most readable source I’ve ever seen on a third-party script. Anyway, when that event fires, the target is the new current slide element, so we can get the child of that element with a class of “notes”, and then grab its content and push it to the console. If you’re using Firefox (not Chrome, and I’m not sure about the other browsers. I didn’t check) you can use console.clear() to clear the console so the only thing showing in the console are the current slide’s notes. Take a peek at the code. Note that we’re using jQuery to simplify a few things.

$('.step').on('impress:stepenter', function() {
    if (console.clear) { console.clear(); }
    console.log($(this).find('.notes').text());
});

Simple enough, right? If you’re feeling really ambitious, and if you think it’d help you, you can grab the title (assuming you have a standard class or element that you put the slide titles into) of the next slide and throw that in to the console too. You just add this line of code into the function above:

console.log($('.future').first().find(/*your title selector*/).text());

Conclusion

That’s all there is to it, but it can make your job as a presenter much simpler. If any of you use any of these presentation libraries, I’m sure this tidbit will come in handy. I can almost guarantee that any of those libraries worth their salt will include an event or something you can hook into to create this behavior and give you some notes to work from . God bless and happy coding.