Documentation

What is the installation process?

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

• swfobject.js
• inputdraw.js
• inputdraw.free-non-commercial.1.2.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_width - For plain version, this will define the stroke width.
• background_image - set the background. Just put the image path or url.

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: