|
1083
|
1 /**
|
|
|
2 digilib plugin for annotations.
|
|
|
3
|
|
1086
|
4 currently only point-like annotations (like marks).
|
|
|
5
|
|
|
6 Annotations are stored on a Annotator http://annotateit.org compatible server.
|
|
1083
|
7
|
|
|
8 */
|
|
|
9
|
|
|
10 (function($) {
|
|
|
11
|
|
|
12 // affine geometry
|
|
|
13 var geom;
|
|
|
14 // plugin object with digilib data
|
|
|
15 var digilib;
|
|
|
16
|
|
|
17 var FULL_AREA;
|
|
|
18
|
|
|
19 var buttons = {
|
|
|
20 annotations : {
|
|
|
21 onclick : "toggleAnnotations",
|
|
|
22 tooltip : "show or hide annotations",
|
|
|
23 icon : "annotations.png"
|
|
|
24 },
|
|
1100
|
25 annotationuser : {
|
|
|
26 onclick : "setAnnotationUser",
|
|
|
27 tooltip : "set user account for annotations",
|
|
|
28 icon : "annotation-user.png"
|
|
|
29 },
|
|
1083
|
30 annotationmark : {
|
|
|
31 onclick : "setAnnotationMark",
|
|
|
32 tooltip : "create an annotation for a point",
|
|
|
33 icon : "annotation-mark.png"
|
|
|
34 }
|
|
|
35 };
|
|
|
36
|
|
|
37 var defaults = {
|
|
|
38 // are annotations active?
|
|
|
39 'isAnnotationsVisible' : true,
|
|
|
40 // buttonset of this plugin
|
|
1100
|
41 'annotationSet' : ['annotations', 'annotationuser', 'annotationmark', 'lessoptions'],
|
|
1083
|
42 // URL of annotation server
|
|
|
43 'annotationServerUrl' : 'http://virtuoso.mpiwg-berlin.mpg.de:8080/AnnotationManager/annotator',
|
|
|
44 // URL of authentication token server
|
|
1100
|
45 'annotationTokenUrl' : 'http://localhost:8080/test/annotator/token',
|
|
1083
|
46 // annotation user name
|
|
|
47 'annotationUser' : 'anonymous'
|
|
|
48 };
|
|
|
49
|
|
|
50 var actions = {
|
|
|
51 /**
|
|
|
52 * show/hide annotations
|
|
|
53 */
|
|
1100
|
54 toggleAnnotations : function (data) {
|
|
1083
|
55 var show = !data.settings.isAnnotationsVisible;
|
|
|
56 data.settings.isAnnotationsVisible = show;
|
|
1097
|
57 digilib.fn.highlightButtons(data, 'annotations', show);
|
|
1083
|
58 renderAnnotations(data);
|
|
|
59 },
|
|
1100
|
60
|
|
|
61 /**
|
|
|
62 * set user account for annotations
|
|
|
63 */
|
|
|
64 setAnnotationUser : function (data, user) {
|
|
|
65 var settings = data.settings;
|
|
|
66 if (user == null) {
|
|
|
67 // user name entered in JS-prompt
|
|
|
68 user = window.prompt("User name:", settings.annotationUser);
|
|
|
69 if (user != null) {
|
|
|
70 settings.annotationUser = user;
|
|
|
71 }
|
|
|
72 } else {
|
|
|
73 settings.annotationUser = user;
|
|
|
74 }
|
|
|
75 },
|
|
1083
|
76
|
|
|
77 /**
|
|
|
78 * set a mark-annotation by clicking (or giving a position and a text)
|
|
|
79 *
|
|
|
80 * @param data
|
|
|
81 * @param mpos
|
|
|
82 * @param text
|
|
|
83 */
|
|
1100
|
84 setAnnotationMark : function (data, mpos, text) {
|
|
1083
|
85 if (mpos == null) {
|
|
|
86 // interactive
|
|
|
87 setAnnotationMark(data);
|
|
|
88 } else {
|
|
|
89 // use position and text
|
|
|
90 var annotation = newAnnotation(mpos, text);
|
|
|
91 storeAnnotation(data, annotation);
|
|
|
92 data.annotations.push(annotation);
|
|
|
93 digilib.fn.redisplay(data);
|
|
|
94 }
|
|
|
95 },
|
|
|
96 };
|
|
|
97
|
|
1086
|
98 /**
|
|
|
99 * create a new annotation object
|
|
|
100 */
|
|
1100
|
101 var newAnnotation = function (mpos, text, id, uri, user) {
|
|
1083
|
102 var annot = {
|
|
|
103 pos : mpos,
|
|
|
104 text : text,
|
|
|
105 id : id,
|
|
|
106 uri : uri,
|
|
|
107 user : user
|
|
|
108 };
|
|
|
109 return annot;
|
|
|
110 };
|
|
|
111
|
|
|
112 /**
|
|
|
113 * returns an annotatable url to this digilib image
|
|
|
114 */
|
|
|
115 var getAnnotationPageUrl = function(data) {
|
|
|
116 var url = data.settings.digilibBaseUrl + '/jquery/digilib.html?';
|
|
|
117 url += digilib.fn.getParamString(data.settings, ['fn', 'pn'], digilib.defaults);
|
|
|
118 return url;
|
|
1086
|
119 };
|
|
|
120
|
|
1083
|
121 /**
|
|
|
122 * add a mark-annotation where clicked.
|
|
|
123 */
|
|
|
124 var setAnnotationMark = function(data) {
|
|
|
125 var $scaler = data.$scaler;
|
|
|
126 // unbind other handler TODO: do we need to do this?
|
|
|
127 $scaler.off(".dlZoomDrag");
|
|
|
128 // start event capturing
|
|
|
129 $scaler.one('mousedown.dlSetAnnotationMark', function(evt) {
|
|
|
130 // event handler adding a new mark
|
|
|
131 console.log("setAnnotationMark at=", evt);
|
|
|
132 var mpos = geom.position(evt);
|
|
|
133 var pos = data.imgTrafo.invtransform(mpos);
|
|
1086
|
134 // Annotation text entered in JS-prompt
|
|
1083
|
135 var text = window.prompt("Annotation text:");
|
|
1100
|
136 if (text == null) return false;
|
|
1083
|
137 var annotation = newAnnotation(pos, text);
|
|
|
138 storeAnnotation(data, annotation);
|
|
|
139 data.annotations.push(annotation);
|
|
|
140 digilib.fn.redisplay(data);
|
|
|
141 return false;
|
|
|
142 });
|
|
|
143 };
|
|
|
144
|
|
|
145 /**
|
|
|
146 * place annotations on the image
|
|
|
147 */
|
|
|
148 var renderAnnotations = function(data) {
|
|
|
149 if (data.annotations == null || data.$img == null || data.imgTrafo == null)
|
|
|
150 return;
|
|
|
151 var cssPrefix = data.settings.cssPrefix;
|
|
|
152 var $elem = data.$elem;
|
|
|
153 var annotations = data.annotations;
|
|
|
154 console.debug("renderAnnotations: annotations=" + annotations);
|
|
|
155 // clear annotations
|
|
|
156 $elem.find('div.' + cssPrefix + 'annotationmark').remove();
|
|
1097
|
157 if (!data.settings.isAnnotationsVisible) return;
|
|
1083
|
158 for (var i = 0; i < annotations.length; i++) {
|
|
|
159 var annotation = annotations[i];
|
|
|
160 if (data.zoomArea.containsPosition(annotation.pos)) {
|
|
|
161 var mpos = data.imgTrafo.transform(annotation.pos);
|
|
|
162 console.debug("renderannotations: pos=", mpos);
|
|
|
163 // create annotation
|
|
|
164 var html = '<div class="' + cssPrefix + 'annotationmark ' + cssPrefix + 'overlay">' + (i + 1) + '</div>';
|
|
|
165 var $annotation = $(html);
|
|
|
166 // set text as tooltip TODO: have real popup with editing
|
|
|
167 $annotation.attr('title', "Annotation: " + annotation.text);
|
|
|
168 $elem.append($annotation);
|
|
|
169 mpos.adjustDiv($annotation);
|
|
|
170 }
|
|
|
171 }
|
|
|
172 };
|
|
|
173
|
|
1086
|
174 /**
|
|
|
175 * Get an authentication token from the token server.
|
|
|
176 *
|
|
|
177 * Stores the token and loads annotations on success.
|
|
|
178 */
|
|
1083
|
179 var loadAnnotationToken = function(data) {
|
|
|
180 var settings = data.settings;
|
|
|
181 var url = settings.annotationTokenUrl;
|
|
|
182 // TODO: better error handling
|
|
|
183 $.get(url, function(authToken, authStatus) {
|
|
|
184 console.debug("got auth token data=", authToken);
|
|
|
185 data.annotationToken = authToken;
|
|
|
186 loadAnnotations(data);
|
|
|
187 });
|
|
|
188 };
|
|
|
189
|
|
1086
|
190 /**
|
|
|
191 * loads all annotations for this url from the annotation server.
|
|
|
192 */
|
|
1083
|
193 var loadAnnotations = function(data) {
|
|
|
194 var settings = data.settings;
|
|
1086
|
195 // we use the search API
|
|
1083
|
196 var url = settings.annotationServerUrl + '/search';
|
|
1084
|
197 var pageUrl = getAnnotationPageUrl(data);
|
|
1083
|
198 // send authentication token in header
|
|
|
199 headers = {
|
|
|
200 'x-annotator-auth-token' : data.annotationToken
|
|
|
201 };
|
|
1086
|
202 // get only 20 annotations with this url
|
|
1083
|
203 var query = {
|
|
|
204 limit : 20,
|
|
|
205 uri : pageUrl
|
|
|
206 };
|
|
|
207 $.ajax(url, {
|
|
|
208 dataType : 'json',
|
|
|
209 data : query,
|
|
|
210 headers : headers,
|
|
|
211 success : function(annotData, annotStatus) {
|
|
|
212 console.debug("got annotation data=", annotData);
|
|
|
213 data.annotationData = annotData;
|
|
|
214 parseAnnotations(data, annotData);
|
|
|
215 renderAnnotations(data);
|
|
|
216 }
|
|
|
217 });
|
|
|
218 };
|
|
|
219
|
|
1086
|
220 /**
|
|
|
221 * parse all JSON-annotations in annotationData.rows and put in data.annotations
|
|
|
222 */
|
|
1083
|
223 var parseAnnotations = function(data, annotationData) {
|
|
|
224 var annotations = [];
|
|
|
225 for (var i = 0; i < annotationData.rows.length; ++i) {
|
|
|
226 var ann = annotationData.rows[i];
|
|
|
227 var annot = parseAnnotation(ann)
|
|
|
228 if (annot != null) {
|
|
|
229 annotations.push(annot);
|
|
|
230 }
|
|
|
231 }
|
|
|
232 data.annotations = annotations;
|
|
|
233 };
|
|
|
234
|
|
1086
|
235 /**
|
|
|
236 * Parse a JSON-annotation.
|
|
|
237 *
|
|
|
238 * Returns an annotation object.
|
|
|
239 */
|
|
1083
|
240 var parseAnnotation = function(ann) {
|
|
|
241 // TODO: check validity of annotation data
|
|
1084
|
242 if (ann.areas != null && ann.areas.length > 0) {
|
|
|
243 var area = ann.areas[0];
|
|
1086
|
244 // currently only point annotations
|
|
1084
|
245 var pos = geom.position(area.x, area.y);
|
|
1083
|
246 return newAnnotation(pos, ann.text, ann.id, ann.uri, ann.user);
|
|
|
247 }
|
|
|
248 return null;
|
|
|
249 };
|
|
|
250
|
|
1086
|
251 /**
|
|
|
252 * Store an annotation on the annotation server.
|
|
|
253 */
|
|
1083
|
254 var storeAnnotation = function(data, annotation) {
|
|
|
255 console.debug("storeAnnotation:", annotation);
|
|
|
256 var settings = data.settings;
|
|
|
257 var url = settings.annotationServerUrl + '/annotations';
|
|
|
258 var pageUrl = getAnnotationPageUrl(data);
|
|
|
259 // send authentication token in header
|
|
|
260 headers = {
|
|
|
261 'x-annotator-auth-token' : data.annotationToken
|
|
|
262 };
|
|
|
263 // create annotation object to send
|
|
|
264 var annotData = {
|
|
1084
|
265 areas : [{
|
|
|
266 x : annotation.pos.x,
|
|
|
267 y : annotation.pos.y
|
|
|
268 }],
|
|
1083
|
269 text : annotation.text,
|
|
|
270 uri : pageUrl,
|
|
|
271 user : settings.annotationUser
|
|
|
272 };
|
|
|
273 var dataString = JSON.stringify(annotData);
|
|
|
274 $.ajax(url, {
|
|
|
275 type : 'POST',
|
|
|
276 dataType : 'json',
|
|
|
277 contentType : 'application/json',
|
|
|
278 data : dataString,
|
|
|
279 headers : headers,
|
|
|
280 success : function(annotData, annotStatus) {
|
|
1084
|
281 console.debug("sent annotation data, got=", annotData, " status=" + annotStatus);
|
|
1083
|
282 var annot = parseAnnotation(annotData);
|
|
|
283 // TODO: we have to add the returned data to the real annotation!
|
|
|
284 //renderAnnotations(data);
|
|
|
285 }
|
|
|
286 });
|
|
|
287
|
|
1086
|
288 };
|
|
|
289
|
|
|
290 /**
|
|
|
291 * install additional buttons
|
|
|
292 */
|
|
1083
|
293 var installButtons = function(data) {
|
|
|
294 var settings = data.settings;
|
|
|
295 var mode = settings.interactionMode;
|
|
|
296 var buttonSettings = settings.buttonSettings[mode];
|
|
|
297 // configure buttons through digilib "annotationSet" option
|
|
|
298 var buttonSet = settings.annotationSet || annotationSet;
|
|
|
299 // set annotationSet to [] or '' for no buttons (when showing annotations only)
|
|
|
300 if (buttonSet.length && buttonSet.length > 0) {
|
|
|
301 buttonSettings.annotationSet = buttonSet;
|
|
|
302 buttonSettings.buttonSets.push('annotationSet');
|
|
|
303 }
|
|
|
304 };
|
|
|
305
|
|
1086
|
306 /**
|
|
|
307 * plugin installation. called by digilib on plugin object.
|
|
|
308 */
|
|
1083
|
309 var install = function(plugin) {
|
|
|
310 digilib = plugin;
|
|
|
311 console.debug('installing annotations plugin. digilib:', digilib);
|
|
|
312 // import geometry classes
|
|
|
313 geom = digilib.fn.geometry;
|
|
|
314 FULL_AREA = geom.rectangle(0, 0, 1, 1);
|
|
|
315 // add defaults, actins, buttons
|
|
|
316 $.extend(digilib.defaults, defaults);
|
|
|
317 $.extend(digilib.actions, actions);
|
|
|
318 $.extend(digilib.buttons, buttons);
|
|
|
319 };
|
|
|
320
|
|
|
321 /** plugin initialization */
|
|
|
322 var init = function(data) {
|
|
|
323 console.debug('initialising annotations plugin. data:', data);
|
|
|
324 var $data = $(data);
|
|
|
325 // set up
|
|
|
326 data.annotations = [];
|
|
|
327 if (digilib.plugins.buttons != null) {
|
|
|
328 installButtons(data);
|
|
|
329 }
|
|
|
330 // install event handler
|
|
|
331 $data.bind('setup', handleSetup);
|
|
|
332 $data.bind('update', handleUpdate);
|
|
|
333 };
|
|
|
334
|
|
1086
|
335 /**
|
|
|
336 * setup loads all annotations.
|
|
|
337 */
|
|
1083
|
338 var handleSetup = function(evt) {
|
|
|
339 console.debug("annotations: handleSetup");
|
|
|
340 var data = this;
|
|
|
341 // load annotations from server
|
|
|
342 loadAnnotationToken(data);
|
|
|
343 };
|
|
|
344
|
|
1086
|
345 /**
|
|
|
346 * update renders all annotations.
|
|
|
347 */
|
|
1083
|
348 var handleUpdate = function(evt) {
|
|
|
349 console.debug("annotations: handleUpdate");
|
|
|
350 var data = this;
|
|
|
351 if (data.marks != null) {
|
|
|
352 renderAnnotations(data);
|
|
|
353 }
|
|
|
354 };
|
|
|
355
|
|
|
356 // plugin object with name and init
|
|
|
357 // shared objects filled by digilib on registration
|
|
|
358 var plugin = {
|
|
|
359 name : 'annotations',
|
|
|
360 install : install,
|
|
|
361 init : init,
|
|
|
362 buttons : {},
|
|
|
363 actions : {},
|
|
|
364 fn : {},
|
|
|
365 plugins : {}
|
|
|
366 };
|
|
|
367
|
|
|
368 if ($.fn.digilib == null) {
|
|
|
369 $.error("jquery.digilib.annotations must be loaded after jquery.digilib!");
|
|
|
370 } else {
|
|
|
371 $.fn.digilib('plugin', plugin);
|
|
|
372 }
|
|
|
373 })(jQuery);
|
