From 14dfe9a1e859047622390fb11cebe054095dff04 Mon Sep 17 00:00:00 2001 From: lduarte1991 Date: Tue, 14 Oct 2014 13:00:47 -0400 Subject: [PATCH] Image Annotation Tool: Double border, color borders and tag buttons --- .../js/vendor/ova/OpenSeaDragonAnnotation.js | 13 +- common/static/js/vendor/ova/tags-annotator.js | 117 ++++++++++++++---- 2 files changed, 101 insertions(+), 29 deletions(-) diff --git a/common/static/js/vendor/ova/OpenSeaDragonAnnotation.js b/common/static/js/vendor/ova/OpenSeaDragonAnnotation.js index 3b65823abd..8995eccbb2 100644 --- a/common/static/js/vendor/ova/OpenSeaDragonAnnotation.js +++ b/common/static/js/vendor/ova/OpenSeaDragonAnnotation.js @@ -231,7 +231,11 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. var span = document.createElement('span'); var rectPosition = an.rangePosition; span.className = "annotator-hl"; - span.style.border = '2px solid rgba(0,0,0,0.5)'; + + // outline and border below create a double line one black and one white + // so to be able to differentiate when selecting dark or light images + span.style.border = '2px solid rgb(255, 255, 255)'; + span.style.outline = '2px solid rgb(0, 0, 0)'; span.style.background = 'rgba(0,0,0,0)'; // Adds listening items for the viewer and editor @@ -305,7 +309,12 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. viewer.innerTracker.setTracking(false); this.rect = document.createElement('div'); this.rect.style.background = 'rgba(0,0,0,0)'; - this.rect.style.border = '2px solid rgba(0,0,0,0.5)'; + + // outline and border below create a double line one black and one white + // so to be able to differentiate when selecting dark or light images + this.rect.style.border = '2px solid rgb(255, 255, 255)'; + this.rect.style.outline = '2px solid rgb(0, 0, 0)'; + this.rect.style.position = 'absolute'; this.rect.className = 'DrawingRect'; // set the initial position diff --git a/common/static/js/vendor/ova/tags-annotator.js b/common/static/js/vendor/ova/tags-annotator.js index d418f65a92..0597d1c6e6 100644 --- a/common/static/js/vendor/ova/tags-annotator.js +++ b/common/static/js/vendor/ova/tags-annotator.js @@ -947,11 +947,13 @@ Annotator.Plugin.HighlightTags = (function(_super) { this.colors = this.getHighlightTags(); var self = this; - this.annotator.subscribe('annotationsLoaded', function(){setTimeout(function(){self.colorize()},1000)}); - this.annotator.subscribe('annotationUpdated', this.colorize); + + // all of these need time for the annotations database to respond + this.annotator.subscribe('annotationsLoaded', function(){setTimeout(function(){self.colorize()}, 1000)}); + this.annotator.subscribe('annotationUpdated', function(){setTimeout(function(){self.colorize()}, 1000)}); this.annotator.subscribe('flaggedAnnotation', this.updateViewer); - this.annotator.subscribe('annotationCreated', this.colorize); - this.annotator.subscribe('externalCallToHighlightTags', this.externalCall); + this.annotator.subscribe('annotationCreated', function(){setTimeout(function(){self.colorize()}, 1000)}); + this.annotator.subscribe('externalCallToHighlightTags', function(){setTimeout(function(){self.externalCall()}, 1000)}); }; @@ -1029,31 +1031,54 @@ Annotator.Plugin.HighlightTags = (function(_super) { for (annNum = 0; annNum < annotations.length; ++annNum){ var anns = $.data(annotations[annNum],"annotation"); if (typeof anns.tags != "undefined" && anns.tags.length == 0) { - $(annotations[annNum]).css("background-color",""); + // image annotations should not change the background of the highlight + // only the border so as not to block the image behind it. + if (anns.media !== "image") { + $(annotations[annNum]).css("background-color",""); + } else { + $(annotations[annNum]).css("border", "2px solid rgb(255, 255, 255)"); + $(annotations[annNum]).css("outline", "2px solid rgb(0, 0, 0)"); + } } if (typeof anns.tags != "undefined" && this.colors !== {}) { - for(var index = 0; index < anns.tags.length; ++index){ - if(anns.tags[index].indexOf("flagged-") == -1){ - if (typeof this.colors[anns.tags[index]] != "undefined") { + for (var index = 0; index < anns.tags.length; ++index) { + if (anns.tags[index].indexOf("flagged-") == -1) { + if (typeof this.colors[anns.tags[index]] !== "undefined") { var finalcolor = this.colors[anns.tags[index]]; - $(annotations[annNum]).css( - "background", - // last value, 0.3 is the standard highlight opacity for annotator - "rgba(" + finalcolor.red + ", " + finalcolor.green + ", " + finalcolor.blue + ", 0.3)" - ); - }else{ - $(annotations[annNum]).css( - "background", - // returns the value to the inherited value without the above - "" - ); + // if it's a text change the background + if (anns.media !== "image") { + $(annotations[annNum]).css( + "background", + // last value, 0.3 is the standard highlight opacity for annotator + "rgba(" + finalcolor.red + ", " + finalcolor.green + ", " + finalcolor.blue + ", 0.3)" + ); + } + // if it's an image change the dark border/outline leave the white one as is + else { + $(annotations[annNum]).css( + "outline", + "2px solid rgb(" + finalcolor.red + ", " + finalcolor.green + ", " + finalcolor.blue + ")" + ); + } + } else { + // if the last tag was not predetermined by instrutor background should go back to default + if (anns.media !== "image") { + $(annotations[annNum]).css( + "background", + // returns the value to the inherited value without the above + "" + ); + } } } } - }else{ - $(annotations[annNum]).css("background",""); + } else { + // if there are no tags or predefined colors, keep the background at default + if (anns.media !== "image"){ + $(annotations[annNum]).css("background",""); + } } } @@ -1088,7 +1113,30 @@ Annotator.Plugin.HighlightTags = (function(_super) { } } } - + this.colorizeEditorTags(); + } + + // this function adds the appropriate color to the tag divs for each annotation + HighlightTags.prototype.colorizeEditorTags = function() { + var self = this; + $.each($('.annotator-editor .token-input-token'), function(key, tagdiv) { + // default colors are black for text and the original powder blue (already default) + var rgbColor = ""; + var textColor = "color:#000;"; + var par = $(tagdiv).find("p"); + + // if the tag has a predetermined color attached to it, + // then it changes the background and turns text white + if (typeof self.colors[par.html()] !== "undefined") { + var finalcolor = self.colors[par.html()]; + rgbColor = "background-color:rgba(" + finalcolor.red + ", " + finalcolor.green + ", " + finalcolor.blue + ", 0.5);"; + textColor = "color:#fff;"; + } + + // note that to change the text color you must change it in the paragraph tag, not the div + $(tagdiv).attr('style', rgbColor); + par.attr('style', textColor); + }); } //The following function is run when a person hits submit. @@ -1113,12 +1161,27 @@ Annotator.Plugin.HighlightTags = (function(_super) { var nonFlagTags = true; var tokenList = "