A few months ago I was experimenting with some methods for displaying annotated images using only plain old HTML and valid style sheets. The obvious next step was to make a utility for actually creating new notes easily and saving them into an image as Fotonotes xml. Read on for a little more about what I came up with, or go ahead and just try out the script.
This is obviously inspired by flickr's thorough and elegant adoption of the fotonotes specification. Their implementation is not for everyone, though, relying as it does on flash software. The method presented here suggests a way to work with fotonotes without flash, javascript, or any other 'nuisance' software on the client side. However, at this time this script is terribly incomplete, only allowing two options: add a new note or delete all notes from the image. Also, title and author tags are not available. Other functionality should be easily added, but I'm unfortunately a bit busy at the moment.
Also, I'm fairly certain that the notes generated by this script will not display properly in Internet Explorer. It is probable that the note creation process will still work fine, and the resulting image can be saved and viewed (by Explorer or or any browser with the right plugins) in any fotonotes viewer, such as the fotonoter flash plugin (I've tested this), and probably others, such as the DHTML fotonotes viewer as seen at scribbling.net (I haven't tested this).
The best process I could come up with for indicating the note area was to overlay the image with a grid of span elements. Clicking on a span element passes location data to the script so that a bounding box can be made. The obvious drawback of this approach is that for, say, a 640x480 image, over 700 spans need to be rendered to provide even mediocre precision. The script automatically shrinks images that are larger than this, but even so, the size of an html file with so many spans can be considerable.
The newly created annotations, as well as any pre-existing notes, are positioned over the image with a mixture of embedded and inline style declarations. This is not an ideal solution, but it's acceptable for the time being.
I've provided some sample images (here's that link again) so everyone can try out the process. Currently there are no kind of permissions built in to the script, so for the moment, anyone can add or delete notes to any pictures. Consider it a testing ground, and don't feel that you have to preserve anyone else's notes, and don't expect anyone to preserve yours.
To try this out on your own server with your own files, just download the php script, change the extension to php and give it execute permissions. Create a directory for images (set to img/ by default) or change the $imgpath variable to point to your images. Note that the images will have to be writable by php in order to save the fotonotes into them. Also, you will need php with gd and xml support.
Some major problems exist, including a failure to handle double quotes in note text, the lack of support for title or author fotonotes elements, no system for sensibly ordering the notes (i.e. a larger note box created over a smaller note box will render the smaller box inaccessible), no way to modify existing notes or delete single notes without scrapping everything, and probably a bunch of other things that I'm forgetting, as well as plenty of minor flaws that I won't bother to enumerate.
One benefit of the no-frills approach taken here is that this whole process is (technically) usable in text-based browsers such as lynx and its successors. While I don't see a lot of need for photo annotation via non-graphical browsers, and the experience isn't terribly satisfying anyway, it's nice to know it's a possibility.
Finally, I would encourage anyone who might be interested to try their own hand at a simplistic fotonotes interface, improving on this one or creating their own, as it may be some time before I can attempt to make this truly usable, and I think that a robust fotonotes editor of this type could be quite well received.
Please use ehall@freeshell.org to send me any thoughts or comments on this. Thanks for taking an interest.
March 25, 2005
[Update] Feb 18, 2018 - I relocated these files to freeshell from their former home at a now-defunct host.
This page, the takenote.php script, and any derivative works may be duplicated and distributed freely and unconditionally. Photos appearing in the testing area remain the property of their creators.