Skip to content

Commit

Permalink
Add ability to have notes on print out
Browse files Browse the repository at this point in the history
This patch as an overlay canvas to the generated PDF print version to
render the notes added to the slides. To keep the current default behavior,
this feature must be enabled by setting the new configuration option "printNotes"
to `true`.

Unfortunatly the relative positioning between the drawings and the slide content
is not perfect since th rendering of the slide content slightly differs in the
pdf-print mode.

This patch adresses issue rajgoel#97
  • Loading branch information
dubit0 committed Dec 14, 2021
1 parent 3ef7e12 commit 6aee896
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 12 deletions.
1 change: 1 addition & 0 deletions chalkboard/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ The plugin has several configuration options:
- ```readOnly```: Configuation option allowing to prevent changes to existing drawings. If set to ```true``` no changes can be made, if set to false ```false``` changes can be made, if unset or set to ```undefined``` no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the 'DEL' key (i.e. by using the ```RevealChalkboard.clear()``` function).
- ```transition```: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
- ```theme```: Can be set to either ```"chalkboard"``` or ```"whiteboard"```.
- ```printNotes```: If set to ```true``` the notes on the slides will get rendered in the print view. Defaults to ```false```.

The following configuration options allow to change the appearance of the notes canvas and the chalkboard. All of these options require two values, the first gives the value for the notes canvas, the second for the chalkboard.

Expand Down
52 changes: 40 additions & 12 deletions chalkboard/plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -750,23 +750,39 @@ console.warn( "toggleNotesButton is deprecated, use customcontrols plugin instea
//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';

drawingCanvas[ 0 ].container.style.opacity = 1.0; // print the notes canvas
drawingCanvas[ 0 ].container.style.visibility = 'visible';
var patImg = new Image();
patImg.onload = function () {
var slides = Reveal.getSlides();
sid = 1;
//console.log(slides);
for ( var i = storage[ 1 ].data.length - 1; i >= 0; i-- ) {
for ( var i = storage[ sid ].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 drawings = createDrawings( slideData, patImg, 1 );
//console.log("Page:", storage[ 1 ].data[ i ].page );
//console.log("Slide:", slides[storage[ 1 ].data[ i ].page] );
addDrawings( slides[storage[ 1 ].data[ i ].page], drawings );
addDrawings( slides[storage[ sid ].data[ i ].page], drawings );

}
// Reveal.sync();
//Overlay notes canvas
if (config.printNotes) {
sid = 0;

for ( var i = storage[ sid ].data.length - 1; i >= 0; i-- ) {
console.log( 'Create notes overlay for slide ' + storage[ sid ].data[ i ].slide.h + '.' + storage[ sid ].data[ i ].slide.v );
var slideData = getSlideData( storage[ sid ].data[ i ].slide, sid );
console.log(slideData.slide + slideData.events.length)
var drawings = createDrawings( slideData, patImg, 0 );
//console.log("Page:", storage[ 1 ].data[ i ].page );
//console.log("Slide:", slides[storage[ 1 ].data[ i ].page] );
if (drawings.length > 0) {
overlayDrawing( slides[storage[ sid ].data[ i ].page], drawings[0] );
}
}
}
};
patImg.src = background[ 1 ];
}
Expand Down Expand Up @@ -813,16 +829,16 @@ console.warn( "toggleNotesButton is deprecated, use customcontrols plugin instea
return container[ idx ].canvas;
}

function createDrawings( slideData, patImg ) {
function createDrawings( slideData, patImg, id ) {
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;
if ( width != storage[ id ].width || height != storage[ id ].height ) {
scale = Math.min( width / storage[ id ].width, height / storage[ id ].height );
xOffset = ( width - storage[ id ].width * scale ) / 2;
yOffset = ( height - storage[ id ].height * scale ) / 2;
}
mode = 1;
board = 0;
Expand All @@ -836,7 +852,9 @@ console.warn( "toggleNotesButton is deprecated, use customcontrols plugin instea
var imgCtx = template.getContext( '2d' );
imgCtx.fillStyle = imgCtx.createPattern( patImg, 'repeat' );
imgCtx.rect( 0, 0, width, height );
imgCtx.fill();
if (id == 1) {
imgCtx.fill();
}

for ( var j = 0; j < slideData.events.length; j++ ) {
switch ( slideData.events[ j ].type ) {
Expand Down Expand Up @@ -892,6 +910,16 @@ console.warn( "toggleNotesButton is deprecated, use customcontrols plugin instea
}
}

function overlayDrawing( slide, drawing ) {
var overlay = document.createElement( 'div' );
overlay.classList.add( 'overlay' );
overlay.style.position = "relative";
overlay.style.height = Reveal.getConfig().height;
overlay.style.width = Reveal.getConfig().width;
overlay.append( drawing.canvas );
slide.parentElement.appendChild(overlay)
}

/*****************************************************************
** Drawings
******************************************************************/
Expand Down

0 comments on commit 6aee896

Please sign in to comment.