An Easy, Cross-Browser, Form Integrated Flash Draw Widget

With the coming of Ultra-Mobiles, Internet Tablets, Tablet PCs, Smart Phones and even PDAs, calligraphic interfaces are growing more then ever before. Though we do not see many sites taking advantage of this like calligraphic forums, blogs, etc.
Our goal was to create a calligraphic widget to put in forms that was as easy as <input type="draw" />; Simple, straightforward and completely transparent for developers.

What are the possibilities?

Here are some of the thing you might do with the widget. Several examples use random draws from your tests.

Background with Grid Editor and Custom Icons

This is a classic example of the usage of background with grid. In this case for medical usage.
Also, both Undo and Clean icons and tools color were customized.

The code:

Plain Colored Grid Viewer

Here, the widget will make a request to the URL to get our SVG content. Be aware of crossdomain issues as this is flash.
A thick, semi-transparent grid is also enable. Because the color is set, the widget background presents the color instead of being transparent.

The code:

Transparent Plain Viewer with SVG on QueryString

In this way, the SVG is directly injected in the widget appearing much faster, as soon as the page loads itself.
Notice that the animation here is 300 for a slow draw.

Ok, this widget can be transparent and you can display text, images, etc behind it.
Be aware that on diferent browsers, this will print differently

The code:

Connect Dots Example - Plain Editor with initial SVG (by field Id), Background and Disabled elements. And Solution!

In the edit style, we can have an initial draw, using any of the previous techniques to pass SVG. In this case we use another way indicating the Id of some field containing svg info.
By default, the output field is the initial input field, so you you fill you svg field, it will appear in the editor.
In this example, we can connect dots and play. :)
All tools options and undo button have been disabled.

Our draw field (usually a hidden field):

The solution:

Using the Javascript API, we can unveil the solution with animation. Here is the Solution to play! <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 300"><g fill="none" stroke-miterlimit="6" stroke-linecap="round"><path d="M 143 29 l 1 0 l 3 0 l 12 0 l 11 1 l 6 0 l 5 0 l 8 0 l 2 0 l 3 0 l 3 0 l 6 0 l 3 0 l 3 0 l 3 0 l 1 0 l 3 0 l 1 0 l 2 0 l 2 0 l 2 0 l 1 0 l 2 0 l 1 0 l 1 0 l 1 0" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 229 30 l 0 1 l 0 2 l 0 3 l 0 3 l 0 3 l 0 3 l 0 2 l 0 3 l 0 2 l 0 1 l 0 2 l 0 3 l 0 2 l 0 4 l 0 2 l 0 3 l 0 3 l 0 4 l 0 2 l 0 2 l 1 3 l 0 2 l 0 1 l 0 1 l 0 2 l 0 1 l 0 2 l 0 2 l 0 1 l 0 2 l 0 3 l 0 1 l 0 2 l 0 2 l 0 2 l 0 1 l 0 1 l 0 1 l -1 0 l 0 1 l 0 1 l -1 0" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 228 114 l 2 2 l 1 2 l 2 4 l 2 2 l 2 2 l 0 2 l 0 1 l 0 1 l 0 1 l 0 1 l 0 1 l 1 0 l 0 1 l 0 1 l 1 0 l 0 1 l 0 1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 240 139 l 1 3 l 1 4 l 0 2 l 0 2 l 0 3 l 0 2 l 0 1 l 1 2 l 0 2" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 242 161 l 0 1 l -1 4 l 0 2 l -1 1 l 0 2 l 0 3 l -1 0 l -1 1 l -1 2 l 0 1 l -1 1 l -1 2 l 0 1 l 0 1 l 0 1 l 0 1 l 0 1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 233 188 l -2 1 l -2 2 l -2 3 l -2 0 l -1 1 l -1 0 l -2 0 l -1 1 l -1 1 l -1 1 l -2 1 l -1 2 l -2 2 l -2 1 l -1 0 l 0 1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 213 207 l 1 0 l 3 1 l 3 1 l 2 2 l 5 3 l 4 3 l 1 1 l 1 1 l 2 1 l 4 2 l 1 1 l 2 1 l 2 0 l 1 1 l 2 1 l 2 1 l 1 1 l 1 0 l 0 1 l 0 1 l 1 1 l 2 1 l 1 0 l 0 1 l 1 0 l 1 1 l 1 0" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 258 236 l 0 1 l 0 1 l 2 5 l 2 5 l 1 1 l 1 1 l 0 2 l 0 1 l 1 1 l 1 2 l 1 2 l 0 1 l 0 1 l 2 2 l 0 2 l 2 2 l 0 1 l 1 2 l 2 2 l 1 3 l 1 2 l 2 2 l 1 3 l 1 2 l 1 2 l 0 1 l 0 1 l 1 1 l 0 1 l 0 1 l 1 0 l 1 1 l 1 0 l 0 2 l 0 1 l 1 0 l 0 1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 287 297 l 0 1 l -1 3 l -1 2 l -1 2 l -2 2 l 0 3 l -1 1 l -1 2 l -2 2 l -1 2 l 0 1 l -1 2 l 0 2 l -1 2 l -1 1 l 0 2 l 0 3 l 0 3 l -1 2 l 0 3 l 0 1 l -1 1 l -1 1 l 0 1 l -1 1 l 0 1 l -1 2 l 0 1 l 0 1 l -1 1 l 0 2 l -1 1 l 0 1 l -1 1 l 0 1 l -2 1 l 0 1 l 0 1 l 0 1 l 0 2 l 0 1 l 0 2 l 0 1 l 0 1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 264 366 l 0 1 l -2 2 l -2 2 l -3 3 l -2 0 l -2 2 l -2 1 l 0 1 l -3 2 l -2 0 l -3 2 l -3 1 l -1 1 l -2 0 l -2 1 l -1 2 l -2 2 l 0 1 l -2 1 l -2 3 l -2 0 l -1 0 l -1 0 l -1 0 l -1 1 l -1 0 l -1 0 l 0 1 l -1 0 l 0 1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 218 401 l -3 0 l -1 0 l -5 0 l -5 0 l -3 0 l -1 0 l -2 0 l -2 0 l -2 0 l -2 0 l -2 0 l -3 0 l -3 0 l -4 0 l -3 0 l -1 0 l -1 0 l -2 0 l -2 0 l -2 0 l -1 0 l -1 0 l -2 0 l -2 0" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 163 401 l -1 0 l -2 -2 l -8 -5 l -5 -3 l -3 -2 l -2 -2 l -4 -2 l -3 -3 l -2 -1 l -1 -1 l -1 -1 l -2 -1 l -1 -1 l -3 0 l -1 -1 l -1 0 l -2 0 l -1 0 l -2 -1 l -1 0 l -2 0 l -1 0 l -1 0 l -1 0" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 112 374 l 0 -2 l -1 -1 l -3 -4 l -7 -9 l -4 -6 l -1 -2 l -1 -2 l -1 -5 l -1 -2 l -1 -6 l -1 -3 l -2 -2 l -1 -2 l -3 -5 l -2 -2 l -1 -2 l 0 -1 l -1 -1 l 0 -2 l 0 -1 l 0 -1 l 0 -1 l 0 -1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 82 310 l 1 0 l 0 -3 l 1 -1 l 0 -3 l 0 -2 l 0 -3 l 0 -3 l 0 -1 l 0 -3 l 0 -2 l 1 -1 l 0 -1 l 1 -2 l 1 -1 l 0 -1 l 1 -1 l 1 -2 l 0 -2 l 1 -1 l 0 -1 l 0 -1 l 0 -2 l 1 -2 l 0 -1 l 0 -2 l 1 0 l 1 -1 l 1 -2 l 3 -3 l 0 -2 l 1 -2 l 1 -1 l 0 -2 l 1 -1 l 1 -1 l 0 -1 l 0 -1 l 1 0 l 0 -1 l 0 -2 l 1 -2 l 0 -1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 101 247 l 2 -3 l 4 -2 l 5 -4 l 3 -2 l 3 -2 l 7 -3 l 2 -2 l 1 -2 l 3 -2 l 1 -2 l 1 -1 l 1 -1 l 1 -1 l 2 -1 l 3 0 l 2 -1 l 2 0 l 0 -1 l 1 0 l 1 -1 l 2 0 l 1 -1 l 1 0 l 1 -2 l 0 -1 l 1 -1 l 1 0 l 0 -1 l 1 -2 l 0 -1 l 1 0 l 1 -1 l 1 -1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 160 206 l -2 -1 l -1 -2 l -2 -1 l -3 -2 l -2 -2 l -2 -2 l -1 -2 l -4 -1 l -2 -1 l -2 -1 l -1 0 l -1 0" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 139 189 l 0 -2 l -1 -2 l -4 -5 l -1 -3 l 0 -1 l -1 -2 l 0 -2 l 0 -2 l 0 -2 l 0 -2 l -1 0 l 0 -1 l 0 -1 l -2 -1 l 0 -1 l -1 0 l 0 -1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 127 161 l 0 -2 l 0 -2 l 0 -3 l 0 -3 l 1 -1 l 0 -2 l 0 -1 l 0 -2 l 1 -1 l 0 -1 l 0 -1 l 0 -1 l 1 -1 l 0 -1 l 0 -1 l 0 -1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 143 117 l -1 0 l -1 2 l -1 1 l 0 1 l -1 0 l -1 0 l -1 1 l 0 1 l -1 0 l 0 1 l -1 1 l -1 2 l 0 2 l 0 1 l 0 1 l -1 1 l 0 2 l -1 0 l -1 1" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/><path d="M 143 116 l 0 -1 l 0 -2 l 0 -2 l 0 -3 l 0 -3 l 0 -1 l 0 -2 l 0 -2 l 0 -2 l 0 -1 l 0 -2 l 0 -2 l 0 -3 l 0 -2 l 0 -2 l 0 -3 l 0 -2 l 0 -2 l 0 -2 l 0 -2 l 0 -2 l 0 -2 l 0 -1 l 0 -1 l 0 -4 l 0 -2 l 0 -1 l -1 -1 l 0 -1 l -1 -3 l 0 -2 l 0 -2 l 0 -1 l 0 -1 l 0 -2 l 0 -2 l 0 -1 l 0 -2 l 0 -1 l 0 -2 l 0 -2 l 0 -2 l 0 -1 l 0 -1 l 0 -2 l 0 -1 l 0 -1 l 0 -1 l 0 -1 l 0 -1 l 1 0" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/></g></svg>

The code: