Eye-drop Editor creeps to BETA

Posted by sime on February 12, 2007 at 11:18pm

Eye-drop Editor is finally seeing some light. This is a jquery/ajaxy image editor that integrates with server-side image manipulation.

There is still a lot of work, and bug-fixes, and prettyiness to occur. but I thought it was worth sharing because of a few reasons like:

It now has an implementation module (eyedrop_field) which demonstrates end-to-end how the thing is supposed to work
I am reasonably happy with the code. I don't think it's too crufty to look through
Because of the above, collaboration starts becoming feasible, so I start marketing

The next step is to draw a line in the sand. Polish up what I've done so far and tag it. In the longer term the goal is to integrate with imagecache and transformer. Anyroads, that's the news.

Simon

Comments

Nice

Posted by boris mann on February 14, 2007 at 7:35am

boris mann's picture

In the longer term the goal is to integrate with imagecache and transformer.

...and image... (kind of done with image_attach, I suppose)

...and maybe TinyMCE / other WYSIWYG editors

I can see a big value in something like img_assist for selecting / including new images, then cropping and (somehow?) also saving this derivative. Maybe in revisions? We start getting into the whole file vs. node thing again.

I've been excited for something like this to see the light of day. Will follow with interest.

As soon as I look two steps

Posted by sime on February 14, 2007 at 12:11pm

sime's picture

As soon as I look two steps ahead there are too many questions and possibilities. The beta is part of a short-term goal to keep me in the real world. ;-)

I've written up a summary of my current job:

My client runs a fancy dress shop. She needs to have one image per product, and each image has 2 or 3 derivatives used in various parts of the theme. She gets images from everywhere, suppliers and customers. Customers often send a pic of 4 people at a party showing 4 different costumes. She's happy with the quality, but needs to crop (and change the crop) without too much fuss.

So I'm working with image, image_attach (maybe img_assist later). I'm relying on the image.module's derivative settings (eg. thumbnail, preview), both for setting the "target size" as well as for a file naming.

The CCK eyedrop_field enables a new field on the node which is linked to an image.module derivative (so I might have two fields, one "thumbnail" and one "preview") and the actual data that is stored is a serialized x,y,w,h co-ords. These crop numbers are drupal_to_js and sent out in an attribute (eg <img class="eyedrop-image" src="blah" eyedrop="{ some json info}" />

The editor's document.ready routine attaches click events as appropriate. On the click event the editor pops up, loads the original unedited image, shows the current crop area. On submitting (ajax) the new crop area is sent back to the server, which creates the new derivative. The editor then forces the image in the page to reload and voila!

Files are named eye-nid-iid-derivative.jpg (eg. eye-5-9-preview.jpg) which keeps the derivatives unique in a separate directory.

All in all, I'm leaving parts of the grand plan out, so that I can finish my client's site. For example, the editor should eventually be able to handle different layers and different actions (crop, rotate, watermark) that added as neat .js plugins. But to get to this level I need to extend my javascript skills, get some good design patterns into my head. Of course, it should be possible for any module to use the editor, only time will tell how hard that is to achieve.

Yeah, it's a bit like passing a camel, but having something that actually does something is a big step.

Sounds really, really awesome

Posted by mlncn on April 4, 2007 at 1:34pm

mlncn's picture

Does this relate to the ImageMagick summer of code project at all?

All I really want is a way to rotate images (the original) through the user interface! I know there's a lot of potential to do this and many things in PHP that hasn't quite made its way to the UI.

~ ben melançon

member, Agaric Design Collective
http://AgaricDesign.com - "Open Source Web Development"

^{benjamin, agaric}

Ideally the distinction b/t

Posted by sime on April 4, 2007 at 1:57pm

sime's picture

Ideally the distinction b/t GD and ImageMagick is at the Toolkit level (ie. any solution should be possible with either).

You might refer to the transformer project where discrete transformation tasks (like "rotate", "watermark", "resize"...) are being implemented. The goal of eyedrop will be to allow the user to trigger transformer actions through toolbar buttons and to chain these actions together. At the moment eyedrop simply implements its own crop/resize for the purposes of developing the interface.

There is little happening on this right now. It is not funded, it is just when I have time.

You might also find another module that does specifically what you want, rather than trying to do everything like this project is! :-P