Contents

• How to install
• How to save the drawing
• How to load a drawing
• Parameters
• Clipart Panel
• Using background and foreground images
• Localization

How to install

NetStrokes consists of two Java applets: the Canvas and the Control Panel. The best method to embed it in a web page is to use the included JavaScript drawer.js which allows you to display the applet correctly in most popular browsers, and initiate Java installation in case the user's computer hasn't Java.

Example

// Include drawer.js in your HTML
<script language="javascript" src="applet/drawer.js"></script>

// Define the applet attibutes and parameters
<script language="javascript">
    // Create an instance of the Drawer.
    // The Drawer constructor requires one parameter: the applet's directory
    var drawer = new Drawer('./applet/');

    // Define the save script
    drawer.canvas.param.save = 'save.aspx';

    // Define other parameters if necessary
    // ...

    // Output the editor GUI to the page
    drawer.write();
</script>

1. Create an instance of the Drawing() object.
2. Assign necessary parameters
3. Output the editor's GUI to the page using the method write().

How to save the drawing

To receive the user's drawing on the server you have to create a server-side script which expects post request from the form like the following:

<form action="url_of_name_your_script" method="post">
    <input type="text" name="drawing">
    <input type="submit">
</form>

Also, you have to specify the script name as the NetStrokes parameter save, for example:

    drawer.canvas.param.save = 'save.aspx';

Response of the save script

Since the save script is requested from the applet the response is returned to the applet as well. The Drawer doesn't understand HTML and can't display it, so you shouldn't output HTML in your save script. Instead you have to output special commands (as plain text) which allows you redirecting the browser to another page, and/or displaying an error message, for example:

    #SHOWDOCUMENT=my_confirm_page.html

Now formally: The response should be a one or more of the following commands separated by new line:

How to load a drawing

NetStrokes can load drawings saved earlier. To load a drawing from the server define it's URL by the parameter canvas.param.load, for example:

    drawer.canvas.param.load = 'myimage.svg';

The URL can be either absolute or relative to the current page.

NOTE: The program can open only the files produced by itself. Don't try to open SVG files produced by other programs. The program can't display them correctly.

Parameters

The applet can be customized with parameters. Parameters can be defined with JavaScript

    drawer.parameter_name = parameter_value;

Below you find the list of supported parameters:

Clipart Panel

Clipart panel allows display of a collection of SVG images. The user can drag and drop them to the canvas.
To create a Clipart Panel on a web page use the following example:

  var drawer = new Drawer('./applet/'); 

  // get an instance of Clipart panel from the Drawer() object
  var clipartPanel = drawer.createClipartPanel();
  
  // set the panel parameters
  clipartPanel.height = 100;
  clipartPanel.width  = 500;
  clipartPanel.param.clipart_archive = 'my_cliparts.zip';
  clipartPanel.param.rows = 1;
  clipartPanel.param.cols = 5;

  clipartPanel.write(); 

Here is the list of clipart panel parameters:

Notes:

• You can create several instances of the clipart panel to display several sets of clip arts.
• You can use the same Drawer() object to create the canvas and clipart panel(s).
• The program supports limited set of SVG features. For example, currently it doesn't support gradient styles, bitmap images, external links, etc. So, before using an SVG file in your application check if it's displayed correctly.

Using background and foreground images

The drawing canvas allows to display a background and/or foreground image. The image should be JPEG, or GIF, or PNG, or SVG file.
To specify the background image use the canvas parameter canvas_bgimage.
Example:

    drawer.canvas.param.canvas_bgimage = 'myimage.jpg';

    drawer.canvas.param.canvas_fgimage = 'myimage.svg';

The background and foreground images are NOT included in the saved file. If you want to include them for printing or display purposes, insert them as the first (for background) or the last (for foreground) image tag in the SVG file, for example:

    <image x="0" y="0" width="800", height="600" xlink:href="myimage.jpg"/>

The attributes width and height should be set according to the width and height of the viewBox attribute of the host SVG file.

Localization

The program has several text labels on its GUI. If you want to display them in a different language open the file resources.txt located in the applet directory and replace values of items that start from text.