|
1113
|
1 /**
|
|
|
2 digilib plugin for annotations.
|
|
|
3
|
|
|
4 currently only point-like annotations (like marks).
|
|
|
5
|
|
|
6 Annotations are stored on a Annotator http://annotateit.org compatible server.
|
|
|
7
|
|
|
8 */
|
|
|
9
|
|
|
10 (function($) {
|
|
|
11
|
|
|
12 // affine geometry
|
|
|
13 var geom;
|
|
|
14 // plugin object with digilib data
|
|
|
15 var digilib;
|
|
|
16 // our Annotator instance
|
|
|
17 var annotator;
|
|
|
18
|
|
|
19 var FULL_AREA;
|
|
|
20
|
|
|
21 var buttons = {
|
|
|
22 annotations : {
|
|
|
23 onclick : "toggleAnnotations",
|
|
|
24 tooltip : "show or hide annotations",
|
|
|
25 icon : "annotations.png"
|
|
|
26 },
|
|
|
27 annotationuser : {
|
|
|
28 onclick : "setAnnotationUser",
|
|
|
29 tooltip : "set user account for annotations",
|
|
|
30 icon : "annotation-user.png"
|
|
|
31 },
|
|
|
32 annotationmark : {
|
|
|
33 onclick : "setAnnotationMark",
|
|
|
34 tooltip : "create an annotation for a point",
|
|
|
35 icon : "annotation-mark.png"
|
|
|
36 }
|
|
|
37 };
|
|
|
38
|
|
|
39 var defaults = {
|
|
|
40 'annotatorInstance' : null,
|
|
|
41 // are annotations active?
|
|
|
42 'isAnnotationsVisible' : true,
|
|
|
43 // buttonset of this plugin
|
|
|
44 'annotationSet' : ['annotations', 'annotationuser', 'annotationmark', 'lessoptions'],
|
|
|
45 // URL of annotation server
|
|
|
46 'annotationServerUrl' : 'http://virtuoso.mpiwg-berlin.mpg.de:8080/AnnotationManager/annotator',
|
|
|
47 // URL of authentication token server
|
|
|
48 'annotationTokenUrl' : 'http://localhost:8080/test/annotator/token',
|
|
|
49 // annotation user name
|
|
|
50 'annotationUser' : 'anonymous',
|
|
|
51 // function to translate user name from annotation server format
|
|
|
52 'annotationServerUserString' : function() {
|
|
|
53 if (this.user && this.user.name) {
|
|
|
54 return this.user.name;
|
|
|
55 }
|
|
|
56 return this.user;
|
|
|
57 },
|
|
|
58
|
|
|
59 };
|
|
|
60
|
|
|
61 var actions = {
|
|
|
62 /**
|
|
|
63 * show/hide annotations
|
|
|
64 */
|
|
|
65 toggleAnnotations : function (data) {
|
|
|
66 var show = !data.settings.isAnnotationsVisible;
|
|
|
67 data.settings.isAnnotationsVisible = show;
|
|
|
68 digilib.fn.highlightButtons(data, 'annotations', show);
|
|
|
69 renderAnnotations(data);
|
|
|
70 },
|
|
|
71
|
|
|
72 /**
|
|
|
73 * set user account for annotations
|
|
|
74 */
|
|
|
75 setAnnotationUser : function (data, user, password) {
|
|
|
76 var settings = data.settings;
|
|
|
77 if (user == null) {
|
|
|
78 // user name entered in JS-prompt
|
|
|
79 user = window.prompt("User name:", settings.annotationUser);
|
|
|
80 if (user != null) {
|
|
|
81 // password entered in JS-prompt
|
|
|
82 password = window.prompt("Password:", '');
|
|
|
83 settings.annotationUser = user;
|
|
|
84 data.dlOpts.annotationUser = user;
|
|
|
85 digilib.fn.storeOptions(data);
|
|
|
86 loadAnnotationToken(data, password);
|
|
|
87 }
|
|
|
88 } else {
|
|
|
89 settings.annotationUser = user;
|
|
|
90 data.dlOpts.annotationUser = user;
|
|
|
91 digilib.fn.storeOptions(data);
|
|
|
92 loadAnnotationToken(data, password);
|
|
|
93 }
|
|
|
94 },
|
|
|
95
|
|
|
96 /**
|
|
|
97 * set a mark-annotation by clicking (or giving a position and a text)
|
|
|
98 *
|
|
|
99 * @param data
|
|
|
100 * @param mpos
|
|
|
101 * @param text
|
|
|
102 */
|
|
|
103 setAnnotationMark : function (data, mpos, text) {
|
|
|
104 if (mpos == null) {
|
|
|
105 // interactive
|
|
|
106 setAnnotationMark(data);
|
|
|
107 } else {
|
|
|
108 // use position and text (and user-id)
|
|
|
109 var annotation = newAnnotation(data, mpos, text, null, null, data.settings.annotationUser);
|
|
|
110 storeAnnotation(data, annotation);
|
|
|
111 // TODO: replace with annotation returned by server
|
|
|
112 data.annotations.push(annotation);
|
|
|
113 digilib.fn.redisplay(data);
|
|
|
114 }
|
|
|
115 },
|
|
|
116 };
|
|
|
117
|
|
|
118 /**
|
|
|
119 * create a new annotation object
|
|
|
120 */
|
|
|
121 var newAnnotation = function (data, mpos, text, id, uri, user, permissions, tags) {
|
|
|
122 var annot = {
|
|
|
123 pos : mpos,
|
|
|
124 text : text,
|
|
|
125 id : id,
|
|
|
126 uri : uri,
|
|
|
127 user : user,
|
|
|
128 permissions : permissions,
|
|
|
129 tags : tags
|
|
|
130 };
|
|
|
131 // TODO: use prototype?
|
|
|
132 annot.getUserName = data.settings.annotationServerUserString;
|
|
|
133 return annot;
|
|
|
134 };
|
|
|
135
|
|
|
136 /**
|
|
|
137 * returns an annotatable url to this digilib image
|
|
|
138 */
|
|
|
139 var getAnnotationPageUrl = function(data) {
|
|
|
140 var url = data.settings.digilibBaseUrl + '/jquery/digilib.html?';
|
|
|
141 url += digilib.fn.getParamString(data.settings, ['fn', 'pn'], digilib.defaults);
|
|
|
142 return url;
|
|
|
143 };
|
|
|
144
|
|
|
145 /**
|
|
|
146 * add a mark-annotation where clicked.
|
|
|
147 */
|
|
|
148 var setAnnotationMark = function(data) {
|
|
|
149 var $scaler = data.$scaler;
|
|
|
150 annotator = data.settings.annotatorInstance;
|
|
|
151 // unbind other handler TODO: do we need to do this?
|
|
|
152 $scaler.off(".dlZoomDrag");
|
|
|
153 // start event capturing
|
|
|
154 $scaler.one('mousedown.dlSetAnnotationMark', function(evt) {
|
|
|
155 // event handler adding a new mark
|
|
|
156 console.log("setAnnotationMark at=", evt);
|
|
|
157 var mpos = geom.position(evt);
|
|
|
158 var pos = data.imgTrafo.invtransform(mpos);
|
|
|
159
|
|
|
160 console.debug("showing annotator editor!");
|
|
|
161 var annotation = annotator.createAnnotation();
|
|
|
162 annotation.areas = [geom.rectangle(pos)];
|
|
|
163 annotator.showEditor(annotation, mpos.getAsCss());
|
|
|
164
|
|
|
165 return false;
|
|
|
166 // Annotation text entered in JS-prompt
|
|
|
167 var text = window.prompt("Annotation text:");
|
|
|
168 if (text == null) return false;
|
|
|
169 var annotation = newAnnotation(data, pos, text, null, null, data.settings.annotationUser);
|
|
|
170 storeAnnotation(data, annotation);
|
|
|
171 data.annotations.push(annotation);
|
|
|
172 digilib.fn.redisplay(data);
|
|
|
173 return false;
|
|
|
174 });
|
|
|
175 };
|
|
|
176
|
|
|
177 /**
|
|
|
178 * place annotations on the image
|
|
|
179 */
|
|
1114
|
180 var renderAnnotations = function (data) {
|
|
1113
|
181 console.debug("renderAnnotations: annotator=", annotator);
|
|
|
182 if (annotator == null || data.$img == null || data.imgTrafo == null)
|
|
|
183 return;
|
|
|
184 var annotations = annotator.plugins['Store'].annotations;
|
|
|
185 var cssPrefix = data.settings.cssPrefix;
|
|
|
186 var $elem = data.$elem;
|
|
|
187 // try to show annotation user state
|
|
|
188 $elem.find('div#'+cssPrefix+'button-annotationuser').attr('title', 'annotation user: '+data.settings.annotationUser);
|
|
|
189 // clear annotations
|
|
|
190 $elem.find('div.' + cssPrefix + 'annotationmark').remove();
|
|
|
191 if (!data.settings.isAnnotationsVisible) return;
|
|
|
192 for (var i = 0; i < annotations.length; i++) {
|
|
|
193 var annotation = annotations[i];
|
|
1114
|
194 renderAnnotation(data, annotation, i+1);
|
|
1113
|
195 }
|
|
|
196 };
|
|
|
197
|
|
|
198 /**
|
|
|
199 * place annotation on the image
|
|
|
200 */
|
|
1114
|
201 var renderAnnotation = function (data, annotation, idx) {
|
|
1113
|
202 console.debug("renderAnnotation: annotation=", annotation);
|
|
|
203 if (annotation == null || data.$img == null || data.imgTrafo == null)
|
|
|
204 return;
|
|
|
205 var cssPrefix = data.settings.cssPrefix;
|
|
|
206 var $elem = data.$elem;
|
|
1114
|
207 if (idx == null) idx = '?';
|
|
1113
|
208 // try to show annotation user state
|
|
|
209 $elem.find('div#'+cssPrefix+'button-annotationuser').attr('title', 'annotation user: '+data.settings.annotationUser);
|
|
|
210 if (!data.settings.isAnnotationsVisible) return;
|
|
|
211 var pos = geom.position(annotation.areas[0]);
|
|
|
212 if (data.zoomArea.containsPosition(pos)) {
|
|
|
213 var mpos = data.imgTrafo.transform(pos);
|
|
|
214 console.debug("renderannotations: pos=", mpos);
|
|
|
215 // create annotation
|
|
1114
|
216 var html = '<div class="'+cssPrefix+'annotationmark '+cssPrefix+'overlay annotator-hl">'+idx+'</div>';
|
|
1113
|
217 var $annotation = $(html);
|
|
1114
|
218 $annotation.data('annotation', annotation);
|
|
|
219 // set text as tooltip
|
|
|
220 //$annotation.attr('title', "Annotation: " + annotation.text);
|
|
1113
|
221 $elem.append($annotation);
|
|
1114
|
222 $annotation.on("mouseover", annotator.onHighlightMouseover);
|
|
|
223 $annotation.on("mouseout", annotator.startViewerHideTimer);
|
|
1113
|
224 mpos.adjustDiv($annotation);
|
|
|
225 }
|
|
|
226 };
|
|
|
227
|
|
|
228 /**
|
|
|
229 * Get an authentication token from the token server.
|
|
|
230 *
|
|
|
231 * Stores the token and loads annotations on success.
|
|
|
232 */
|
|
|
233 var loadAnnotationToken = function(data, password) {
|
|
|
234 var settings = data.settings;
|
|
|
235 var url = settings.annotationTokenUrl;
|
|
|
236 var params = {'user': settings.annotationUser};
|
|
|
237 if (password != null) {
|
|
|
238 params.password = password;
|
|
|
239 }
|
|
|
240 // TODO: better error handling
|
|
|
241 $.post(url, params)
|
|
|
242 .done(function (authToken, authStatus) {
|
|
|
243 console.debug("got auth token data=", authToken);
|
|
|
244 data.annotationToken = authToken;
|
|
|
245 data.dlOpts.annotationToken = authToken;
|
|
|
246 digilib.fn.storeOptions(data);
|
|
|
247 //loadAnnotations(data);
|
|
|
248 })
|
|
|
249 .fail(function (xhr, status) {
|
|
|
250 console.error("got auth token error:", xhr);
|
|
|
251 data.annotationToken = null;
|
|
|
252 data.settings.annotationUser = "anonymous";
|
|
|
253 //loadAnnotations(data);
|
|
|
254 });
|
|
|
255 };
|
|
|
256
|
|
|
257 /**
|
|
|
258 * loads all annotations for this url from the annotation server.
|
|
|
259 */
|
|
|
260 var loadAnnotations = function(data) {
|
|
|
261 var settings = data.settings;
|
|
|
262 // we use the search API
|
|
|
263 var url = settings.annotationServerUrl + '/search';
|
|
|
264 var pageUrl = getAnnotationPageUrl(data);
|
|
|
265 // send authentication token in header
|
|
|
266 headers = {};
|
|
|
267 if (data.annotationToken != null) {
|
|
|
268 headers['x-annotator-auth-token'] = data.annotationToken;
|
|
|
269 }
|
|
|
270 // get only 20 annotations with this url
|
|
|
271 var query = {
|
|
|
272 limit : 20,
|
|
|
273 uri : pageUrl
|
|
|
274 };
|
|
|
275 $.ajax(url, {
|
|
|
276 dataType : 'json',
|
|
|
277 data : query,
|
|
|
278 headers : headers,
|
|
|
279 success : function(annotData, annotStatus) {
|
|
|
280 console.debug("got annotation data=", annotData);
|
|
|
281 data.annotationData = annotData;
|
|
|
282 parseAnnotations(data, annotData);
|
|
|
283 renderAnnotations(data);
|
|
|
284 }
|
|
|
285 });
|
|
|
286 };
|
|
|
287
|
|
|
288 /**
|
|
|
289 * parse all JSON-annotations in annotationData.rows and put in data.annotations
|
|
|
290 */
|
|
|
291 var parseAnnotations = function(data, annotationData) {
|
|
|
292 var annotations = [];
|
|
|
293 for (var i = 0; i < annotationData.rows.length; ++i) {
|
|
|
294 var ann = annotationData.rows[i];
|
|
|
295 var annot = parseAnnotation(data, ann);
|
|
|
296 if (annot != null) {
|
|
|
297 annotations.push(annot);
|
|
|
298 }
|
|
|
299 }
|
|
|
300 data.annotations = annotations;
|
|
|
301 };
|
|
|
302
|
|
|
303 /**
|
|
|
304 * Parse a JSON-annotation.
|
|
|
305 *
|
|
|
306 * Returns an annotation object.
|
|
|
307 */
|
|
|
308 var parseAnnotation = function(data, ann) {
|
|
|
309 // TODO: check validity of annotation data
|
|
|
310 if (ann.areas != null && ann.areas.length > 0) {
|
|
|
311 var area = ann.areas[0];
|
|
|
312 // currently only point annotations
|
|
|
313 var pos = geom.position(area.x, area.y);
|
|
|
314 return newAnnotation(data, pos, ann.text, ann.id, ann.uri, ann.user, ann.permissions, ann.tags);
|
|
|
315 }
|
|
|
316 return null;
|
|
|
317 };
|
|
|
318
|
|
|
319 /**
|
|
|
320 * Store an annotation on the annotation server.
|
|
|
321 */
|
|
|
322 var storeAnnotation = function(data, annotation) {
|
|
|
323 console.debug("storeAnnotation:", annotation);
|
|
|
324 var settings = data.settings;
|
|
|
325 var url = settings.annotationServerUrl + '/annotations';
|
|
|
326 var pageUrl = getAnnotationPageUrl(data);
|
|
|
327 // send authentication token in header
|
|
|
328 headers = {
|
|
|
329 'x-annotator-auth-token' : data.annotationToken
|
|
|
330 };
|
|
|
331 // create annotation object to send
|
|
|
332 var annotData = {
|
|
|
333 areas : [{
|
|
|
334 x : annotation.pos.x,
|
|
|
335 y : annotation.pos.y
|
|
|
336 }],
|
|
|
337 text : annotation.text,
|
|
|
338 uri : pageUrl,
|
|
|
339 user : settings.annotationUser
|
|
|
340 };
|
|
|
341 var dataString = JSON.stringify(annotData);
|
|
|
342 $.ajax(url, {
|
|
|
343 type : 'POST',
|
|
|
344 dataType : 'json',
|
|
|
345 contentType : 'application/json',
|
|
|
346 data : dataString,
|
|
|
347 headers : headers,
|
|
|
348 success : function(annotData, annotStatus) {
|
|
|
349 console.debug("sent annotation data, got=", annotData, " status=" + annotStatus);
|
|
|
350 var annot = parseAnnotation(data, annotData);
|
|
|
351 // TODO: we have to add the returned data to the real annotation!
|
|
|
352 //renderAnnotations(data);
|
|
|
353 }
|
|
|
354 });
|
|
|
355
|
|
|
356 };
|
|
|
357
|
|
|
358 /**
|
|
|
359 * install additional buttons
|
|
|
360 */
|
|
|
361 var installButtons = function(data) {
|
|
|
362 var settings = data.settings;
|
|
|
363 var mode = settings.interactionMode;
|
|
|
364 var buttonSettings = settings.buttonSettings[mode];
|
|
|
365 // configure buttons through digilib "annotationSet" option
|
|
|
366 var buttonSet = settings.annotationSet || annotationSet;
|
|
|
367 // set annotationSet to [] or '' for no buttons (when showing annotations only)
|
|
|
368 if (buttonSet.length && buttonSet.length > 0) {
|
|
|
369 buttonSettings.annotationSet = buttonSet;
|
|
|
370 buttonSettings.buttonSets.push('annotationSet');
|
|
|
371 }
|
|
|
372 };
|
|
|
373
|
|
|
374 /**
|
|
|
375 * plugin installation. called by digilib on plugin object.
|
|
|
376 */
|
|
|
377 var install = function(plugin) {
|
|
|
378 digilib = plugin;
|
|
|
379 console.debug('installing annotations plugin. digilib:', digilib);
|
|
|
380 // import geometry classes
|
|
|
381 geom = digilib.fn.geometry;
|
|
|
382 FULL_AREA = geom.rectangle(0, 0, 1, 1);
|
|
|
383 // add defaults, actins, buttons
|
|
|
384 $.extend(digilib.defaults, defaults);
|
|
|
385 $.extend(digilib.actions, actions);
|
|
|
386 $.extend(digilib.buttons, buttons);
|
|
|
387 };
|
|
|
388
|
|
|
389 /** plugin initialization */
|
|
|
390 var init = function(data) {
|
|
|
391 console.debug('initialising annotations plugin. data:', data);
|
|
|
392 var $data = $(data);
|
|
|
393 // set up
|
|
|
394 data.annotations = [];
|
|
|
395 if (digilib.plugins.buttons != null) {
|
|
|
396 installButtons(data);
|
|
|
397 }
|
|
|
398 if (data.dlOpts.annotationUser != null) {
|
|
|
399 // get annotation user from cookie
|
|
|
400 data.settings.annotationUser = data.dlOpts.annotationUser;
|
|
|
401 }
|
|
|
402 if (data.dlOpts.annotationToken != null) {
|
|
|
403 // get annotation token from cookie
|
|
|
404 data.annotationToken = data.dlOpts.annotationToken;
|
|
|
405 }
|
|
|
406 // install event handler
|
|
|
407 $data.bind('setup', handleSetup);
|
|
|
408 $data.bind('update', handleUpdate);
|
|
|
409 };
|
|
|
410
|
|
|
411 /**
|
|
|
412 * setup loads all annotations.
|
|
|
413 */
|
|
|
414 var handleSetup = function(evt) {
|
|
|
415 console.debug("annotations: handleSetup");
|
|
|
416 var data = this;
|
|
|
417 if (data.annotationToken == null) {
|
|
|
418 loadAnnotationToken(data);
|
|
|
419 }
|
|
|
420 // set up annotator (after html has been set up)
|
|
|
421 var uri = getAnnotationPageUrl(data);
|
|
|
422 annotator = new Annotator(data.$elem.get(0))
|
|
|
423 //.addPlugin('Tags')
|
|
|
424 .addPlugin('Auth', {
|
|
|
425 token : data.annotationToken,
|
|
|
426 //tokenUrl: 'http://annotateit.org/api/token'
|
|
|
427 //tokenUrl: 'http://localhost:8080/test/annotator/token?user=anonymous'
|
|
|
428 //autoFetch: false
|
|
|
429 })
|
|
|
430 .addPlugin('Permissions', {
|
|
|
431 user: data.settings.annotationUser,
|
|
|
432 userString: function (user) {
|
|
|
433 if (user && user.name) {
|
|
|
434 return user.name;
|
|
|
435 }
|
|
|
436 return user;
|
|
|
437 },
|
|
|
438 userId: function (user) {
|
|
|
439 if (user && user.id) {
|
|
|
440 return user.id;
|
|
|
441 }
|
|
|
442 return user;
|
|
|
443 }
|
|
|
444 })
|
|
|
445 .addPlugin('Store', {
|
|
|
446 prefix : data.settings.annotationServerUrl,
|
|
|
447 //prefix: 'http://localhost:18080/AnnotationManager/annotator',
|
|
|
448 //prefix: 'http://tuxserve03.mpiwg-berlin.mpg.de/AnnotationManager/annotator',
|
|
|
449 //prefix: 'http://annotateit.org/api',
|
|
|
450 annotationData: {
|
|
|
451 'uri': uri
|
|
|
452 },
|
|
|
453 loadFromSearch: {
|
|
|
454 'limit': 20,
|
|
|
455 'uri': uri
|
|
|
456 }
|
|
|
457 })
|
|
|
458 ;
|
|
|
459
|
|
|
460 // monkey-patch Annotator.setupAnnotation
|
|
|
461 annotator.setupAnnotation = function(annotation, fireEvents) {
|
|
|
462 if (fireEvents == null) {
|
|
|
463 fireEvents = true;
|
|
|
464 }
|
|
|
465
|
|
|
466 renderAnnotation(data, annotation);
|
|
|
467
|
|
|
468 if (fireEvents) {
|
|
|
469 this.publish('annotationCreated', [annotation]);
|
|
|
470 }
|
|
|
471 return annotation;
|
|
|
472 };
|
|
|
473
|
|
|
474
|
|
|
475 data.settings.annotatorInstance = annotator;
|
|
|
476 /* load annotations from server
|
|
|
477 if (data.annotationToken != null) {
|
|
|
478 loadAnnotations(data);
|
|
|
479 } else {
|
|
|
480 loadAnnotationToken(data);
|
|
|
481 } */
|
|
|
482 };
|
|
|
483
|
|
|
484 /**
|
|
|
485 * update renders all annotations.
|
|
|
486 */
|
|
|
487 var handleUpdate = function(evt) {
|
|
|
488 console.debug("annotations: handleUpdate");
|
|
|
489 var data = this;
|
|
|
490 renderAnnotations(data);
|
|
|
491 };
|
|
|
492
|
|
|
493 // plugin object with name and init
|
|
|
494 // shared objects filled by digilib on registration
|
|
|
495 var plugin = {
|
|
|
496 name : 'annotations',
|
|
|
497 install : install,
|
|
|
498 init : init,
|
|
|
499 buttons : {},
|
|
|
500 actions : {},
|
|
|
501 fn : {},
|
|
|
502 plugins : {}
|
|
|
503 };
|
|
|
504
|
|
|
505 if ($.fn.digilib == null) {
|
|
|
506 $.error("jquery.digilib.annotations must be loaded after jquery.digilib!");
|
|
|
507 } else {
|
|
|
508 $.fn.digilib('plugin', plugin);
|
|
|
509 }
|
|
|
510 })(jQuery);
|
