Image Annotation on Lotus Domino

CodeI 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.