Commit 8c00fc25 authored by Romain Casati's avatar Romain Casati
Browse files

Updating RISE.

parent d3bbd937
......@@ -25,7 +25,7 @@ define([
* 2) add settings configured in python; these typically can be
* 2a) either in a legacy file named `livereveal.json`
* 2b) or, with the official name, in `rise.json`
* 3) add the settings from nbextensions_configurator (i.e. .jupyter/nbconfig/notebook.json)
* 3) add the settings from nbext_configurator (i.e. .jupyter/nbconfig/notebook.json)
* they should all belong in the 'rise' category
* the configurator came after the shift from 'livereveal' to 'rise'
* so no need to consider 'livereveal' here
......@@ -58,6 +58,7 @@ define([
start_slideshow_at: 'selected',
auto_select: 'code',
auto_select_fragment: true,
show_buttons_on_startup: true,
// aspect
header: undefined,
......@@ -112,6 +113,7 @@ define([
// plugins
enable_chalkboard: false,
enable_leap_motion: false,
};
// honour the 2 names: 'livereveal' and 'rise'
......@@ -471,6 +473,10 @@ define([
$('div#rise-overlay').remove();
}
function toggleAllRiseButtons() {
$('#help_b,#exit_b,#toggle-chalkboard,#toggle-notes').fadeToggle()
}
function Revealer(selected_slide) {
// console.log(`complete_config: ${JSON.stringify(complete_config)}`);
......@@ -513,10 +519,6 @@ define([
$('head').append(
`<link rel="stylesheet" href="${name_css}" id="rise-notebook-css" />`);
function toggleAllRiseButtons() {
$('#help_b,#exit_b,#toggle-chalkboard,#toggle-notes').fadeToggle()
}
// Tailer
require([
......@@ -525,7 +527,7 @@ define([
// './reveal.js/lib/js/head.min.js',
'./reveal.js/js/reveal.js'
].map(require.toUrl),
function(){
function() {
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
......@@ -656,6 +658,10 @@ define([
setStartingSlide(selected_slide);
addHeaderFooterOverlay();
if (! complete_config.show_buttons_on_startup) {
/* safer, and nicer too, to wait for reveal extensions to start */
setTimeout(toggleAllRiseButtons, 2000);
}
});
}
......@@ -712,7 +718,7 @@ define([
'firstSlide': () => Reveal.slide(0), // jump to first slide
'lastSlide': () => Reveal.slide( Number.MAX_VALUE ), // jump to last slide
'toggleOverview': () => Reveal.toggleOverview(), // toggle overview
//'toggleAllRiseButtons': () => toggleAllRiseButtons(), // show/hide buttons
'toggleAllRiseButtons': toggleAllRiseButtons, // show/hide buttons
'fullscreenHelp': fullscreenHelp, // show fullscreen help
'riseHelp': riseHelp, // '?' show our help
},
......@@ -721,8 +727,13 @@ define([
'reset': () => RevealChalkboard.reset(), // reset chalkboard data on current slide
'toggleChalkboard': () => RevealChalkboard.toggleChalkboard(), // toggle full size chalkboard
'toggleNotesCanvas': () => RevealChalkboard.toggleNotesCanvas(), // toggle notes (slide-local)
'colorNext': () => RevealChalkboard.colorNext(), // next color
'colorPrev': () => RevealChalkboard.colorPrev(), // previous color
'download': () => RevealChalkboard.download() // download recorded chalkboard drawing
}
},
'notes': { // API calls for RevealNotes plug-in
'openNotes' : () => RevealNotes.open(), // open speaker notes window
},
}
let reveal_helpstr = {
......@@ -739,27 +750,37 @@ define([
'reset': 'reset chalkboard data on current slide',
'toggleChalkboard': 'toggle full size chalkboard',
'toggleNotesCanvas': 'toggle notes (slide-local)',
'colorNext': 'cycle to next pen color',
'colorPrev': 'cycle to previous pen color',
'download': 'download recorded chalkboard drawing'
}
},
'notes': { // API calls for RevealNotes plug-in
'openNotes' : 'open speaker notes window'
},
}
//need to check, if we can fetch the default bindings from rise.yaml (nbconfig)
// need to check, if we can fetch the default bindings from rise.yaml (nbconfig)
let reveal_default_bindings = {
'main': {
'firstSlide': 'home',
'lastSlide': 'end', // keycode 35
'toggleOverview': 'w', // keycode 87
//'toggleAllRiseButtons': 'm', //keycode 188 (",") is not allowed in jupyter! using m instead
'fullscreenHelp': 'f', // keycode 70
'riseHelp': '?', // keycode 63
'lastSlide': 'end', // keycode 35
'toggleOverview': 'w', // keycode 87
//'toggleAllRiseButtons': 'm', // keycode 188 (",") is not allowed in jupyter! using m instead
'fullscreenHelp': 'f', // keycode 70
'riseHelp': '?', // keycode 63
},
'chalkboard': {
'clear': 't,c', // keycode 189 (and 173 on firefox)
'reset': 'n,c', // keycode 187 (and 61 on firefox)
'toggleChalkboard': 't,t', // keyode 219
'toggleNotesCanvas': 'n,n', // keycode 221
'download': 'd,d' // keycode 220
}
'clear': 't,c',
'reset': 'd,c',
'toggleChalkboard': 't,t',
'toggleNotesCanvas': 'd,d',
'colorPrev': 'q', // keycode 81
'colorNext': 's', // kecode 83
'download': 'd,g'
},
'notes': { // API calls for RevealNotes plug-in
'openNotes' : 'n,n'
},
}
// update reveal bindings with custom key codes
......@@ -864,6 +885,7 @@ define([
let jupyter_keys;
let reveal_keys;
let cb_keys;
let no_keys;
//check if custom bindings for registered jupyter calls are defined
if (typeof complete_config.shortcuts !== 'undefined'){
......@@ -879,8 +901,10 @@ define([
reveal_keys = updated_keybindings['main'];
cb_keys = updated_keybindings['chalkboard'];
no_keys = updated_keybindings['notes'];
let reveal_help = reveal_helpstr['main'];
let cb_help = reveal_helpstr['chalkboard'];
let no_help= reveal_helpstr['notes'];
let message = $('<div/>').append(
$("<p/></p>").addClass('dialog').html(
......@@ -893,7 +917,7 @@ define([
helpListItem(reveal_keys.firstSlide, reveal_help.firstSlide) +
helpListItem(reveal_keys.lastSlide, reveal_help.lastSlide) +
helpListItem(reveal_keys.toggleOverview, reveal_help.toggleOverview) +
helpListItem('t', 'toggle notes') +
helpListItem(no_keys.openNotes, no_help.openNotes) +
`<li><kbd>,</kbd>: ${reveal_help.toggleAllRiseButtons}</li>` +
"<li><kbd>/</kbd>: black screen</li>" +
"<li><strong>less useful:</strong>" +
......@@ -907,6 +931,8 @@ define([
"<ul>" +
helpListItem(cb_keys.toggleChalkboard, cb_help.toggleChalkboard) +
helpListItem(cb_keys.toggleNotesCanvas, cb_help.toggleNotesCanvaas) +
helpListItem(cb_keys.colorNext, cb_help.colorNext) +
helpListItem(cb_keys.colorPrev, cb_help.colorPrev) +
helpListItem(cb_keys.download, cb_help.download) +
helpListItem(cb_keys.reset, cb_help.reset) +
helpListItem(cb_keys.clear, cb_help.clear) +
......
......@@ -3,33 +3,35 @@
With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:
- you can make notes directly on the slides, e.g. to comment on certain aspects,
- you can open a chalkboard on which you can make notes.
- you can open a chalkboard or whiteboard on which you can make notes.
The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.
The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes.
The plugin records all drawings made so that they can be play backed using the ```autoSlide``` feature or the ```audio-slideshow``` plugin.
The plugin records all drawings made so that they can be play backed using the ```autoSlide``` feature or the ```audio-slideshow``` plugin.
[Check out the live demo](https://rajgoel.github.io/reveal.js-demos/chalkboard-demo.html)
The chalkboard effect is based on [Chalkboard](https://github.com/mmoustafa/Chalkboard) by Mohamed Moustafa.
Multi color support added by Kurt Rinnert [GitHub](https://github.com/rinnert).
## Installation
Copy the file ```chalkboard.js``` and the ```img``` directory into the plugin folder of your reveal.js presentation, i.e. ```plugin/chalkboard```.
Add the plugins to the dependencies in your presentation as shown below.
Add the plugins to the dependencies in your presentation as shown below.
```javascript
Reveal.initialize({
// ...
chalkboard: {
chalkboard: {
// optionally load pre-recorded chalkboard drawing from file
src: "chalkboard.json",
},
dependencies: [
// ...
// ...
{ src: 'plugin/chalkboard/chalkboard.js' },
// ...
// ...
],
keyboard: {
67: function() { RevealChalkboard.toggleNotesCanvas() }, // toggle notes canvas when 'c' is pressed
......@@ -37,12 +39,14 @@ Reveal.initialize({
46: function() { RevealChalkboard.clear() }, // clear chalkboard when 'DEL' is pressed
8: function() { RevealChalkboard.reset() }, // reset chalkboard data on current slide when 'BACKSPACE' is pressed
68: function() { RevealChalkboard.download() }, // downlad recorded chalkboard drawing when 'd' is pressed
88: function() { RevealChalkboard.colorNext() }, // cycle colors forward when 'x' is pressed
89: function() { RevealChalkboard.colorPrev() }, // cycle colors backward when 'y' is pressed
},
// ...
});
```
In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that ```font-awesome``` is available. The easiest way is to include
In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that ```font-awesome``` is available. The easiest way is to include
```
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
```
......@@ -50,7 +54,7 @@ to the ```head``` section of you HTML-file.
## Usage
### Enable & disable
### Enable & disable
With above configuration the notes canvas is opened and closed when pressing 'c' and the chalkboard is opened and closed when pressing 'b'.
......@@ -63,9 +67,11 @@ With above configuration the notes canvas is opened and closed when pressing 'c'
- Touch and hold for half a second, then move to wipe away previous drawings
### Keyboard
- Click the 'DEL' key to clear the chalkboard </li>
- Click the 'd' key to download chalkboard drawings</li>
- Click the 'BACKSPACE' key to delete all chalkboard drawings on the current slide</li>
- Press the 'DEL' key to clear the chalkboard
- Press the 'd' key to download chalkboard drawings
- Press the 'BACKSPACE' key to delete all chalkboard drawings on the current slide
- Press the 'x' key to cycle colors forward
- Press the 'y' key to cycle colors backward
## Playback
......@@ -73,52 +79,82 @@ If the ```autoSlide``` feature is set or if the ```audio-slideshow``` plugin is
## PDF-Export
If the slideshow is opened in [print mode](https://github.com/hakimel/reveal.js/#pdf-export) the pre-recorded chalkboard drawings (which must be provided in a file, see ```src``` option) are included in the PDF-file. Each drawing on the chalkboard is added after the slide that was shown when opening the chalkboard. Drawings are also included if they had been cleared (using the 'DEL' key). Drawings on the notes canvas are not included in the PDF-file.
If the slideshow is opened in [print mode](https://github.com/hakimel/reveal.js/#pdf-export) the pre-recorded chalkboard drawings (which must be provided in a file, see ```src``` option) are included in the PDF-file. Each drawing on the chalkboard is added after the slide that was shown when opening the chalkboard. Drawings are also included if they had been cleared (using the 'DEL' key). Drawings on the notes canvas are not included in the PDF-file.
## Configuration
The plugin has several configuration options:
- ```boardmarkerWidth```: an integer, the drawing width of the boardmarker; larger values draw thicker lines.
- ```chalkWidth```: an integer, the drawing width of the chalk; larger values draw thicker lines.
- ```chalkEffect```: a float in the range ```[0.0, 1.0]```, the intesity of the chalk effect on the chalk board. Full effect (default) ```1.0```, no effect ```0.0```.
- ```src```: Optional filename for pre-recorded drawings.
- ```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).
- ```toggleNotesButton```: If set to ```true``` a button for opening and closing the notes canvas is shown. Alternatively, the css position attributes can be provided if the default position is not appropriate.
- ```toggleChalkboardButton```: If set to ```true``` a button for opening and closing the chalkboard is shown. Alternatively, the css position attributes can be provided if the default position is not appropriate.
- ```toggleNotesButton```: If set to ```true``` a button for opening and closing the notes canvas is shown. Alternatively, the css position attributes can be provided if the default position is not appropriate.
- ```toggleChalkboardButton```: If set to ```true``` a button for opening and closing the chalkboard is shown. Alternatively, the css position attributes can be provided if the default position is not appropriate.
- ```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"```.
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.
- ```color```: The first value gives the pen color, the second value gives the color of the chalk.
- ```background```: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
- ```pen```: The first value expects a filename for an image of the pen used for the notes canvas, the second value expects a filename for an image of the pen used for the chalkboard.
- ```grid```: By default whiteboard and chalkboard themes include a grid pattern on the background. This pattern can be modified by setting the color, the distance between lines, and the line width, e.g. ```{ color: 'rgb(127,127,255,0.1)', distance: 40, width: 2}```. Alternatively, the grid can be removed by setting the value to ```false```.
- ```eraser```: An image path and radius for the eraser.
- ```boardmarkers```: A list of boardmarkers with given color and cursor.
- ```chalks```: A list of chalks with given color and cursor.
- ```rememberColor```: Whether to remember the last selected color for the slide canvas or the board.
All of the configurations are optional and the default values shown below are used if the options are not provided.
```javascript
Reveal.initialize({
// ...
chalkboard: {
src: null,
readOnly: undefined,
toggleChalkboardButton: { left: "30px", bottom: "30px", top: "auto", right: "auto" },
toggleNotesButton: { left: "30px", bottom: "30px", top: "auto", right: "auto" },
transition: 800,
theme: "chalkboard",
// configuration options for notes canvas and chalkboard
color: [ 'rgba(0,0,255,1)', 'rgba(255,255,255,0.5)' ],
background: [ 'rgba(127,127,127,.1)' , 'reveal.js-plugins/chalkboard/img/blackboard.png' ],
pen: [ 'url(reveal.js-plugins/chalkboard/img/boardmarker.png), auto', 'url(reveal.js-plugins/chalkboard/img/chalk.png), auto' ],
},
// ...
chalkboard: {
boardmarkerWidth: 3,
chalkWidth: 7,
chalkEffect: 1.0,
src: null,
readOnly: undefined,
toggleChalkboardButton: { left: "30px", bottom: "30px", top: "auto", right: "auto" },
toggleNotesButton: { left: "30px", bottom: "30px", top: "auto", right: "auto" },
transition: 800,
theme: "chalkboard",
background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
eraser: { src: path + 'img/sponge.png', radius: 20},
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'}
],
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'}
]
},
// ...
});
```
**Note:** Customisation of pens and eraser has changed since version 0.8 of the plugin. This behaviour may break backwards compatibility for older pen configurations.
**Note:** Customisation of pens has changed since version 0.5 of the plugin, it is now possible to use standard cursors, e.g. by setting ```pen: [ 'crosshair', 'pointer' ]```. Please update your parameters if migrating from an older version.
## License
**Note:**
MIT licensed
Copyright (C) 2016 Asvin Goel
{
"_from": "reveal.js-chalkboard@~1.0.0",
"_id": "reveal.js-chalkboard@1.0.0",
"_inBundle": false,
"_integrity": "sha512-lSNmMiIbYo/1Bh2wF3JgWgAB6K60wI8GO5AJhO6sBTSVV5nRAQnlH6ybkzr8PnY+pbcjvsPsXVghFF7pt/2WIw==",
"_location": "/reveal.js-chalkboard",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "reveal.js-chalkboard@~1.0.0",
"name": "reveal.js-chalkboard",
"escapedName": "reveal.js-chalkboard",
"rawSpec": "~1.0.0",
"saveSpec": null,
"fetchSpec": "~1.0.0"
},
"_requiredBy": [
"/"
],
"_resolved": "https://registry.npmjs.org/reveal.js-chalkboard/-/reveal.js-chalkboard-1.0.0.tgz",
"_shasum": "5fa4a1e631082f92524a78cb590897128158c993",
"_spec": "reveal.js-chalkboard@~1.0.0",
"_where": "/tmp/RISE/rise-reveal",
"author": {
"name": "Asvin Goel"
},
"bugs": {
"url": "https://github.com/rajgoel/reveal.js-plugins.git/issues"
},
"bundleDependencies": false,
"deprecated": false,
"description": "Add a blackboard to your reveal.js presentations",
"homepage": "https://github.com/rajgoel/reveal.js-plugins/blob/master/chalkboard/README.md",
"keywords": [
"reveal",
"chalkboard",
"blackboard"
],
"license": "MIT",
"name": "reveal.js-chalkboard",
"repository": {
"type": "git",
"url": "git+https://github.com/rajgoel/reveal.js-plugins.git"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"version": "1.0.0"
}
Copyright (C) 2019 Hakim El Hattab, http://hakim.se, and reveal.js contributors
Copyright (C) 2020 Hakim El Hattab, http://hakim.se, and reveal.js contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment