Mercurial > hg > digilib-old

comparison webapp/src/main/webapp/jquery/jquery.digilib.annotations.js @ 1083:bab0bdac6d92

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