diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | README.md | 21 | ||||
| -rw-r--r-- | css/main.css | 8 | ||||
| -rw-r--r-- | index.html | 8 | ||||
| -rw-r--r-- | js/slidenotes.js | 35 | ||||
| -rw-r--r-- | package.json | 19 | ||||
| -rw-r--r-- | slidenotes/index.js | 48 | ||||
| -rw-r--r-- | slidenotes/notes.html | 85 |
8 files changed, 223 insertions, 2 deletions
@@ -2,3 +2,4 @@ .svn log/*.log tmp/** +node_modules/ @@ -104,6 +104,27 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) { } ); ``` +## Speaker Notes + +If you're interested in using speaker notes, reveal.js comes with a Node server that allows you to deliver your presentation in one browser while viewing speaker notes in another. + +To include speaker notes in your presentation, simply add an `<aside class="notes">` element to any slide. These notes will be hidden in the main presentation view. + +To use the speaker notes server, your `index.html` will need to include script tags for `socket.io/socket.io.js` and `js/slidenotes.js`. If you don't want to use the speaker notes server, you can safely remove these script tags, but they are included by default. + +You'll also need to [install Node.js](http://nodejs.org/); then, install the server dependencies by running `npm install`. + +Once Node.js and the dependencies are installed, run the following command from the root directory: + + node slidenotes + +By default, the slides will be served at [localhost:1947](http://localhost:1947). + +You can change the appearance of the speaker notes by editing the file at `slidenotes/notes.html`. + +### Known Issues + +- The notes page is supposed to show the current slide and the next slide, but when it first starts, it always shows the first slide in both positions. ## Examples diff --git a/css/main.css b/css/main.css index 747b34a..1b9d4f4 100644 --- a/css/main.css +++ b/css/main.css @@ -951,6 +951,10 @@ body { background: rgba( 0, 0, 0, 0.6 ); } +/********************************************* + * SPEAKER NOTES + *********************************************/ - - +.reveal aside.notes { + display: none; +} @@ -48,6 +48,10 @@ <p> <i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i> </p> + + <aside class="notes"> + Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you run the speaker notes server. + </aside> </section> <!-- Example of nested vertical slides --> @@ -268,6 +272,7 @@ linkify( 'a' ); <script> // Parse the query string into a key/value object var query = {}; + location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) { query[ a.split( '=' ).shift() ] = a.split( '=' ).pop(); } ); @@ -311,5 +316,8 @@ linkify( 'a' ); hljs.initHighlightingOnLoad(); </script> + <!-- the next two lines enable the speaker notes server --> + <script src="socket.io/socket.io.js"></script> + <script src="js/slidenotes.js"></script> </body> </html>
\ No newline at end of file diff --git a/js/slidenotes.js b/js/slidenotes.js new file mode 100644 index 0000000..4e0ebab --- /dev/null +++ b/js/slidenotes.js @@ -0,0 +1,35 @@ +(function() { + // don't emit events from inside the previews themselves + var qs = window.location.href.split('?'); + if (qs.length > 1 && qs[1].match('receiver')) { return; } + + var socket = io.connect(window.location.origin); + var socketId = Math.random().toString().slice(2); + console.log('View slide notes at ' + window.location.origin + '/_notes/' + socketId); + + Reveal.addEventListener( 'slidechanged', function( event ) { + var nextindexh; + var nextindexv; + var slideElement = event.currentSlide; + + if (slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION') { + nextindexh = event.indexh; + nextindexv = event.indexv + 1; + } else { + nextindexh = event.indexh + 1; + nextindexv = 0; + } + + var notes = slideElement.querySelector('aside.notes'); + var slideData = { + notes : notes ? notes.innerHTML : '', + indexh : event.indexh, + indexv : event.indexv, + nextindexh : nextindexh, + nextindexv : nextindexv, + socketId : socketId + }; + + socket.emit('slidechanged', slideData); + } ); +}()); diff --git a/package.json b/package.json new file mode 100644 index 0000000..b00aaa4 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "author": "Hakim El Hattab", + "name": "Reveal.js", + "description": "HTML5 Slideware with Presenter Notes", + "version": "1.5.0", + "repository": { + "type": "git", + "url": "git://github.com/hakimel/reveal.js.git" + }, + "engines": { + "node": "~0.6.8" + }, + "dependencies": { + "express" : "2.5.9", + "socket.io" : "0.9.6", + "mustache" : "0.4.0" + }, + "devDependencies": {} +} diff --git a/slidenotes/index.js b/slidenotes/index.js new file mode 100644 index 0000000..d27847e --- /dev/null +++ b/slidenotes/index.js @@ -0,0 +1,48 @@ +var express = require('express'); +var fs = require('fs'); +var io = require('socket.io'); +var _ = require('underscore'); +var Mustache = require('mustache'); + +var app = express.createServer(); +var staticDir = express.static; + +io = io.listen(app); + +var opts = { + port : 1947, + baseDir : __dirname + '/../' +}; + +io.sockets.on('connection', function(socket) { + socket.on('slidechanged', function(slideData) { + socket.broadcast.emit('slidedata', slideData); + }); +}); + +app.configure(function() { + [ 'css', 'assets', 'js', 'lib' ].forEach(function(dir) { + app.use('/' + dir, staticDir(opts.baseDir + dir)); + }); +}); + +app.get("/", function(req, res) { + fs.createReadStream(opts.baseDir + '/index.html').pipe(res); +}); + +app.get("/_notes/:socketId", function(req, res) { + + fs.readFile(opts.baseDir + 'slidenotes/notes.html', function(err, data) { + res.send(Mustache.to_html(data.toString(), { + socketId : req.params.socketId + })); + }); + // fs.createReadStream(opts.baseDir + 'slidenotes/notes.html').pipe(res); +}); + +// Actually listen +app.listen(opts.port || null); + +console.log("Your slides are at http://localhost" + (opts.port ? (':' + opts.port) : '')); +console.log("Your notes are at http://localhost" + (opts.port ? (':' + opts.port) : '') + '/_notes'); +console.log("Advance through your slides and your speaker notes will advance automatically"); diff --git a/slidenotes/notes.html b/slidenotes/notes.html new file mode 100644 index 0000000..58c2516 --- /dev/null +++ b/slidenotes/notes.html @@ -0,0 +1,85 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + + <title>Slide Notes</title> + + <style> + #notes { + font-family: Helvetica; + font-size: 24px; + width: 640px; + } + + #wrap-slides { + width: 640px; + height: 512px; + float: left; + } + + #slides { + width: 1280px; + height: 1024px; + border: 1px solid black; + -moz-transform: scale(0.5); + -moz-transform-origin: 0 0; + -o-transform: scale(0.5); + -o-transform-origin: 0 0; + -webkit-transform: scale(0.5); + -webkit-transform-origin: 0 0; + } + + #wrap-next-slide { + width: 320px; + height: 256px; + float: left; + margin: 0 0 0 50px; + } + + #next-slide { + width: 1280px; + height: 1024px; + border: 1px solid black; + -moz-transform: scale(0.25); + -moz-transform-origin: 0 0; + -o-transform: scale(0.25); + -o-transform-origin: 0 0; + -webkit-transform: scale(0.25); + -webkit-transform-origin: 0 0; + } + </style> + </head> + + <body> + + <div id="wrap-slides"> + <iframe src="/?receiver" width="1280" height="1024" id="slides"></iframe> + </div> + + <div id="wrap-next-slide"> + <iframe src="/?receiver" width="640" height="512" id="next-slide"></iframe> + </div> + <div id="notes"></div> + + <script src="/socket.io/socket.io.js"></script> + + <script> + var socketId = '{{socketId}}'; + var socket = io.connect(window.location.origin); + var notes = document.getElementById('notes'); + var slides = document.getElementById('slides'); + var nextSlide = document.getElementById('next-slide'); + + socket.on('slidedata', function(data) { + // ignore data from sockets that aren't ours + if (data.socketId !== socketId) { return; } + + notes.innerHTML = data.notes; + slides.contentWindow.Reveal.navigateTo(data.indexh, data.indexv); + nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv); + }); + </script> + + </body> +</html> |