From 5132a5945fc5abc0083c7b97edad50aaaaed3074 Mon Sep 17 00:00:00 2001 From: Bhanu Date: Fri, 16 May 2014 20:17:26 +0530 Subject: [PATCH] Annotorious - editor UI options to add Label, Tags and related links - --- swtr/static/css/annotorious.css | 2 +- swtr/static/js/lib/custom-fields-plugin.js | 50 ++++++++++++++++++++++++++++ swtr/static/js/lib/label.js | 14 ++++++++ swtr/static/js/swtmaker.js | 43 ++++++++++++++++++++---- swtr/templates/index.html | 16 ++++++++- 5 files changed, 116 insertions(+), 9 deletions(-) create mode 100644 swtr/static/js/lib/custom-fields-plugin.js create mode 100644 swtr/static/js/lib/label.js diff --git a/swtr/static/css/annotorious.css b/swtr/static/css/annotorious.css index 767bf86..7fd0c71 100644 --- a/swtr/static/css/annotorious.css +++ b/swtr/static/css/annotorious.css @@ -234,7 +234,7 @@ border-bottom:1px solid #ccc; margin:0px; background-color:#fff; - padding:3px; + /*padding:3px;*/ font-family:Verdana, Arial; font-size:12px; } diff --git a/swtr/static/js/lib/custom-fields-plugin.js b/swtr/static/js/lib/custom-fields-plugin.js new file mode 100644 index 0000000..3630b81 --- /dev/null +++ b/swtr/static/js/lib/custom-fields-plugin.js @@ -0,0 +1,50 @@ +/** + * A plugin that adds 'Semantic Tagging' functionality to Annotorious. + * While typing an annotation in the editor, the text is sent to the plugin's + * server counterpart for Named Entity Recognition (NER). Recognized entities + * are suggested as possible tags, and the user can add them to the annotation + * by clicking on them. Tags are Semantic Tags in the sense that they are not + * just strings, but (underneath the hood) include a URI pointing to a concept + * in a specific 'knowledge context', hosted at the server. + * + * The config options for the plugin require a field named 'endpoint_url', + * holding the URL of the server endpoint to use as the NER/tag-suggestion + * service. + * + * @param {Object=} opt_config_options the config options + */ +annotorious.plugin.CustomFields = function(opt_config_options) { + + //Container for custom fields + + + /** @private **/ + //this._tags = []; + // this._link =[]; + // this._label= []; + //annotorious.Annotation(tags); + + + /** @private **/ +/** this._ENDPOINT_URI = opt_config_options['endpoint_url']; + + if (this._ENDPOINT_URI[this._ENDPOINT_URI.length - 1] != '/') + this._ENDPOINT_URI += '/'; + + this._ENDPOINT_URI += + 'services/wikify?minProbability=0.1&disambiguationPolicy=loose&responseFormat=json&source='; **/ +} + +annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) { + var container = document.createElement('div'); + container.className = "btn-group"; + console.log (container); + + var textTemplate= _.template($('#button-template').html()); + console.log($(textTemplate)); + annotorious.editor.addField(textTemplate); + + //this._EditField(annotorious); + //this._popupField(annotator); + //this._extendEditor(annotator); +} diff --git a/swtr/static/js/lib/label.js b/swtr/static/js/lib/label.js new file mode 100644 index 0000000..a72af45 --- /dev/null +++ b/swtr/static/js/lib/label.js @@ -0,0 +1,14 @@ + +annotorious.plugin.CustomFields.prototype._EditField = function (annotorious) { + //Container for custom fields + var container = document.createElement('div'); + container.className = "btn-group"; + console.log (container); + + + window.container = container; + + var textTemplate= _.template($('#button-template').html()); + console.log($(textTemplate)); + annotorious.editor.addField(textTemplate); +} diff --git a/swtr/static/js/swtmaker.js b/swtr/static/js/swtmaker.js index 02c4778..a6c4e2d 100644 --- a/swtr/static/js/swtmaker.js +++ b/swtr/static/js/swtmaker.js @@ -98,7 +98,7 @@ new_models.push(model); } }); - return new_models; + return new_models; }, // update part of the collection after a save on the server update: function() { @@ -144,7 +144,7 @@ swtr.appView.$overlay.show(); this.collection.post({ success: function(collection, response) { - //console.log(collection, response); + console.log(collection, response); swtr.sweets.update(collection); //TODO: move this to a annotation view or something anno.removeAll(); @@ -153,6 +153,7 @@ swt.get('how')['editable'] = false; swt.get('how').text += '\n - by ' + swt.get('who'); } + console.log(swt.get('how')); anno.addAnnotation(swt.get('how')); }); //console.log(swtr.sweets.toJSON()); @@ -178,7 +179,8 @@ 'click #img-url-submit': 'setImage', 'click #sweet': 'sweet', 'click #signin-credentials': 'getSignInCredentials', - 'click #setbox': 'showHide' + 'click #setbox': 'showHide', + 'click #comment, #label, #tags, #links ': 'button_custom' }, initialize: function() { //var allElements = $('body *'); @@ -190,8 +192,8 @@ anno.hideAnnotations();}); anno.addHandler('onSelectionCompleted', function(annotation) { anno.showAnnotations(); }); - - + anno.addPlugin('CustomFields', this.showSwtHelp); + anno.addHandler('onSelectionCompleted', this.setShape); this.$overlay = $('#app-overlay'); this.$img = $('#annotatable-img'); this.imgURL = this.$img.attr('src'); @@ -203,6 +205,9 @@ this.helpview.step(1); } }, + setShape: function(annotation) { + window.annotation=annotation; + }, setImage: function() { anno.reset(); @@ -286,6 +291,30 @@ } }, + + /*build_txt: function(opt_array) { + var textarray = opt_array; + var newobj = [textarray]; + console.log(newarray); + + },*/ + button_custom: function(event) { + var src = $('#img-url-input').val(); + var newanno= {}; + var tempinput = $('.annotorious-editor-text:first'); + //type setting + // var type = $(tempinput).attr("placeholder").slice(5); + //console.log(type); + newanno.text = tempinput.val(); + newanno.src = src; + $(tempinput).val(""); + var placeHolder = "Add "+event.currentTarget.innerHTML; + $(tempinput).attr("placeholder", placeHolder); + newanno.shapes = [{'type':annotation.shape.type, 'geometry':{'x':annotation.shape.geometry.x, 'y':annotation.shape.geometry.y, 'width':annotation.shape.geometry.width, 'height':annotation.shape.geometry.height}}]; + anno.addAnnotation(newanno); + //swtr.appView.ShowSwtHelp; + }, + getSignInCredentials: function(event) { event.preventDefault(); if(swtr.who === 'Guest' && !$('#username').length) { @@ -343,9 +372,9 @@ break; case 2: text = 'Annotate the image, or see other annotations'; break; - case 3: text = 'Now you can sweet this annotation.'; + case 3: text = 'Now you can sweet this annotation, or add more annotations'; break; - case 4: text = 'Click button to sweet these sweet annotations'; + case 4: text = 'Click Sweet button to publish these annotations to the Sweet Store'; break; case 5: text = 'Publishing your sweets'; break; diff --git a/swtr/templates/index.html b/swtr/templates/index.html index fa59935..137e4e9 100644 --- a/swtr/templates/index.html +++ b/swtr/templates/index.html @@ -66,6 +66,8 @@ + + @@ -85,6 +87,18 @@ - + + -- 1.7.10.4