On-Line ReadMe



Option Bar Explanation


Option

Description

This is the Select option. It is used to select an object and perform editing functions on them
This is the Line option. Select this to draw connected line with left mouse click(s) and finish the object by right mouse click or pressing ESC on the keyboard(just in case you are using Mac)
This is the Rectangle option. Select this to draw a rectangle. To draw a rectangle, click and hold the mouse in the drawing area, drag the mouse to your destination point and release the mouse click
This is the Filled Rectangle option. Select this to draw a filled rectangle. Same usage as the Rectangle option
This is the Ellipse option. Select this to draw a Ellipse. To draw a rectangle, click and hold the mouse in the drawing area, drag the mouse to your destination point and release the mouse click
This is the Filled Ellipse option. Select this to draw a filled Ellipse. Same usage as the Rectangle option
This is the Polygon option. Select this to draw a polygon with left mouse click(s) and finish the object by right mouse click or pressing ESC on the keyboard(just in case you are using Mac)
This is the Filled Polygon option. Select this to draw a filled polygon. Same usage as Polygon option


Color Bar Explanation



This should be pretty straight forward. Click on one of the color to use it for the drawing shapes. If a shape is selected, click on the color bar will change the selected shape's color.


Parameters passing from HTML


The size of the draw pad can be passed in from the html using PARAM "Draw_Height" and "Draw_Width". The values of the these two parameters determine how big they are in pixel. Default of the drawing height of the area if 400 and 500 for the width.

Editing functions Explanation


Editing functions

HOW TO

Select a shapeSimply click where the shape is at
Move a shapeSelect a shape first, the click in it again but not in the Point boxes(the little white square outline in black), and drag the mouse to the place you want the shape. Release the mouse to anchor
Resize a shapeSelect a shape first, the click in one of the Point boxes(the little white square outline in black), and drag the mouse to the place you want the shape. Release the mouse to anchor
Copy a shapeSelect a shape that you want to copy. Then press Ctrl-C on the keyboard
Cut a shapeSelect a shape that you want to cut. Then press Ctrl-X on the keyboard
Paste a shapePress Ctrl-V to paste a copied shape if there is one. The new shape will have the focue. ie it is being selected
Delete a shapeSelect a shape that you want to delete. Then press the Delete key on the keyboard
Move Shape to frontSelect a shape that you want to move the order. Then press the UP key on the keyboard. Using this function will make the shape appear when it is being cover by a larger shape
Move Shape to backSelect a shape that you want to move the order. Then press the DOWN key on the keyboard. Using this function will make the shape hide behind other shapes if they are overlapped
Select next shapeTo select the next shape, press TAB on the keyboard. If there is a shape selected already, it will selected the next shape that you drew. If there is not a shape selected, then it will select the first shape that you drew.
Select previous shapeTo select the previous shape, press Shift+TAB on the keyboard. If there is a shape selected already, it will selected the previous shape that you drew. If there is not a shape selected, then it will select the last shape that you drew.


Some screenshots of what I did