Image Manipulation GUI

Project information

Project page on drupal.org: http://drupal.org/project/image_overlay
Please check out my: blog and example at http://www.tistur.com

Current status: (see bottom for old statuses)

August 6th:
I'm not dead, I just feel like I am. I am working on image_overlay, but my whole life has been put on hold for the past 3 weeks or so as I struggle with pneumonia. Slowly working, slowly speeding up (and spending an entire day awake! Yay!!) and slowly accomplishing things.

Description

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. Shapes are draggable and resizable.

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. A friend of mine who is studying set and lighting design for theater thought up three or four other uses right off the bat when I explained my plans to him.

See the discussion for more details as well as mock-ups.

Deliverables
There is already a module (that I wrote.) At the end of the summer, this module will (at the least):

• be updated to work with Drupal 6
• have an improved interface
• allow more shapes (including images defined by an admin). All shapes will be
  • movable on the z-axis
  • deleteable
• include text capability
• have ability to edit already made "overlays."
• be able to list all overlays on a particular image
• have fine-grained permissions will allow the admin to choose who may add overlays, edit overlays, etc.

Project schedule

May:

1. Fix my JQuery colorpicker so it works with IE and Opera.Change color picker to the Drupal color picker.
2. Familiarize myself with the changes made in Drupal 6
3. Discuss my javascript approach and maybe change it
4. Write up Schema for the implementation of the overlay aspect (see thread for draft)
5. 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
   • Also change rendering of canvases to allow z-axis movement resulting in a "layer" like hierarchy
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 do this safely
   • Code up security improvements
6. Write code to save and retrieve the "overlay"
7. Implement viewing of all images based on
   • The current Overlay
   • The Original Image
8. Think about Decide on an alternate to absolute positioning the image directly in the form. Possibilities include:
   • Pop-up window?
   • Modal window
   • Would it be possible to use 2 modals and switch focus?
9. Start coding positioning improvements

July:

By the mid-term:
1. Improve handling of image formats
   • Right now, the format is the same as the original image
   • Put in choices in the Admin area
2. Implement other shapes:
   1. Lines
   2. Curves - deleted from features in favor of freehand
   3. TEXT

Maybe by midterm, maybe after:

3. Implement other shapes:
   1. "Customizable"/predefined images (and write admin code)
   2. Perhaps find workaround for ellipses
   3. Implement actual "drawing" on the image (by mouse position tracking)
4. Implement other tasks:
   • Change shape colors
   • A means to change the "layer" of a given shape
   • Opacity controls
   • "Locking" for each shape, so it is not moved by accident while editing other shapes
   • Shape deletion
5. Copy 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
   • 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.

Current status:
May:
26th: Didn't really get anything done today due to severe computer problems. Priced new macbooks. Began setting up new test site - should be up by tomorrow evening.
28th: Finishing converting from 5.x to 6.x. Found jQuery UI project helpful, but am having trouble getting it to actually work.
June:
3rd: Got test site up with version 6. Go to http://www.tistur.com to play. See also the blog there, for a blow-by-blow account of my progress.
10th: Got done: Implemented putting the form into tabs (see the mockups), and began putting the color picker in a UI dialog. Continued blogging. Updated my javascript to be compatiable with the new UI API. Started trying to understand the Farbtastic implementation. Got Pidgin installed (I had recently got a new hard drive, so I'm catching up) so I can ask questions on IRC. Began reading the textbook on two-dimensional graphic algorithms. Next week: Finish Farbastic & dialog work. Perfect tabs. Choose algorithm and implementation method for rendering. Change posistioning. Live chat with my mentor[s]. Try to understand "serialization" better (at all). Blocked? I'm having a lot of trouble with the positioning and Farbastic, but I'm working through it.
17th: Got done: Farbtastic is now in a toggleable dialog, and the tabs work. The current color is always displayed. Read up on serialization and decided how to use it. "Talked" to my mentor. Thought a lot about handdrawing and how to write it efficently (I think I'll offer a smoothing option). Also thought about implementing simple lines, which whould be doable (once I fix positioning, anyway). Next week: Fix posistioning! Rewrite JSON implementation and the PHP side of it. Implement saving overlays (but perhaps not retrieving quite yet). Make drawing simple lines possible. Blocked? POSITIONING!!
24th:
Got done: Not very much. :( (This will be easier once my sister leaves next week - the whole house will be a lot less hectic.) I did figure out about half of my positioning problem, and have almost got that all sorted out.
Next week: Rewrite JSON implementation and the PHP side of it. Implement saving overlays (but perhaps not retrieving quite yet). Make drawing simple lines possible. Text!
Blocked? Family stuff is taking a lot of my time, but I'm not actually stuck on anything.
1st:
Got done: Can now save the overlays and revisions. Unfortunately, the serialize function isn't working the way I thought it should, and so what I'm saving is useless. Positioning is now completely under control, and text is being worked on. The revisions table matches up with the node revisions table using the timestamp.
Next week: Understand serialization. GRR. Text should be working by next week. Curves are a real problem and will probably not be done by next week, but lines may be.
Blocked? Serialization. I thought I understood it, but now I'm running into all sorts of trouble.
8th:
Got done: Serialization works - still working on retreiving the info to edit, but it is saved. Cross-browser compatibility greatly improved - should now work in Opera, Firefox, and (hopefully Safari). Lines work, as long as the slope is negative. Midterm form filled out.
Next week: Editing saved overlays. Positive sloped lines.
Blocked? Text. I'm having issues with the various types of fonts, as well as placement.
17th (2 days off):
Got done: Can add text. Have placement sorted out, found GPL fonts to include. Have it working with imagestring but am having problems with "Invalid font filename" and also "Could not find/open font" errors. Still working on loading saved overlays - at this point I think it may be easier to rewrite most of my JS.
Next week: Less coughing. :( Finish ability to edit. No more invalid fonts!!
Blocked? Fonts. Also, my awful JS objects.
25th:
Got done: Started the rewrite of my JS objects. Got diagnosed with pneumonia and convinced my doctor I didn't need to be hospitalized. Slept a lot.
Next week: Finish ability to edit. No more invalid fonts!! (Yes, this is the same as last week.)
Blocked? Still fonts.

Status updates

None yet.