Image Annotation on Lotus Domino

I found this very nifty script using JQuery to annotate images on the web ala Flickr and Facebook. On my end, the challenge was to implement it on a Lotus Domino web application.

One of the first things I needed to do was to submit the data and to convert it to JSON format:

notes = [{“x1″:”10″,”y1″:”10″,”height”:”150″,”width”: “50”,”note”:”This is note one”}, {“x1″:”25″,”y1″:”25″,”height”:”70″,”width”: “80”,”note”:”<strong>This</strong> is a new note This is another note This is a new note”}];

In order to do this in domino I needed to use two Computed fields, of text type and computed after validation. Also, I would need the fields for the data that would set the height and width of the annotation box, and the note that goes with the box. (NoteHeight, NoteWidth, NoteNote). Field 1 will have the following value:

@If(@IsNewDoc=1; “{\”x1\”:\””+ X1+ “\”,\”y1\”:\””+ Y1+ “\”,\”height\”:\””+ NoteHeight+”\”,\”width\”:\”” + NoteWidth + “\”,\”note\”:\””+NoteNote+”\”}”;notesdata + “, ” + “{\”x1\”:\””+ X1+ “\”,\”y1\”:\””+ Y1+ “\”,\”height\”:\””+ NoteHeight+”\”,\”width\”:\”” + NoteWidth + “\”,\”note\”:\””+NoteNote+”\”}” )

Field 2 will take this value in JSON format and add succesive annotation data that will be handled by the jquery plugin:

@If(@IsDocBeingSaved=0;”[]”;”[” + notesdata +”]”)

After that, we just need to run  Evaluate() on the text string to create the JSON objects:

notes = eval(‘(‘ +     document.forms[0].field2.value + ‘)’);

You should then have the plugin working on your domino web application. It should be similar to the plugin demo.