176 lines
4.0 KiB
JavaScript
176 lines
4.0 KiB
JavaScript
$(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;
|
|
|
|
})(); });
|