Wednesday, August 1st, 2007

InputDraw: Allow Drawing in Forms

Category: Component, Flash, SVG

Ever wanted to let your users draw in a form field?

InputDraw in Action

<InputDraw/> lets you do just that, saving the results as SVG for you to include in a form field. It’s based on Flash and is easy to use:

  1. <script src="swfobject.js" type="text/javascript"></script>
  2. <script src="inputdraw.js" type="text/javascript"></script>
  3. <div id="place"></div>
  4.  
  5. <input type="hidden" id="svgdraw" />
  6.  
  7. <script type="text/javascript">
  8. new InputDraw("inputdraw.free-non-commercial.1.3.swf", "place",
  9.         {id:"svgdraw", width:"300", height:"300", animation:60, background_image:"/images/backgrounds/minorca_beach.jpg"});
  10. </script>

The project also includes an SVG viewer. We’re told that:

version 1.0 has more than 1000 real downloads and it is used in a lot of
funny websites and medical web applications.

Posted by Ben Galbraith at 7:00 am
7 Comments

++++-
4.1 rating from 33 votes

7 Comments »

Comments feed TrackBack URI

Interesting though not very accessible captcha solution. Nice one!

Comment by .mario — August 1, 2007

Amazing! This is going to be fun :)

Comment by Калоян К. Цветков — August 1, 2007

I think Microsoft are aiming at something similar with the ink support in Silverlight. Time will tell how that works out eh.

Comment by Steve Elbows — August 1, 2007

Awesome! I have searched for software that do it! great :]

Comment by Nir Tayeb — August 1, 2007

very nice

Comment by justin — August 1, 2007

Hi,
You might also want to check out Tutor vista ‘s white-board application.

~ R

Comment by Rob — August 2, 2007

I’m planning to use inputDraw as a freehand drawing widget on my font image generator site. It serves as a front-end to ImageMagick.

Here is the demo site. http://www.interactimage.com/4alpha1_index.php

To use it, click the create button to make a foreground image and then click the freehand draw button on the toolbar. Draw something onto the original image and click the merge button. Note that the ImageMagick bug will be evident in the resulting image. (curved paths will be filled with black and all lines are opaque even when set to some semi-transparent value)

All thats left to do is wait for the next release of ImageMagick to fix bugs related to reading SVG files and it will be released.

~Jeff

Comment by kamakalama — January 9, 2009

Leave a comment

You must be logged in to post a comment.