Handwriting is a plugin for Reveal.js. This plugin provides a option you annotate to your presentation with a mouse, touch and pen. Some functions of this plugin are based on Chalkboard of reveal.js-plugins.
Copy the follwing file and directories to plugin/handwriting in your project:
- handwriting.js
- img/
- awsome-font/
Add the plugin to the dependencies in your presentation, as below.
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'plugin/handwriting/handwriting.js' },
// ...
]
});
You can define key assignment to use additional functions in the dependencies.
'key code': fucntion () {RevealHandWriting.'function'}
Example in the demo.
Reveal.initialize({
// ...
keyboard: {
67: function () { RevealHandWriting.colorCycle() }, // Change color with 'c'.
46: function () { RevealHandWriting.clear() }, // Clear drawn things with 'DEL'.
68: function () { RevealHandWriting.download() }, // Downlad drawn things on a slide with 'd'.
},
// ...
});
Name | Detail |
---|---|
toggleNotesCanvas() | Toggle enable and disable marker mode |
toggleChalkboard() | Toggle enable and disable chalk mode |
clear() | Clear chalkboard |
reset() | Reset chalkboard data on current slide |
download() | Downlad recorded drawing |
colorCycle() | Change colors |
Press a pen icon in lower-left of your slide.
- Maker pen(default)
- chalk
On the drawing mode, Press an eraser icon in lower-left of your slide to toggle the Erasing mode.
Drawing: Click a left button and drag
Eraser: Click the right button and drag
Drawing: Touch and move
Eraser: Touch and hold for half a second, then move
The Docker image allows you use the handwriting's plugin easily.