Merge branch 'presenter_notes_server' of https://github.com/rmurphey/reveal.js into notes
This commit is contained in:
commit
bf2c95b546
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -2,3 +2,4 @@
|
|||
.svn
|
||||
log/*.log
|
||||
tmp/**
|
||||
node_modules/
|
||||
|
|
21
README.md
21
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
|
||||
|
||||
|
|
|
@ -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>
|
35
js/slidenotes.js
Normal file
35
js/slidenotes.js
Normal file
|
@ -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);
|
||||
} );
|
||||
}());
|
19
package.json
Normal file
19
package.json
Normal file
|
@ -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": {}
|
||||
}
|
48
slidenotes/index.js
Normal file
48
slidenotes/index.js
Normal file
|
@ -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");
|
85
slidenotes/notes.html
Normal file
85
slidenotes/notes.html
Normal file
|
@ -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>
|
Loading…
Reference in New Issue
Block a user