https://github.com/csev/dazzlesketch

A JavaScript library that allows one to sketch over reveal.js presentations or any web page - OmniDazzle meets JavaScript
https://github.com/csev/dazzlesketch

Last synced: 6 days ago
JSON representation

A JavaScript library that allows one to sketch over reveal.js presentations or any web page - OmniDazzle meets JavaScript

• Host: GitHub
• URL: https://github.com/csev/dazzlesketch
• Owner: csev
• License: mit
• Created: 2015-04-22T02:07:18.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-03-21T15:21:40.000Z (over 4 years ago)
• Last Synced: 2024-05-01T20:47:20.742Z (7 months ago)
• Language: JavaScript
• Homepage: http://csev.github.io/dazzleSketch/
• Size: 19.5 KB
• Stars: 14
• Watchers: 4
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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:

    

    

        
This is a Header

        
This is a paragraph that we will scribble on.

        

        

        

    

    


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.