From 83fde84d2afb6e93b76213340269d7fa91c5b63c Mon Sep 17 00:00:00 2001 From: Anon Ray Date: Tue, 26 Aug 2014 16:08:56 +0530 Subject: [PATCH] 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 | 41 ++++++++++++------- swtr/static/js/swtmaker.js | 93 ++++++++++++++++++++++++++++---------------- swtr/templates/index.html | 4 +- 3 files changed, 88 insertions(+), 50 deletions(-) diff --git a/swtr/server.py b/swtr/server.py index 66e947f..069b9e3 100644 --- a/swtr/server.py +++ b/swtr/server.py @@ -85,7 +85,7 @@ def index(): # takes in `query`, `size`, and `from` parameters in query string # returns a JSON response @app.route('/search/ocd', methods=['GET']) -def search_ocd(): +def searchOCD(): query = flask.request.args.get('query') #collection = flask.request.args.get('collection') size = flask.request.args.get('size') or 10 @@ -117,15 +117,35 @@ def search_ocd(): # resolve OCD Media URLs: http://docs.opencultuurdata.nl/user/api.html#resolver -@app.route('/resolve-ocd-media/', methods=['GET']) -def resolve_ocd_media_urls(media_hash): +@app.route('/resolve-ocd-media', methods=['GET']) +def resolveOCDMediaURLs(): + + media_hash = flask.request.args.get('hash') or None + + if not media_hash: + flask.abort(400) resp = requests.get('http://api.opencultuurdata.nl/v0/resolve/' + media_hash) - response = flask.make_response() - response.data = resp.url - return response + return flask.jsonify(url=resp.url) + + +@app.route('/media-type', methods=['GET']) +def getMediaType(): + + where = flask.request.args.get('where') or None + + if not where: + flask.abort(400) + + resp = requests.get(where) + content = resp.text + + if imghdr.what('ignore', content) is None: + return flask.jsonify({'type': 'html'}) + else: + return flask.jsonify({'type': 'image'}) @app.route('/annotate', methods=['GET']) @@ -220,15 +240,6 @@ def addCSS(src, el): style.set("type", "text/css") -@app.route('/getMediaType') -def getMediaType(): - request = requests.get(flask.request.args['where']) - content = request.text - if imghdr.what('ignore', content) is None: - return flask.jsonify({'type': 'html'}) - else: - return flask.jsonify({'type': 'image'}) - # if the app is run directly from command-line # assume its being run locally in a dev environment if __name__ == '__main__': diff --git a/swtr/static/js/swtmaker.js b/swtr/static/js/swtmaker.js index 8131ce8..c86498e 100644 --- a/swtr/static/js/swtmaker.js +++ b/swtr/static/js/swtmaker.js @@ -306,31 +306,55 @@ this.loadURL(input); } }, - loadURL: function(url) { - $('#ocd-results').hide(); + loadURL: function(url, type) { + console.log('loadURL()'); + if(this.source !== 'ocd') { + $('#ocd-results').hide(); + } $('#img-annotation-wrapper').show(); if(!url) { return false; } - // if image url then load the image annotation + // if type is given explicitly; we load it as such. + if(type === 'image') { + this.setImage(url); + return false; + } + // else try to find what resource is the URL.. + // if url has an image extension then load the image annotation if(url.match(/.jpg|.jpeg|.png|.gif|.bmp|.svg/)) { - - this.imgURL = url; - - if(this.$img.attr('src') === this.imgURL) { - return; - } - anno.reset(); - var self = this; - this.$overlay.show(); - this.helpview.step(7); - this.$img.attr('src', this.imgURL); + this.setImage(url); return false; } - // else load text annotation + // else check with our /media-type endpoint to see what type of resource + // it is else { - window.location.href = '/annotate?where=' + url; + this.helpview.step(12); + this.$overlay.show(); + var self = this; + $.get('/media-type', {where: url}, function(response) { + //console.log(response); + self.$overlay.hide(); + if(response.type === 'image') { + self.setImage(url); + } + else { + window.location.href = '/annotate?where=' + url; + } + }); + } + }, + setImage: function(url) { + this.imgURL = url; + + if(this.$img.attr('src') === this.imgURL) { + return; } + anno.reset(); + var self = this; + this.$overlay.show(); + this.helpview.step(7); + this.$img.attr('src', this.imgURL); }, imageLoaded: function(event) { var self = event.data; @@ -611,6 +635,7 @@ var $row_el; this.$el.html(''); _.each(this.model, function(item, idx) { + // put every 3 items in a row if(idx % 3 === 0) { $row_el = $('
'); this.$el.append($row_el); @@ -621,16 +646,16 @@ authors: item._source.authors })); }, this); - this.resolve(); + this.resolveOCDURLs(); }, // resolve the OCD media URLs - resolve: function() { + resolveOCDURLs: function() { var self = this; $('.ocd-item').each(function(idx, elem) { var temp_arr = self.model[idx]._source.media_urls[0].url.split('/'); var media_hash = temp_arr[temp_arr.length - 1]; - $.get('/resolve-ocd-media/'+ media_hash, function(resp) { - $(elem).find('img').attr('src', resp); + $.get('/resolve-ocd-media', {hash: media_hash}, function(resp) { + $(elem).find('img').attr('src', resp.url); }); }); }, @@ -638,7 +663,7 @@ event.preventDefault(); // TODO: init the image anno var url = $(event.currentTarget).find('img').attr('src'); - swtr.appView.loadURL(url); + swtr.appView.loadURL(url, 'image'); return false; } }); @@ -657,29 +682,31 @@ var text = ''; switch (n) { case 0 : text = 'Getting annotations..'; - break; + break; case 1: text = 'Enter the URL of an image or web page below, and start annotating!'; - break; + break; case 2: text = 'Annotate the image, or see other annotations'; - break; + break; case 3: text = 'Now you can sweet this annotation, or add more annotations'; - break; + break; case 4: text = 'Click Sweet button to publish these annotations to the Sweet Store'; - break; + break; case 5: text = 'Publishing your sweets'; - break; + break; case 6: text = 'Sweets successfully posted'; - break; + break; case 7: text = 'Fetching your image..'; - break; + break; case 8: text = 'Oops! Seems like the image URL is wrong! Or we couldn\'t fetch the image.'; - break; + break; case 9: text = 'You have to be signed in to sweet store to post sweets'; - break; + break; case 10: text = 'Oops! Something went wrong. We couldn\'t publish the sweets. Try again.' - break; + break; case 11: text = 'Search in Open Cuultur Data API'; - break; + break; + case 12: text = 'Analyzing the resource type..'; + break; } $(this.el).html(text); $(window).scrollTop(0, 0); diff --git a/swtr/templates/index.html b/swtr/templates/index.html index b943897..dbb2e8d 100644 --- a/swtr/templates/index.html +++ b/swtr/templates/index.html @@ -71,9 +71,9 @@
{% if url %} - + Annotation Workbench {% else %} - + Annotation Workbench {% endif %}
-- 1.7.10.4