Documentation

What is the installation process?

First copy all package files to your site. They are:

• swfobject.js
• inputdraw.js
• inputdraw.non-commercial.v1.5.swf

Finally, in the Head part of your site include both javascript sources:

Being [JS_PATH] the actual path to these two files.
Now we are ready to go!!

How to insert a widget?

A widget can be used as an editor or just as a viewer. They are very similar, so lets look at both:

Editor

First you need a something like a Div to serve as placing tag for the widget. So, just add a Div with an Id of your choice:

Then, you need to place a Hidden Field to which the widget will export the SVG. Don’t forget to put this field inside the desired Form:

Don’t disregard that this field needs to have an Id also.
Finally, you need to create our widget using javascript. Just need to instantiate our widget passing both Id’s and a few more info that we’ll discuss later.

Both javascript libraries will take care of the rest and load the widget when the page is finally loaded, this is, they will automatically add some code to the Body Onload event. By default, the widget source will be also its repository, in this casa, the hidden field. So, if you fill the hidden field, it will appear in the widget as it starts.

Viewer

The only difference between this and the editor is that you don’t provide an “id” in the javacript InputDraw Class instantiation options. So, you will to have to define a source for the viewer.
There are three types of source: Passing a field Id, an Url or directly SVG content. Note that this is also possible to do in the editor.

InputDraw: javascript class – How does it work?

Next we will present the various parameters of this class constructer. InputDraw takes three parameters. First is the actual path of the flash file; just indicate the file in your site. Second is the placement Id, which is normally the Id of the Div created to hold the widget. Finally, there are and hash of options. They are:

• id - This is the most important one, if defined, your widget will be an editor, if not, it will be just a viewer. The value should be a hidden field or another field to here you want to export the draw SVG description.
• src_id - Source id is the Id of the field that will be the initial SVG source to the widget, if not defined, it will be the “id”.
• src - This is an alternative for a SVG source, it should be an URL or path for the SVG file.
• src_svg - Another way to initiate the widget with some draw is to pass the SVG as text directly. To do so use this field.
• animation - Finally, this is the animation value. If zero, there will be no animation presenting the sourced drawing. Any another integer will be the animation delay. So, bigger values will result in slower drawing.

The source precedence is “src_id” > “src_svg” > “src”. If none is set, then it will be “id”

What else can I do ?

There are some more options to do fun and nice to have stuff:

• color - This defines the background color of the widget. If this isn't set, the widget will be transparent. (example: #ffffff)
• grid_style - For grid version, this will define grid style. The style is determined by three parameters:
  • Width
  • Opacity
  • Color - in RGB(xxx,xxx,xxx) format
  • Example: "2 0.6 rgb(255,0,0)" creates a red grid with a opacity of 60% and 2 of width.
• grid_geom - For grid version, this will define grid geometry. The geometry is determined by three parameters:
  • Number of Horizontal Lines
  • X Offset
  • Y Offset
  • Example: "25 10 -20" creates a grid with 25 lines on the horizontal (the grid is composed by squares) that starts 10 pixels to the right and ends 20 above the bottom.
• stroke_style - For plain version, this will define the stroke style. The style is determined by three parameters:
  • Width
  • Opacity
  • Color - in RGB(xxx,xxx,xxx) format
  • Example: "2 0.6 rgb(255,0,0)" creates a red grid with a opacity of 60% and 2 of width.
• stroke_width - For plain version, this will define the stroke width.
• background_image - set the background. Just put the image path or url.
• undo - set the undo icon. Just put the image path or url.
• clean - set the clean icon. Just put the image path or url.
• form_integration - true or false.Default, true. If false, the widget won't put the SVG source on the "id" Input field.
• tools_colorExample: 0xFF0000 - Sets the Tools (color, size, opacity) background color to Red.
• disable - Used to disable tools like Undo button. It's a string with the options separeted by space. Example: "color undo clean". Options avaliable:
  • clean - Clear Button
  • undo - Undo Button
  • size - Stroke Size
  • color - Stroke Color
  • opacity - Stroke Opacity
• onpath - Sets the name of the function that will be callback when a stroke is done. It will pass the SVG Path string-xml as argument.
• onsvg - Sets the name of the function that will be callback when the Widget svg content is changed. It will pass the SVG string-xml as argument.

How about the JavaScript API ?

InputDraw as a new API so you can interact with it using Javascript. When creating a new instance of inputdraw, save it in a var. The InputDraw Javascript Class has now the following helping functions:

• Undo() - Will make one undo action.
• Clean() - Clears the content.
• OnSvg(String func) - Will hook the func so it is called on SVG change. Set the func to '' (empty) to "unhook".
• OnPath(String func) - Will hook the func so it is called on stroke. Set the func to '' (empty) to "unhook".
• AddSvg(String svg) - Will replace the content with the svg content. Note that at this time, only Inpudraw-produced svg will work.
• AddSvgAnimated(String svg,int animation) - Will replace the content with the svg content in animation.The animation argument will set the animation delay. Note that at this time, only Inpudraw-produced svg will work.
• AddPath(String path) - Adds a stroke the the svg content. Note that at this time, only paths with the same format of those created by InputDraw will work. Example: <path d="M 347 200 l -1 -1 l -7 -2 l -10 3 l 14 26 l 19 18" opacity="1" stroke="rgb(1,1,1)" stroke-width="2"/>
• SetStyle(String style) - Changes the stroke style. The format is identical to stroke_style. You can use * instead of one of the options to mantain the present value. Example "10 * *" will only change the stroke size to ten.

And for Ajax calls ?

If you are using Ajax, the Onload of Body won’t be called, so just put the following javascript command on complete or in a javascript tag in the end of the content: