The editor consists of 7 related applets packed in a single archive. Here is the list of the applets:
| Drawing Canvas | Represents the drawing area |
| Tool Panel | Contains the buttons for choosing a drawing tool |
| Color Panel | Contains the buttons for choosing a drawing color |
| Pen Panel | Contains the buttons for choosing a drawing pen |
| System Panel | Contains the buttons: "Clear", "Undo", "Redo", "Save" |
| ClipArt Panel | Contains the buttons with clip arts that can be inserted in the drawing |
| Font Panel | Contains the controls for choosing a font for the text tool. |
Each of the applets can be placed and arranged at the web page separately.
Drawing Canvas is the only required applet.
Other applets are placed on the page if necessary. For example: if you don't have clip arts
you need't place the ClipArt panel on the page;
or if you don't use Color Panel then all drawing will be
made in black color.
The rest of this section describes each of the applets individually.
Draw Canvas represents the drawing area. Place it on the web page using the following code:
<applet width="600" height="150" code="DrawCanvas.class" archive="painter.jar" name="canvas" >
<param name="bgcolor" value="#ffe0e0">
</applet>
This HTML code gives the following result:
(you can draw just here)
The attributes width and height define both the area that DrawCanvas occupies on the web page and the image size.
The applet can accept the following parameters:
| name | value | status |
| load | URL of a PNG, JPEG or GIF image at the server. Image is displayed just after the start. See Image loading for more details | optional |
| image | Embedded PNG or JPEG or GIF encoded by BASE64 method. Image is displayed just after start. See Image loading for more details | optional |
| bgload | URL of a background image (PNG or GIF or JPEG). The image background is used instead of the default solid background, for example if the user uses the eraser tool, pieces of the background image are transferred to corresponding parts of the main drawing. | optional |
| bgimage | A background image (PNG or GIF or JPEG) BASE64 encoded and passed as the value of this parameter. | optional |
| loadfilter | Allows to define an image filter to filter the image at startup. See the section Custom Load Filters for details. | optional |
| pageid | A unique identifier that helps to control image caching. See image caching for details. | optional |
| snap | Bounds mouse clicks with nodes of invisible grid while drawing lines, rectangles, and ellipses. The snap mode is helpful for fulfilling accurate sketches. The parameter's value may be any reasonable positive integer, for example 10. | optional |
| save_format | Graphic format for image saving. Possible values are PNG, JPEG, GIF | default PNG |
| jpeg_quality | Image quality if the image is saved in JPEG format. The value can be integer in the range 1..100 | default 75 |
| thumbnail | If this parameter is specifeid the editor uploads (posts) the image's thumbnail along with the main image. The parameter's value must specify the thumbnail size as "width,height". Thumbnail is uploaded as the field "thumbnail". | optional |
| undo_buffer | Maximum number of steps for Undo/Redo buffer. Less values are preferable for large images. For example it's recommended to set this parameter 3 if you load images 800x600 or larger. | default 3 |
| bgcolor | Sets the background color of the image. Affect on the color that is used by the Eraser tool and the Clear button. | default #FFFFFF |
| blockunchanged | If this parameter is set the editor prevents the user from accidental saving empty or unchanged image. The parameter's value can be any text. This text is displayed in the browser's status line when the user tries to perform such saving. | |
| measure_show | Turns on displaying of lengths and areas. See Measuring lengths and areas for details | optional |
| measure_scale | Defines measuring scale. See Measuring lengths and areas for details | optional |
| measure_format | Defines measuring format. See Measuring lengths and areas for details | optional |
The DrawCanvas applet has some functions which can be used in JavaScript. See the section Public functions for details.
How to scroll the Drawing Canvas.
Drawing Canavas hasn't built-in scroll capabilities however you can use DHTML to achieve this effect.
See the section Scrolling the canvas for details.
Tool Panel displays buttons that allow to choose a drawing tool.
An example of placing Tool Panel:
<applet code="ControlPanel.class" archive="painter.jar" width="260" height="52" >
<param name="rows" value="2">
<param name="columns" value="10">
<param name="tools" value=" 0, 1,14, 2,19, 4,24, 8,23,22,
21,15,16, 3,20, 5,18, 9, 7,11" >
<param name="icondir" value="icons/">
<param name="default" value="0">
<param name="hints" value="free hand, line, arrow, rectangle, rounded rectangle,
oval, polyline, select rectangle, select polygon, select area,
filled area, line with two arrows, line with arrow at the middle, filled rectangle,
rounded filled rectangle, filled oval, filled polygon, flood fill, eraser, text" >
</applet>
The result of this HTML code looks as:
Tool Panel accepts the following parameters:
| name | value | status |
| tools | comma delimited list of tools (codes) to be displayed | required |
| icondir | directory of tool icons | default is the directory 'icons' |
| rows | number of rows to arrange buttons | default is 1 |
| columns | number of columns to arrange buttons | default is 1 |
| bgcolor | background color for the panel | default is #C0C0C0 |
| default | button pressed at startup (tool code) | optional |
| hints | hint labels for buttons - comma delimited list | optional |
Each drawing tool has it's individual code. For example, the number 4 means the tool 
.
The tools are displayed in the order they are listed in the tools parameter. The example above lists all the available tools.
You can use it as a reference of the tool codes. You may replace the tool icons with your own.
For this read the section Creating custom icons
Color Panel displays the buttons that allow to choose a drawing color.
An example of creating Color Panel:
<applet code="ControlPanel.class" codebase="../applet" archive="painter.jar" width="160" height="20" > <param name="columns" value="8"> <param name="colors" value="#000000,#FFFFFF,#FF0000,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF" > <param name="default" value="#000000"> </applet>
The result of this code is:
Color Panel accepts the following parameters:
| name | value | status |
| colors | comma delimited list of colors as #RRGGBB | required |
| rows | number of rows to arrange buttons | default is 1 |
| columns | number of columns to arrange buttons | default is 1 |
| bgcolor | background color for the panel | default is #C0C0C0 |
| default | color button pressed at startup as #RRGGBB | optional |
Pen Panel displays buttons that allow to choose a drawing pen. An example:
<applet code="ControlPanel.class" codebase="../applet" archive="painter.jar" width="240" height="20"> <param name="columns" value="12"> <param name="pens" value="200,211, 213,214, 202,203, 263,253, 223,233, 270, 271"> <param name="icondir" value="icons/"> <param name="default" value="200"> <param name="bgcolor" value="#FFFFFF"> </applet>
The result:
Pen Panel accepts the following parameters:
| name | value | status |
| pens | comma delimited list pen codes | required |
| icondir | directory of tool icons | default is the directory 'icons' |
| rows | number of rows to arrange buttons | default is 1 |
| columns | number of columns to arrange buttons | default is 1 |
| bgcolor | background color for the panel | default is #C0C0C0 |
| default | button pressed at startup (pen code) | optional |
Each pen has it's individual code. Pens are displayed in order they are listed in the pens parameter. The example above lists all the available pens so you may use it as a reference of the pen codes.
System Panel displays "Clear", "Undo", "Redo", "Save" buttons.
An example of using System panel:
<applet code="ControlPanel.class" codebase="../applet" archive="painter.jar" width="150" height="30" > <param name="columns" value="5"> <param name="system" value="101,102,103,104,106"> <param name="hints" value="clear,undo,redo,save,print"> <param name="icondir" value="icons/"> <param name="save" value="upload.php"> <param name="bgcolor" value="#FFFFFF"> </applet>
The result of this code is:
System Panel accepts the following parameters:
| name | value | status |
| system | comma delimited list of system button codes | required |
| rows | number of rows to arrange buttons | default is 1 |
| columns | number of columns to arrange buttons | default is 1 |
| icondir | directory of tool icons | default is the directory 'icons' |
| save | URL of the image saving script. See Saving image | optional |
| progresstext | text to be displayed while saving is in progress | optional |
| progresscolor | color of the progress text | default is black |
| bgcolor | background color for the panel | default is #C0C0C0 |
| hints | hint labels for buttons - comma delimited list | optional |
Each system button has it's individual code. Buttons are displayed in order they are listed in the system parameter. The example above lists all the available buttons so you may use it as a reference of the button codes.
Caution: The printing functionality (activated by the button 106) is only available on modern Java engines (such as Sun Java plug-in www.java.com). Old Java engines, such as Microsift JVM (IE native engine), Netscape JVM (Netscape 4.x native engine) do not allow applets to print.
ClipArt panel displays a set of images that can be placed on the drawing. The image files (GIF or JPEG) should be kept on the server in a subdirectory of the applet's directory. The subdirectory should be specified by the paremeter "icondir".
An example:
<applet code="ControlPanel.class" archive="painter.jar" width="288" height="48" > <param name="columns" value="6"> <param name="clips" value="flower.jpg,cherry.jpg,ladybird.jpg,carrot.jpg,apple.jpg,photo1.jpg" > <param name="icondir" value="clipart/"> <param name="outline" value="false"> <param name="insertat" value="0,0"> </applet>
The result of this code is:
| name | value | status |
| clips | comma delimited list of image files (JPEG or GIF) | required |
| icondir | the directory with the clip art files | default is the applet's directory |
| rows | number of rows to arrange buttons | default is 1 |
| columns | number of columns to arrange buttons | default is 1 |
| bgcolor | background color for the panel | default is #C0C0C0 |
| insertat | Specifies the initial point to insert clip arts on the canvas. The insertion point must be specified as x,y coordinates (separated by comma). After inserting a clip art the user can move and resize it. If the parameter is not specified, the user can only move the clipart over the canvas and drop it to a point. | |
| tile | If the user resizes a clipart on the canvas it is scaled. This is the default behaviour. However you can specify a particular clip art to be tiled, thus using it as a pattern sample. Use this parameter to list names of clip art files that should be tiled. | default scale |
| colorable | Normally the user may not change clip art colors. However you can specify that some of the cliparts can be colored. Use this parameter to specify what clip arts from the main list can be colored. In that case the editor changes black color of the basic clipart to the current drawing color. | default scale |
| outline | if set to false the clip art buttons on the panel are not outlined. | default true |
Notes:
Font Panel allows the user to choose font of the text tool. Also it allows to specify the text alignment and
background shape.
Use the followig code to place FontPanel on the web page:
<applet code="FontPanel.class" codebase="../applet" archive="painter.jar" width="360" height="30" > <param name="font_faces" value="Serif,SansSerif,Monospaced"> <param name="font_sizes" value="10,12,16,24"> <param name="default" value="SansSerif-bold-12"> <param name="bgcolor" value="#EFEFFF"> </applet>
The result of this example code is:
Font Panel accepts the following parameters:
| name | value | status |
| controls | Specifies what controls to show on the panel. The following controls are available:
font_faces, font_sizes, font_styles, text_alinment, callout_shapes.The specified controls are displayed in the order they are listed. |
optional. By default all the controls are displayed |
| font_faces | comma delimited list of font names (see the note below) | optional |
| font_sizes | comma delimited list of font sizes | optional |
| align_controls | specifies how to align the controls. The parameter value can be one of the follwing: left, center, right | default 'left' |
| callout_bgcolor | Specifies the background color of the text. The value should be in the format #RRGGBB | default #FFFFFF |
| default | The default font specified as: family-style-size. Valid styles are: "plain", "bold", "italic", and "bolditalic". For example: SansSerif-bold-12 | if not specified the first font from the list is used |
| icondir | directory of tool icons | default is the directory 'icons' |
| bgcolor | background color for the panel | default is #C0C0C0 |
A note on font faces:
Font faces can be specified by the parameter "font_faces". You can specify any font names, but you should keep in mind that actually available font set depends on the user's platform. Only the following logical font names are supported certainly: Serif, SansSerif, Monospaced. If you don't specify the parameter "font_faces" the Font Panel tries to detect the available fonts. If you specify a font that doesn't exist on the target platform the default font is used instead (usually it's "Dialog").