Initial commit
This commit is contained in:
Thomas FORGIONE
commit
3490d8aab7
|
|
@ -0,0 +1,21 @@
|
||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2015 Thomas FORGIONE
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
# slideshow.io
|
||||||
|
|
||||||
|
## What is it
|
||||||
|
Client-server application to manage slides on different computers during a
|
||||||
|
presentation.
|
||||||
|
|
||||||
|
You can upload your pdf, and a link will be sent so you can share it with your
|
||||||
|
viewer. You will have a *speaker* interface, allowing you to switch between
|
||||||
|
slides and interact with them (underline elements, use a pointer...) and your
|
||||||
|
viewer will see what you are currently doing.
|
||||||
|
|
||||||
|
## Install
|
||||||
|
A simple `npm install` will work.
|
||||||
|
|
||||||
|
## License
|
||||||
|
This software is under MIT license. Check
|
||||||
|
[LICENSE.md](https://github.com/tforgione/slideshow.io/blob/master/LICENSE.md) for
|
||||||
|
more information.
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
var express = require('express');
|
||||||
|
var fs = require('fs');
|
||||||
|
var log = require('log.js')
|
||||||
|
|
||||||
|
module.exports = function(parent){
|
||||||
|
|
||||||
|
log.debug("Loading get :");
|
||||||
|
|
||||||
|
fs.readdirSync(__dirname + '/../routes').forEach(function(name){
|
||||||
|
|
||||||
|
// index.js in controller, with function as pages (views.py for django)
|
||||||
|
var obj = require('./../routes/' + name + '/index');
|
||||||
|
|
||||||
|
// urls.js, just like django urls.py
|
||||||
|
var urls = require('./../routes/' + name + '/urls');
|
||||||
|
name = obj.name || name;
|
||||||
|
var app = express();
|
||||||
|
|
||||||
|
// allow specifying the view engine
|
||||||
|
if (obj.engine) app.set('view engine', obj.engine);
|
||||||
|
app.set('views', __dirname + '/../routes/' + name + '/views');
|
||||||
|
|
||||||
|
// generate routes based
|
||||||
|
// on the exported methods
|
||||||
|
|
||||||
|
log.debug(' ' + name + ':');
|
||||||
|
|
||||||
|
for (var key in urls) {
|
||||||
|
|
||||||
|
app.get(key, ((key) => function(req, res, next) {
|
||||||
|
|
||||||
|
var path = obj[urls[key]](req, res, function(view) {
|
||||||
|
res.render(
|
||||||
|
__dirname +
|
||||||
|
'/../routes/' +
|
||||||
|
name + '/views/' +
|
||||||
|
view,
|
||||||
|
res.locals,
|
||||||
|
function(err, out) {
|
||||||
|
if (err !== null) {
|
||||||
|
log.pugerror(err);
|
||||||
|
}
|
||||||
|
res.send(out);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
}, next);
|
||||||
|
|
||||||
|
})(key));
|
||||||
|
|
||||||
|
log.debug(' ' + key + ' -> ' + name + '.' + urls[key]);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
log.debug();
|
||||||
|
|
||||||
|
// mount the app
|
||||||
|
parent.use(app);
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,145 @@
|
||||||
|
var express = require('express');
|
||||||
|
var http = require('http');
|
||||||
|
var yargs = require('yargs');
|
||||||
|
|
||||||
|
var argv = yargs.argv;
|
||||||
|
|
||||||
|
var log = {};
|
||||||
|
|
||||||
|
var Color = {
|
||||||
|
DEFAULT:0,
|
||||||
|
BLACK:1,
|
||||||
|
RED:2,
|
||||||
|
GREEN:3,
|
||||||
|
YELLOW:4,
|
||||||
|
BLUE:5,
|
||||||
|
MAGENTA:6,
|
||||||
|
CYAN:7,
|
||||||
|
ORANGE:8
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColorCode(c) {
|
||||||
|
switch (c) {
|
||||||
|
case Color.DEFAULT: return '\u001b[0m';
|
||||||
|
case Color.BLACK: return '\u001b[30m';
|
||||||
|
case Color.RED: return '\u001b[31m';
|
||||||
|
case Color.GREEN: return '\u001b[32m';
|
||||||
|
case Color.YELLOW: return '\u001b[33m';
|
||||||
|
case Color.BLUE: return '\u001b[34m';
|
||||||
|
case Color.MAGENTA: return '\u001b[35m';
|
||||||
|
case Color.CYAN: return '\u001b[36m';
|
||||||
|
case Color.ORANGE: return '\u001b[38;5;202m';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var isDev = require('express')().get('env') === 'development';
|
||||||
|
|
||||||
|
var write;
|
||||||
|
|
||||||
|
if (argv.nolisten || argv.n) {
|
||||||
|
write = function(elt, color) { }
|
||||||
|
} else if (isDev) {
|
||||||
|
write = function(elt, color) {
|
||||||
|
console.log(getColorCode(color) + elt + getColorCode(Color.DEFAULT));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
write = function(elt, color) {
|
||||||
|
console.log(elt);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
log.ready = function(msg) {
|
||||||
|
write('[RDY] ' + new Date() + ' ' + msg, Color.GREEN);
|
||||||
|
}
|
||||||
|
|
||||||
|
log.request = function(req, res, time) {
|
||||||
|
|
||||||
|
if (req.headers['x-forwarded-for'] !== undefined || isDev) {
|
||||||
|
|
||||||
|
var isStatic = req.url.substr(0, 7) === '/static' || req.url === '/favicon.ico';
|
||||||
|
|
||||||
|
write(
|
||||||
|
'[REQ] ' + new Date() + ' ' +
|
||||||
|
(req.headers['x-forwarded-for'] || req.connection.remoteAddress) +
|
||||||
|
(time !== undefined ? (' in ' + (" " + time).slice(-6) + ' ms') : '') +
|
||||||
|
' : ' + (isStatic && req.url !== '/favicon.ico' ? '/static' + req.url : req.url),
|
||||||
|
isStatic ? Color.YELLOW : Color.CYAN
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
log.socket = {};
|
||||||
|
|
||||||
|
log.socket.connection = function(socket, isTest) {
|
||||||
|
write(
|
||||||
|
'[SOK] ' + new Date() + ' ' +
|
||||||
|
(socket.handshake.headers['x-forwarded-for'] || socket.handshake.address) + (isTest ? ' test' : '') + ' connection',
|
||||||
|
Color.MAGENTA
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
log.socket.disconnect = function(socket, isTest) {
|
||||||
|
write(
|
||||||
|
'[SOK] ' + new Date() + ' ' +
|
||||||
|
(socket.handshake.headers['x-forwarded-for'] || socket.handshake.address) + (isTest ? ' test' : '') + ' disconnect',
|
||||||
|
Color.MAGENTA
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
log.dberror = function(error) {
|
||||||
|
write(
|
||||||
|
'[DBE] ' + new Date() + ' ' + error,
|
||||||
|
Color.RED
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
log.prefetcherror = function(error) {
|
||||||
|
write(
|
||||||
|
'[PFE] ' + new Date() + ' ' + error,
|
||||||
|
Color.RED
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
log.mailerror = function(error) {
|
||||||
|
write(
|
||||||
|
'[MLE] ' + new Date() + ' ' + error,
|
||||||
|
Color.RED
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
log.debug = function(info, force) {
|
||||||
|
if (isDev || force === true) {
|
||||||
|
write(
|
||||||
|
'[DBG] ' + (info !== undefined ? info : ''),
|
||||||
|
Color.YELLOW
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
log.pugerror = function(error) {
|
||||||
|
write(
|
||||||
|
'[PER] ' + new Date() + ' ' + error,
|
||||||
|
Color.RED
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
log.warning = function(message) {
|
||||||
|
|
||||||
|
write(
|
||||||
|
'[WRN] ' + new Date() + ' ' + message,
|
||||||
|
Color.ORANGE
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
log.faceerror = function(message) {
|
||||||
|
|
||||||
|
write(
|
||||||
|
'[FER] ' + new Date() + ' ' + message,
|
||||||
|
Color.RED
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = log;
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
module.exports = function(io) {
|
||||||
|
|
||||||
|
io.on('connection', function(socket) {
|
||||||
|
|
||||||
|
socket.emit('welcome');
|
||||||
|
|
||||||
|
socket.on('viewer', function(filename) {
|
||||||
|
socket.join(filename);
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('speaker', function(filename, socketId) {
|
||||||
|
socket.join(filename);
|
||||||
|
socket.speakerId = socketId;
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('change-slide', function(filename, pageNumber) {
|
||||||
|
socket.broadcast.to(filename).emit('update', pageNumber);
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('pointer', function(filename, id, x, y) {
|
||||||
|
if (id === socket.speakerId) {
|
||||||
|
socket.broadcast.to(filename).emit('pointer', 'speaker', x, y);
|
||||||
|
} else {
|
||||||
|
socket.broadcast.to(filename).emit('pointer', 'speaker', x, y);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('viewer-laser', function(filename, enabled) {
|
||||||
|
socket.broadcast.to(filename).emit('viewer-laser', enabled);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"name" : "slideshow.io",
|
||||||
|
"version" : "0.1.0",
|
||||||
|
"dependencies" : {
|
||||||
|
"express" : "*",
|
||||||
|
"pug" : "*",
|
||||||
|
"socket.io" : "*",
|
||||||
|
"node-uuid" : "*",
|
||||||
|
"body-parser" : "*",
|
||||||
|
"app-module-path":"*"
|
||||||
|
},
|
||||||
|
"repository" : {
|
||||||
|
"type" : "git",
|
||||||
|
"url" : "https://github.com/tforgione/slideshow.io"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports.index = function(req, res, render, next) {
|
||||||
|
|
||||||
|
res.setHeader('Content-Type', 'text/html');
|
||||||
|
render('index.pug', res.locals)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
module.exports = {
|
||||||
|
'/' : 'index'
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
extends ../../../views/main.pug
|
||||||
|
|
||||||
|
block content
|
||||||
|
p.
|
||||||
|
Hello world !
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
var fs = require('fs');
|
||||||
|
|
||||||
|
module.exports.index = function(req, res, render, next) {
|
||||||
|
|
||||||
|
fs.stat('static/uploaded/' + req.params.file + '.pdf', function(err) {
|
||||||
|
|
||||||
|
if (err === null) {
|
||||||
|
|
||||||
|
res.locals.file = req.params.file;
|
||||||
|
|
||||||
|
res.setHeader('Content-Type', 'text/html');
|
||||||
|
render('index.pug', res.locals);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
// 404 : file does not exist
|
||||||
|
var error = new Error('File does not exist');
|
||||||
|
error.status = 404;
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
module.exports = {
|
||||||
|
'/speaker/:file' : 'index'
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
extends ../../../views/main.pug
|
||||||
|
|
||||||
|
block append css
|
||||||
|
link(href="/static/css/style.css", rel="stylesheet")
|
||||||
|
link(href="/static/css/speaker.css", rel="stylesheet")
|
||||||
|
|
||||||
|
block content
|
||||||
|
|
||||||
|
.row
|
||||||
|
.col-md-8
|
||||||
|
#canvases
|
||||||
|
canvas#canvas-pdf(style={"border" : "1px solid #000000", position:'absolute'})
|
||||||
|
canvas#canvas-paint.noselect(onmousedown="sio.onMouseDown(event);", onmousemove="sio.onMouseMove(event);", onmouseup="sio.onMouseUp(event);", onmouseout="sio.onMouseUp(event);", style={position:'absolute'})
|
||||||
|
|
||||||
|
p
|
||||||
|
.btn-group
|
||||||
|
button.btn.btn-default#first(onclick="sio.firstSlide();")
|
||||||
|
span.glyphicon.glyphicon-step-backward
|
||||||
|
button.btn.btn-default#previous(aria-hidden='true', onclick="sio.previousSlide();")
|
||||||
|
span.glyphicon.glyphicon-play.glyphicon-flip
|
||||||
|
input.btn.btn-default#counter(type='text', onclick="sio.clearCounter();", onblur="sio.update();", onkeydown="if (event.keyCode === 13) sio.changeSlideFromCounter(event);")
|
||||||
|
button.btn.btn-default#next(onclick="sio.nextSlide();")
|
||||||
|
span.glyphicon.glyphicon-play
|
||||||
|
button.btn.btn-default#last(onclick="sio.lastSlide();")
|
||||||
|
span.glyphicon.glyphicon-step-forward
|
||||||
|
|
||||||
|
span(style={'margin-left':'10px'})
|
||||||
|
.btn-group
|
||||||
|
button.btn.btn-default#sync(onclick="sio.syncAudience();") Sync viewer
|
||||||
|
|
||||||
|
span(style={'margin-left':'10px'})
|
||||||
|
.btn-group
|
||||||
|
button.btn.btn-default#viewer-laser(onclick="sio.switchAudienceLaser();") Audience laser is disabled
|
||||||
|
|
||||||
|
.col-md-4
|
||||||
|
.btn-group
|
||||||
|
button.btn.btn-default#start(onclick="sio.startPresentation();")
|
||||||
|
span.glyphicon.glyphicon-play
|
||||||
|
button.btn.btn-default#stop(onclick="sio.stopPresentation();", disabled)
|
||||||
|
span.glyphicon.glyphicon-stop
|
||||||
|
p Total time :
|
||||||
|
span#totalTime
|
||||||
|
p Slide time :
|
||||||
|
span#slideTime
|
||||||
|
|
||||||
|
block js
|
||||||
|
script filename = '#{file}';
|
||||||
|
script(src="/static/js/pdf.js")
|
||||||
|
script(src="/static/js/pdf.worker.js")
|
||||||
|
script(src="/socket.io/socket.io.js")
|
||||||
|
script(src="/static/js/speaker.js")
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
var fs = require('fs');
|
||||||
|
|
||||||
|
module.exports.index = function(req, res, render, next) {
|
||||||
|
|
||||||
|
fs.stat('static/uploaded/' + req.params.file + '.pdf', function(err) {
|
||||||
|
|
||||||
|
if (err === null) {
|
||||||
|
|
||||||
|
res.locals.file = req.params.file;
|
||||||
|
|
||||||
|
res.setHeader('Content-Type', 'text/html');
|
||||||
|
render('index.pug', res.locals);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
// 404 : file does not exist
|
||||||
|
var error = new Error('File does not exist');
|
||||||
|
error.status = 404;
|
||||||
|
next(error);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
module.exports = {
|
||||||
|
'/viewer/:file' : 'index'
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
extends ../../../views/base.pug
|
||||||
|
|
||||||
|
block css
|
||||||
|
link(href="/static/css/style.css", rel="stylesheet")
|
||||||
|
link(href="/static/css/viewer.css", rel="stylesheet")
|
||||||
|
|
||||||
|
block base_content
|
||||||
|
#canvases
|
||||||
|
canvas#canvas-pdf.absoluteCenter(style={position:'absolute'})
|
||||||
|
canvas#canvas-paint.absoluteCenter.noselect(onmousedown="sio.onMouseDown(event);", onmousemove="sio.onMouseMove(event);", onmouseup="sio.onMouseUp(event);", onmouseout="sio.onMouseUp(event);", style={position:'absolute'})
|
||||||
|
|
||||||
|
block js
|
||||||
|
script filename = '#{file}';
|
||||||
|
script(src="/static/js/pdf.js")
|
||||||
|
script(src="/static/js/pdf.worker.js")
|
||||||
|
script(src="/socket.io/socket.io.js")
|
||||||
|
script(src="/static/js/viewer.js")
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
require('app-module-path').addPath('./lib');
|
||||||
|
|
||||||
|
var http = require('http');
|
||||||
|
var express = require('express');
|
||||||
|
var pug = require('pug');
|
||||||
|
var bp = require('body-parser');
|
||||||
|
var socket = require('socket.js');
|
||||||
|
var log = require('log.js');
|
||||||
|
var app = express();
|
||||||
|
|
||||||
|
// Socket.io initialization
|
||||||
|
var http = require('http').Server(app);
|
||||||
|
var io = require('socket.io')(http);
|
||||||
|
require('./lib/socket.js')(io);
|
||||||
|
|
||||||
|
var isDev = app.get('env') === 'development';
|
||||||
|
|
||||||
|
app.set('view engine', 'pug');
|
||||||
|
app.set('trust proxy', 1);
|
||||||
|
|
||||||
|
// parse application/x-www-form-urlencoded
|
||||||
|
app.use(bp.urlencoded({ extended: false }))
|
||||||
|
|
||||||
|
// parse application/json
|
||||||
|
app.use(bp.json())
|
||||||
|
|
||||||
|
// Log request and time to answer
|
||||||
|
app.use(function(req, res, next) {
|
||||||
|
let start = Date.now();
|
||||||
|
res.on('finish', function() {
|
||||||
|
log.request(req, res, Date.now() - start);
|
||||||
|
});
|
||||||
|
res.locals.title = "slideshow.io";
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Load controllers
|
||||||
|
require('./lib/get')(app);
|
||||||
|
|
||||||
|
// Static files
|
||||||
|
app.use('/static', express.static('static'));
|
||||||
|
|
||||||
|
// When error raised
|
||||||
|
app.use(function(err, req, res, next) {
|
||||||
|
if (err.status === 404) {
|
||||||
|
res.setHeader('Content-Type', 'text/html');
|
||||||
|
res.send('Error 404');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// When route not found, raise not found
|
||||||
|
app.use(function(req, res) {
|
||||||
|
res.setHeader('Content-Type', 'text/html');
|
||||||
|
res.send('Error 404');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set ports and ip address
|
||||||
|
var serverPort, serverIpAddress;
|
||||||
|
|
||||||
|
if ( isDev ) {
|
||||||
|
serverPort = 4001;
|
||||||
|
serverIpAddress = 'localhost';
|
||||||
|
} else {
|
||||||
|
// Openhift conf
|
||||||
|
serverPort = process.env.OPENSHIFT_NODEJS_PORT || 8080;
|
||||||
|
serverIpAddress = process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start server
|
||||||
|
http.listen(serverPort, serverIpAddress, function() {
|
||||||
|
log.debug("Now listening " + serverIpAddress + ":" + serverPort);
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
.form-signin {
|
||||||
|
max-width: 330px;
|
||||||
|
padding: 15px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.form-signin .form-signin-heading,
|
||||||
|
.form-signin .checkbox {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.form-signin .checkbox {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.form-signin .form-control {
|
||||||
|
position: relative;
|
||||||
|
height: auto;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.form-signin .form-control:focus {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.form-signin input[type="email"] {
|
||||||
|
margin-bottom: -1px;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
}
|
||||||
|
.form-signin input[type="password"] {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
.glyphicon-flip {
|
||||||
|
-moz-transform: scaleX(-1);
|
||||||
|
-o-transform: scaleX(-1);
|
||||||
|
-webkit-transform: scaleX(-1);
|
||||||
|
transform: scaleX(-1);
|
||||||
|
filter: FlipH;
|
||||||
|
-ms-filter: "FlipH";
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
.noselect {
|
||||||
|
cursor: default;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
#canvas {
|
||||||
|
margin:auto;
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
bottom:0;
|
||||||
|
left:0;
|
||||||
|
right:0;
|
||||||
|
max-height:100%;
|
||||||
|
max-width:100%;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,291 @@
|
||||||
|
$(function() { sio = (function() {
|
||||||
|
|
||||||
|
var sio = {};
|
||||||
|
|
||||||
|
var counter = $('#counter');
|
||||||
|
|
||||||
|
var canvasPdf = $('#canvas-pdf').get(0);
|
||||||
|
var contextPdf = canvasPdf.getContext('2d');
|
||||||
|
|
||||||
|
var canvasPaint = $('#canvas-paint').get(0);
|
||||||
|
var contextPaint = canvasPaint.getContext('2d');
|
||||||
|
|
||||||
|
var pdf;
|
||||||
|
var currentPage = 1;
|
||||||
|
|
||||||
|
var startTime = 0;
|
||||||
|
var startSlide = 0;
|
||||||
|
var refreshIntervalId = 0;
|
||||||
|
|
||||||
|
var pointer = false;
|
||||||
|
var shouldUpdatePointer = false;
|
||||||
|
|
||||||
|
var canvasPdfBounding;
|
||||||
|
|
||||||
|
var lasers = {};
|
||||||
|
var drawAudienceLasers = false;
|
||||||
|
|
||||||
|
PDFJS.getDocument('/static/uploaded/' + filename + '.pdf').then(function getPdf(_pdf) {
|
||||||
|
pdf = _pdf;
|
||||||
|
updateUI();
|
||||||
|
});
|
||||||
|
|
||||||
|
var socket = io();
|
||||||
|
|
||||||
|
socket.on('welcome', function() {
|
||||||
|
socket.emit('speaker', filename, socket.id);
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('pointer', canvasPointer);
|
||||||
|
|
||||||
|
function filterInt(value) {
|
||||||
|
if(/^(\-|\+)?([0-9]+|Infinity)$/.test(value))
|
||||||
|
return Number(value);
|
||||||
|
return NaN;
|
||||||
|
}
|
||||||
|
|
||||||
|
var updateUI = function() {
|
||||||
|
|
||||||
|
counter.val(currentPage + '/' + pdf.pdfInfo.numPages);
|
||||||
|
|
||||||
|
$('#previous,#first').prop('disabled', currentPage === 1);
|
||||||
|
$('#next,#last').prop('disabled', currentPage === pdf.pdfInfo.numPages);
|
||||||
|
|
||||||
|
pdf.getPage(currentPage).then(function(page) {
|
||||||
|
|
||||||
|
previousPage = currentPage;
|
||||||
|
|
||||||
|
var viewport = page.getViewport(2.0);
|
||||||
|
|
||||||
|
canvasPdf.width = viewport.width;
|
||||||
|
canvasPdf.height = viewport.height;
|
||||||
|
|
||||||
|
canvasPaint.width = viewport.width;
|
||||||
|
canvasPaint.height = viewport.height;
|
||||||
|
|
||||||
|
$('#canvases').width(canvasPdf.width + 'px');
|
||||||
|
$('#canvases').height(canvasPdf.height + 'px');
|
||||||
|
|
||||||
|
canvasPdfBounding = canvasPdf.getBoundingClientRect();
|
||||||
|
|
||||||
|
var renderContext = {
|
||||||
|
canvasContext: contextPdf,
|
||||||
|
viewport: viewport
|
||||||
|
};
|
||||||
|
|
||||||
|
page.render(renderContext);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
function updateAudience() { socket.emit('change-slide', filename, currentPage); }
|
||||||
|
|
||||||
|
function formatTime(ms) {
|
||||||
|
var sec = padToTwo(Math.floor((ms / 1000) % 60));
|
||||||
|
var min = padToTwo(Math.floor(((ms / 1000 - sec) % 3600) / 60));
|
||||||
|
|
||||||
|
return min + ':' + sec;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateTimers() {
|
||||||
|
if (refreshIntervalId !== 0) {
|
||||||
|
$('#totalTime').html(formatTime(Date.now() - startTime));
|
||||||
|
$('#slideTime').html(formatTime(Date.now() - startSlide));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function padToTwo(number) {
|
||||||
|
if (number<=99) { number = ("0"+number).slice(-2); }
|
||||||
|
return number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetTimeSlide() {
|
||||||
|
startSlide = Date.now();
|
||||||
|
updateTimers();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Check if number is valid, and updates
|
||||||
|
// number undefined means sync all clients
|
||||||
|
function changeSlide(number) {
|
||||||
|
|
||||||
|
if (isNaN(number) || number < 1 || number > pdf.pdfInfo.numPages) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentPage === undefined || currentPage === number) {
|
||||||
|
updateAudience();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
currentPage = number;
|
||||||
|
|
||||||
|
updateUI();
|
||||||
|
updateAudience();
|
||||||
|
resetTimeSlide();
|
||||||
|
|
||||||
|
return true;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function canvasPointer(id,x,y) {
|
||||||
|
|
||||||
|
// Clear canvas
|
||||||
|
canvasPaint.width = canvasPaint.width;
|
||||||
|
|
||||||
|
if (id != undefined) {
|
||||||
|
|
||||||
|
if (x != undefined && y != undefined) {
|
||||||
|
|
||||||
|
lasers[id] = {x:x, y:y};
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
delete lasers[id];
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var laserIndex in lasers) {
|
||||||
|
|
||||||
|
var laser = lasers[laserIndex];
|
||||||
|
|
||||||
|
if (drawAudienceLasers === true || laserIndex === socket.id) {
|
||||||
|
|
||||||
|
contextPaint.fillStyle = laserIndex === socket.id ? 'red' : 'green';
|
||||||
|
contextPaint.beginPath();
|
||||||
|
contextPaint.arc(laser.x * canvasPdf.width, laser.y * canvasPdf.height, 10, 0, Math.PI*2, true);
|
||||||
|
contextPaint.closePath();
|
||||||
|
contextPaint.fill();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
sio.onMouseDown = function(event) {
|
||||||
|
|
||||||
|
var x = (event.x - canvasPdfBounding.left) / canvasPdf.width;
|
||||||
|
var y = (event.y - canvasPdfBounding.top) / canvasPdf.height;
|
||||||
|
|
||||||
|
socket.emit('pointer', filename, socket.id, x, y);
|
||||||
|
|
||||||
|
pointer = true;
|
||||||
|
shouldUpdatePointer = true;
|
||||||
|
|
||||||
|
canvasPointer(socket.id, x, y);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
sio.onMouseMove = function(event) {
|
||||||
|
|
||||||
|
if (pointer) {
|
||||||
|
|
||||||
|
var x = (event.x - canvasPdfBounding.left) / canvasPdf.width;
|
||||||
|
var y = (event.y - canvasPdfBounding.top) / canvasPdf.height;
|
||||||
|
|
||||||
|
if (shouldUpdatePointer) {
|
||||||
|
// Update
|
||||||
|
socket.emit('pointer', filename, socket.id, x, y);
|
||||||
|
|
||||||
|
shouldUpdatePointer = false;
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
|
||||||
|
shouldUpdatePointer = true;
|
||||||
|
|
||||||
|
}, 20);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
canvasPointer(socket.id, x, y);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
sio.onMouseUp = function(event) {
|
||||||
|
|
||||||
|
socket.emit('pointer', filename, socket.id);
|
||||||
|
|
||||||
|
pointer = false;
|
||||||
|
shouldUpdatePointer = false;
|
||||||
|
|
||||||
|
canvasPointer(socket.id);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
sio.startPresentation = function() {
|
||||||
|
|
||||||
|
startTime = startSlide = Date.now();
|
||||||
|
|
||||||
|
refreshIntervalId = setInterval(updateTimers, 1000);
|
||||||
|
updateTimers();
|
||||||
|
|
||||||
|
$('#start').prop('disabled', true);
|
||||||
|
$('#stop').prop('disabled', false);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
sio.stopPresentation = function() {
|
||||||
|
|
||||||
|
clearInterval(refreshIntervalId);
|
||||||
|
refreshIntervalId = 0;
|
||||||
|
|
||||||
|
$('#start').prop('disabled', false);
|
||||||
|
$('#stop').prop('disabled', true);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
sio.changeSlideFromCounter = function() {
|
||||||
|
|
||||||
|
var slideNumber = filterInt($('#counter').val());
|
||||||
|
|
||||||
|
changeSlide(slideNumber);
|
||||||
|
|
||||||
|
// lose focus
|
||||||
|
$(':focus').blur();
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
sio.switchAudienceLaser = function() {
|
||||||
|
|
||||||
|
var laser = $('#viewer-laser');
|
||||||
|
|
||||||
|
if (drawAudienceLasers === false) {
|
||||||
|
|
||||||
|
// Laser is disabled, will be enabled
|
||||||
|
laser.text('Audience laser is enabled');
|
||||||
|
laser.removeClass('btn-default').addClass('btn-primary');
|
||||||
|
drawAudienceLasers = true;
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
laser.text('Audience laser is disabled');
|
||||||
|
laser.removeClass('btn-primary').addClass('btn-default');
|
||||||
|
drawAudienceLasers = false;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
socket.emit('viewer-laser', filename, drawAudienceLasers);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
sio.clearCounter = function() { $('#counter').val(''); };
|
||||||
|
sio.nextSlide = function() { changeSlide(currentPage + 1); };
|
||||||
|
sio.previousSlide = function() { changeSlide(currentPage - 1); };
|
||||||
|
sio.firstSlide = function() { changeSlide(1); };
|
||||||
|
sio.lastSlide = function() { changeSlide(pdf.pdfInfo.numPages); };
|
||||||
|
|
||||||
|
sio.syncAudience = updateAudience;
|
||||||
|
sio.update = updateUI;
|
||||||
|
|
||||||
|
$(window).resize(updateUI);
|
||||||
|
|
||||||
|
return sio;
|
||||||
|
|
||||||
|
})(); });
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
$(function() { sio = (function() {
|
||||||
|
|
||||||
|
var sio = {};
|
||||||
|
|
||||||
|
var canvasPdf = $('#canvas-pdf').get(0);
|
||||||
|
var contextPdf = canvasPdf.getContext('2d');
|
||||||
|
|
||||||
|
var canvasPaint = $('#canvas-paint').get(0);
|
||||||
|
var contextPaint = canvasPaint.getContext('2d');
|
||||||
|
|
||||||
|
var pdf;
|
||||||
|
var pageNumber = 1;
|
||||||
|
|
||||||
|
var pointer = false;
|
||||||
|
var canvasPdfBounding;
|
||||||
|
|
||||||
|
var drawAudienceLaser = false;
|
||||||
|
var lasers = {};
|
||||||
|
|
||||||
|
|
||||||
|
PDFJS.getDocument('/static/uploaded/' + filename + '.pdf').then(function getPdfHelloWorld(_pdf) {
|
||||||
|
|
||||||
|
pdf = _pdf;
|
||||||
|
update();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
var socket = io();
|
||||||
|
|
||||||
|
socket.on('welcome', function() {
|
||||||
|
socket.emit('viewer', filename);
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('update', function(newPageNumber) {
|
||||||
|
pageNumber = newPageNumber;
|
||||||
|
update();
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('viewer-laser', function(enabled) {
|
||||||
|
drawAudienceLaser = enabled;
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('pointer', canvasPointer);
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
|
||||||
|
pdf.getPage(pageNumber).then(function(page) {
|
||||||
|
|
||||||
|
var scale;
|
||||||
|
|
||||||
|
// width / height
|
||||||
|
var ratio = page.pageInfo.view[2] / page.pageInfo.view[3];
|
||||||
|
|
||||||
|
if (window.innerWidth < window.innerHeight) {
|
||||||
|
|
||||||
|
canvasPdf.width = window.innerWidth;
|
||||||
|
canvasPdf.height = canvasPdf.width / ratio;
|
||||||
|
scale = canvasPdf.width / page.getViewport(1.0).width;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
canvasPdf.height = window.innerHeight;
|
||||||
|
canvasPdf.width = ratio * canvasPdf.height;
|
||||||
|
scale = canvasPdf.width / page.getViewport(1.0).width;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvasPaint.width = canvasPdf.width;
|
||||||
|
canvasPaint.height = canvasPdf.height;
|
||||||
|
|
||||||
|
$('#canvases').width(canvasPdf.width + 'px');
|
||||||
|
$('#canvases').height(canvasPdf.height + 'px');
|
||||||
|
|
||||||
|
canvasPdfBounding = canvasPdf.getBoundingClientRect();
|
||||||
|
|
||||||
|
var viewport = page.getViewport(scale);
|
||||||
|
|
||||||
|
var renderContext = {
|
||||||
|
canvasContext: contextPdf,
|
||||||
|
viewport: viewport
|
||||||
|
};
|
||||||
|
|
||||||
|
page.render(renderContext);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function canvasPointer(id,x,y) {
|
||||||
|
|
||||||
|
// Clear canvas
|
||||||
|
canvasPaint.width = canvasPaint.width;
|
||||||
|
|
||||||
|
if (id != undefined) {
|
||||||
|
if ( x != undefined && y != undefined) {
|
||||||
|
lasers[id] = {x:x, y:y};
|
||||||
|
} else {
|
||||||
|
delete lasers[id];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var laserIndex in lasers) {
|
||||||
|
|
||||||
|
var laser = lasers[laserIndex];
|
||||||
|
|
||||||
|
if (drawAudienceLaser === true || laserIndex === 'speaker') {
|
||||||
|
|
||||||
|
contextPaint.fillStyle = laserIndex === 'speaker' ? 'red' : 'green';
|
||||||
|
contextPaint.beginPath();
|
||||||
|
contextPaint.arc(laser.x * canvasPdf.width, laser.y * canvasPdf.height, 10, 0, Math.PI*2, true);
|
||||||
|
contextPaint.closePath();
|
||||||
|
contextPaint.fill();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$(window).resize(update);
|
||||||
|
|
||||||
|
sio.onMouseDown = function() {
|
||||||
|
|
||||||
|
var x = (event.x - canvasPdfBounding.left) / canvasPdf.width;
|
||||||
|
var y = (event.y - canvasPdfBounding.top) / canvasPdf.height;
|
||||||
|
|
||||||
|
socket.emit('pointer', filename, socket.id, x, y);
|
||||||
|
|
||||||
|
pointer = true;
|
||||||
|
shouldUpdatePointer = true;
|
||||||
|
|
||||||
|
canvasPointer(socket.id, x, y);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
sio.onMouseMove = function(event) {
|
||||||
|
|
||||||
|
if (pointer) {
|
||||||
|
|
||||||
|
var x = (event.x - canvasPdfBounding.left) / canvasPdf.width;
|
||||||
|
var y = (event.y - canvasPdfBounding.top) / canvasPdf.height;
|
||||||
|
|
||||||
|
if (shouldUpdatePointer) {
|
||||||
|
// Update
|
||||||
|
socket.emit('pointer', filename, socket.id, x, y);
|
||||||
|
|
||||||
|
shouldUpdatePointer = false;
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
|
||||||
|
shouldUpdatePointer = true;
|
||||||
|
|
||||||
|
}, 20);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
canvasPointer(socket.id, x, y);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
sio.onMouseUp = function(event) {
|
||||||
|
|
||||||
|
socket.emit('pointer', filename, socket.id);
|
||||||
|
|
||||||
|
pointer = false;
|
||||||
|
shouldUpdatePointer = false;
|
||||||
|
|
||||||
|
canvasPointer(socket.id);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return sio;
|
||||||
|
|
||||||
|
})(); });
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,14 @@
|
||||||
|
doctype
|
||||||
|
html( lang="en" )
|
||||||
|
head
|
||||||
|
title slideshow.io
|
||||||
|
meta( charset='utf-8' )
|
||||||
|
meta( http-equiv='X-UA-Compatible', content='IE=edge' )
|
||||||
|
block css
|
||||||
|
|
||||||
|
body
|
||||||
|
block base_content
|
||||||
|
|
||||||
|
script( src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' )
|
||||||
|
|
||||||
|
block js
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
extends ./base.pug
|
||||||
|
|
||||||
|
block css
|
||||||
|
meta( name='viewport', content='width=device-width, initial-scale=1.0' )
|
||||||
|
meta( name='description', content='Baking Bootstrap Snippets with Jade' )
|
||||||
|
//- Bootswatch Theme
|
||||||
|
link(href="https://bootswatch.com/cerulean/bootstrap.min.css", rel="stylesheet")
|
||||||
|
|
||||||
|
block base_content
|
||||||
|
nav.navbar.navbar-default( role="navigation" )
|
||||||
|
.container
|
||||||
|
.navbar-header
|
||||||
|
button.navbar-toggle.collapsed( type="button", data-toggle="collapse", data-target="#navbar-inverse", aria-expanded="false", aria-controls="navbar")
|
||||||
|
span.sr-only Toggle navigation
|
||||||
|
span.icon-bar
|
||||||
|
span.icon-bar
|
||||||
|
span.icon-bar
|
||||||
|
a.navbar-brand(href="#") slideshow.io
|
||||||
|
|
||||||
|
#navbar-inverse.collapse.navbar-collapse
|
||||||
|
ul.nav.navbar-nav
|
||||||
|
li: a( href="#about" ) About
|
||||||
|
|
||||||
|
.container
|
||||||
|
block content
|
||||||
|
|
||||||
|
block prepend js
|
||||||
|
script( src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js' )
|
||||||
Loading…
Reference in New Issue