Mercurial > hg > digilib-old
changeset 1020:0eedb4a5b674
sliders for rot/brgt/cont, needs some refactoring
author | hertzhaft |
---|---|
date | Tue, 21 Feb 2012 00:08:04 +0100 |
parents | 287e2d2d2ae8 |
children | 9aa282ceec8a |
files | webapp/src/main/webapp/jquery/jquery.digilib.buttons.js webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.js |
diffstat | 3 files changed, 79 insertions(+), 34 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js Mon Feb 20 22:23:07 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js Tue Feb 21 00:08:04 2012 +0100 @@ -78,26 +78,23 @@ icon : "mirror-vertical.png" }, rot : { - //onclick : "sliderRotate", - onclick : ["slider", "rot"], + onclick : "sliderRotate", tooltip : "rotate image", icon : "rotate.png" }, brgt : { - onclick : "brightness", - //onclick : ["slider", "brgt"], + onclick : "sliderBrightness", tooltip : "set brightness", icon : "brightness.png" }, cont : { - onclick : "contrast", - //onclick : ["slider", "cont"], + onclick : "sliderContrast", tooltip : "set contrast", icon : "contrast.png" }, rgb : { onclick : "setRGB", - //onclick : ["multislider", "rgb"], + // onclick : sliderRGB, tooltip : "set rgb values", icon : "rgb.png" }, @@ -162,8 +159,8 @@ label : "Contrast", tooltip : "set numeric value to be multiplied", icon : "contrast.png", - 'min' : -8, - 'max' : 8, + 'min' : -4, + 'max' : 4, 'start' : 0 }, red : { @@ -265,19 +262,61 @@ // persist setting fn.storeOptions(data); }, - // rotate Slider Div + + // slider to set a rotation angle sliderRotate : function (data) { var $elem = data.$elem; var $panel = fn.setupPanel(data); if ($panel == null) { return; }; - var $slider = fn.setupSlider(data, 'rot'); - var callback = function(d) { + var opts = { 'start' : parseFloat(data.settings.rot) }; + var $slider = fn.setupSlider(data, 'rot', opts); + var ok = function(d) { var angle = $slider.slider('getval'); digilib.actions.rotate(d, angle); }; - $panel.data['callback'] = callback; + $panel.data['ok'] = ok; + $panel.fadeIn(); + $panel.prepend($slider); + centerOnScreen(data, $panel); + $slider.slider('show'); + }, + + // slider to set a brightness value + sliderBrightness : function (data) { + var $elem = data.$elem; + var $panel = fn.setupPanel(data); + if ($panel == null) { + return; + }; + var opts = { 'start' : parseFloat(data.settings.brgt) }; + var $slider = fn.setupSlider(data, 'brgt', opts); + var ok = function(d) { + var brgt = $slider.slider('getval'); + digilib.actions.brightness(d, brgt); + }; + $panel.data['ok'] = ok; + $panel.fadeIn(); + $panel.prepend($slider); + centerOnScreen(data, $panel); + $slider.slider('show'); + }, + + // slider to set a contrast value + sliderContrast : function (data) { + var $elem = data.$elem; + var $panel = fn.setupPanel(data); + if ($panel == null) { + return; + }; + var opts = { 'start' : parseFloat(data.settings.cont) }; + var $slider = fn.setupSlider(data, 'cont', opts); + var ok = function(d) { + var cont = $slider.slider('getval'); + digilib.actions.contrast(d, cont, true); + }; + $panel.data['ok'] = ok; $panel.fadeIn(); $panel.prepend($slider); centerOnScreen(data, $panel); @@ -570,36 +609,39 @@ /** creates the HTML structure for a panel div */ - var setupPanel = function (data, callback) { + var setupPanel = function (data) { var $elem = data.$elem; var panelClass = data.settings.cssPrefix + 'panel'; var $panel = $elem.find('.' + panelClass); + // remove panel if it exists already if ($panel.length > 0) { $panel.fadeOut(function() { $panel.remove(); }); return null; } - var $div = $('<div/>'); - $div.addClass(panelClass); - var $okcancel = setupOkCancel(data, callback); - $div.append($okcancel); - $elem.append($div); - return $div; + $panel = $('<div/>'); + $panel.addClass(panelClass); + var $okcancel = setupOkCancel(data); + $panel.append($okcancel); + $elem.append($panel); + return $panel; }; /** creates the HTML structure for a slider div */ - var setupSlider = function (data, paramname) { + var setupSlider = function (data, paramname, opts) { var id = paramname + "-slider"; var $div = $('#' + id); if ($div.length == 0) { // slider not yet created $div = $('<div/>'); var options = sliders[paramname]; + if (opts != null) { + $.extend(options, opts); + } $div.attr('id', paramname + "-slider"); $div.slider(options); - console.debug ('new slider #' + id, $div, options); } return $div; }; @@ -617,15 +659,17 @@ var $div = $(html); var handler = function(event) { var $panel = $(this).parents('.'+cssPrefix+'panel'); - var callback = $panel.data['callback']; if (event.keyCode == 27 || event.target.id == cssPrefix+'Cancel') { - // return false; - } - if (event.keyCode == 13 || event.target.id == cssPrefix+'Ok') { + var callback = $panel.data['cancel']; if (callback) { callback(data); } - // return false; + } + if (event.keyCode == 13 || event.target.id == cssPrefix+'Ok') { + var callback = $panel.data['ok']; + if (callback) { + callback(data); + } } $panel.fadeOut(function() { $panel.remove();
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css Mon Feb 20 22:23:07 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.css Tue Feb 21 00:08:04 2012 +0100 @@ -152,16 +152,14 @@ div.dl-digilib button.dl-button { margin: 0px 10px 10px 10px; - border: 1px solid lightcyan; + border-width: 1px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; - font-weight: bold; color: white; - background: url('img/blue.png'); + background: transparent; } div.dl-digilib div.dl-slider { - background: url('img/blue.png'); border: 1px solid lightcyan; margin: 30px; z-index: 9999; @@ -187,11 +185,9 @@ div.dl-digilib div.dl-sliderlabel, div.dl-digilib div.dl-slidernumber { position: absolute; - background: url('img/blue.png'); padding: 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; - font-weight: bold; color: white; }
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js Mon Feb 20 22:23:07 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.js Tue Feb 21 00:08:04 2012 +0100 @@ -399,13 +399,18 @@ * * @param data * @param factor + * @param brightness : if given, adjust brightness along with contrast */ - contrast : function (data, factor) { + contrast : function (data, factor, brightness) { var cont = data.settings.cont; if (factor == null) { factor = window.prompt("Contrast (-8, 8)", cont); } data.settings.cont = factor; + if (brightness) { + var brgt = 127 - (127 * Math.pow(2, factor)); + data.settings.brgt = brgt; + } redisplay(data); },