You are viewing an unstyled version of this page. Either your browser does not support Cascading Style Sheets (CSS) or CSS styling has been disabled.

Price Slash! more on the Blog

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.




Ultimate flash draw component. Free, easy and fun.

How it works?

Next is a example of how to use it, how it works and what is the result. With this we hope you'll understand the entire picture.

Editor

The result end up in this textarea that normally would be a hidden field.

Extra Sugar: Javascript API

Thumbnail

Here a thumbnail of what we are drawing is presented. To do so, just put:

Detail

This enables us to see the zoom area. We have to set the src SVG to the correspondent viewbox (ex: viewBox="236 152 299 198" on the SVG node). To do so, just put:
This API allows to interact with the widget using javascript and creating hooks (callbacks) for content change. Like Clear, Undo, etc..

 

Browser SVG Viewer

Now it's presented the end result of the SVG from the application using the same widget as viewer.

You can also view others random tests. Have fun!

How to use it?

Here is the needed code to make it work. Only some easy steps needed.

1- First, include both needed javascript files. SWFObject is a nice Javascript Flash Player detection and embed script. The other is just an abstraction to turn everything simple and easy to do:

2 - To create an editor, put a <div/> on the place you want the widget with an Id.
Also include an hidden field with any other Id. Finally, run a single javascript code line to create the widget passing the Ids also:

3 - finally, to view the SVG (only works for InputDraw's created SVG for now) you can pass the SVG url, directly put the SVG text in src_svg option or indicate a field Id in the src_id option.
You can also set the animation passing a numeric value in the animation on the query string, being 0 (zero) not animated:

That all! Hope you can use it. Check the Examples.

At inEvo we enjoy playing around with new stuff. Creativity is a major aspect of our work. We believe that this widget will enable new and fun ways of interaction with sites and new creative ideas.

What can I do?


Who's using it?

Here are the latest projects to integrate <InputDraw/> as a commercial solution:

Klinische notities - 1 element
Internet Marketing Jobs - 1 element
Jobs in Sri Lanka - 1 element
Whey Protein - 1 element
HHSOS - AtHomeFL - 1 element
IndyFeed - 1 element
Push Up Bars - 1 element
prepaid cards - 1 element
Meme Generator - 1 element
Ladies Perfume - 1 element
RaiseTheVolume - 1 element
Wall It - 1 element
Gyms Nearby - 1 element
magickal Myths & Metaphors - 1 element
Charge.com signature - 1 element
HealthcareEX - 1 element
Dermiscribe - 1 element
hsquaremechanical - 1 element
docq - 1 element
JSP - 1 element
JSP QA - 1 element
web de clientes - 1 element
Business to Business Goods - 1 element
ESR - 1 element
student lynk - 1 element
Pinnacle - 1 element
Home Healthcare SOS - 1 element
Pizarra Innova - 1 element
Human Body - 1 element
Tocemizo.com - 1 element
Medicore – Vision Clinics - 1 element
Hireconfidence - 1 element
Claimspotting - 1 element
DotJob History - 1 element
SightDesign - 1 element
Application - 1 element
codered online - 7 elements
Health Landscape - 5 elements
ONeill - 2 elements
eMediaboard - 5 elements
vhospital - 6 elements
DF Studio - 2 elements
mondus - 2 elements
Pelican Internet - 3 elements
Stureplan - 7 elements
SIR - 32 elements
SIR - 4 elements
Teccon - 1 element
myeyesite.com - 6 elements
Gruppo Mediarete - 5 elements
Masterfoot - 6 elements
Comics Sketch - 4 elements