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.
1837 lines
60 KiB
1837 lines
60 KiB
2 months ago
|
/*****************************************************************
|
||
|
|
** 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;
|
||
|
|
};
|