You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

1836 lines
60 KiB

/*****************************************************************
** Author: Asvin Goel, goel@telematique.eu
**
** A plugin for reveal.js adding a chalkboard.
**
** Version: 1.5.0
**
** License: MIT license (see LICENSE.md)
**
** Credits:
** Chalkboard effect by Mohamed Moustafa https://github.com/mmoustafa/Chalkboard
** Multi color support by Kurt Rinnert https://github.com/rinnert
** Compatibility with reveal.js v4 by Hakim El Hattab https://github.com/hakimel
******************************************************************/
window.RevealChalkboard = window.RevealChalkboard || {
id: 'RevealChalkboard',
init: function(deck) {
initChalkboard(deck);
},
configure: function(config) { configure(config); },
toggleNotesCanvas: function() { toggleNotesCanvas(); },
toggleChalkboard: function() { toggleChalkboard(); },
colorIndex: function() { colorIndex(); },
colorNext: function() { colorNext(); },
colorPrev: function() {colorPrev(); },
clear: function() { clear(); },
reset: function() { reset(); },
resetAll: function() { resetAll(); },
updateStorage: function() { updateStorage(); },
getData: function() { return getData(); },
download: function() { download(); },
};
function scriptPath() {
// obtain plugin path from the script element
var src;
if (document.currentScript) {
src = document.currentScript.src;
} else {
var sel = document.querySelector('script[src$="/chalkboard/plugin.js"]')
if (sel) {
src = sel.src;
}
}
var path = (src === undefined) ? "" : src.slice(0, src.lastIndexOf("/") + 1);
//console.log("Path: " + path);
return path;
}
var path = scriptPath();
const initChalkboard = function(Reveal){
//console.warn(path);
/* Feature detection for passive event handling*/
var passiveSupported = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveSupported = true; } }));
} catch(err) {}
/*****************************************************************
** Configuration
******************************************************************/
var background, pen, draw, color;
var grid = false;
var boardmarkerWidth = 3;
var chalkWidth = 7;
var chalkEffect = 1.0;
var rememberColor = [true, false];
var eraser = { src: path + 'img/sponge.png', radius: 20};
var boardmarkers = [
{ color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
{ color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
{ color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
{ color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
{ color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
{ color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
{ color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
];
var chalks = [
{ color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
{ color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
{ color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
{ color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
{ color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
{ color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
{ color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
];
var keyBindings = {
toggleNotesCanvas: { keyCode: 67, key: 'C', description: 'Toggle notes canvas' },
toggleChalkboard: { keyCode: 66, key: 'B', description: 'Toggle chalkboard' },
clear: { keyCode: 171, key: '+', description: 'Clear drawings on slide' },
reset: { keyCode: 46, key: 'DEL', description: 'Reset drawings on slide' },
resetAll: { keyCode: 8, key: 'BACKSPACE', description: 'Reset all drawings' },
colorNext: { keyCode: 88, key: 'X', description: 'Next color' },
colorPrev: { keyCode: 89, key: 'Y', description: 'Previous color' },
download: { keyCode: 68, key: 'D', description: 'Download drawings' }
};
var theme = "chalkboard";
var color = [0, 0];
var toggleChalkboardButton = true;
var toggleNotesButton = true;
var colorButtons = true;
var boardHandle = true;
var transition = 800;
var readOnly = false;
var messageType = 'broadcast';
var config = configure( Reveal.getConfig().chalkboard || {} );
if ( config.keyBindings ) {
for (var key in config.keyBindings) {
keyBindings[key] = config.keyBindings[key];
};
}
function configure( config ) {
if ( config.boardmarkerWidth || config.penWidth ) boardmarkerWidth = config.boardmarkerWidth || config.penWidth;
if ( config.chalkWidth ) chalkWidth = config.chalkWidth;
if ( config.chalkEffect ) chalkEffect = config.chalkEffect;
if ( config.rememberColor ) rememberColor = config.rememberColor;
if ( config.eraser ) eraser = config.eraser;
if ( config.boardmarkers ) boardmarkers = config.boardmarkers;
if ( config.chalks) chalks = config.chalks;
if ( config.theme ) theme = config.theme;
switch ( theme ) {
case "whiteboard":
background = [ 'rgba(127,127,127,.1)' , path + 'img/whiteboard.png' ];
draw = [ drawWithBoardmarker , drawWithBoardmarker ];
pens = [ boardmarkers, boardmarkers ];
grid = { color: 'rgb(127,127,255,0.1)', distance: 40, width: 2};
break;
case "chalkboard":
default:
background = [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ];
draw = [ drawWithBoardmarker , drawWithChalk ];
pens = [ boardmarkers, chalks ];
grid = { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2};
}
if ( config.background ) background = config.background;
if ( config.grid != undefined ) grid = config.grid;
if (config.toggleChalkboardButton != undefined) toggleChalkboardButton = config.toggleChalkboardButton;
if (config.toggleNotesButton != undefined) toggleNotesButton = config.toggleNotesButton;
if (config.colorButtons != undefined) colorButtons = config.colorButtons;
if (config.boardHandle != undefined) boardHandle = config.boardHandle;
if (config.transition) transition = config.transition;
if (config.readOnly != undefined) readOnly = config.readOnly;
if (config.messageType) messageType = config.messageType;
if ( drawingCanvas && ( config.theme || config.background || config.grid ) ) {
var canvas = document.getElementById( drawingCanvas[1].id );
canvas.style.background = 'url("' + background[1] + '") repeat';
clearCanvas( 1 );
drawGrid();
}
return config;
}
/*****************************************************************
** Setup
******************************************************************/
function whenReady( callback ) {
// wait for drawings to be loaded and markdown to be parsed
if ( document.querySelectorAll(".pdf-page").length && loaded !== null ) {
callback();
}
else {
console.log("Wait for pdf pages to be created and drawings to be loaded");
setTimeout( whenReady, 500, callback )
}
}
if ( toggleChalkboardButton ) {
//console.log("toggleChalkboardButton")
var button = document.createElement( 'div' );
button.className = "chalkboard-button";
button.id = "toggle-chalkboard";
button.style.visibility = "visible";
button.style.position = "absolute";
button.style.zIndex = 30;
button.style.fontSize = "24px";
button.style.left = toggleChalkboardButton.left || "30px";
button.style.bottom = toggleChalkboardButton.bottom || "30px";
button.style.top = toggleChalkboardButton.top || "auto";
button.style.right = toggleChalkboardButton.right || "auto";
button.innerHTML = '<a href="#" title="Toggle chalkboard ('+keyBindings.toggleChalkboard.key+')" onclick="RevealChalkboard.toggleChalkboard(); return false;"><i class="fa fa-pen-square"></i></a>'
document.querySelector(".reveal").appendChild( button );
}
if ( toggleNotesButton ) {
//console.log("toggleNotesButton")
var button = document.createElement( 'div' );
button.className = "chalkboard-button";
button.id = "toggle-notes";
button.style.position = "absolute";
button.style.zIndex = 30;
button.style.fontSize = "24px";
button.style.left = toggleNotesButton.left || "70px";
button.style.bottom = toggleNotesButton.bottom || "30px";
button.style.top = toggleNotesButton.top || "auto";
button.style.right = toggleNotesButton.right || "auto";
button.innerHTML = '<a href="#" title="Toggle slide annotation ('+keyBindings.toggleNotesCanvas.key+')" onclick="RevealChalkboard.toggleNotesCanvas(); return false;"><i class="fa fa-pen"></i></a>'
document.querySelector(".reveal").appendChild( button );
}
//alert("Buttons");
var drawingCanvas = [ {id: "notescanvas" }, {id: "chalkboard" } ];
setupDrawingCanvas(0);
setupDrawingCanvas(1);
var mode = 0; // 0: notes canvas, 1: chalkboard
var board = 0; // board index (only for chalkboard)
var mouseX = 0;
var mouseY = 0;
var xLast = null;
var yLast = null;
var slideStart = Date.now();
var slideIndices = { h:0, v:0 };
var event = null;
var timeouts = [ [], [] ];
var touchTimeout = null;
var slidechangeTimeout = null;
var playback = false;
function createPalette( colors, length ) {
if ( length === true || length > colors.length ) {
length = colors.length;
}
var palette = document.createElement( 'div' );
palette.classList.add('palette');
var list = document.createElement( 'ul' );
// color pickers
for (var i = 0; i < length; i++ ) {
var colorButton = document.createElement( 'li' );
colorButton.setAttribute("data-color",i);
colorButton.innerHTML = '<i class="fa fa-square"></i>';
colorButton.style.color = colors[i].color;
colorButton.addEventListener("click", function(e) {
colorIndex(e.target.parentElement.getAttribute("data-color"));
});
list.appendChild( colorButton );
}
palette.appendChild( list );
return palette;
};
function setupDrawingCanvas( id ) {
var container = document.createElement( 'div' );
container.id = drawingCanvas[id].id;
container.classList.add( 'overlay' );
container.setAttribute( 'data-prevent-swipe', '' );
container.oncontextmenu = function() { return false; }
container.style.cursor = pens[ id ][ color[id] ].cursor;
drawingCanvas[id].width = window.innerWidth;
drawingCanvas[id].height = window.innerHeight;
drawingCanvas[id].scale = 1;
drawingCanvas[id].xOffset = 0;
drawingCanvas[id].yOffset = 0;
if ( id == "0" ) {
container.style.background = 'rgba(0,0,0,0)';
container.style.zIndex = 24;
container.style.opacity = 1;
container.style.visibility = 'visible';
container.style.pointerEvents = "none";
var slides = document.querySelector(".slides");
var aspectRatio = Reveal.getConfig().width / Reveal.getConfig().height;
if ( drawingCanvas[id].width > drawingCanvas[id].height*aspectRatio ) {
drawingCanvas[id].xOffset = (drawingCanvas[id].width - drawingCanvas[id].height*aspectRatio) / 2;
}
else if ( drawingCanvas[id].height > drawingCanvas[id].width/aspectRatio ) {
drawingCanvas[id].yOffset = ( drawingCanvas[id].height - drawingCanvas[id].width/aspectRatio ) / 2;
}
if ( colorButtons ) {
var palette = createPalette( boardmarkers, colorButtons );
palette.style.visibility = 'hidden'; // only show palette in drawing mode
container.appendChild(palette);
}
}
else {
container.style.background = 'url("' + background[id] + '") repeat';
container.style.zIndex = 26;
container.style.opacity = 0;
container.style.visibility = 'hidden';
if ( colorButtons ) {
var palette = createPalette( chalks, colorButtons );
container.appendChild(palette);
}
if ( boardHandle ) {
var handle = document.createElement( 'div' );
handle.classList.add('boardhandle');
handle.innerHTML='<ul><li><a id="previousboard" href="#" title="Previous board"><i class="fas fa-chevron-up"></i></a></li><li><a id="nextboard" href="#" title="Next board"><i class="fas fa-chevron-down"></i></a></li></ul>';
handle.querySelector("#previousboard").addEventListener("click", function(e) {
e.preventDefault();
setBoard(board-1,true);
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'setboard', timestamp: Date.now() - slideStart, index: board, status: { mode, board, color } };
document.dispatchEvent( message );
});
handle.querySelector("#nextboard").addEventListener("click", function(e) {
e.preventDefault();
setBoard(board+1,true);
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'setboard', timestamp: Date.now() - slideStart, index: board, status: { mode, board, color } };
document.dispatchEvent( message );
});
container.appendChild(handle);
}
}
var sponge = document.createElement( 'img' );
sponge.src = eraser.src;
sponge.id = "sponge";
sponge.style.visibility = "hidden";
sponge.style.position = "absolute";
container.appendChild( sponge );
drawingCanvas[id].sponge = sponge;
var canvas = document.createElement( 'canvas' );
canvas.width = drawingCanvas[id].width;
canvas.height = drawingCanvas[id].height;
canvas.setAttribute( 'data-chalkboard', id );
canvas.style.cursor = pens[ id ][ color[id] ].cursor;
container.appendChild( canvas );
drawingCanvas[id].canvas = canvas;
drawingCanvas[id].context = canvas.getContext("2d");
document.querySelector( '.reveal' ).appendChild( container );
drawingCanvas[id].container = container;
}
/*****************************************************************
** Storage
******************************************************************/
var storage = [
{ width: Reveal.getConfig().width, height: Reveal.getConfig().height, data: []},
{ width: Reveal.getConfig().width, height: Reveal.getConfig().height, data: []}
];
var loaded = null;
if ( config.storage ) {
// Get chalkboard drawings from session storage
loaded = initStorage( sessionStorage.getItem( config.storage ) );
}
if ( !loaded && config.src != null ) {
// Get chalkboard drawings from the given file
loadData( config.src );
}
/**
* Initialize storage.
*/
function initStorage( json ) {
var success = false;
try {
var data = JSON.parse( json );
for (var id = 0; id < data.length; id++) {
if ( drawingCanvas[id].width != data[id].width || drawingCanvas[id].height != data[id].height ) {
drawingCanvas[id].scale = Math.min( drawingCanvas[id].width/data[id].width, drawingCanvas[id].height/data[id].height);
drawingCanvas[id].xOffset = (drawingCanvas[id].width - data[id].width * drawingCanvas[id].scale)/2;
drawingCanvas[id].yOffset = (drawingCanvas[id].height - data[id].height * drawingCanvas[id].scale)/2;
}
if ( config.readOnly ) {
drawingCanvas[id].container.style.cursor = 'default';
drawingCanvas[id].canvas.style.cursor = 'default';
}
}
success = true;
storage = data;
}
catch ( err ) {
console.warn( "Cannot initialise storage!" );
}
return success;
}
/**
* Load data.
*/
function loadData( filename ) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.readyState === 4 && xhr.status != 404 ) {
loaded = initStorage(xhr.responseText);
console.log("Drawings loaded from file");
}
else {
config.readOnly = undefined;
readOnly = undefined;
console.warn( 'Failed to get file ' + filename +". ReadyState: " + xhr.readyState + ", Status: " + xhr.status);
loaded = false;
}
};
xhr.open( 'GET', filename, true );
try {
xhr.send();
}
catch ( error ) {
config.readOnly = undefined;
readOnly = undefined;
console.warn( 'Failed to get file ' + filename + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + error );
loaded = false;
}
}
function updateStorage() {
var json = JSON.stringify( storage )
if ( config.storage ) {
sessionStorage.setItem( config.storage, json )
}
return json;
}
/**
* Get data as json string.
*/
function getData() {
// cleanup slide data without events
for (var id = 0; id < 2; id++) {
for (var i = storage[id].data.length-1; i >= 0; i--) {
if (storage[id].data[i].events.length == 0) {
storage[id].data.splice(i, 1);
}
}
}
return updateStorage();
}
/**
* Download data.
*/
function downloadData() {
var a = document.createElement('a');
document.body.appendChild(a);
try {
a.download = "chalkboard.json";
var blob = new Blob( [ getData() ], { type: "application/json"} );
a.href = window.URL.createObjectURL( blob );
} catch( error ) {
a.innerHTML += " (" + error + ")";
}
a.click();
document.body.removeChild(a);
}
/**
* Returns data object for the slide with the given indices.
*/
function getSlideData( indices, id ) {
if ( id == undefined ) id = mode;
if (!indices) indices = slideIndices;
var data;
for (var i = 0; i < storage[id].data.length; i++) {
if (storage[id].data[i].slide.h === indices.h && storage[id].data[i].slide.v === indices.v && storage[id].data[i].slide.f === indices.f ) {
data = storage[id].data[i];
return data;
}
}
storage[id].data.push( { slide: indices, events: [], duration: 0 } );
data = storage[id].data[storage[id].data.length-1];
return data;
}
/**
* Returns maximum duration of slide playback for both modes
*/
function getSlideDuration( indices ) {
if (!indices) indices = slideIndices;
var duration = 0;
for (var id = 0; id < 2; id++) {
for (var i = 0; i < storage[id].data.length; i++) {
if (storage[id].data[i].slide.h === indices.h && storage[id].data[i].slide.v === indices.v && storage[id].data[i].slide.f === indices.f ) {
duration = Math.max( duration, storage[id].data[i].duration );
break;
}
}
}
//console.log( duration );
return duration;
}
/*****************************************************************
** Print
******************************************************************/
var printMode = ( /print-pdf/gi ).test( window.location.search );
//console.log("createPrintout" + printMode)
function createPrintout( ) {
//console.warn(Reveal.getTotalSlides(),Reveal.getSlidesElement());
if ( storage[1].data.length == 0 ) return;
console.log( 'Create printout(s) for ' + storage[1].data.length + " slides");
drawingCanvas[0].container.style.opacity = 0; // do not print notes canvas
drawingCanvas[0].container.style.visibility = 'hidden';
var patImg = new Image();
patImg.onload = function () {
var slides = getSlidesArray();
//console.log(slides);
for (var i = storage[1].data.length-1; i>=0; i--) {
console.log( 'Create printout for slide ' + storage[1].data[i].slide.h + "." + storage[1].data[i].slide.v );
var slideData = getSlideData( storage[1].data[i].slide, 1 );
var drawings = createDrawings( slideData, patImg );
var slide = slides[ storage[1].data[i].slide.h][ storage[1].data[i].slide.v ];
//console.log("Slide:", slide);
addDrawings( slide, drawings );
}
// Reveal.sync();
};
patImg.src = background[1];
}
function getSlidesArray() {
var horizontal = document.querySelectorAll('.slides > div.pdf-page > section, .slides > section');
var slides = [];
var slidenumber = undefined;
for ( var i=0; i < horizontal.length; i++) {
if ( horizontal[i].parentElement.classList.contains("pdf-page") ) {
// Horizontal slide
if ( horizontal[i].getAttribute("data-slide-number") != slidenumber ) {
// new slide
slides.push([]);
slides[slides.length-1].push(horizontal[i]);
slidenumber = horizontal[i].getAttribute("data-slide-number");
}
else {
// fragment of same slide
slides[slides.length-1][slides[slides.length-1].length-1] = horizontal[i];
}
}
else {
// Vertical slides
var vertical = horizontal[i].querySelectorAll('section');
slides.push([]);
var slidenumber = undefined;
for ( var j=0; j < vertical.length; j++) {
if ( vertical[j].getAttribute("data-slide-number") != slidenumber ) {
// new slide
slides[slides.length-1].push(vertical[j]);
slidenumber = vertical[j].getAttribute("data-slide-number");
}
else {
// fragment of same slide
slides[slides.length-1][slides[slides.length-1].length-1] = vertical[j];
}
}
}
}
//console.log("Slides:", slides);
return slides;
}
function cloneCanvas(oldCanvas) {
//create a new canvas
var newCanvas = document.createElement('canvas');
var context = newCanvas.getContext('2d');
//set dimensions
newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
//apply the old canvas to the new one
context.drawImage(oldCanvas, 0, 0);
//return the new canvas
return newCanvas;
}
function getCanvas( template, container, board ) {
var idx = container.findIndex(element => element.board === board);
if ( idx === -1 ) {
var canvas = cloneCanvas(template);
if ( !container.length ) {
idx = 0;
container.push({ board, canvas });
}
else if ( board < container[0].board ) {
idx = 0;
container.unshift({ board, canvas });
}
else if ( board > container[container.length-1].board ) {
idx = container.length;
container.push({ board, canvas });
}
}
return container[idx].canvas;
}
function createDrawings( slideData, patImg ) {
var width = Reveal.getConfig().width;
var height = Reveal.getConfig().height;
var scale = 1;
var xOffset = 0;
var yOffset = 0;
if ( width != storage[1].width || height != storage[1].height ) {
scale = Math.min( width/storage[1].width, height/storage[1].height);
xOffset = (width - storage[1].width * scale)/2;
yOffset = (height - storage[1].height * scale)/2;
}
mode = 1;
board = 0;
console.log( 'Create printout(s) for slide ', slideData);
var drawings = [];
var template = document.createElement('canvas');
template.width = width;
template.height = height;
var imgCtx = template.getContext("2d");
imgCtx.fillStyle = imgCtx.createPattern( patImg ,'repeat');
imgCtx.rect(0,0,width,height);
imgCtx.fill();
for (var j = 0; j < slideData.events.length; j++) {
switch ( slideData.events[j].type ) {
case "draw":
for (var k = 1; k < slideData.events[j].curve.length; k++) {
draw[1]( getCanvas(template,drawings,board).getContext("2d"),
xOffset + slideData.events[j].curve[k-1].x*scale,
yOffset + slideData.events[j].curve[k-1].y*scale,
xOffset + slideData.events[j].curve[k].x*scale,
yOffset + slideData.events[j].curve[k].y*scale
);
}
break;
case "erase":
for (var k = 0; k < slideData.events[j].curve.length; k++) {
eraseWithSponge( getCanvas(template,drawings,board).getContext("2d"),
xOffset + slideData.events[j].curve[k].x*scale,
yOffset + slideData.events[j].curve[k].y*scale
);
}
break;
case "setcolor":
setColor(slideData.events[j].index);
break;
case "setboard":
// Todo: create new canvas for each new index
setBoard(slideData.events[j].index);
//board = 0;
break;
case "clear":
getCanvas(template,drawings,board).getContext("2d").clearRect(0,0,width,height);
getCanvas(template,drawings,board).getContext("2d").fill();
break;
default:
break;
}
}
drawings = drawings.sort((a, b) => a.board > b.board && 1 || -1);
mode = 0;
return drawings;
}
function addDrawings( slide, drawings ) {
var parent = slide.parentElement.parentElement;
var nextSlide = slide.parentElement.nextElementSibling;
for (var i = 0; i < drawings.length; i++) {
var newPDFPage = document.createElement( 'div' );
newPDFPage.classList.add('pdf-page');
newPDFPage.style.height = Reveal.getConfig().height;
// newPDFPage.innerHTML = '<h1>Drawing should be here!</h1>';
newPDFPage.append(drawings[i].canvas);
//console.log("Add drawing", newPDFPage);
if ( nextSlide != null ) {
parent.insertBefore( newPDFPage, nextSlide );
}
else {
parent.append( newPDFPage );
}
}
}
/*****************************************************************
** Drawings
******************************************************************/
function drawWithBoardmarker(context,fromX,fromY,toX,toY){
context.lineWidth = boardmarkerWidth;
context.lineCap = 'round';
context.strokeStyle = boardmarkers[color[mode]].color;
context.beginPath();
context.moveTo(fromX, fromY);
context.lineTo(toX, toY);
context.stroke();
}
function drawWithChalk(context,fromX,fromY,toX,toY) {
var brushDiameter = chalkWidth;
context.lineWidth = brushDiameter;
context.lineCap = 'round';
context.fillStyle = chalks[color[mode]].color; // 'rgba(255,255,255,0.5)';
context.strokeStyle = chalks[color[mode]].color;
/*var opacity = Math.min(0.8, Math.max(0,color[1].replace(/^.*,(.+)\)/,'$1') - 0.1)) + Math.random()*0.2;*/
var opacity = 1.0;
context.strokeStyle = context.strokeStyle.replace(/[\d\.]+\)$/g, opacity + ')');
context.beginPath();
context.moveTo(fromX, fromY);
context.lineTo(toX, toY);
context.stroke();
// Chalk Effect
var length = Math.round(Math.sqrt(Math.pow(toX-fromX,2)+Math.pow(toY-fromY,2))/(5/brushDiameter));
var xUnit = (toX-fromX)/length;
var yUnit = (toY-fromY)/length;
for(var i=0; i<length; i++ ){
if (chalkEffect > (Math.random() * 0.9)) {
var xCurrent = fromX+(i*xUnit);
var yCurrent = fromY+(i*yUnit);
var xRandom = xCurrent+(Math.random()-0.5)*brushDiameter*1.2;
var yRandom = yCurrent+(Math.random()-0.5)*brushDiameter*1.2;
context.clearRect( xRandom, yRandom, Math.random()*2+2, Math.random()+1);
}
}
}
function eraseWithSponge(context,x,y) {
context.save();
context.beginPath();
context.arc(x, y, eraser.radius, 0, 2 * Math.PI, false);
context.clip();
context.clearRect(x - eraser.radius - 1, y - eraser.radius - 1, eraser.radius * 2 + 2, eraser.radius * 2 + 2);
context.restore();
if ( mode == 1 && grid) {
redrawGrid(x,y,eraser.radius);
}
}
/**
* Show an overlay for the chalkboard.
*/
function showChalkboard() {
//console.log("showChalkboard");
clearTimeout(touchTimeout);
touchTimeout = null;
drawingCanvas[0].sponge.style.visibility = "hidden"; // make sure that the sponge from touch events is hidden
drawingCanvas[1].sponge.style.visibility = "hidden"; // make sure that the sponge from touch events is hidden
drawingCanvas[1].container.style.opacity = 1;
drawingCanvas[1].container.style.visibility = 'visible';
mode = 1;
}
/**
* Closes open chalkboard.
*/
function closeChalkboard() {
clearTimeout(touchTimeout);
touchTimeout = null;
drawingCanvas[0].sponge.style.visibility = "hidden"; // make sure that the sponge from touch events is hidden
drawingCanvas[1].sponge.style.visibility = "hidden"; // make sure that the sponge from touch events is hidden
drawingCanvas[1].container.style.opacity = 0;
drawingCanvas[1].container.style.visibility = 'hidden';
xLast = null;
yLast = null;
event = null;
mode = 0;
}
/**
* Clear current canvas.
*/
function clearCanvas( id ) {
if ( id == 0 ) clearTimeout( slidechangeTimeout );
drawingCanvas[id].context.clearRect(0,0,drawingCanvas[id].width,drawingCanvas[id].height);
if ( id == 1 && grid ) drawGrid();
}
/**
* Draw grid on background
*/
function drawGrid() {
var context = drawingCanvas[1].context;
drawingCanvas[1].scale = Math.min( drawingCanvas[1].width/storage[1].width, drawingCanvas[1].height/storage[1].height );
drawingCanvas[1].xOffset = (drawingCanvas[1].width - storage[1].width * drawingCanvas[1].scale)/2;
drawingCanvas[1].yOffset = (drawingCanvas[1].height - storage[1].height * drawingCanvas[1].scale)/2;
var scale = drawingCanvas[1].scale;
var xOffset = drawingCanvas[1].xOffset;
var yOffset = drawingCanvas[1].yOffset;
var distance = grid.distance*scale;
var fromX = drawingCanvas[1].width/2 - distance/2 - Math.floor( (drawingCanvas[1].width - distance)/2 / distance ) * distance;
for( var x=fromX; x < drawingCanvas[1].width; x+=distance ) {
context.beginPath();
context.lineWidth = grid.width*scale;
context.lineCap = 'round';
context.fillStyle = grid.color;
context.strokeStyle = grid.color;
context.moveTo(x, 0);
context.lineTo(x, drawingCanvas[1].height);
context.stroke();
}
var fromY = drawingCanvas[1].height/2 - distance/2 - Math.floor( (drawingCanvas[1].height - distance)/2 / distance ) * distance ;
for( var y=fromY; y < drawingCanvas[1].height; y+=distance ) {
context.beginPath();
context.lineWidth = grid.width*scale;
context.lineCap = 'round';
context.fillStyle = grid.color;
context.strokeStyle = grid.color;
context.moveTo(0, y);
context.lineTo(drawingCanvas[1].width, y);
context.stroke();
}
}
function redrawGrid(centerX,centerY,diameter) {
var context = drawingCanvas[1].context;
drawingCanvas[1].scale = Math.min( drawingCanvas[1].width/storage[1].width, drawingCanvas[1].height/storage[1].height );
drawingCanvas[1].xOffset = (drawingCanvas[1].width - storage[1].width * drawingCanvas[1].scale)/2;
drawingCanvas[1].yOffset = (drawingCanvas[1].height - storage[1].height * drawingCanvas[1].scale)/2;
var scale = drawingCanvas[1].scale;
var xOffset = drawingCanvas[1].xOffset;
var yOffset = drawingCanvas[1].yOffset;
var distance = grid.distance*scale;
var fromX = drawingCanvas[1].width/2 - distance/2 - Math.floor( (drawingCanvas[1].width - distance)/2 / distance ) * distance;
for( var x=fromX + distance* Math.ceil( (centerX-diameter-fromX) / distance); x <= fromX + distance* Math.floor( (centerX+diameter-fromX) / distance); x+=distance ) {
context.beginPath();
context.lineWidth = grid.width*scale;
context.lineCap = 'round';
context.fillStyle = grid.color;
context.strokeStyle = grid.color;
context.moveTo(x, centerY - Math.sqrt( diameter*diameter - (centerX-x)*(centerX-x) ));
context.lineTo(x, centerY + Math.sqrt( diameter*diameter - (centerX-x)*(centerX-x) ) );
context.stroke();
}
var fromY = drawingCanvas[1].height/2 - distance/2 - Math.floor( (drawingCanvas[1].height - distance)/2 / distance ) * distance ;
for( var y=fromY + distance* Math.ceil( (centerY-diameter-fromY) / distance); y <= fromY + distance* Math.floor( (centerY+diameter-fromY) / distance); y+=distance ) {
context.beginPath();
context.lineWidth = grid.width*scale;
context.lineCap = 'round';
context.fillStyle = grid.color;
context.strokeStyle = grid.color;
context.moveTo(centerX - Math.sqrt( diameter*diameter - (centerY-y)*(centerY-y) ), y );
context.lineTo(centerX + Math.sqrt( diameter*diameter - (centerY-y)*(centerY-y) ), y );
context.stroke();
}
}
/**
* Set the color
*/
function setColor( index, record ) {
// protect against out of bounds (this could happen when
// replaying events recorded with different color settings).
if ( index >= boardmarkers[mode].length ) index = 0;
color[mode] = index;
drawingCanvas[mode].canvas.style.cursor = pens[mode][color[mode]].cursor;
if ( record ) {
recordEvent( { type: "setcolor", index: index, begin: Date.now() - slideStart } );
updateStorage();
}
}
/**
* Set the board
*/
function setBoard( index, record ) {
//console.log("Set board",index);
board = index;
redrawChalkboard( board );
if ( record ) {
recordEvent( { type: "setboard", index: board, begin: Date.now() - slideStart } );
updateStorage();
}
}
function redrawChalkboard( board ) {
clearCanvas( 1 );
var slideData = getSlideData( slideIndices, 1 );
var index = 0;
var play = ( board == 0 );
while ( index < slideData.events.length && slideData.events[index].begin < Date.now() - slideStart) {
if ( slideData.events[index].type == "setboard" ) {
play = ( board == slideData.events[index].index );
}
else if ( play || slideData.events[index].type == "setcolor" ) {
playEvent( 1, slideData.events[index], Date.now() - slideStart );
}
index++;
}
}
/**
* Forward cycle color
*/
function cycleColorNext() {
color[mode] = (color[mode] + 1) % pens[mode].length;
return color[mode];
}
/**
* Backward cycle color
*/
function cycleColorPrev() {
color[mode] = (color[mode] + (pens[mode].length - 1)) % pens[mode].length;
return color[mode];
}
/*****************************************************************
** Broadcast
******************************************************************/
var eventQueue = [];
document.addEventListener( 'received', function ( message ) {
if ( message.content && message.content.sender == 'chalkboard-plugin' ) {
// add message to queue
eventQueue.push(message);
}
if ( eventQueue.length == 1 ) processQueue();
});
//console.log(JSON.stringify(message));
function processQueue() {
// take first message from queue
var message = eventQueue.shift();
// synchronize time with seminar host
slideStart = Date.now() - message.content.timestamp;
// set status
if ( mode < message.content.status.mode ) {
// open chalkboard
showChalkboard();
}
else if ( mode > message.content.status.mode ) {
// close chalkboard
closeChalkboard();
}
if ( board != message.content.status.board ) {
board = message.content.status.board;
redrawChalkboard( board );
};
color = message.content.status.color;
switch ( message.content.type ) {
case 'showChalkboard':
showChalkboard();
break;
case 'closeChalkboard':
closeChalkboard();
break;
case 'startDrawing':
startDrawing(message.content.x, message.content.y, message.content.erase);
break;
case 'startErasing':
if ( message.content ) {
message.content.type = "erase";
message.content.begin = Date.now() - slideStart;
eraseWithSponge(drawingCanvas[mode].context, message.content.x, message.content.y);
}
break;
case 'drawSegment':
drawSegment(message.content.x, message.content.y, message.content.erase);
break;
case 'stopDrawing':
stopDrawing();
break;
case 'clear':
clear();
break;
case 'setcolor':
setColor(message.content.index, true);
break;
case 'setboard':
setBoard(message.content.index, true);
break;
case 'resetSlide':
resetSlide(true);
break;
case 'init':
storage = message.content.storage;
for (var id = 0; id < 2; id++ ) {
drawingCanvas[id].scale = Math.min( drawingCanvas[id].width/storage[id].width, drawingCanvas[id].height/storage[id].height );
drawingCanvas[id].xOffset = (drawingCanvas[id].width - storage[id].width * drawingCanvas[id].scale)/2;
drawingCanvas[id].yOffset = (drawingCanvas[id].height - storage[id].height * drawingCanvas[id].scale)/2;
}
clearCanvas( 0 );
clearCanvas( 1 );
if ( !playback ) {
slidechangeTimeout = setTimeout( startPlayback, transition, getSlideDuration(), 0 );
}
if ( mode == 1 && message.content.mode == 0) {
setTimeout( closeChalkboard, transition + 50 );
}
if ( mode == 0 && message.content.mode == 1) {
setTimeout( showChalkboard, transition + 50 );
}
mode = message.content.mode;
break;
default:
break;
}
// continue with next message if queued
if ( eventQueue.length > 0 ) {
processQueue();
}
else {
updateStorage();
}
}
document.addEventListener( 'welcome', function( user ) {
// broadcast storage
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', recipient: user.id, type: 'init', timestamp: Date.now() - slideStart, storage: storage, status: { mode, board, color } };
document.dispatchEvent( message );
});
/*****************************************************************
** Playback
******************************************************************/
document.addEventListener('seekplayback', function( event ) {
//console.log('event seekplayback ' + event.timestamp);
stopPlayback();
if ( !playback || event.timestamp == 0) {
// in other cases startplayback fires after seeked
startPlayback( event.timestamp );
}
//console.log('seeked');
});
document.addEventListener('startplayback', function( event ) {
//console.log('event startplayback ' + event.timestamp);
stopPlayback();
playback = true;
startPlayback( event.timestamp );
});
document.addEventListener('stopplayback', function( event ) {
//console.log('event stopplayback ' + (Date.now() - slideStart) );
playback = false;
stopPlayback();
});
document.addEventListener('startrecording', function( event ) {
//console.log('event startrecording ' + event.timestamp);
startRecording();
});
function recordEvent( event ) {
var slideData = getSlideData();
var i = slideData.events.length;
while ( i > 0 && event.begin < slideData.events[i-1].begin ) {
i--;
}
slideData.events.splice( i, 0, event);
slideData.duration = Math.max( slideData.duration, Date.now() - slideStart ) + 1;
}
function startRecording() {
resetSlide( true );
slideStart = Date.now();
}
function startPlayback( timestamp, finalMode ) {
//console.log("playback " + timestamp );
slideStart = Date.now() - timestamp;
closeChalkboard();
mode = 0;
board = 0;
for ( var id = 0; id < 2; id++ ) {
clearCanvas( id );
var slideData = getSlideData( slideIndices, id );
//console.log( timestamp +" / " + JSON.stringify(slideData));
var index = 0;
while ( index < slideData.events.length && slideData.events[index].begin < (Date.now() - slideStart) ) {
playEvent( id, slideData.events[index], timestamp );
index++;
}
while ( playback && index < slideData.events.length ) {
timeouts[id].push( setTimeout( playEvent, slideData.events[index].begin - (Date.now() - slideStart), id, slideData.events[index], timestamp ) );
index++;
}
}
//console.log("Mode: " + finalMode + "/" + mode );
if ( finalMode != undefined ) {
mode = finalMode;
}
if( mode == 1 ) showChalkboard();
//console.log("playback (ok)");
};
function stopPlayback() {
//console.log("stopPlayback");
//console.log("Timeouts: " + timeouts[0].length + "/"+ timeouts[1].length);
for ( var id = 0; id < 2; id++ ) {
for (var i = 0; i < timeouts[id].length; i++) {
clearTimeout(timeouts[id][i]);
}
timeouts[id] = [];
}
};
function playEvent( id, event, timestamp ) {
//console.log( timestamp +" / " + JSON.stringify(event));
//console.log( id + ": " + timestamp +" / " + event.begin +" / " + event.type +" / " + mode );
switch ( event.type ) {
case "open":
if ( timestamp <= event.begin ) {
showChalkboard();
}
else {
mode = 1;
}
break;
case "close":
if ( timestamp < event.begin ) {
closeChalkboard();
}
else {
mode = 0;
}
break;
case "clear":
clearCanvas( id );
break;
case "setcolor":
setColor(event.index);
break;
case "setboard":
setBoard(event.index);
break;
case "draw":
drawCurve( id, event, timestamp );
break;
case "erase":
eraseCurve( id, event, timestamp );
break;
}
};
function drawCurve( id, event, timestamp ) {
if ( event.curve.length > 1 ) {
var ctx = drawingCanvas[id].context;
var scale = drawingCanvas[id].scale;
var xOffset = drawingCanvas[id].xOffset;
var yOffset = drawingCanvas[id].yOffset;
var stepDuration = ( event.end - event.begin )/ ( event.curve.length - 1 );
//console.log("---");
for (var i = 1; i < event.curve.length; i++) {
if (event.begin + i * stepDuration <= (Date.now() - slideStart)) {
//console.log( "Draw " + timestamp +" / " + event.begin + " + " + i + " * " + stepDuration );
draw[id](ctx, xOffset + event.curve[i-1].x*scale, yOffset + event.curve[i-1].y*scale, xOffset + event.curve[i].x*scale, yOffset + event.curve[i].y*scale);
}
else if ( playback ) {
//console.log( "Cue " + timestamp +" / " + (Date.now() - slideStart) +" / " + event.begin + " + " + i + " * " + stepDuration + " = " + Math.max(0,event.begin + i * stepDuration - timestamp) );
timeouts.push( setTimeout(
draw[id], Math.max(0,event.begin + i * stepDuration - (Date.now() - slideStart)), ctx,
xOffset + event.curve[i-1].x*scale,
yOffset + event.curve[i-1].y*scale,
xOffset + event.curve[i].x*scale,
yOffset + event.curve[i].y*scale
)
);
}
}
}
};
function eraseCurve( id, event, timestamp ) {
if ( event.curve.length > 1 ) {
var ctx = drawingCanvas[id].context;
var scale = drawingCanvas[id].scale;
var xOffset = drawingCanvas[id].xOffset;
var yOffset = drawingCanvas[id].yOffset;
var stepDuration = ( event.end - event.begin )/ event.curve.length;
for (var i = 0; i < event.curve.length; i++) {
if (event.begin + i * stepDuration <= (Date.now() - slideStart)) {
eraseWithSponge(ctx, xOffset + event.curve[i].x*scale, yOffset + event.curve[i].y*scale);
}
else if ( playback ) {
timeouts.push( setTimeout(
eraseWithSponge, Math.max(0,event.begin + i * stepDuration - (Date.now() - slideStart)), ctx,
xOffset + event.curve[i].x * scale,
yOffset + event.curve[i].y * scale
)
);
}
}
}
};
function startDrawing( x, y, erase ) {
var ctx = drawingCanvas[mode].context;
var scale = drawingCanvas[mode].scale;
var xOffset = drawingCanvas[mode].xOffset;
var yOffset = drawingCanvas[mode].yOffset;
xLast = x * scale + xOffset;
yLast = y * scale + yOffset;
if ( erase == true) {
event = { type: "erase", begin: Date.now() - slideStart, end: null, curve: [{x: x, y: y}]};
drawingCanvas[mode].canvas.style.cursor = 'url("' + eraser.src + '") ' + eraser.radius + ' ' + eraser.radius + ', auto';
eraseWithSponge(ctx, x * scale + xOffset, y * scale + yOffset);
}
else {
event = { type: "draw", begin: Date.now() - slideStart, end: null, curve: [{x: x, y: y}] };
}
}
function showSponge(x,y) {
if ( event ) {
event.type = "erase";
event.begin = Date.now() - slideStart;
// show sponge image
drawingCanvas[mode].sponge.style.left = (x - eraser.radius) +"px" ;
drawingCanvas[mode].sponge.style.top = (y - eraser.radius) +"px" ;
drawingCanvas[mode].sponge.style.visibility = "visible";
eraseWithSponge(drawingCanvas[mode].context,x,y);
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'startErasing', timestamp: Date.now() - slideStart, status: { mode, board, color }, x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale };
document.dispatchEvent( message );
}
}
function drawSegment( x, y, erase ) {
var ctx = drawingCanvas[mode].context;
var scale = drawingCanvas[mode].scale;
var xOffset = drawingCanvas[mode].xOffset;
var yOffset = drawingCanvas[mode].yOffset;
if ( !event ) {
// safeguard if broadcast hickup
startDrawing( x, y, erase );
}
event.curve.push({x: x, y: y});
if(y * scale + yOffset < drawingCanvas[mode].height && x * scale + xOffset < drawingCanvas[mode].width) {
if ( erase ) {
eraseWithSponge(ctx, x * scale + xOffset, y * scale + yOffset);
}
else {
draw[mode](ctx, xLast, yLast, x * scale + xOffset, y * scale + yOffset);
}
xLast = x * scale + xOffset;
yLast = y * scale + yOffset;
}
}
function stopDrawing() {
if ( event ) {
event.end = Date.now() - slideStart;
if ( event.type == "erase" || event.curve.length > 1 ) {
// do not save a line with a single point only
recordEvent( event );
updateStorage();
}
event = null;
}
}
/*****************************************************************
** User interface
******************************************************************/
// TODO: check all touchevents
document.addEventListener('touchstart', function(evt) {
//console.log("Touch start");
if ( !readOnly && evt.target.getAttribute('data-chalkboard') == mode ) {
// var ctx = drawingCanvas[mode].context;
var scale = drawingCanvas[mode].scale;
var xOffset = drawingCanvas[mode].xOffset;
var yOffset = drawingCanvas[mode].yOffset;
evt.preventDefault();
var touch = evt.touches[0];
mouseX = touch.pageX;
mouseY = touch.pageY;
startDrawing( (mouseX - xOffset)/scale, (mouseY-yOffset)/scale, false );
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'startDrawing', timestamp: Date.now() - slideStart, status: { mode, board, color }, x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale, erase: false };
document.dispatchEvent( message );
/*
xLast = mouseX;
yLast = mouseY;
event = { type: "draw", begin: Date.now() - slideStart, end: null, curve: [{x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale}] };
*/
touchTimeout = setTimeout( showSponge, 500, mouseX, mouseY );
}
}, passiveSupported ? {passive: false} : false);
document.addEventListener('touchmove', function(evt) {
//console.log("Touch move");
clearTimeout( touchTimeout );
touchTimeout = null;
if ( event ) {
// var ctx = drawingCanvas[mode].context;
var scale = drawingCanvas[mode].scale;
var xOffset = drawingCanvas[mode].xOffset;
var yOffset = drawingCanvas[mode].yOffset;
var touch = evt.touches[0];
mouseX = touch.pageX;
mouseY = touch.pageY;
if (mouseY < drawingCanvas[mode].height && mouseX < drawingCanvas[mode].width) {
evt.preventDefault();
// move sponge
if ( event.type == "erase" ) {
drawingCanvas[mode].sponge.style.left = (mouseX - eraser.radius) +"px" ;
drawingCanvas[mode].sponge.style.top = (mouseY - eraser.radius) +"px" ;
}
}
drawSegment( (mouseX - xOffset)/scale, (mouseY-yOffset)/scale, ( event.type == "erase" ) );
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'drawSegment', timestamp: Date.now() - slideStart, status: { mode, board, color }, x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale, erase: ( event.type == "erase" ) };
document.dispatchEvent( message );
/*
if (mouseY < drawingCanvas[mode].height && mouseX < drawingCanvas[mode].width) {
evt.preventDefault();
event.curve.push({x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale});
if ( event.type == "erase" ) {
drawingCanvas[mode].sponge.style.left = (mouseX - eraser.radius) +"px" ;
drawingCanvas[mode].sponge.style.top = (mouseY - eraser.radius) +"px" ;
eraseWithSponge(ctx, mouseX, mouseY);
}
else {
draw[mode](ctx, xLast, yLast, mouseX, mouseY);
}
xLast = mouseX;
yLast = mouseY;
}
*/
}
}, false);
document.addEventListener('touchend', function(evt) {
clearTimeout( touchTimeout );
touchTimeout = null;
// hide sponge image
drawingCanvas[mode].sponge.style.visibility = "hidden";
stopDrawing();
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', timestamp: Date.now() - slideStart, type: 'stopDrawing', status: { mode, board, color } };
document.dispatchEvent( message );
/*
if ( event ) {
event.end = Date.now() - slideStart;
if ( event.type == "erase" || event.curve.length > 1 ) {
// do not save a line with a single point only
recordEvent( event );
}
event = null;
}
*/
}, false);
document.addEventListener( 'mousedown', function( evt ) {
//console.log("Mouse down");
//console.log( "Read only: " + readOnly );
if ( !readOnly && evt.target.getAttribute('data-chalkboard') == mode ) {
//console.log( "mousedown: " + evt.button );
// var ctx = drawingCanvas[mode].context;
var scale = drawingCanvas[mode].scale;
var xOffset = drawingCanvas[mode].xOffset;
var yOffset = drawingCanvas[mode].yOffset;
mouseX = evt.pageX;
mouseY = evt.pageY;
startDrawing( (mouseX - xOffset)/scale, (mouseY-yOffset)/scale, ( evt.button == 2 || evt.button == 1) );
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'startDrawing', timestamp: Date.now() - slideStart, status: { mode, board, color }, x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale, erase: ( evt.button == 2 || evt.button == 1) };
document.dispatchEvent( message );
/*
xLast = mouseX;
yLast = mouseY;
if ( evt.button == 2) {
event = { type: "erase", begin: Date.now() - slideStart, end: null, curve: [{x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale}]};
drawingCanvas[mode].canvas.style.cursor = 'url("' + path + 'img/sponge.png") ' + eraser.radius + ' ' + eraser.radius + ', auto';
eraseWithSponge(ctx,mouseX,mouseY);
}
else {
event = { type: "draw", begin: Date.now() - slideStart, end: null, curve: [{x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale}] };
}
*/
}
} );
document.addEventListener( 'mousemove', function( evt ) {
//console.log("Mouse move");
if ( event ) {
// var ctx = drawingCanvas[mode].context;
var scale = drawingCanvas[mode].scale;
var xOffset = drawingCanvas[mode].xOffset;
var yOffset = drawingCanvas[mode].yOffset;
mouseX = evt.pageX;
mouseY = evt.pageY;
drawSegment( (mouseX - xOffset)/scale, (mouseY-yOffset)/scale, ( event.type == "erase" ) );
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'drawSegment', timestamp: Date.now() - slideStart, status: { mode, board, color }, x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale, erase: ( event.type == "erase" ) };
document.dispatchEvent( message );
/*
event.curve.push({x: (mouseX - xOffset)/scale, y: (mouseY-yOffset)/scale});
if(mouseY < drawingCanvas[mode].height && mouseX < drawingCanvas[mode].width) {
if ( event.type == "erase" ) {
eraseWithSponge(ctx,mouseX,mouseY);
}
else {
draw[mode](ctx, xLast, yLast, mouseX,mouseY);
}
xLast = mouseX;
yLast = mouseY;
}
*/
}
} );
document.addEventListener( 'mouseup', function( evt ) {
drawingCanvas[mode].canvas.style.cursor = pens[mode][color[mode]].cursor;
if ( event ) {
stopDrawing();
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'stopDrawing', timestamp: Date.now() - slideStart, status: { mode, board, color } };
document.dispatchEvent( message );
/* if(evt.button == 2){
}
event.end = Date.now() - slideStart;
if ( event.type == "erase" || event.curve.length > 1 ) {
// do not save a line with a single point only
recordEvent( event );
}
event = null;
*/
}
} );
window.addEventListener( "resize", function() {
//console.log("resize");
// Resize the canvas and draw everything again
var timestamp = Date.now() - slideStart;
if ( !playback ) {
timestamp = getSlideDuration();
}
//console.log( drawingCanvas[0].scale + "/" + drawingCanvas[0].xOffset + "/" +drawingCanvas[0].yOffset );
for (var id = 0; id < 2; id++ ) {
drawingCanvas[id].width = window.innerWidth;
drawingCanvas[id].height = window.innerHeight;
drawingCanvas[id].canvas.width = drawingCanvas[id].width;
drawingCanvas[id].canvas.height = drawingCanvas[id].height;
drawingCanvas[id].context.canvas.width = drawingCanvas[id].width;
drawingCanvas[id].context.canvas.height = drawingCanvas[id].height;
drawingCanvas[id].scale = Math.min( drawingCanvas[id].width/storage[id].width, drawingCanvas[id].height/storage[id].height );
drawingCanvas[id].xOffset = (drawingCanvas[id].width - storage[id].width * drawingCanvas[id].scale)/2;
drawingCanvas[id].yOffset = (drawingCanvas[id].height - storage[id].height * drawingCanvas[id].scale)/2;
//console.log( drawingCanvas[id].scale + "/" + drawingCanvas[id].xOffset + "/" +drawingCanvas[id].yOffset );
}
//console.log( window.innerWidth + "/" + window.innerHeight);
startPlayback( timestamp, mode, true );
} );
Reveal.addEventListener( 'ready', function( evt ) {
//console.log('ready');
if ( !printMode ) {
slideStart = Date.now() - getSlideDuration();
slideIndices = Reveal.getIndices();
if ( !playback ) {
startPlayback( getSlideDuration(), 0 );
}
if ( Reveal.isAutoSliding() ) {
var event = new CustomEvent('startplayback');
event.timestamp = 0;
document.dispatchEvent( event );
}
updateStorage();
}
else {
console.log("Create printouts when ready");
whenReady( createPrintout );
}
});
Reveal.addEventListener( 'slidechanged', function( evt ) {
// clearTimeout( slidechangeTimeout );
//console.log('slidechanged');
if ( !printMode ) {
slideStart = Date.now() - getSlideDuration();
slideIndices = Reveal.getIndices();
closeChalkboard();
clearCanvas( 0 );
clearCanvas( 1 );
if ( !playback ) {
slidechangeTimeout = setTimeout( startPlayback, transition, getSlideDuration(), 0 );
}
if ( Reveal.isAutoSliding() ) {
var event = new CustomEvent('startplayback');
event.timestamp = 0;
document.dispatchEvent( event );
}
updateStorage();
}
});
Reveal.addEventListener( 'fragmentshown', function( evt ) {
// clearTimeout( slidechangeTimeout );
//console.log('fragmentshown');
if ( !printMode ) {
slideStart = Date.now() - getSlideDuration();
slideIndices = Reveal.getIndices();
closeChalkboard();
clearCanvas( 0 );
clearCanvas( 1 );
if ( Reveal.isAutoSliding() ) {
var event = new CustomEvent('startplayback');
event.timestamp = 0;
document.dispatchEvent( event );
}
else if ( !playback ) {
//
startPlayback( getSlideDuration(), 0 );
// closeChalkboard();
}
}
});
Reveal.addEventListener( 'fragmenthidden', function( evt ) {
// clearTimeout( slidechangeTimeout );
//console.log('fragmenthidden');
if ( !printMode ) {
slideStart = Date.now() - getSlideDuration();
slideIndices = Reveal.getIndices();
closeChalkboard();
clearCanvas( 0 );
clearCanvas( 1 );
if ( Reveal.isAutoSliding() ) {
document.dispatchEvent( new CustomEvent('stopplayback') );
}
else if ( !playback ) {
startPlayback( getSlideDuration() );
closeChalkboard();
}
}
});
Reveal.addEventListener( 'autoslideresumed', function( evt ) {
//console.log('autoslideresumed');
var event = new CustomEvent('startplayback');
event.timestamp = 0;
document.dispatchEvent( event );
});
Reveal.addEventListener( 'autoslidepaused', function( evt ) {
//console.log('autoslidepaused');
document.dispatchEvent( new CustomEvent('stopplayback') );
// advance to end of slide
// closeChalkboard();
startPlayback( getSlideDuration(), 0 );
});
function toggleNotesCanvas() {
if ( !readOnly ) {
if ( mode == 1 ) {
toggleChalkboard();
notescanvas.style.background = background[0]; //'rgba(255,0,0,0.5)';
notescanvas.style.pointerEvents = "auto";
}
else {
if ( notescanvas.style.pointerEvents != "none" ) {
// hide notes canvas
if ( colorButtons) {
notescanvas.querySelector(".palette").style.visibility = "hidden";
}
event = null;
notescanvas.style.background = 'rgba(0,0,0,0)';
notescanvas.style.pointerEvents = "none";
}
else {
// show notes canvas
if ( colorButtons) {
notescanvas.querySelector(".palette").style.visibility = "visible";
}
notescanvas.style.background = background[0]; //'rgba(255,0,0,0.5)';
notescanvas.style.pointerEvents = "auto";
var idx = 0;
if (color[mode]) {
idx = color[mode];
}
setColor(idx, true);
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'setcolor', timestamp: Date.now() - slideStart, status: { mode, board, color }, index: idx };
document.dispatchEvent( message );
}
}
}
};
function toggleChalkboard() {
//console.log("toggleChalkboard " + mode);
if ( mode == 1 ) {
event = null;
if ( !readOnly ) {
recordEvent( { type:"close", begin: Date.now() - slideStart } );
updateStorage();
}
closeChalkboard();
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'closeChalkboard', timestamp: Date.now() - slideStart, status: { mode, board, color } };
document.dispatchEvent( message );
}
else {
showChalkboard();
if ( !readOnly ) {
recordEvent( { type:"open", begin: Date.now() - slideStart } );
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'showChalkboard', timestamp: Date.now() - slideStart, status: { mode, board, color } };
document.dispatchEvent( message );
var idx = 0;
if (rememberColor[mode]) {
idx = color[mode];
}
setColor(idx, true);
// broadcast
message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'setcolor', timestamp: Date.now() - slideStart, index: idx, status: { mode, board, color } };
document.dispatchEvent( message );
}
}
};
function clear() {
if ( !readOnly ) {
recordEvent( { type:"clear", begin: Date.now() - slideStart } );
clearCanvas( mode );
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'clear', timestamp: Date.now() - slideStart, status: { mode, board, color } };
document.dispatchEvent( message );
}
};
function colorIndex( idx ) {
if ( !readOnly ) {
setColor(idx, true);
// recordEvent( { type: "setcolor", index: idx, begin: Date.now() - slideStart } );
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'setcolor', timestamp: Date.now() - slideStart, index: idx, status: { mode, board, color } };
document.dispatchEvent( message );
}
}
function colorNext() {
if ( !readOnly ) {
let idx = cycleColorNext();
setColor(idx, true);
// recordEvent( { type: "setcolor", index: idx, begin: Date.now() - slideStart } );
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'setcolor', timestamp: Date.now() - slideStart, index: idx, status: { mode, board, color } };
document.dispatchEvent( message );
}
}
function colorPrev() {
if ( !readOnly ) {
let idx = cycleColorPrev();
setColor(idx, true);
// recordEvent( { type: "setcolor", index: idx, begin: Date.now() - slideStart } );
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'setcolor', timestamp: Date.now() - slideStart, index: idx, status: { mode, board, color } };
document.dispatchEvent( message );
}
}
function resetSlide( force ) {
var ok = force || confirm("Please confirm to delete chalkboard drawings on this slide!");
if ( ok ) {
//console.log("resetSlide ");
stopPlayback();
slideStart = Date.now();
event = null;
closeChalkboard();
clearCanvas( 0 );
clearCanvas( 1 );
mode = 1;
var slideData = getSlideData();
slideData.duration = 0;
slideData.events = [];
mode = 0;
var slideData = getSlideData();
slideData.duration = 0;
slideData.events = [];
updateStorage();
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'resetSlide', timestamp: Date.now() - slideStart, status: { mode, board, color } };
document.dispatchEvent( message );
}
};
function resetStorage( force ) {
var ok = force || confirm("Please confirm to delete all chalkboard drawings!");
if ( ok ) {
stopPlayback();
slideStart = Date.now();
clearCanvas( 0 );
clearCanvas( 1 );
if ( mode == 1 ) {
event = null;
closeChalkboard();
}
storage = [
{ width: Reveal.getConfig().width, height: Reveal.getConfig().height, data: []},
{ width: Reveal.getConfig().width, height: Reveal.getConfig().height, data: []}
];
/*
storage = [
{ width: drawingCanvas[0].width - 2 * drawingCanvas[0].xOffset, height: drawingCanvas[0].height - 2 * drawingCanvas[0].yOffset, data: []},
{ width: drawingCanvas[1].width, height: drawingCanvas[1].height, data: []}
];
*/
if ( config.storage ) {
sessionStorage.setItem( config.storage, null )
}
// broadcast
var message = new CustomEvent(messageType);
message.content = { sender: 'chalkboard-plugin', type: 'init', timestamp: Date.now() - slideStart, storage: storage, status: { mode, board, color } };
document.dispatchEvent( message );
}
};
/*
this.drawWithBoardmarker = drawWithBoardmarker;
this.drawWithChalk = drawWithChalk;
this.startRecording = startRecording;
*/
this.toggleNotesCanvas = toggleNotesCanvas;
this.toggleChalkboard = toggleChalkboard;
this.colorIndex = colorIndex;
this.colorNext = colorNext;
this.colorPrev = colorPrev;
this.clear = clear;
this.reset = resetSlide;
this.resetAll = resetStorage;
this.download = downloadData;
this.updateStorage = updateStorage;
this.getData = getData;
this.configure = configure;
for (var key in keyBindings) {
if ( keyBindings[key] ) {
Reveal.addKeyBinding( keyBindings[key], RevealChalkboard[key] );
}
};
return this;
};