Feature idea: Imagemap notes

tcdk

Joined: 2004-10-25
Posts: 4
Posted: Mon, 2004-10-25 14:34

I happened to wander by flickr.com earlier today and they had an interesting feature that I think could be incorporated into gallery.

http://www.flickr.com/learn_more_3.gne

Generally the idear is to have mouse over information on different areas of the image. So if you move your mouse over a face in a picture the name of the person is somehow displayed.

I think that the flickr implementations flash based, but I think that this can be done a lot simpler with the usemap property of the img tag (image maps) and maybe layers (but dhtml isn't my strong side, so I'll shut-up now))

The fun part will be making a gui for the adding, changing and deleting of these notes....

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Mon, 2004-10-25 16:38

Interesting idea.. please file it as a feature request on sourceforge, thanks!
(I agree the UI for defining the popups is harder than the code to render the popups)

 
tcdk

Joined: 2004-10-25
Posts: 4
Posted: Mon, 2004-10-25 17:04
 
Luxus

Joined: 2004-07-07
Posts: 30
Posted: Mon, 2004-10-25 19:40

i think g² can learn alot from flicrk :D

 
valiant

Joined: 2003-01-04
Posts: 32509
Posted: Mon, 2004-10-25 20:26

Damn, I don't remember the name, but a guy was already working on this feature for G2 1 month ago.

 
Einstein
Einstein's picture

Joined: 2003-10-13
Posts: 105
Posted: Mon, 2004-10-25 22:54
Luxus wrote:
i think g² can learn alot from flicrk :D

I don't think so. Flicrk has a complete different approch with photos then G2.

But for this specific feature ... of course.

 
Luxus

Joined: 2004-07-07
Posts: 30
Posted: Mon, 2004-12-13 09:38

i just use flickr today and got the "this is a feature what i want in g2"
the notething is very easy to use and very very nice.

still nobody here who like it too and have the knowledge to make a module?

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Mon, 2004-12-13 09:55

I first saw this feature - being used well - here: iChat status on Flickr

It's definitely possible, and wouldn't be too difficult to make. First there's the image map code: Night of the Image Map: A List Apart Then there's the JavaScript to help pick the hover location, for that we could use onmousedown/onmouseup and resize a box with a dashed border to follow the mouse, then get the co-ordinates of the box and save them for later. Sounds like it would actually be a lot easier than it would seem, at first glance. I'll work on it tomorrow, gotta get to sleep now.

 
valiant

Joined: 2003-01-04
Posts: 32509
Posted: Mon, 2004-12-13 11:39

where's this guy from #gallery irc which worked on this feature 2 months ago, where? :)
other devs should remember his name, i don't :/

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Mon, 2004-12-13 11:57

Well, I wasn't around back then, but I did a few quick searches of the G2 category on the forums, for "flickr", "imagemap" and "notes" ... nothing came up. What was he calling it? How far did he get? Is it worth it for me to look over his code, or should I start from scratch? Was he working with standards-compliant ECMAScript/W3C DOM/XHTML, Macromedia Flash or some HTML/JavaScript/DOM0 beast?

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Mon, 2004-12-13 13:13

Bah. I just found a few things that took some of the fun out of it. Then again, maybe not, as saving time is always nice. Turns out there's already people working on making this type of photo-annotation a standard.

Quote:
FotoNotes(TM) is a specification for embedding and sharing stories, thoughts, and identification information inside digital photos in way that makes it easier for people to share objective and subjective meaning of a particular image.

Photos are both visual artifacts and collections of story. There's lots of software for working with the visual artifact, but there isn't any software or standardized approach for working with the stories our digital photos convey.

We can manupilate the pixels and use captions to roughly describe the photographic moment. But we can't systematically convey what's inside the image.

FotoNotes describes what's inside a digital photo.

Source: FotoNotes - Kwiki

And for clients, there's the flash-based FotoNoter:

Quote:
View this web page's source to how easy it is to add FotoNoter™ to your web pages. Add the FotoNoter Flash file (fotonoter.swf) and the FotoNotes™ server-side PHP script (fotonotesplugin.php) to any web site or blog (PHP required) and see FotoNoter in action on your photos. FotoNoter talks to the server-side fotonotesplugin.php script to create annotations on your JPEG files. Please see the readme.txt file or visit FotoNotes.net to learn more. FotoNoter and fotonotesplugin.php are open source and unbelievably cool! Have fun FotoNoting... -- Greg Elin

Source: Fotonoter 1.3

And the CSS/Javascript FotoNotes™ RolloverViewer:

Quote:
FotoNotes™ RolloverViewer is an open-source PHP script which will read a FotoNote™-annotated image and create an imagemap with Javascript rollovers to display the image's notes. Use your mouse pointer to roll over the image on the right for an example.

FotoNotes™ is an exciting new specification to store information about regions of a photo inside a digital image. The Javascript rollover viewer was put together in the DHTML image annotation post at scribbling.net by Gina Trapani. FotoNotes™ RolloverViewer reads the FotoNotes™ format and renders the viewer.

The advantage of this viewer is that Flash is not required - just Javascript and CSS support. Additionally the <noscript> tag will allow non-Javascript-enabled clients to render the image without notes.
Requirements:

* PHP with GD installed on your web server
* overLIB Javascript library (© Erik Bosrup)
* A FotoNote™-annotated image (see FotoNotes.net for more information)

Source: FotoNotes™ RolloverViewer

So we could either try to use the Flash version to both create and view FotoNotes or we could use the RolloverViewer (or some variation) and create our own separate FotoNotes editing JavaScript/PHP.

If you're curious, Flickr will be adopting FotoNotes, if they aren't using it already.

 
mindless
mindless's picture

Joined: 2004-01-04
Posts: 8601
Posted: Mon, 2004-12-13 16:26

valiant, i wasn't there, but it was:

Quote:
20040906 04:30 <CLoCkWeRX> http://www.kanzaki.com/docs/sw/img-annotator.html is the kind of image annotation plugin i'd love to write...

Quote:
20040926 10:52 <CLoCkWeRX> gotta finish writing the backend to this stupid image annotator i started weeks ago
...
10:56 < CLoCkWeRX> the image annotator plugin i'm working on is for image regions in RDF
10:56 < CLoCkWeRX> like http://www.kanzaki.com/docs/sw/img-annotator.html
10:57 < valiant> clockwerkX: ok
10:57 < CLoCkWeRX> see also: http://www.ilrt.bris.ac.uk/discovery/2004/03/swig-images/ for more information on what the w3c / sem web / people are doing on it
10:58 < CLoCkWeRX> if i could make gallery2 have an annotation plugin it puts everything nicely out there for the semantic web; and nicely complements your application
10:58 < CLoCkWeRX> just... being one of those tasks you start but can
10:58 < CLoCkWeRX> t get finished right now

 
CSpotkill

Joined: 2004-12-11
Posts: 113
Posted: Mon, 2004-12-13 17:33

Interesting. He was going for the "semantic web" style, which is a part of the current FotoNotes Spec:

Quote:
Schema Variants - Atom v. Semantic Web v. XMP v. All of the Above

The original version of XML code used to store FotoNotes in the header of the JPEG file was created as a proof of concept only and was very simplistic. The idea was always to create a proof of concept and then talk with others working in digital photography and related areas of the Internet to develop the right format.

As of November 2004, three variants of the XML data schema have risen out of collaboration and discussions with others. These variants are:

* A Image-Region Semantic Web/RDF schema developed as part of the W3Photo project ([url=http://w3photo.org)/]http://w3photo.org[/url]).
* An Atom-compatible schema developed in collaboration between FotoNotes, LLC, and 2entwine.com: CurrentFNAtomSchema.
* And XMP-compatible schema using Adobe's XMP as a wrapper for the Atom-compatible Schema.

All three of these schema variations are included in the CurrentSchemas (November 2004) because they seem the likeliest schemas to be adopted.

See VariantDiscussion for more information. Briefly speaking, the Image-Region Semantic Web schema focuses on defining a region of an image and fits in nicely with semantic web developers efforts to describe photos using the semantic web. The Atom-compatible schema will look very familiar to weblog developers and does not require an "annotation" be tied to a single region of the image. The XMP-compatible schema is listed because, let's face it, Adobe has a lot of muscle in the market. XMP does support custom name spaces and if it can be used as a wrapper, why not?

To move forward, a decision needs to be made: adopt just one variant (or unified variant), or support all three. Supporting all three may not be that difficult. Part of the specification requires identification of the version. And it isn't as if there are lots of tags to support.

Source: SpecificationOverview - Kwiki