From 6dd7805c77f30bc1eba1fb1910a2feb0fa94b3d7 Mon Sep 17 00:00:00 2001 From: Rashmi Singhal Date: Thu, 9 Jun 2016 12:05:25 -0400 Subject: [PATCH 1/9] started adding new icons for various image manipulation options --- css/mirador.css | 11 +++++ js/src/settings.js | 24 +++++----- js/src/widgets/contextControls.js | 77 ++++++++++++++++++++++++++----- js/src/widgets/hud.js | 2 +- js/src/widgets/imageView.js | 10 ++-- 5 files changed, 96 insertions(+), 28 deletions(-) diff --git a/css/mirador.css b/css/mirador.css index 1c1ba522d1..04bc49ab82 100644 --- a/css/mirador.css +++ b/css/mirador.css @@ -1165,12 +1165,23 @@ li.highlight { top: 10px; left: 10px; transition: none; + width: 100% } .mirador-osd-context-controls a { float:left; margin:0 10px 0 0; font-weight: normal; } +.mirador-annotation-controls { + position: absolute; + top: 0px; + left: 0px; +} +.mirador-manipulation-controls { + position: absolute; + top: 30px; + left: 0px; +} /* color picker custom style ---------------------------------------------------------------------------- */ diff --git a/js/src/settings.js b/js/src/settings.js index ea5eceb884..7ee22e459b 100644 --- a/js/src/settings.js +++ b/js/src/settings.js @@ -56,6 +56,7 @@ }, "sidePanelVisible" : true, //whether or not to make the side panel visible in this window on load. This setting is dependent on sidePanel being true "overlay" : true, //whether or not to make the metadata overlay available/visible in this window + "canvasControls": ['Annotation', 'Manipulation'], // These are, at the top level, the types of controls available to be displayed on a canvas. "annotationLayer" : true, //whether or not to make annotation layer available in this window "annotationCreation" : true, /*whether or not to make annotation creation available in this window, only valid if annotationLayer is set to True and an annotationEndpoint is defined. @@ -96,17 +97,6 @@ ], - 'availableAnnotationDrawingTools': [ - 'Rectangle', 'Ellipse', 'Freehand', 'Polygon', 'Pin' - ], - - 'drawingToolsSettings': { - 'doubleClickReactionTime': 300, - 'strokeColor': 'deepSkyBlue', - 'fillColor': 'deepSkyBlue', - 'fillColorAlpha': 0.0 - }, - 'availableCanvasTools': [ ], @@ -159,11 +149,23 @@ * } **/ 'annotationEndpoint': {}, + 'annotationBodyEditor': { 'module': 'TinyMCEAnnotationBodyEditor', 'options': {} }, + 'availableAnnotationDrawingTools': [ + 'Rectangle', 'Ellipse', 'Freehand', 'Polygon', 'Pin' + ], + + 'drawingToolsSettings': { + 'doubleClickReactionTime': 300, + 'strokeColor': 'deepSkyBlue', + 'fillColor': 'deepSkyBlue', + 'fillColorAlpha': 0.0 + }, + 'jsonStorageEndpoint': { 'name': 'JSONBlob API Endpoint', 'module': 'JSONBlobAPI', diff --git a/js/src/widgets/contextControls.js b/js/src/widgets/contextControls.js index a371b32dd4..a2d8b68069 100644 --- a/js/src/widgets/contextControls.js +++ b/js/src/widgets/contextControls.js @@ -20,10 +20,27 @@ init: function() { var _this = this; this.element = jQuery(this.template({ - tools : _this.availableTools, + tools : _this.availableAnnotationTools, showEdit : this.annotationCreationAvailable, showRefresh : this.annotationRefresh })).appendTo(this.container); + + this.setBorderFillColorPickers(); + this.hide(); + this.bindEvents(); + }, + + show: function() { + this.element.fadeIn("200"); + }, + + hide: function(complete) { + this.element.fadeOut("200", complete); + }, + + setBorderFillColorPickers: function() { + var _this = this; + _this.container.find(".borderColorPicker").spectrum({ showInput: true, showInitial: true, @@ -53,18 +70,25 @@ ["white", "cyan", "magenta", "yellow"] ] }); + _this.container.find(".borderColorPicker").next(".sp-replacer").prepend("border_color"); + var borderPicker = jQuery('.borderColorPickerPop'+_this.windowId); + borderPicker.find(".sp-cancel").html('Cancel'); borderPicker.find(".sp-cancel").parent().append('Choose'); borderPicker.find('button.sp-choose').hide(); + borderPicker.find('a.sp-cancel').on('click', function() { jQuery.data(document.body, 'borderColorPickerPop' + _this.windowId, null); }); + jQuery._data(borderPicker.find(".sp-cancel")[0], "events").click.reverse(); + borderPicker.find('a.sp-choose').on('click',function(){ borderPicker.find('button.sp-choose').click(); }); + _this.container.find(".fillColorPicker").spectrum({ showInput: true, showInitial: true, @@ -96,28 +120,24 @@ ["white", "cyan", "magenta", "yellow"] ] }); + _this.container.find(".fillColorPicker").next(".sp-replacer").prepend("format_color_fill"); + var fillPicker = jQuery('.fillColorPickerPop'+_this.windowId); + fillPicker.find(".sp-cancel").html('Cancel'); fillPicker.find(".sp-cancel").parent().append('Choose'); fillPicker.find('button.sp-choose').hide(); + fillPicker.find('a.sp-cancel').on('click', function() { jQuery.data(document.body, 'fillColorPickerPop' + _this.windowId, null); }); + jQuery._data(fillPicker.find(".sp-cancel")[0], "events").click.reverse(); + fillPicker.find('a.sp-choose').on('click',function(){ fillPicker.find('button.sp-choose').click(); }); - this.hide(); - this.bindEvents(); - }, - - show: function() { - this.element.fadeIn("200"); - }, - - hide: function(complete) { - this.element.fadeOut("200", complete); }, bindEvents: function() { @@ -131,6 +151,7 @@ template: Handlebars.compile([ '
', + '
', '', '', '', @@ -170,6 +191,40 @@ '', '{{/if}}', '{{/if}}', + '
', + '
', + '', + 'tune', + '', + '', + '', + '', + '', + '', + '', + '', + 'wb_sunny', + '', + '', + '', + 'brightness_6', + '', + '', + '', + 'gradient', + '', + '', + '', + 'filter_b_and_w', + '', + '', + 'invert_colors', + '', + '', + '', + '', + '
', + '
', /*'', '', '',*/ diff --git a/js/src/widgets/hud.js b/js/src/widgets/hud.js index 9d47ccb430..0e4cb93b70 100644 --- a/js/src/widgets/hud.js +++ b/js/src/widgets/hud.js @@ -33,7 +33,7 @@ windowId: this.windowId, annotationCreationAvailable: this.annotationCreationAvailable, annotationRefresh: this.annotationRefresh, - availableTools: this.availableTools, + availableAnnotationTools: this.availableAnnotationTools, eventEmitter: this.eventEmitter }); } diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js index d478b0b7c4..d578096bbc 100755 --- a/js/src/widgets/imageView.js +++ b/js/src/widgets/imageView.js @@ -54,11 +54,11 @@ _this.eventEmitter.publish('UPDATE_FOCUS_IMAGES.' + this.windowId, {array: [this.canvasID]}); var allTools = $.getTools(); - this.availableTools = []; + this.availableAnnotationTools = []; for ( var i = 0; i < this.state.getStateProperty('availableAnnotationDrawingTools').length; i++) { for ( var j = 0; j < allTools.length; j++) { if (this.state.getStateProperty('availableAnnotationDrawingTools')[i] == allTools[j].name) { - this.availableTools.push(allTools[j].logoClass); + this.availableAnnotationTools.push(allTools[j].logoClass); } } } @@ -73,7 +73,7 @@ annotationRefresh: this.annotationRefresh, annoEndpointAvailable: this.annoEndpointAvailable, showNextPrev : this.imagesList.length !== 1, - availableTools: this.availableTools, + availableAnnotationTools: this.availableAnnotationTools, eventEmitter: this.eventEmitter }); @@ -288,8 +288,8 @@ _this.eventEmitter.publish('toggleDrawingTool.'+_this.windowId, shapeMode); }; } - for (var value in _this.availableTools) { - this.element.find('.material-icons:contains(\'' + _this.availableTools[value] + '\')').on('click', make_handler(_this.availableTools[value])); + for (var value in _this.availableAnnotationTools) { + this.element.find('.material-icons:contains(\'' + _this.availableAnnotationTools[value] + '\')').on('click', make_handler(_this.availableAnnotationTools[value])); } //related the ContextControls }, From faa8dd8bd2e84b946f05263026e674a49735ebf4 Mon Sep 17 00:00:00 2001 From: Rashmi Singhal Date: Fri, 17 Jun 2016 16:26:13 -0400 Subject: [PATCH 2/9] add sliders for brightness, contrast, and saturation. controls now change css filter property and rotate uses OSD functionality --- js/src/widgets/contextControls.js | 107 ++++++++++++------- js/src/widgets/hud.js | 53 ++++++++-- js/src/widgets/imageView.js | 167 +++++++++++++++++++++++++++++- locales/en/translation.json | 10 +- 4 files changed, 289 insertions(+), 48 deletions(-) diff --git a/js/src/widgets/contextControls.js b/js/src/widgets/contextControls.js index cd6b16f8a5..a70bc63481 100644 --- a/js/src/widgets/contextControls.js +++ b/js/src/widgets/contextControls.js @@ -20,17 +20,43 @@ init: function() { var _this = this; - this.element = jQuery(this.annotationTemplate({ + this.annotationElement = jQuery(this.annotationTemplate({ tools : _this.availableAnnotationTools, showEdit : this.annotationCreationAvailable, showRefresh : this.annotationRefresh })).appendTo(this.container.find('.mirador-osd-annotation-controls')); + this.manipulationElement = jQuery(this.manipulationTemplate({ + })).appendTo(this.container.find('.mirador-manipulation-controls')); + + this.setQtips(); + + this.annotationElement.hide(); + this.manipulationElement.hide(); + this.setBorderFillColorPickers(); - this.hide(); this.bindEvents(); }, + setQtips: function() { + var _this = this; + _this.manipulationElement.each(function() { + jQuery(this).qtip({ + content: { + text: jQuery(this).attr('title'), + }, + position: { + my: 'bottom center', + at: 'top center', + viewport: true + }, + style: { + classes: 'qtip-dark qtip-shadow qtip-rounded' + } + }); + }); + }, + setBorderFillColorPickers: function() { var _this = this; _this.container.find(".borderColorPicker").spectrum({ @@ -132,21 +158,29 @@ }); }, - show: function() { - this.element.fadeIn("150"); + annotationShow: function() { + this.annotationElement.fadeIn("150"); + }, + + annotationHide: function() { + this.annotationElement.fadeOut("150"); + }, + + manipulationShow: function() { + this.manipulationElement.fadeIn("150"); }, - hide: function() { - this.element.fadeOut("150"); + manipulationHide: function() { + this.manipulationElement.fadeOut("150"); }, bindEvents: function() { var _this = this; - this.container.find('.mirador-osd-back').on('click', function() { - _this.element.remove(); - _this.element = jQuery(_this.template()).appendTo(_this.container); - _this.bindEvents(); - }); + // this.container.find('.mirador-osd-back').on('click', function() { + // _this.element.remove(); + // _this.element = jQuery(_this.template()).appendTo(_this.container); + // _this.bindEvents(); + // }); }, annotationTemplate: Handlebars.compile([ @@ -185,50 +219,49 @@ '', '', '{{/if}}', - '{{/if}}', - '', - '
', - '', - 'tune', - '', - '', + '{{/if}}' + /*'', + '', + '',*/ + /*'', + '', + '',*/ + /*'', + '', + '',*/ + ].join('')), + + manipulationTemplate: Handlebars.compile([ + '', '', '', - '', + '', '', '', - '', + '', 'wb_sunny', '', + '
', '', - '', + '', 'brightness_6', '', + '
', '', - '', + '', 'gradient', '', + '
', '', - '', + '', 'filter_b_and_w', '', - '', + '', 'invert_colors', '', - '', + '', '', - '', - '
', - '
', - /*'', - '', - '',*/ - /*'', - '', - '',*/ - /*'', - '', - '',*/ + '' ].join('')), // for accessibility, make sure to add aria-labels just like above diff --git a/js/src/widgets/hud.js b/js/src/widgets/hud.js index 54504cca3e..2caa8bea4f 100644 --- a/js/src/widgets/hud.js +++ b/js/src/widgets/hud.js @@ -17,7 +17,7 @@ $.Hud.prototype = { init: function() { - this.createStateMachine(); + this.createStateMachines(); this.element = jQuery(this.template({ showNextPrev : this.showNextPrev, @@ -45,10 +45,11 @@ var _this = this; }, - createStateMachine: function() { - //add more to these as AnnoState becomes more complex + createStateMachines: function() { var _this = this, duration = "200"; + + //add more to these as AnnoState becomes more complex //initial state is 'none' this.annoState = StateMachine.create({ events: [ @@ -70,7 +71,7 @@ ondisplayOn: function(event, from, to) { _this.eventEmitter.publish('HUD_ADD_CLASS.'+_this.windowId, ['.mirador-osd-annotations-layer', 'selected']); if (_this.annoEndpointAvailable) { - _this.contextControls.show(); + _this.contextControls.annotationShow(); } _this.eventEmitter.publish('modeChange.' + _this.windowId, 'displayAnnotations'); _this.eventEmitter.publish(('windowUpdated'), { @@ -92,7 +93,7 @@ } if (_this.annoEndpointAvailable) { if (from === "annoOff") { - _this.contextControls.show(); + _this.contextControls.annotationShow(); enableEditingAnnotations(); } else { enableEditingAnnotations(); @@ -121,7 +122,7 @@ ondisplayOff: function(event, from, to) { if (_this.annoEndpointAvailable) { _this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.mirador-osd-edit-mode', 'selected']); - _this.contextControls.hide(); + _this.contextControls.annotationHide(); } _this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.mirador-osd-annotations-layer', 'selected']); _this.eventEmitter.publish('modeChange.' + _this.windowId, 'default'); @@ -132,6 +133,38 @@ } } }); + + this.manipulationState = StateMachine.create({ + events: [ + { name: 'startup', from: 'none', to: 'manipulationOff' }, + { name: 'displayOn', from: 'manipulationOff', to: 'manipulationOn' }, + { name: 'displayOff', from: 'manipulationOn', to: 'manipulationOff' } + ], + callbacks: { + onstartup: function(event, from, to) { + _this.eventEmitter.publish(('windowUpdated'), { + id: _this.windowId, + manipulationState: to + }); + }, + ondisplayOn: function(event, from, to) { + _this.eventEmitter.publish('HUD_ADD_CLASS.'+_this.windowId, ['.mirador-manipulation-toggle', 'selected']); + _this.contextControls.manipulationShow(); + _this.eventEmitter.publish(('windowUpdated'), { + id: _this.windowId, + manipulationState: to + }); + }, + ondisplayOff: function(event, from, to) { + _this.contextControls.manipulationHide(); + _this.eventEmitter.publish('HUD_REMOVE_CLASS.'+_this.windowId, ['.mirador-manipulation-toggle', 'selected']); + _this.eventEmitter.publish(('windowUpdated'), { + id: _this.windowId, + manipulationState: to + }); + } + } + }); }, template: Handlebars.compile([ @@ -149,6 +182,14 @@ '', '
', '{{/if}}', + //TODO: implement this boolean setting + //'{{#if showImageControls}}', + '
', + '', + 'tune', + '', + '
', + //'{{/if}}', '
', '{{#if showNextPrev}}', '', diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js index 8785657933..f920e7cb79 100755 --- a/js/src/widgets/imageView.js +++ b/js/src/widgets/imageView.js @@ -188,7 +188,7 @@ _this.previous(); }); - this.element.find('.mirador-osd-annotations-layer').on('click', $.debounce(function() { + this.element.find('.mirador-osd-annotations-layer').on('click', function() { if (_this.hud.annoState.current === 'none') { _this.hud.annoState.startup(this); } @@ -199,7 +199,18 @@ _this.forceShowControls = false; _this.hud.annoState.displayOff(this); } - },300)); + }); + + this.element.find('.mirador-manipulation-toggle').on('click', function() { + if (_this.hud.manipulationState.current === 'none') { + _this.hud.manipulationState.startup(this); + } + if (_this.hud.manipulationState.current === 'manipulationOff') { + _this.hud.manipulationState.displayOn(this); + } else { + _this.hud.manipulationState.displayOff(this); + } + }); this.element.find('.mirador-osd-go-home').on('click', function() { _this.osd.viewport.goHome(); @@ -249,7 +260,7 @@ _this.eventEmitter.publish('TOGGLE_BOTTOM_PANEL_VISIBILITY.' + _this.windowId); }); - //related the ContextControls + //Annotation specific controls this.element.find('.mirador-osd-edit-mode').on('click', function() { if (_this.hud.annoState.current === 'annoOnCreateOff') { _this.hud.annoState.createOn(); @@ -286,7 +297,155 @@ for (var value in _this.availableAnnotationTools) { this.element.find('.material-icons:contains(\'' + _this.availableAnnotationTools[value] + '\')').on('click', make_handler(_this.availableAnnotationTools[value])); } - //related the ContextControls + //Annotation specific controls + + //Image manipulation controls + //set the original values for all of the CSS filter options + var filterValues = { + "brightness" : "brightness(100%)", + "contrast" : "contrast(100%)", + "saturate" : "saturate(100%)", + "grayscale" : "grayscale(0%)", + "invert" : "invert(0%)" + }; + + function setFilterCSS() { + var filterCSS = jQuery.map(filterValues, function(value, key) { return value; }).join(" "), + osdCanvas = jQuery(_this.osd.canvas); + osdCanvas.css({ + 'filter' : filterCSS, + '-webkit-filter' : filterCSS, + '-moz-filter' : filterCSS, + '-o-filter' : filterCSS, + '-ms-filter' : filterCSS + }); + } + + this.element.find('.mirador-osd-rotate-right').on('click', function() { + if (_this.osd) { + var currentRotation = _this.osd.viewport.getRotation(); + _this.osd.viewport.setRotation(currentRotation + 90); + } + }); + + this.element.find('.mirador-osd-rotate-left').on('click', function() { + if (_this.osd) { + var currentRotation = _this.osd.viewport.getRotation(); + _this.osd.viewport.setRotation(currentRotation - 90); + } + }); + + this.element.find('.mirador-osd-brightness-slider').slider({ + orientation: "vertical", + range: "min", + min: 0, + max: 200, + value: 100, + slide: function(event, ui) { + filterValues.brightness = "brightness("+ui.value+"%)"; + setFilterCSS(); + } + }).hide(); + + this.element.find('.mirador-osd-brightness').on('mouseenter', + function() { + _this.element.find('.mirador-osd-brightness-slider').stop().slideFadeToggle(200); + }).on('mouseleave', + function() { + _this.element.find('.mirador-osd-brightness-slider').stop().slideFadeToggle(200); + }); + + this.element.find('.mirador-osd-contrast-slider').slider({ + orientation: "vertical", + range: "min", + min: 0, + max: 200, + value: 100, + slide: function(event, ui) { + filterValues.contrast = "contrast("+ui.value+"%)"; + setFilterCSS(); + } + }).hide(); + + this.element.find('.mirador-osd-contrast').on('mouseenter', + function() { + _this.element.find('.mirador-osd-contrast-slider').stop().slideFadeToggle(200); + }).on('mouseleave', + function() { + _this.element.find('.mirador-osd-constrast-slider').stop().slideFadeToggle(200); + }); + + this.element.find('.mirador-osd-saturation-slider').slider({ + orientation: "vertical", + range: "min", + min: 0, + max: 200, + value: 100, + slide: function(event, ui) { + filterValues.saturate = "saturate("+ui.value+"%)"; + setFilterCSS(); + } + }).hide(); + + this.element.find('.mirador-osd-saturation').on('mouseenter', + function() { + _this.element.find('.mirador-osd-saturation-slider').stop().slideFadeToggle(200); + }).on('mouseleave', + function() { + _this.element.find('.mirador-osd-saturation-slider').stop().slideFadeToggle(200); + }); + + this.element.find('.mirador-osd-grayscale').on('click', function() { + if (jQuery(this).hasClass('selected')) { + filterValues.grayscale = "grayscale(0%)"; + jQuery(this).removeClass('selected'); + } else { + filterValues.grayscale = "grayscale(100%)"; + jQuery(this).addClass('selected'); + } + setFilterCSS(); + }); + + this.element.find('.mirador-osd-invert').on('click', function() { + if (jQuery(this).hasClass('selected')) { + filterValues.invert = "invert(0%)"; + jQuery(this).removeClass('selected'); + } else { + filterValues.invert = "invert(100%)"; + jQuery(this).addClass('selected'); + } + setFilterCSS(); + }); + + this.element.find('.mirador-osd-reset').on('click', function() { + //reset rotation + if (_this.osd) { + _this.osd.viewport.setRotation(0); + } + + //reset brightness + filterValues.brightness = "brightness(100%)"; + _this.element.find('.mirador-osd-brightness-slider').slider('option','value',100); + + //reset contrast + filterValues.contrast = "contrast(100%)"; + _this.element.find('.mirador-osd-contrast-slider').slider('option','value',100); + + //reset saturation + filterValues.saturate = "saturate(100%)"; + _this.element.find('.mirador-osd-saturation-slider').slider('option','value',100); + + //reset grayscale + filterValues.grayscale = "grayscale(0%)"; + _this.element.find('.mirador-osd-grayscale').removeClass('selected'); + + //reset color inversion + filterValues.invert = "invert(0%)"; + _this.element.find('.mirador-osd-invert').removeClass('selected'); + + setFilterCSS(); + }); + //Image manipulation controls }, getPanByValue: function() { diff --git a/locales/en/translation.json b/locales/en/translation.json index 2dcf23c829..f337d4749a 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -43,5 +43,13 @@ "dropToLoad": "Drop to Load Manifest", "viewTypeTooltip": "Change view type", "metadataTooltip": "View information/metadata about this object", - "sidePanelTooltip": "Toggle the side panel" + "sidePanelTooltip": "Toggle the side panel", + "rotateRightTooltip": "Rotate 90° right", + "rotateLeftTooltip": "Rotate 90° left", + "brightnessTooltip": "Adjust brightness", + "contrastTooltip": "Adjust contrast", + "saturationTooltip": "Adjust saturation", + "grayscaleTooltip": "Toggle grayscale", + "invertTooltip": "Invert colors", + "resetTooltip": "Reset all controls" } \ No newline at end of file From 4a5d0077a70883215ecb83229eb9e2a732bf4855 Mon Sep 17 00:00:00 2001 From: Rashmi Singhal Date: Fri, 24 Jun 2016 10:46:22 -0400 Subject: [PATCH 3/9] added canvas controls for annotation and image manipulation controls. added tooltips for annotation controls. pass canvas controls from window to other modules. need to fix css for image manipulation controls when the annotation controls are turned off --- js/src/annotations/osd-svg-ellipse.js | 3 +- js/src/annotations/osd-svg-freehand.js | 3 +- js/src/annotations/osd-svg-pin.js | 3 +- js/src/annotations/osd-svg-polygon.js | 3 +- js/src/annotations/osd-svg-rectangle.js | 3 +- js/src/settings.js | 21 ++++++++---- js/src/widgets/contextControls.js | 43 +++++++++++++------------ js/src/widgets/hud.js | 32 +++++++++--------- js/src/widgets/imageView.js | 10 +++--- js/src/workspaces/window.js | 12 +++---- locales/en/translation.json | 9 +++++- 11 files changed, 80 insertions(+), 62 deletions(-) diff --git a/js/src/annotations/osd-svg-ellipse.js b/js/src/annotations/osd-svg-ellipse.js index a49874c93c..a5eedb5ccb 100644 --- a/js/src/annotations/osd-svg-ellipse.js +++ b/js/src/annotations/osd-svg-ellipse.js @@ -3,7 +3,8 @@ jQuery.extend(this, { name: 'Ellipse', logoClass: 'radio_button_unchecked', - idPrefix: 'ellipse_' + idPrefix: 'ellipse_', + tooltip: 'ellipseTooltip' }, options); this.init(); diff --git a/js/src/annotations/osd-svg-freehand.js b/js/src/annotations/osd-svg-freehand.js index 68554bf4d6..dcc7560729 100644 --- a/js/src/annotations/osd-svg-freehand.js +++ b/js/src/annotations/osd-svg-freehand.js @@ -3,7 +3,8 @@ jQuery.extend(this, { name: 'Freehand', logoClass: 'gesture', - idPrefix: 'smooth_path_' + idPrefix: 'smooth_path_', + tooltip: 'freehandTooltip' }, options); this.init(); diff --git a/js/src/annotations/osd-svg-pin.js b/js/src/annotations/osd-svg-pin.js index e274a2ffc4..e9322d91aa 100644 --- a/js/src/annotations/osd-svg-pin.js +++ b/js/src/annotations/osd-svg-pin.js @@ -3,7 +3,8 @@ jQuery.extend(this, { name: 'Pin', logoClass: 'room', - idPrefix: 'pin_' + idPrefix: 'pin_', + tooltip: 'pinTooltip' }, options); this.init(); diff --git a/js/src/annotations/osd-svg-polygon.js b/js/src/annotations/osd-svg-polygon.js index 374cdb444e..6046d0dbc2 100644 --- a/js/src/annotations/osd-svg-polygon.js +++ b/js/src/annotations/osd-svg-polygon.js @@ -3,7 +3,8 @@ jQuery.extend(this, { name: 'Polygon', logoClass: 'timeline', - idPrefix: 'rough_path_' + idPrefix: 'rough_path_', + tooltip: 'polygonTooltip' }, options); this.init(); diff --git a/js/src/annotations/osd-svg-rectangle.js b/js/src/annotations/osd-svg-rectangle.js index a9d583e5aa..42132aadb0 100644 --- a/js/src/annotations/osd-svg-rectangle.js +++ b/js/src/annotations/osd-svg-rectangle.js @@ -3,7 +3,8 @@ jQuery.extend(this, { name: 'Rectangle', logoClass: 'check_box_outline_blank', - idPrefix: 'rectangle_' + idPrefix: 'rectangle_', + tooltip: 'rectangleTooltip' }, options); this.init(); diff --git a/js/src/settings.js b/js/src/settings.js index 2a3b3b765b..299b023009 100644 --- a/js/src/settings.js +++ b/js/src/settings.js @@ -56,13 +56,20 @@ }, "sidePanelVisible" : true, //whether or not to make the side panel visible in this window on load. This setting is dependent on sidePanel being true "overlay" : true, //whether or not to make the metadata overlay available/visible in this window - "canvasControls": ['Annotation', 'Manipulation'], // These are, at the top level, the types of controls available to be displayed on a canvas. - "annotationLayer" : true, //whether or not to make annotation layer available in this window - "annotationCreation" : true, /*whether or not to make annotation creation available in this window, - only valid if annotationLayer is set to True and an annotationEndpoint is defined. - This setting does NOT affect whether or not a user can edit an individual annotation that has already been created.*/ - "annotationState" : 'annoOff', //[_'annoOff'_, 'annoOnCreateOff', 'annoOnCreateOn'] whether or not to turn on the annotation layer on window load - "annotationRefresh" : false, //whether or not to display the refresh icon for annotations + "canvasControls": { // The types of controls available to be displayed on a canvas + "annotations" : { + "annotationLayer" : true, //whether or not to make annotation layer available in this window + "annotationCreation" : true, /*whether or not to make annotation creation available in this window, + only valid if annotationLayer is set to True and an annotationEndpoint is defined. + This setting does NOT affect whether or not a user can edit an individual annotation that has already been created.*/ + "annotationState" : 'annoOff', //[_'annoOff'_, 'annoOnCreateOff', 'annoOnCreateOn'] whether or not to turn on the annotation layer on window load + "annotationRefresh" : false, //whether or not to display the refresh icon for annotations + }, + "imageManipulation" : { + "manipulationLayer" : true + //TODO: settings for individual image manipulation controls + } + }, "fullScreen" : true, //whether or not to make the window's fullScreen button visible to user "displayLayout" : true, //whether or not to display all layout options, removing individual menu options is separate //control individual menu items in layout menu. if "displayLayout" is false, these options won't be applied diff --git a/js/src/widgets/contextControls.js b/js/src/widgets/contextControls.js index a70bc63481..5870e57af6 100644 --- a/js/src/widgets/contextControls.js +++ b/js/src/widgets/contextControls.js @@ -8,7 +8,6 @@ mode: null, windowId: null, annoEndpointAvailable: false, - annotationCreationAvailable: true, eventEmitter: null }, options); @@ -20,27 +19,31 @@ init: function() { var _this = this; - this.annotationElement = jQuery(this.annotationTemplate({ - tools : _this.availableAnnotationTools, - showEdit : this.annotationCreationAvailable, - showRefresh : this.annotationRefresh - })).appendTo(this.container.find('.mirador-osd-annotation-controls')); + var annotationProperties = this.canvasControls.annotations; - this.manipulationElement = jQuery(this.manipulationTemplate({ - })).appendTo(this.container.find('.mirador-manipulation-controls')); + if (annotationProperties.annotationLayer && this.annoEndpointAvailable) { + this.annotationElement = jQuery(this.annotationTemplate({ + tools : _this.availableAnnotationTools, + showEdit : annotationProperties.annotationCreation, + showRefresh : annotationProperties.annotationRefresh + })).appendTo(this.container.find('.mirador-osd-annotation-controls')); + this.annotationElement.hide(); + this.setQtips(this.annotationElement); + this.setBorderFillColorPickers(); + } - this.setQtips(); + if (this.canvasControls.imageManipulation.manipulationLayer) { + this.manipulationElement = jQuery(this.manipulationTemplate({ + })).appendTo(this.container.find('.mirador-manipulation-controls')); + this.setQtips(this.manipulationElement); + this.manipulationElement.hide(); + } - this.annotationElement.hide(); - this.manipulationElement.hide(); - - this.setBorderFillColorPickers(); this.bindEvents(); }, - setQtips: function() { - var _this = this; - _this.manipulationElement.each(function() { + setQtips: function(element) { + element.each(function() { jQuery(this).qtip({ content: { text: jQuery(this).attr('title'), @@ -192,17 +195,17 @@ '|', '', '{{#each tools}}', - '', - '{{this}}', + '', + '{{this.logoClass}}', '', '{{/each}}', '', '|', '', - '', + '', '', '', - '', + '', '', '', '', diff --git a/js/src/widgets/hud.js b/js/src/widgets/hud.js index 2caa8bea4f..b480ca5763 100644 --- a/js/src/widgets/hud.js +++ b/js/src/widgets/hud.js @@ -18,25 +18,24 @@ init: function() { this.createStateMachines(); - + this.element = jQuery(this.template({ showNextPrev : this.showNextPrev, showBottomPanel : typeof this.bottomPanelAvailable === 'undefined' ? true : this.bottomPanelAvailable, - showAnno : this.annotationLayerAvailable + showAnno : this.canvasControls.annotations.annotationLayer, + showImageControls : this.canvasControls.imageManipulation.manipulationLayer })).appendTo(this.appendTo); - if (this.annotationLayerAvailable && this.annoEndpointAvailable) { - this.contextControls = new $.ContextControls({ - element: null, - container: this.element.find('.mirador-osd-context-controls'), - mode: 'displayAnnotations', - windowId: this.windowId, - annotationCreationAvailable: this.annotationCreationAvailable, - annotationRefresh: this.annotationRefresh, - availableAnnotationTools: this.availableAnnotationTools, - eventEmitter: this.eventEmitter - }); - } + this.contextControls = new $.ContextControls({ + element: null, + container: this.element.find('.mirador-osd-context-controls'), + mode: 'displayAnnotations', + windowId: this.windowId, + canvasControls: this.canvasControls, + annoEndpointAvailable: this.annoEndpointAvailable, + availableAnnotationTools: this.availableAnnotationTools, + eventEmitter: this.eventEmitter + }); this.bindEvents(); }, @@ -182,14 +181,13 @@ '', '', '{{/if}}', - //TODO: implement this boolean setting - //'{{#if showImageControls}}', + '{{#if showImageControls}}', '
', '', 'tune', '', '
', - //'{{/if}}', + '{{/if}}', '', '{{#if showNextPrev}}', '', diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js index a81c1432ec..c9d7fc2920 100755 --- a/js/src/widgets/imageView.js +++ b/js/src/widgets/imageView.js @@ -19,7 +19,6 @@ osdCls: 'mirador-osd', elemAnno: null, annoCls: 'annotation-canvas', - annotationLayerAvailable: null, annotationsLayer: null, forceShowControls: false, eventEmitter: null @@ -58,7 +57,10 @@ for ( var i = 0; i < this.state.getStateProperty('availableAnnotationDrawingTools').length; i++) { for ( var j = 0; j < allTools.length; j++) { if (this.state.getStateProperty('availableAnnotationDrawingTools')[i] == allTools[j].name) { - this.availableAnnotationTools.push(allTools[j].logoClass); + var values = {}; + values.logoClass = allTools[j].logoClass; + values.tooltip = allTools[j].tooltip; + this.availableAnnotationTools.push(values); } } } @@ -68,9 +70,7 @@ appendTo: this.element, bottomPanelAvailable: this.bottomPanelAvailable, windowId: this.windowId, - annotationLayerAvailable: this.annotationLayerAvailable, - annotationCreationAvailable: this.annotationCreationAvailable, - annotationRefresh: this.annotationRefresh, + canvasControls: this.canvasControls, annoEndpointAvailable: this.annoEndpointAvailable, showNextPrev : this.imagesList.length !== 1, availableAnnotationTools: this.availableAnnotationTools, diff --git a/js/src/workspaces/window.js b/js/src/workspaces/window.js index 065d989b62..03984b6d5a 100644 --- a/js/src/workspaces/window.js +++ b/js/src/workspaces/window.js @@ -88,10 +88,10 @@ } this.annoEndpointAvailable = !jQuery.isEmptyObject(_this.state.getStateProperty('annotationEndpoint')); - if (!this.annotationLayer) { - this.annotationCreation = false; + if (!this.canvasControls.annotations.annotationLayer) { + this.canvasControls.annotations.annotationCreation = false; this.annoEndpointAvailable = false; - this.annotationState = 'annoOff'; + this.canvasControls.annotations.annotationState = 'annoOff'; } _this.getAnnotations(); @@ -660,11 +660,9 @@ imagesList: this.imagesList, osdOptions: this.windowOptions, bottomPanelAvailable: this.bottomPanelAvailable, - annotationLayerAvailable: this.annotationLayer, - annotationCreationAvailable: this.annotationCreation, annoEndpointAvailable: this.annoEndpointAvailable, - annotationState : this.annotationState, - annotationRefresh: this.annotationRefresh + canvasControls: this.canvasControls, + annotationState : this.canvasControls.annotations.annotationState }); } else { var view = this.focusModules.ImageView; diff --git a/locales/en/translation.json b/locales/en/translation.json index f337d4749a..77330b621f 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -51,5 +51,12 @@ "saturationTooltip": "Adjust saturation", "grayscaleTooltip": "Toggle grayscale", "invertTooltip": "Invert colors", - "resetTooltip": "Reset all controls" + "resetTooltip": "Reset all controls", + "rectangleTooltip": "Rectangle annotation", + "ellipseTooltip": "Oval annotation", + "freehandTooltip": "Freeform annotation", + "pinTooltip": "Pin annotation", + "polygonTooltip": "Polygon annotation", + "borderColorTooltip": "Choose annotation border color", + "fillColorTooltip": "Choose annotation fill color" } \ No newline at end of file From 264f300a6defe8d32b0f85e04e0980aef2cfa413 Mon Sep 17 00:00:00 2001 From: Rashmi Singhal Date: Tue, 28 Jun 2016 13:35:24 -0400 Subject: [PATCH 4/9] use show/hide instead of slideFadeToggle and fix typo --- js/src/widgets/contextControls.js | 30 +++++++++++++-------------- js/src/widgets/imageView.js | 34 +++++++++++++++---------------- 2 files changed, 32 insertions(+), 32 deletions(-) diff --git a/js/src/widgets/contextControls.js b/js/src/widgets/contextControls.js index 5870e57af6..930bc2e246 100644 --- a/js/src/widgets/contextControls.js +++ b/js/src/widgets/contextControls.js @@ -16,7 +16,7 @@ $.ContextControls.prototype = { - init: function() { + init: function() { var _this = this; var annotationProperties = this.canvasControls.annotations; @@ -91,25 +91,25 @@ ["white", "cyan", "magenta", "yellow"] ] }); - + _this.container.find(".borderColorPicker").next(".sp-replacer").prepend("border_color"); - + var borderPicker = jQuery('.borderColorPickerPop'+_this.windowId); - + borderPicker.find(".sp-cancel").html('Cancel'); borderPicker.find(".sp-cancel").parent().append('Choose'); borderPicker.find('button.sp-choose').hide(); - + borderPicker.find('a.sp-cancel').on('click', function() { jQuery.data(document.body, 'borderColorPickerPop' + _this.windowId, null); }); - + jQuery._data(borderPicker.find(".sp-cancel")[0], "events").click.reverse(); - + borderPicker.find('a.sp-choose').on('click',function(){ borderPicker.find('button.sp-choose').click(); }); - + _this.container.find(".fillColorPicker").spectrum({ showInput: true, showInitial: true, @@ -141,21 +141,21 @@ ["white", "cyan", "magenta", "yellow"] ] }); - + _this.container.find(".fillColorPicker").next(".sp-replacer").prepend("format_color_fill"); - + var fillPicker = jQuery('.fillColorPickerPop'+_this.windowId); - + fillPicker.find(".sp-cancel").html('Cancel'); fillPicker.find(".sp-cancel").parent().append('Choose'); fillPicker.find('button.sp-choose').hide(); - + fillPicker.find('a.sp-cancel').on('click', function() { jQuery.data(document.body, 'fillColorPickerPop' + _this.windowId, null); }); - + jQuery._data(fillPicker.find(".sp-cancel")[0], "events").click.reverse(); - + fillPicker.find('a.sp-choose').on('click',function(){ fillPicker.find('button.sp-choose').click(); }); @@ -178,7 +178,7 @@ }, bindEvents: function() { - var _this = this; + var _this = this; // this.container.find('.mirador-osd-back').on('click', function() { // _this.element.remove(); // _this.element = jQuery(_this.template()).appendTo(_this.container); diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js index c9d7fc2920..92c27e890e 100755 --- a/js/src/widgets/imageView.js +++ b/js/src/widgets/imageView.js @@ -29,9 +29,9 @@ $.ImageView.prototype = { - init: function() { + init: function() { var _this = this; - // check (for thumbnail view) if the canvasID is set. + // check (for thumbnail view) if the canvasID is set. // If not, make it page/item 1. if (this.canvasID !== null) { this.currentImgIndex = $.getImageIndexById(this.imagesList, this.canvasID); @@ -64,7 +64,7 @@ } } } - // The hud controls are consistent + // The hud controls are consistent // throughout any updates to the osd canvas. this.hud = new $.Hud({ appendTo: this.element, @@ -349,10 +349,10 @@ this.element.find('.mirador-osd-brightness').on('mouseenter', function() { - _this.element.find('.mirador-osd-brightness-slider').stop().slideFadeToggle(200); + _this.element.find('.mirador-osd-brightness-slider').stop(true, true).show(); }).on('mouseleave', function() { - _this.element.find('.mirador-osd-brightness-slider').stop().slideFadeToggle(200); + _this.element.find('.mirador-osd-brightness-slider').stop(true, true).hide(); }); this.element.find('.mirador-osd-contrast-slider').slider({ @@ -369,10 +369,10 @@ this.element.find('.mirador-osd-contrast').on('mouseenter', function() { - _this.element.find('.mirador-osd-contrast-slider').stop().slideFadeToggle(200); + _this.element.find('.mirador-osd-contrast-slider').stop(true, true).show(); }).on('mouseleave', function() { - _this.element.find('.mirador-osd-constrast-slider').stop().slideFadeToggle(200); + _this.element.find('.mirador-osd-contrast-slider').stop(true, true).hide(); }); this.element.find('.mirador-osd-saturation-slider').slider({ @@ -389,10 +389,10 @@ this.element.find('.mirador-osd-saturation').on('mouseenter', function() { - _this.element.find('.mirador-osd-saturation-slider').stop().slideFadeToggle(200); + _this.element.find('.mirador-osd-saturation-slider').stop(true, true).show(); }).on('mouseleave', function() { - _this.element.find('.mirador-osd-saturation-slider').stop().slideFadeToggle(200); + _this.element.find('.mirador-osd-saturation-slider').stop(true, true).hide(); }); this.element.find('.mirador-osd-grayscale').on('click', function() { @@ -462,11 +462,11 @@ var _this = this; this.osdOptions.osdBounds = this.osd.viewport.getBounds(true); _this.eventEmitter.publish("imageBoundsUpdated", { - id: _this.windowId, + id: _this.windowId, osdBounds: { - x: _this.osdOptions.osdBounds.x, - y: _this.osdOptions.osdBounds.y, - width: _this.osdOptions.osdBounds.width, + x: _this.osdOptions.osdBounds.x, + y: _this.osdOptions.osdBounds.y, + width: _this.osdOptions.osdBounds.width, height: _this.osdOptions.osdBounds.height } }); @@ -483,8 +483,8 @@ }, toggle: function(stateValue) { - if (stateValue) { - this.show(); + if (stateValue) { + this.show(); } else { this.hide(); } @@ -593,7 +593,7 @@ } _this.addAnnotationsLayer(_this.elemAnno); - + // if current annoState is 'none' that means it has been initialized but not used // use annotationState to choose event if (_this.hud.annoState.current === 'none') { @@ -613,7 +613,7 @@ } } - // A hack. Pop the osd overlays layer after the canvas so + // A hack. Pop the osd overlays layer after the canvas so // that annotations appear. jQuery(_this.osd.canvas).children().first().remove().appendTo(_this.osd.canvas); From 5b7f2017bb71b28d8b0be81ffdf9b79da3411679 Mon Sep 17 00:00:00 2001 From: aeschylus Date: Wed, 29 Jun 2016 18:12:56 -0700 Subject: [PATCH 5/9] comment out autohide controls --- js/src/widgets/imageView.js | 44 ++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js index 92c27e890e..9e8100b81c 100755 --- a/js/src/widgets/imageView.js +++ b/js/src/widgets/imageView.js @@ -559,28 +559,28 @@ _this.eventEmitter.publish('updateTooltips.' + _this.windowId, [point, point]); }, 30)); - if (_this.state.getStateProperty('autoHideControls')) { - var timeoutID = null, - fadeDuration = _this.state.getStateProperty('fadeDuration'), - timeoutDuration = _this.state.getStateProperty('timeoutDuration'); - var hideHUD = function() { - _this.element.find(".hud-control").stop(true, true).addClass('hidden', fadeDuration); - }; - hideHUD(); - jQuery(_this.element).on('mousemove', function() { - window.clearTimeout(timeoutID); - _this.element.find(".hud-control").stop(true, true).removeClass('hidden', fadeDuration); - // When a user is in annotation create mode, force show the controls so they don't disappear when in a qtip, so check for that - if (!_this.forceShowControls) { - timeoutID = window.setTimeout(hideHUD, timeoutDuration); - } - }).on('mouseleave', function() { - if (!_this.forceShowControls) { - window.clearTimeout(timeoutID); - hideHUD(); - } - }); - } +// if (_this.state.getStateProperty('autoHideControls')) { +// var timeoutID = null, +// fadeDuration = _this.state.getStateProperty('fadeDuration'), +// timeoutDuration = _this.state.getStateProperty('timeoutDuration'); +// var hideHUD = function() { +// _this.element.find(".hud-control").stop(true, true).addClass('hidden', fadeDuration); +// }; +// hideHUD(); +// jQuery(_this.element).on('mousemove', function() { +// window.clearTimeout(timeoutID); +// _this.element.find(".hud-control").stop(true, true).removeClass('hidden', fadeDuration); +// // When a user is in annotation create mode, force show the controls so they don't disappear when in a qtip, so check for that +// if (!_this.forceShowControls) { +// timeoutID = window.setTimeout(hideHUD, timeoutDuration); +// } +// }).on('mouseleave', function() { +// if (!_this.forceShowControls) { +// window.clearTimeout(timeoutID); +// hideHUD(); +// } +// }); +// } _this.osd.addHandler('open', function(){ _this.eventEmitter.publish('osdOpen.'+_this.windowId); From 61cdcb3fb5596c1140b232528b151f0fa430deea Mon Sep 17 00:00:00 2001 From: aeschylus Date: Tue, 5 Jul 2016 09:57:39 -0700 Subject: [PATCH 6/9] styling start --- css/mirador.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/css/mirador.css b/css/mirador.css index 8d7d743225..722b2a1e09 100644 --- a/css/mirador.css +++ b/css/mirador.css @@ -1675,6 +1675,15 @@ ul.scroll-listing-thumbs li .thumb-label { top: -0.5em; } +.ui-slider, ui-slider-vertical { + width: 10px; +} +.ui-slider-handle { +} +.ui-slider-range { + background: deepSkyBlue; +} + /* metadata view ---------------------------------------------------------------------------- */ From e734af765a221bed6f9505c73ecc954ccb6dd441 Mon Sep 17 00:00:00 2001 From: aeschylus Date: Wed, 6 Jul 2016 14:15:26 -0700 Subject: [PATCH 7/9] first slider complete --- css/mirador.css | 30 ++++++++++++++++++++++++++---- js/src/widgets/imageView.js | 7 +++++++ 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/css/mirador.css b/css/mirador.css index 722b2a1e09..300a493fe9 100644 --- a/css/mirador.css +++ b/css/mirador.css @@ -1675,12 +1675,34 @@ ul.scroll-listing-thumbs li .thumb-label { top: -0.5em; } -.ui-slider, ui-slider-vertical { - width: 10px; +.hud-control .ui-slider-handle .percent { + position: absolute; + left: 17px; + top:-0.3em; + display:block; + color: white; + text-shadow: 0 0 3px black; +} + +.hud-control .ui-slider, .ui-slider-vertical { + width: 3px; + margin-left: 27px; + margin-bottom: 20px; + height:100px; } -.ui-slider-handle { + +.hud-control .ui-slider-vertical .ui-slider-handle { + width: 0.7em; + height: 0.7em; + border-radius: 40px; + margin-bottom: -.35em; } -.ui-slider-range { + +.hud-control .ui-slider-vertical .ui-slider-handle:focus { + outline:0; +} + +.hud-control .ui-slider-range { background: deepSkyBlue; } diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js index 9e8100b81c..4ad30b7f11 100755 --- a/js/src/widgets/imageView.js +++ b/js/src/widgets/imageView.js @@ -361,9 +361,16 @@ min: 0, max: 200, value: 100, + create: function(event, ui) { + var v = jQuery(this).slider('value'), + span = jQuery('').text(v + '%'); + + jQuery(this).find('.ui-slider-handle').append(span); + }, slide: function(event, ui) { filterValues.contrast = "contrast("+ui.value+"%)"; setFilterCSS(); + jQuery(this).find('.percent').text(ui.value + '%'); } }).hide(); From 451615a7ec740ef2e1fbc512b9f7c5cde6c08719 Mon Sep 17 00:00:00 2001 From: aeschylus Date: Wed, 6 Jul 2016 14:44:44 -0700 Subject: [PATCH 8/9] added slider styling and percent display to all sliders and the update function. --- js/src/widgets/imageView.js | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js index 4ad30b7f11..30e6da6b90 100755 --- a/js/src/widgets/imageView.js +++ b/js/src/widgets/imageView.js @@ -341,9 +341,16 @@ min: 0, max: 200, value: 100, + create: function(event, ui) { + var v = jQuery(this).slider('value'), + span = jQuery('').text(v + '%'); + + jQuery(this).find('.ui-slider-handle').append(span); + }, slide: function(event, ui) { - filterValues.brightness = "brightness("+ui.value+"%)"; + filterValues.contrast = "contrast("+ui.value+"%)"; setFilterCSS(); + jQuery(this).find('.percent').text(ui.value + '%'); } }).hide(); @@ -388,9 +395,16 @@ min: 0, max: 200, value: 100, + create: function(event, ui) { + var v = jQuery(this).slider('value'), + span = jQuery('').text(v + '%'); + + jQuery(this).find('.ui-slider-handle').append(span); + }, slide: function(event, ui) { - filterValues.saturate = "saturate("+ui.value+"%)"; + filterValues.contrast = "contrast("+ui.value+"%)"; setFilterCSS(); + jQuery(this).find('.percent').text(ui.value + '%'); } }).hide(); @@ -433,14 +447,17 @@ //reset brightness filterValues.brightness = "brightness(100%)"; _this.element.find('.mirador-osd-brightness-slider').slider('option','value',100); + _this.element.find('.mirador-osd-brightness-slider').find('.percent').text(100 + '%'); //reset contrast filterValues.contrast = "contrast(100%)"; _this.element.find('.mirador-osd-contrast-slider').slider('option','value',100); + _this.element.find('.mirador-osd-contrast-slider').find('.percent').text(100 + '%'); //reset saturation filterValues.saturate = "saturate(100%)"; _this.element.find('.mirador-osd-saturation-slider').slider('option','value',100); + _this.element.find('.mirador-osd-saturation-slider').find('.percent').text(100 + '%'); //reset grayscale filterValues.grayscale = "grayscale(0%)"; From ef61a86ecb515a75f9272f1dc39041afc88b6362 Mon Sep 17 00:00:00 2001 From: Rashmi Singhal Date: Thu, 7 Jul 2016 11:22:56 -0400 Subject: [PATCH 9/9] fix click event for each shape --- js/src/widgets/imageView.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/js/src/widgets/imageView.js b/js/src/widgets/imageView.js index 30e6da6b90..7d6d7faa53 100755 --- a/js/src/widgets/imageView.js +++ b/js/src/widgets/imageView.js @@ -294,9 +294,10 @@ _this.eventEmitter.publish('toggleDrawingTool.'+_this.windowId, shapeMode); }; } - for (var value in _this.availableAnnotationTools) { - this.element.find('.material-icons:contains(\'' + _this.availableAnnotationTools[value] + '\')').on('click', make_handler(_this.availableAnnotationTools[value])); - } + jQuery.each(_this.availableAnnotationTools, function(index, value) { + var shape = value.logoClass; + _this.element.find('.material-icons:contains(\'' + shape + '\')').on('click', make_handler(shape)); + }); //Annotation specific controls //Image manipulation controls