HTML5-based Property Sketch Web Application

How to use the sketch application

Drawing on the canvas

Important keys:

F: toggles on freedraw

B: brings up buttons to draw bows with

E: toggles edit mode (see below)

A: autocompletes a polygon

U: removes the newest line

S: tranlates the drawing into vector form

I: zooms in on the canvas

O: zooms out on the canvas


Regular Mode:

To create a new polygon, hold any non-important key and click-and-drag the mouse on the canvas to create a line. Lines can be drawn from the endpoint of any pre-existing polygon by click-and-dragging the mouse from the endpoint. Lines will stay 90 degrees until F is pushed or a bow-type is selected. To draw a bow, push the vertical or horizontal button and then draw normally. To stop drawing bows, repress said button.


Edit Mode:

In edit mode, polygons can be dragged around the canvas by click-and-dragging within a polygon. If the user click-and-drags close to a line, the line will turn blue and be moved instead. If the user click-and-drags close to a point, the point will turn blue and be moved. If the user clicks on a line, the lines x_length and y_length will be displayed in boxes outside the canvas. The line can be edited by changing these lengths. Clicking the mouse within a polygon will allow the user to assign the polygon a code and a description. Click E again to exit edit mode.

Character Vectors

Commands:

R: Move right by given amount (followed by number, such as R10)

L: Move left by given amount (followed by number, such as L32)

U: Move up by given amount (followed by number, such as U13)

D: Move down by given amount (followed by number, such as D16)

A: Denotes the start of a new polygon (followed by a number, such as A0)

C: Commences drawing of a polygon (every command afterwards draws a line)

V: Denotes an angled line (Followed by 2 commands, such as VR10D10)

X: Makes a square (preceded and followed by a number, such as 5X10 (must have a space before the first number))

P: Followed by an integer between 0 and 9. Stores the current location the first time it is used. The second time it is used it will be a substitute for moving to the stored location. (example: P3)

B: Denotes the drawing of a bow. (Followed by command, and then I for inward or O for outward again followed by a number. Example: BR10O5 (draw bow right 10 outwards 5))

F: Draws 2 lines to finish the current polygon (Example: R10D10F)


The first polygon in a character vector must start off with A0. Every subsequent polygon will have A1,A2,A3,... After the A command is given, the user can adjust the starting point of a polygon by giving R,L,U,and D commands. Once the desired location is reached, give the C command to commence drawing. Every command now results in a line being drawn (unless the P command is given to save a point). The ending point of the polygon must have the same coordinates as the starting point or the vector will not be accepted. To draw another polygon, give the A command with whatever number the polygon is minus 1.


Demo Video


Or use this link to download the video.

Screenshot Examples

The user can draw multiple polygons on the canvas and assign a code and/or a description to each polygon. The table displays the name, perimeter, area, code, and description for each polygon. Only one code can be assigned to a polygon, but a code does not have to be assigned.

The user can change into edit mode and edit the polygons by dragging a point or a line on the polygon. The user can move any polygon while in edit mode on the canvas by clicking within the polygon and dragging. The table will update once "Show Record" is clicked on again if any changes have been made.