I have been a Glass explorer since last November and regularly give a lot of talks at conferences and meetups. One of the first things that I really wanted to have was a way to have my speaker notes be sync’d up with Glass while I am speaking. Initially I created a prototype using Wearscript, Kaas and Keynote. You can read about that here. While the solution worked well, it doesn’t support the latest version of Keynote because Apple removed a bunch of Applescript Keynote API hooks in the latest version.
Even though I love Keynote I decided to look at some other tools and decided to try Reveal.js. Reveal.js is a HTML and Javascript based presentation framework that makes it relatively straight forward to create presentations that will run in any browser. It also already had a plugin that allows you to view speaker notes on another device that is on the same network. Basically all that you need to make it all work is to have a browser app with glass that can be directed towards the right URL using a barcode, some glass specific formatting on the speaker notes and you have the perfect presentation aid.
Step 1 – Install the Glassware
Currently this is not software that is available in the Glass store. Honestly I’m not sure if it would make sense to make it a app store app since the average user of Reveal.js is going to be a technical person that can edit html etc..
First you will need to get the current version of the Android SDK. Once you have it and it is unzipped in a directory you will need to add the adb tool to your path IE:
Your Glass will need to be in debug mode to sideload the app. To do that go to your seetings menu, swipe over to device info, tap and then swipe to debug mode and tap to turn it on. Next you will need to grab a usb cable and connect your Glass to your computer. Make sure you select the option to trust the computer.
Now go over to this repo and grab the two files that are in the apks directory. At the command prompt cd to the directory that has the apks and then install them to your device via adb:
adb install revealjs.apk
If everything is working correctly you should be able to tap into your app menu at the “ok glass” prompt and see the reveal.js app. When you tap into it barcode scanner should come up.
Installing reveal.js
You will want to clone this repo into a local directory. Edit anything that you want for your presentation, update the style etc in the main index.html and associated style sheets. You will also need to include the following required scripts by adding these dependencies:
...
dependencies: [
{ src: 'socket.io/socket.io.js', async: true },
{ src: 'plugin/notes-server-glass/client.js', async: true }
]
});
Install Node.js. Then….
node plugin/notes-server-glass
You will want to determine the ip address of the machine you are running the presentation on then open up a browser at http://your-ip:1947/ . You will see your main presentation along with two pop up windows. One will be the slide notes formatted for glass and the other will be a QR Code.
Make sure your Glass is on the same network as your computer, open the reveal.js app on your Glass, scan the QR Code and your notes should come up on your Glass. Now you can use a remote and as you flip through your slides a preview of the next one and any speaker notes will appear on your device.
Customizing Your Presenter View
If you want to change how your notes are displayed you can modify the notes.html file in the plugins/notes-server-glass directory. Our current formatting was done for function over appearance and doesn’t always display the entire next slide in your screen if you have a lot of notes.
We would love to move this beyond Reveal.js and offer a solution that can be used with other presentation tools. Pull requests are always welcome and feel free to reach out to us if you have other ideas etc..
