Image Manipulation GUI

I've written a module, Image Overlay, to allow users to "draw" shapes on images with JQuery UI & canvas, and save the result as an image node. (Try it out.) Shapes are draggable and resizable. I've kind of stalled at this point, and could use some help, so I think I'll be applying as a student. I think this module could provide very useful tool to many drupal sites, including social sites (photos), techinical sites (notes & schematics), educational sites (maps, historical battleplans), and many others I haven't yet thought of.

My proposal is to expand and update Image Overlay:
EDITED to update timeline, show tables and added image of control and links to screenshots. EDITED on March 29th 1:15pm EDT, to add mockups.

Controls currently look like:

Controls will look (something like) this, for an image named "WF":

The above would be the first tab. All tabs would be preloaded via JQuery, so there would be no AJAX involved - this part is all client side. If the user selects "Hand Drawn" a brush dialog will come up, a list of predefined images set bby the site's administer will be shown if "predefined" is picked, and a textbox will be shown if test is picked.

Light up will make the shape flash few a few seconds,to help the user identify different shapes. "Move Up" and "Move Down" will move the shape along the z-axis. After a shape is selected, options will come up, depending on the shape - changing the stroke width of a brush, the text of a, erm, text, and so on.

Fairly self-explanatory. The regular node image edit form, condensed somewhat to fit in the mock-up image.

TIMELINE:

April/May

1. Familiarize myself with the changes made in Drupal 6
2. Discuss my javascript approach and maybe change it
3. Write up Schema for the implementation of the overlay aspect

(almost done)

4. Begin updating the current module to 6.x

• Integrate with current JQuery UI Implementation for 6.x

June:

1. Discuss UI improvements with mentor.
2. Change javascript code
3. Improve in-code documentation
4. Begin thinking about an optimal way of positioning text on the image
5. Discuss security concerns about using JSON -> PHP and how to check
6. Write code to save the "overlay"
7. Implement viewing of all images based on
   • The current Overlay
   • The Original Image
8. Decide on an alternate to absolute positioning directly in the form. Possibilities include:
   • Pop-up windows
   • Modal window
   • Would it be possible to use 2 modals and switch focus?
9. Code positioning improvements

July:

1. Improve handling of image formats
   • Right now, the format is the same as the original image
   • Put in Admin area
2. Implement other shapes:
   • Lines
   • Curves
   • TEXT
   • Customaizable images (and write admin code)
   • Perhaps find workaround for ellipses
3. Implement other tasks:
   • Change shape colors
   • Impose a "layer" like hierarchy and a means to change it
   • Opacity controls
   • "Locking" for each shape, so it is not moved by accident while editing oher shapes
4. Implement actual "drawing" on the image (by mouse position tracking)
5. Move Documentation from javascript code to JSAPI.txt and PHPAPI.txt
   • Encourage other developers to submit shapes they have made
6. Iron out wrinkles

August:

1. If possible:
   • Make it possible to rotate shapes
   • Improve passing of JSON to server, perhaps integrate
   • Remove dependence on Image Gallery
   • Let users can create their own closed-polygons by clicking to create lines
   • An export feature to export the overlay as an SVG file (using Drawing API?)
   • Create a way for the administer of a site to choose which colors to offer, or, alternatively, to use the color picker included in Drupal core
   • Use the sortables included in core to change layers (like the way blocks are done)
   • Show different overlays on one image at the same time (or slide-show like)
2. Finish ironing out wrinkles and documenting

Just to clarify, I think my timeline is more stretched out than it actually will be, and I hope to complete several of the items I put in August, but I am erring on the side of caution here.

My VERY tentative tables:

Table to keep track of all rendered images:
nid - coorosponds to the nid of the newly created image
original_nid - coorsponds to the nid of the "base" image
overlay_id - a unique identifier to be referenced elsewhere

Table to keep track of all the overlays:
shape_id - this will co-rospond to the div#
shape_type = the type of shape, coorosponds to the enumerated types within the javascript ShapeTypes file
overlay_id - the id of the overlay it is part of
data - the data associated with the shape. Colors, text, etc, z-axis, etc
points - the (x,y) co-ordinates of the shape. This will vary depending on the shape_type

Table to define shapes:
shape_type - see above
name - the name of the shape

Please leave comments, and questions.