Skip to content

E
edx-platform
Commit e5514c92 by lduarte1991 Committed by Zia Fazal
Options

Image Annotation Tool: Double border, color borders and tag buttons

parent 8fb680aa
Showing with 101 additions and 29 deletions
common/static/js/vendor/ova/OpenSeaDragonAnnotation.js
...@@ -231,7 +231,11 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. ...@@ -231,7 +231,11 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
var span = document.createElement('span'); var span = document.createElement('span');
var rectPosition = an.rangePosition; var rectPosition = an.rangePosition;
span.className = "annotator-hl"; 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)'; span.style.background = 'rgba(0,0,0,0)';
// Adds listening items for the viewer and editor // Adds listening items for the viewer and editor
...@@ -305,7 +309,12 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. ...@@ -305,7 +309,12 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
viewer.innerTracker.setTracking(false); viewer.innerTracker.setTracking(false);
this.rect = document.createElement('div'); this.rect = document.createElement('div');
this.rect.style.background = 'rgba(0,0,0,0)'; 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.style.position = 'absolute';
this.rect.className = 'DrawingRect'; this.rect.className = 'DrawingRect';
// set the initial position // set the initial position
......
common/static/js/vendor/ova/tags-annotator.js
...@@ -947,11 +947,13 @@ Annotator.Plugin.HighlightTags = (function(_super) { ...@@ -947,11 +947,13 @@ Annotator.Plugin.HighlightTags = (function(_super) {
this.colors = this.getHighlightTags(); this.colors = this.getHighlightTags();
var self = this; 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('flaggedAnnotation', this.updateViewer);
this.annotator.subscribe('annotationCreated', this.colorize); this.annotator.subscribe('annotationCreated', function(){setTimeout(function(){self.colorize()}, 1000)});
this.annotator.subscribe('externalCallToHighlightTags', this.externalCall); this.annotator.subscribe('externalCallToHighlightTags', function(){setTimeout(function(){self.externalCall()}, 1000)});
}; };
...@@ -1029,31 +1031,54 @@ Annotator.Plugin.HighlightTags = (function(_super) { ...@@ -1029,31 +1031,54 @@ Annotator.Plugin.HighlightTags = (function(_super) {
for (annNum = 0; annNum < annotations.length; ++annNum){ for (annNum = 0; annNum < annotations.length; ++annNum){
var anns = $.data(annotations[annNum],"annotation"); var anns = $.data(annotations[annNum],"annotation");
if (typeof anns.tags != "undefined" && anns.tags.length == 0) { 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 !== {}) { if (typeof anns.tags != "undefined" && this.colors !== {}) {
for(var index = 0; index < anns.tags.length; ++index){ for (var index = 0; index < anns.tags.length; ++index) {
if(anns.tags[index].indexOf("flagged-") == -1){ if (anns.tags[index].indexOf("flagged-") == -1) {
if (typeof this.colors[anns.tags[index]] != "undefined") { if (typeof this.colors[anns.tags[index]] !== "undefined") {
var finalcolor = this.colors[anns.tags[index]]; var finalcolor = this.colors[anns.tags[index]];
$(annotations[annNum]).css( // if it's a text change the background
"background", if (anns.media !== "image") {
// last value, 0.3 is the standard highlight opacity for annotator $(annotations[annNum]).css(
"rgba(" + finalcolor.red + ", " + finalcolor.green + ", " + finalcolor.blue + ", 0.3)" "background",
); // last value, 0.3 is the standard highlight opacity for annotator
}else{ "rgba(" + finalcolor.red + ", " + finalcolor.green + ", " + finalcolor.blue + ", 0.3)"
$(annotations[annNum]).css( );
"background", }
// returns the value to the inherited value without the above // 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{ } else {
$(annotations[annNum]).css("background",""); // 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) { ...@@ -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. //The following function is run when a person hits submit.
...@@ -1113,12 +1161,27 @@ Annotator.Plugin.HighlightTags = (function(_super) { ...@@ -1113,12 +1161,27 @@ Annotator.Plugin.HighlightTags = (function(_super) {
var nonFlagTags = true; var nonFlagTags = true;
var tokenList = "<ul class=\"token-input-list\">"; var tokenList = "<ul class=\"token-input-list\">";
for (tagnum = 0; tagnum < annotation.tags.length; ++tagnum){ for (tagnum = 0; tagnum < annotation.tags.length; ++tagnum){
if (typeof this.annotator.plugins["Flagging"] != 'undefined') { if (typeof this.annotator.plugins["Flagging"] !== 'undefined') {
if (annotation.tags[tagnum].indexOf("flagged-")==-1){ // once again we ingore flags
tokenList += "<li class=\"token-input-token\"><p>"+ annotation.tags[tagnum]+"</p></span></li>"; if (annotation.tags[tagnum].indexOf("flagged-") == -1) {
// once again, defaults are black for text and powder blue default from token function
var rgbColor = "";
var textColor = "#000";
// if there is a color associated with the tag, it will change the background
// and change the text to white
if (typeof this.colors[annotation.tags[tagnum]] !== "undefined") {
var finalcolor = this.colors[annotation.tags[tagnum]];
rgbColor = "style=\"background-color:rgba(" + finalcolor.red + ", " + finalcolor.green + ", " + finalcolor.blue + ", 0.5);\"";
textColor = "#fff";
}
// note: to change text color you need to do it in the paragrph tag not the div
tokenList += "<li class=\"token-input-token\"" + rgbColor + "><p style=\"color: " + textColor + ";\">"+ annotation.tags[tagnum]+"</p></span></li>";
nonFlagTags = false; nonFlagTags = false;
} }
} else{ } else {
tokenList += "<li class=\"token-input-token\"><p>"+ annotation.tags[tagnum]+"</p></span></li>"; tokenList += "<li class=\"token-input-token\"><p>"+ annotation.tags[tagnum]+"</p></span></li>";
} }
} }
...@@ -1136,7 +1199,7 @@ Annotator.Plugin.HighlightTags = (function(_super) { ...@@ -1136,7 +1199,7 @@ Annotator.Plugin.HighlightTags = (function(_super) {
//The following will call the colorize function during an external call and then return //The following will call the colorize function during an external call and then return
//an event signaling completion. //an event signaling completion.
HighlightTags.prototype.externalCall = function(){ HighlightTags.prototype.externalCall = function() {
this.colorize(); this.colorize();
this.annotator.publish('finishedExternalCallToHighlightTags'); this.annotator.publish('finishedExternalCallToHighlightTags');
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment