# HG changeset patch # User hertzhaft # Date 1333316808 -7200 # Node ID fb4d550869c8ee2cca7f8dd0d786973d4661b645 # Parent 41991d1598f1e14bb1bd806138c32402e62c3ef6 indicators for brgt/cont sliders diff -r 41991d1598f1 -r fb4d550869c8 webapp/src/main/webapp/jquery/jquery.digilib.css --- a/webapp/src/main/webapp/jquery/jquery.digilib.css Sun Apr 01 18:43:42 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.css Sun Apr 01 23:46:48 2012 +0200 @@ -168,21 +168,26 @@ position: absolute; top: 0px; } - -div.dl-digilib div.dl-rgbsliderindicator { +div.dl-digilib div.dl-rgbsliderindicator, +div.dl-digilib div.dl-singlesliderindicator { border: 2px solid lightcyan; margin: 10px 0px; } div.dl-digilib table.dl-rgbslider, div.dl-digilib table.dl-rgbslidergrey, -div.dl-digilib table.dl-rgbsliderindicator { +div.dl-digilib table.dl-rgbsliderindicator, +div.dl-digilib table.dl-singleslider, +div.dl-digilib table.dl-singleslidergrey, +div.dl-digilib table.dl-singlesliderindicator { width: 100%; border-collapse: collapse; } div.dl-digilib table.dl-rgbslidergrey td, -div.dl-digilib table.dl-rgbsliderindicator td { +div.dl-digilib table.dl-rgbsliderindicator td, +div.dl-digilib table.dl-singleslidergrey td, +div.dl-digilib table.dl-singlesliderindicator td { height: 20px; } diff -r 41991d1598f1 -r fb4d550869c8 webapp/src/main/webapp/jquery/jquery.digilib.sliders.js --- a/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Sun Apr 01 18:43:42 2012 +0200 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Sun Apr 01 23:46:48 2012 +0200 @@ -20,6 +20,7 @@ label : "Rotation angle", tooltip : "rotate image", icon : "rotate.png", + indicator : false, 'min' : 0, 'max' : 360, 'step' : 0.1, @@ -29,6 +30,7 @@ label : "Brightness", tooltip : "set numeric value to be added", icon : "brightness.png", + indicator : true, 'min' : -255, 'max' : 255, 'step' : 10, @@ -38,6 +40,7 @@ label : "Contrast", tooltip : "set numeric value to be multiplied", icon : "contrast.png", + indicator : true, 'min' : -4, 'max' : 4, 'step' : 0.01, @@ -100,6 +103,34 @@ } }; + var indicators = { + brgt : function ($slider, value) { + var brgt = parseFloat(value); + var cls = $slider.data('cls'); + var $ind = $slider.data('indicator'); + var $td = $ind.find('table.'+cls+'indicator td'); + var setBgColor = function (index) { + var val = index * 32; + var grey = Math.min(Math.max(Math.round(val + brgt), 0), 255); + console.debug('brgt', index, val, brgt, "=", val+brgt) + $(this).css('background-color', 'rgb('+grey+','+grey+','+grey+')'); + }; + $td.each(setBgColor); + }, + + cont : function ($slider, value) { + var cont = parseFloat(value); + var cls = $slider.data('cls'); + var $ind = $slider.data('indicator'); + var $td = $ind.find('table.'+cls+'indicator td'); + var setBgColor = function (index) { + var val = index * 32; + var grey = Math.min(Math.max(Math.round(Math.pow(2, cont) * val), 0), 255); + $(this).css('background-color', 'rgb('+grey+','+grey+','+grey+')'); + }; + $td.each(setBgColor); + } + }; // assign button actions to sliders (rotate, brightness, contrast) var setButtonActions = function () { if (fn.setButtonAction == null) { @@ -187,7 +218,6 @@ var reset = $(this).data('reset'); reset(); }); - // TODO: update indicator }); // handle cancel $form.find('.'+cls+'cancel').on('click', function () { @@ -210,17 +240,16 @@ /** creates a TinyRangeSlider */ - var tinySlider = function (data, paramname, onChange, startval) { + var tinySlider = function (data, paramname, startvalue) { var $elem = data.$elem; var opts = sliderOptions[paramname]; - var param = startval || data.settings[paramname] || opts.start; var cssPrefix = data.settings.cssPrefix; var cls = cssPrefix + 'tinyslider'; var html = '\
\ '+opts.label+'\ - \ - \ + \ + \
'; var $slider = $(html); var $range = $slider.find('input.'+cls+'range'); @@ -229,8 +258,9 @@ // crop floating point imprecision var val = parseFloat($range.val()).toFixed(4); $text.val(parseFloat(val)); - if ($.isFunction(onChange)) { - onChange($slider, val); + var update = $slider.data('update'); + if ($.isFunction(update)) { + update($slider, val); } }; var textChange = function () { @@ -242,12 +272,13 @@ if (!HTML5) { $range.range('set', val); } - if ($.isFunction(onChange)) { - onChange($slider, val); + var update = $slider.data('update'); + if ($.isFunction(update)) { + update($slider, val); } }; var reset = function () { - $text.val(param); + $text.val(startvalue); textChange(); }; // connect slider and input @@ -256,7 +287,8 @@ $slider.data({ '$text' : $text, '$range' : $range, - 'reset' : reset + 'reset' : reset, + 'update' : null }); return $slider; }; @@ -265,14 +297,31 @@ the new value is passed to the "onSubmit" function. */ var singleSlider = function (data, paramname, onSubmit) { - var onChange = null; - var $slider = tinySlider(data, paramname, onChange); + var classname = 'singleslider'; + var $div = $('
'); + var opts = sliderOptions[paramname]; + var startvalue = data.settings[paramname] || opts.start; + var $slider = tinySlider(data, paramname, startvalue); var getValue = function () { // get the new value and do something with it var val = $slider.data('$text').val(); onSubmit(val); }; - setupFormDiv(data, $slider, 'singleslider', getValue); + $div.append($slider); + setupFormDiv(data, $div, classname, getValue); + var hasIndicator = opts.indicator; + if (hasIndicator) { + var cls = data.settings.cssPrefix + classname; + var $ind = indicator(cls); + $div.append($ind); + update = indicators[paramname]; + $slider.data({ + 'cls' : cls, + 'indicator' : $ind, + 'update' : update + }); + update($slider, startvalue); + } }; /** creates a compound RGB slider @@ -281,25 +330,35 @@ var rgbSlider = function (data, onSubmit) { var css = data.settings.cssPrefix; var cls = css + 'rgbslider'; - var html = '\ -
\ - \ -
\ -
\ - \ - \ -
\ -
\ - \ - \ - \ -
\ -
\ -
\ -
'; - var $div = $(html); - var $table = $div.find('table.'+cls); - var onChange = function () { + var $div = $('
'); + var $table = $(''); + var $ind = indicator(cls); + $div.append($table); + $div.append($ind); + var insertTableRow = function(index, value) { + var color = rgb[value]; + // start values are set in "handleSetup" + var $tr = $('').appendTo($table); + var html = '\ + '; + $(html).appendTo($tr); + var $brgt = tinySlider(data, 'brgt', color.a); + var $cont = tinySlider(data, 'cont', color.m); + $table.data(value+'a', $brgt.data('$text')); + $table.data(value+'m', $cont.data('$text')); + $('').appendTo($table); - var html = '\ - '; - $(html).appendTo($tr); - var $brgt = tinySlider(data, 'brgt', onChange, color.a); - var $cont = tinySlider(data, 'cont', onChange, color.m); - $table.data(value+'a', $brgt.data('$text')); - $table.data(value+'m', $cont.data('$text')); - $('
\ +
'+color.label+'
\ + 		').append($brgt).appendTo($tr); + $('').append($cont).appendTo($tr); + }; + var getSliderValues = function () { + // get values from sliders + var input = $table.data(); + var rgba = input['ra'].val() + '/' + input['ga'].val() + '/' + input['ba'].val(); + var rgbm = input['rm'].val() + '/' + input['gm'].val() + '/' + input['bm'].val(); + onSubmit(rgbm, rgba); + }; + var update = function () { // show effects of color brightness/contrast on a grey scale var input = $table.data(); var ra = parseFloat(input['ra'].val()); @@ -315,40 +374,35 @@ var b = Math.min(Math.max(Math.round(Math.pow(2, bm) * val + ba), 0), 255); $(this).css('background-color', 'rgb('+r+','+g+','+b+')'); }; - $div.find('table.'+cls+'indicator td').each(setRGBValue); + $ind.find('table.'+cls+'indicator td').each(setRGBValue); }; - var insertTableRow = function(index, value) { - var color = rgb[value]; - // start values are set in "handleSetup" - var $tr = $('
\ -
'+color.label+'
\ - 		').append($brgt).appendTo($tr); - $('').append($cont).appendTo($tr); - }; + $.each(primaryColors, insertTableRow); + setupFormDiv(data, $div, 'rgbslider', getSliderValues); + $div.find('div.'+css+'tinyslider').data('update', update); + update(); + }; + + /** creates an indicator div with 2 x 9 cells in scaled grey values + */ + var indicator = function (cls) { + var td = new Array(10).join(''); + var html = '\ +
\ + \ + '+td+'\ +
\ + \ + '+td+'\ +
\ +
'; + var $div = $(html); var setGreyScale = function (index) { - // set a series of grey values + // sets a series of grey values var val = index * 32; $(this).css('background-color', 'rgb('+val+','+val+','+val+')'); }; - var getValues = function () { - // get values from sliders - var input = $table.data(); - var rgba = input['ra'].val() + '/' + input['ga'].val() + '/' + input['ba'].val(); - var rgbm = input['rm'].val() + '/' + input['gm'].val() + '/' + input['bm'].val(); - onSubmit(rgbm, rgba); - }; - $.each(primaryColors, insertTableRow); $div.find('table.'+cls+'grey td').each(setGreyScale); - setupFormDiv(data, $div, 'rgbslider', getValues); - onChange(); + return $div; }; // plugin object with name and init