aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2012-07-01 01:57:23 -0400
committerHakim El Hattab <hakim.elhattab@gmail.com>2012-07-01 01:57:23 -0400
commitbf2c95b546c5dbff1c8b5903fb89e2ecee9b297b (patch)
tree4db5f768404fd00ae41b1f409bede832e1377ff9
parentbdad679715ca3d82a0ff4a2bae7353785ac9b125 (diff)
parent4ca99d426446508b63ad995ea029f4fc95c82952 (diff)
downloadfosdem-2018-presentation-bf2c95b546c5dbff1c8b5903fb89e2ecee9b297b.tar
fosdem-2018-presentation-bf2c95b546c5dbff1c8b5903fb89e2ecee9b297b.tar.gz
Merge branch 'presenter_notes_server' of https://github.com/rmurphey/reveal.js into notes
-rw-r--r--.gitignore1
-rw-r--r--README.md21
-rw-r--r--css/main.css8
-rw-r--r--index.html8
-rw-r--r--js/slidenotes.js35
-rw-r--r--package.json19
-rw-r--r--slidenotes/index.js48
-rw-r--r--slidenotes/notes.html85
8 files changed, 223 insertions, 2 deletions
diff --git a/.gitignore b/.gitignore
index dec0ea4..34058c4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
.svn
log/*.log
tmp/**
+node_modules/
diff --git a/README.md b/README.md
index 6264672..74b922e 100644
--- a/README.md
+++ b/README.md
@@ -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;
+}
diff --git a/index.html b/index.html
index a68dd6a..d4420ac 100644
--- a/index.html
+++ b/index.html
@@ -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>