Chalkboard with Reveal.js

Created by Asvin Goel

Please click the play button below.

Hey there

Have you ever missed the traditional classroom experience where you can quickly sketch something on a chalkboard?

Just press 'b' or click on the    button to open and close your chalkboard.

Select appearance: Chalkboard Whiteboard

After you are done please advance to the next slide and click the play button again.

Easy to use

  • Click the left mouse button to write on the chalkboard
  • Click the right mouse button to wipe the chalkboard
  • Click the 'DEL' key to clear the chalkboard

Touch support

  • Touch and drag to write on the chalkboard
  • Touch and hold, then drag to wipe the chalkboard

Make notes on slides

Did you notice the    button?

By pressing 'c' or clicking the button you can start and stop the notes taking mode allowing you to write comments and notes directly on the slide.

After you are done please advance to the next slide and click the play button again.

Default settings

By default, a drawing cannot be edited after navigating away from the slide.

Please check out Github for a documentation of the settings.

Playback

The plugin records all drawings and you can download them in a JSON-file by pressing 'd'.

The pre-recorded drawings can be added to the slideshow for playback.

JSON-file

If you are not an artist, you can also create a JSON-file based on an SVG image.

Original image

Source: Wikimedia

Preprocessing with Inkscape

  • Remove all elements which are not lines, e.g. shadows
  • Convert SVG path coordinates from relative to absolute (see here)
  • Convert curves to lines (see here)

Edited image

Create JSON-file with python program


#!/usr/bin/python3
# Converts svg paths to line segments for chalkboard.json

import sys
from xml.etree import ElementTree

if len(sys.argv) < 3:
  print('Usage:  svg2chalkboard.py <svg-file> <slide indices json> <page number> [start time] [time step]');
  exit(1);

filename = sys.argv[1];
indices  = sys.argv[2];
page  = sys.argv[3];

if len(sys.argv) < 5:
  start = 0;
else: 
  start = int( sys.argv[4] );
if len(sys.argv) < 6:
  timestep = 30;
else: 
  timestep = int( sys.argv[5] );

tree = ElementTree.parse( filename )
root = tree.getroot()

print('[{"width":960,"height":700,"data":[]},{"width":' + root.attrib['width'] + ',"height":' + root.attrib['height'] + ',"data":[{"slide":' + indices + ',"page":' + page + ',"events":[');
print('{"type":"open","time":' + str(start) + ',"board":0}')

timestamp = start;
for path in root.findall('{http://www.w3.org/2000/svg}path'):
  curve = path.attrib['d'];
  if curve[0] == 'M':
    points = curve[1:].split('L');
    if len(points) > 1:
      origin = points[0].split();
      for i in range( 1,len(points) ):
        destination = points[i].split();
        print(',{"type":"draw","color":0,"x1":' + origin[0] + ',"y1":' + origin[1] + ',"x2":' + destination[0] + ',"y2":' + destination[1] + ',"time":' + str(timestamp) + ',"board":0}');
        timestamp = timestamp + timestep;
        origin = destination
print('],"duration":' + str(timestamp) + '}]}]');

The program is just a rough quick and you may have to adapt it to work for other SVG images.

Printouts

All drawings on the chalkboard are included in the PDF-export.

Credits

The chalk effect is based on Chalkboard by Mohamed Moustafa.

The end

Check out other plugins by clicking on    and then on "Plugins ".

Have a look at the source code & documentation on Github.

Download Star