Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lduarte1991
2014-10-14 13:00:47 -04:00
parent be81f1d297
commit 14dfe9a1e8
2 changed files with 101 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
common/static/js/vendor/ova/OpenSeaDragonAnnotation.js vendored
View File

@@ -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

117
common/static/js/vendor/ova/tags-annotator.js vendored
View File

@@ -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 = "<ul class=\"token-input-list\">";
for (tagnum = 0; tagnum < annotation.tags.length; ++tagnum){
if (typeof this.annotator.plugins["Flagging"] != 'undefined') {
if (annotation.tags[tagnum].indexOf("flagged-")==-1){
tokenList += "<li class=\"token-input-token\"><p>"+ annotation.tags[tagnum]+"</p></span></li>";
if (typeof this.annotator.plugins["Flagging"] !== 'undefined') {
// once again we ingore flags
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;
}
} else{
} else {
tokenList += "<li class=\"token-input-token\"><p>"+ annotation.tags[tagnum]+"</p></span></li>";
}
}
@@ -1136,7 +1199,7 @@ Annotator.Plugin.HighlightTags = (function(_super) {
//The following will call the colorize function during an external call and then return
//an event signaling completion.
HighlightTags.prototype.externalCall = function(){
HighlightTags.prototype.externalCall = function() {
this.colorize();
this.annotator.publish('finishedExternalCallToHighlightTags');
}