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.

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 bash script


grep 'd=\"M' Manga_lines.svg | sed 's/L/ /g' | sed -e 's/  */ /g'  | sed 's/d="M//g'  | sed 's/"//g' > tmp.csv
BEGIN=4000
JSON=`cat tmp.csv | while read LINE; do
 END=$((BEGIN + 500))
 OUTPUT=$OUTPUT'{"type":"draw","begin":'$BEGIN',"end":'$END',"curve":['
 BEGIN=$END
 prefix='{"x":'
 suffix=','
 for i in $LINE; do
  if [ $prefix == '{"x":' ]; then 
   OUTPUT=$OUTPUT$prefix$i$suffix
   prefix='"y":'
   suffix='},'
  else
   OUTPUT=$OUTPUT$prefix$i$suffix
   prefix='{"x":'
   suffix=','
  fi
 done
 echo $OUTPUT']},'
 OUTPUT=""
done`
END=`awk 'END {print (NR)*500+4000}' tmp.csv`
echo '[{"width":960,"height":720,"data":[]},{"width":540,"height":720,"data":[{"slide":{"h":6,"v":0,"f":0},"events":[{"type":"open","begin":4000},'$JSON'], "duration":'$END'}]}]' | sed 's/,]/]/g'

The script is just a rough hack and it is likely that you have to adapt it significantly 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
Fork me on GitHub