Skip to content

Latest commit

 

History

History
60 lines (47 loc) · 2.95 KB

README.md

File metadata and controls

60 lines (47 loc) · 2.95 KB
Raw

DazzleSketch - OmniDazzle meets JavaScript

A JavaScript library that allows one to sketch over a web page or reveal.js presentation. Quite useful when using reveal.js to give a live lecture or when you are using reveal.js to record a lecture using a tool like Camtasia.

This is a bit of code that builds on the excellent sketch.js library that implements a simple sketching tool using jQuery and the HTML5 canvas:

http://intridea.github.io/sketch.js/

I mimic the UI and keystrokes of the OmniDazzle drawing tool that worked so well but was not compatible with MacOS versions beyond 10.8 :(. You add DazzleSketch to a web page using the following pattern:

<html lang="en">
<body>
    <h1>This is a Header</h1>
    <p>This is a paragraph that we will scribble on.</p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script>
    <script src="dazzleSketch.js"></script>
</body>
</html>

This also works well when added to the reveal.js HTML. I would like to see it turned into a plugin for reveal.js - but I am sure it needs a bit of code review.

When DazzleSketch is loaded, you see no UI on the screen - it is just ready to scribble and activated using the following keystrokes.

  • ctrl-` (next to the 1) erase and turn off drawing
  • ctrl-P Switch between a white canvas and transparent canvas
  • ctrl-1 Yellow Pen
  • ctrl-2 Green Pen
  • ctrl-3 Cyan Pen
  • ctrl-4 Red Pen
  • ctrl-5 White Pen
  • ctrl-6 Blue Pen
  • ctrl-7 Magenta Pen
  • ctrl-8 Black Pen
  • ctrl-- Make pen narrower
  • ctrl-= Make pen wider

While you are scribbling most mouse movements will be taken over by DazzleSketch. If you hover over a link, the a:hover action will not happen and you might not be able to click on a link in the HTML document until you clear the sketch overlay with ctrl-`. This is because DazzleSketch makes an HTML5 canvas that covers the entire window area and uses z-index to be "on top" of the other HTML content on the page. When you clear the screen, the DazzleSketch canvas is placed behind the rest of the content using z-index so all the normal mouse movements apply to the web content.

If you are using DazzleSketch in a Reveal.js persentation, each time you switch slides, the drawing canvas is cleared and set to transparent.

For me, I have a Wacom Cintiq 12WX 12-Inch Pen Display that I remap the keys to make the drawing very smooth for nice drawings while recording lectures for my online classes.