Commit 83fde84d2afb6e93b76213340269d7fa91c5b63c

Improvements in the image annotation from OCD results

  - Now client side is more intelligent in loading image from OCD search
    results for annotation. Also, an endpoint in the server is available to
check the resource type of a URL. The loadURL function can be told explicitly
what type of resource it has to load for annotation. If it is not told, it
tries to find out by various means.
swtr/server.py
(26 / 15)
  
8585# takes in `query`, `size`, and `from` parameters in query string
8686# returns a JSON response
8787@app.route('/search/ocd', methods=['GET'])
88def search_ocd():
88def searchOCD():
8989 query = flask.request.args.get('query')
9090 #collection = flask.request.args.get('collection')
9191 size = flask.request.args.get('size') or 10
……
117117
118118
119119# resolve OCD Media URLs: http://docs.opencultuurdata.nl/user/api.html#resolver
120@app.route('/resolve-ocd-media/<media_hash>', methods=['GET'])
121def resolve_ocd_media_urls(media_hash):
120@app.route('/resolve-ocd-media', methods=['GET'])
121def resolveOCDMediaURLs():
122122
123 media_hash = flask.request.args.get('hash') or None
124
125 if not media_hash:
126 flask.abort(400)
127
123128 resp = requests.get('http://api.opencultuurdata.nl/v0/resolve/' +
124129 media_hash)
125130
126 response = flask.make_response()
127 response.data = resp.url
128 return response
131 return flask.jsonify(url=resp.url)
129132
130133
134@app.route('/media-type', methods=['GET'])
135def getMediaType():
136
137 where = flask.request.args.get('where') or None
138
139 if not where:
140 flask.abort(400)
141
142 resp = requests.get(where)
143 content = resp.text
144
145 if imghdr.what('ignore', content) is None:
146 return flask.jsonify({'type': 'html'})
147 else:
148 return flask.jsonify({'type': 'image'})
149
150
131151@app.route('/annotate', methods=['GET'])
132152def annotate():
133153 # img = urllib2.urlopen(flask.request.args['where']).read()
……
239239 style.set("rel", "stylesheet")
240240 style.set("type", "text/css")
241241
242
243@app.route('/getMediaType')
244def getMediaType():
245 request = requests.get(flask.request.args['where'])
246 content = request.text
247 if imghdr.what('ignore', content) is None:
248 return flask.jsonify({'type': 'html'})
249 else:
250 return flask.jsonify({'type': 'image'})
251242
252243# if the app is run directly from command-line
253244# assume its being run locally in a dev environment
swtr/static/js/swtmaker.js
(60 / 33)
  
306306 this.loadURL(input);
307307 }
308308 },
309 loadURL: function(url) {
310 $('#ocd-results').hide();
309 loadURL: function(url, type) {
310 console.log('loadURL()');
311 if(this.source !== 'ocd') {
312 $('#ocd-results').hide();
313 }
311314 $('#img-annotation-wrapper').show();
312315 if(!url) {
313316 return false;
314317 }
315 // if image url then load the image annotation
318 // if type is given explicitly; we load it as such.
319 if(type === 'image') {
320 this.setImage(url);
321 return false;
322 }
323 // else try to find what resource is the URL..
324 // if url has an image extension then load the image annotation
316325 if(url.match(/.jpg|.jpeg|.png|.gif|.bmp|.svg/)) {
317
318 this.imgURL = url;
319
320 if(this.$img.attr('src') === this.imgURL) {
321 return;
322 }
323 anno.reset();
324 var self = this;
325 this.$overlay.show();
326 this.helpview.step(7);
327 this.$img.attr('src', this.imgURL);
326 this.setImage(url);
328327 return false;
329328 }
330 // else load text annotation
329 // else check with our /media-type endpoint to see what type of resource
330 // it is
331331 else {
332 window.location.href = '/annotate?where=' + url;
332 this.helpview.step(12);
333 this.$overlay.show();
334 var self = this;
335 $.get('/media-type', {where: url}, function(response) {
336 //console.log(response);
337 self.$overlay.hide();
338 if(response.type === 'image') {
339 self.setImage(url);
340 }
341 else {
342 window.location.href = '/annotate?where=' + url;
343 }
344 });
333345 }
334346 },
347 setImage: function(url) {
348 this.imgURL = url;
349
350 if(this.$img.attr('src') === this.imgURL) {
351 return;
352 }
353 anno.reset();
354 var self = this;
355 this.$overlay.show();
356 this.helpview.step(7);
357 this.$img.attr('src', this.imgURL);
358 },
335359 imageLoaded: function(event) {
336360 var self = event.data;
337361 console.log('image loaded');
……
635635 var $row_el;
636636 this.$el.html('');
637637 _.each(this.model, function(item, idx) {
638 // put every 3 items in a row
638639 if(idx % 3 === 0) {
639640 $row_el = $('<div class="row"></div>');
640641 this.$el.append($row_el);
……
646646 authors: item._source.authors
647647 }));
648648 }, this);
649 this.resolve();
649 this.resolveOCDURLs();
650650 },
651651 // resolve the OCD media URLs
652 resolve: function() {
652 resolveOCDURLs: function() {
653653 var self = this;
654654 $('.ocd-item').each(function(idx, elem) {
655655 var temp_arr = self.model[idx]._source.media_urls[0].url.split('/');
656656 var media_hash = temp_arr[temp_arr.length - 1];
657 $.get('/resolve-ocd-media/'+ media_hash, function(resp) {
658 $(elem).find('img').attr('src', resp);
657 $.get('/resolve-ocd-media', {hash: media_hash}, function(resp) {
658 $(elem).find('img').attr('src', resp.url);
659659 });
660660 });
661661 },
……
663663 event.preventDefault();
664664 // TODO: init the image anno
665665 var url = $(event.currentTarget).find('img').attr('src');
666 swtr.appView.loadURL(url);
666 swtr.appView.loadURL(url, 'image');
667667 return false;
668668 }
669669 });
……
682682 var text = '';
683683 switch (n) {
684684 case 0 : text = 'Getting annotations..';
685 break;
685 break;
686686 case 1: text = 'Enter the URL of an image or web page below, and start annotating!';
687 break;
687 break;
688688 case 2: text = 'Annotate the image, or see other annotations';
689 break;
689 break;
690690 case 3: text = 'Now you can sweet this annotation, or add more annotations';
691 break;
691 break;
692692 case 4: text = 'Click Sweet button to publish these annotations to the Sweet Store';
693 break;
693 break;
694694 case 5: text = 'Publishing your sweets';
695 break;
695 break;
696696 case 6: text = 'Sweets successfully posted';
697 break;
697 break;
698698 case 7: text = 'Fetching your image..';
699 break;
699 break;
700700 case 8: text = 'Oops! Seems like the image URL is wrong! Or we couldn\'t fetch the image.';
701 break;
701 break;
702702 case 9: text = 'You have to be <i>signed in</i> to sweet store to post sweets';
703 break;
703 break;
704704 case 10: text = 'Oops! Something went wrong. We couldn\'t publish the sweets. Try again.'
705 break;
705 break;
706706 case 11: text = 'Search in <a href="http://www.opencultuurdata.nl/">Open Cuultur Data API</a>';
707 break;
707 break;
708 case 12: text = 'Analyzing the resource type..';
709 break;
708710 }
709711 $(this.el).html(text);
710712 $(window).scrollTop(0, 0);
swtr/templates/index.html
(2 / 2)
  
7171 <div class="row">
7272 <div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well">
7373 {% if url %}
74 <img src="{{ url }}" id="annotatable-img" class="img-responsive">
74 <img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
7575 {% else %}
76 <img src="" id="annotatable-img" class="img-responsive">
76 <img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
7777 {% endif %}
7878 </div>
7979 <div id="ocd-results"></div>