# HG changeset patch # User hertzhaft # Date 1391711575 -3600 # Node ID 05a07c9852a3696c5f5ba70be7feca08e6bcc8f8 # Parent 8f8dff61535a17ddee9329c3d657aec82ae753aa transparent plugin: adjust opacity; make sliders plugin reusable diff -r 8f8dff61535a -r 05a07c9852a3 webapp/src/main/webapp/jquery/jquery.digilib.css --- a/webapp/src/main/webapp/jquery/jquery.digilib.css Thu Feb 06 16:11:31 2014 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.css Thu Feb 06 19:32:55 2014 +0100 @@ -230,7 +230,7 @@ } div.dl-digilib table.dl-rgbslider td.dl-rgb { - width: 40%; + width: 180px; padding: 6px; border: 2px solid aqua; } @@ -239,7 +239,6 @@ display: none; border: 2px solid aqua; background-color: silver; - width: 400px; padding: 10px; position: absolute; top: 0px; diff -r 8f8dff61535a -r 05a07c9852a3 webapp/src/main/webapp/jquery/jquery.digilib.sliders.js --- a/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Thu Feb 06 16:11:31 2014 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Thu Feb 06 19:32:55 2014 +0100 @@ -38,7 +38,8 @@ var defaults = {}; var sliderOptions = { - rot : { + rotation : { + param : 'rot', label : "Rotation angle", tooltip : "rotate image", icon : "rotate.png", @@ -48,7 +49,8 @@ step : 5, start : 0 }, - brgt : { + brightness : { + param : 'brgt', label : "Brightness", tooltip : "set numeric value to be added", icon : "brightness.png", @@ -58,7 +60,8 @@ step : 10, start : 0 }, - cont : { + contrast : { + param : 'cont', label : "Contrast", tooltip : "set numeric value to be multiplied", icon : "contrast.png", @@ -99,8 +102,9 @@ sliderBrgt : function (data) { // adjust min and max for contrast value (not nice to change sliderOptions) var maxBrgt = Math.max(Math.round(255 * Math.pow(2, data.settings.cont)), 255); - sliderOptions.brgt.min = -maxBrgt; - sliderOptions.brgt.max = maxBrgt; + var options = sliderOptions.brightness; + options.min = -maxBrgt; + options.max = maxBrgt; var onChange = function($slider, val) { colorVals['brgt'] = parseFloat(val); updatePreview($slider); @@ -108,11 +112,12 @@ var onSubmit = function(val) { digilib.actions.brightness(data, val); }; - singleSlider(data, 'brgt', onChange, onSubmit); + singleSlider(data, options, onChange, onSubmit); }, // shows contrast slider sliderCont : function (data) { + var options = sliderOptions.contrast; var onChange = function($slider, val) { var m = Math.pow(2, parseFloat(val)); colorVals['cont'] = val; @@ -122,16 +127,17 @@ var onSubmit = function(val) { digilib.actions.contrast(data, val, true); }; - singleSlider(data, 'cont', onChange, onSubmit); + singleSlider(data, options, onChange, onSubmit); }, // shows rotate slider sliderRot : function (data) { + var options = sliderOptions.rotation; var onChange = null; var onSubmit = function(val) { digilib.actions.rotate(data, val); }; - singleSlider(data, 'rot', onChange, onSubmit); + singleSlider(data, options, onChange, onSubmit); }, // shows RGB sliders @@ -192,6 +198,8 @@ digilib = plugin; console.debug('installing sliders plugin. digilib:', digilib); fn = digilib.fn; + // export slider function + fn.slider = singleSlider; // import geometry classes geom = fn.geometry; // add defaults, actions, buttons @@ -240,7 +248,7 @@ var tiny = cssPrefix + 'tinyslider'; var $elem = data.$elem; var sliderSelector = '#'+cssPrefix+'slider'; - if (fn.isOnScreen(data, sliderSelector)) return; // already onscreen + if (fn.isOnScreen(data, sliderSelector)) return null; // already onscreen var html = '\
\
\ @@ -296,16 +304,15 @@ /** creates a TinyRange slider */ - var tinySlider = function (data, paramname, startvalue) { + var tinySlider = function (data, options, startvalue) { var $elem = data.$elem; - var opts = sliderOptions[paramname]; var cssPrefix = data.settings.cssPrefix; var cls = cssPrefix + 'tinyslider'; var html = '\
\ - '+opts.label+'\ - \ - \ + '+options.label+'\ + \ + \
'; var $slider = $(html); var $range = $slider.find('input.'+cls+'range'); @@ -317,8 +324,8 @@ var update = $slider.data('update'); if ($.isFunction(update)) { update($slider, val); - } - }; + } + }; var textChange = function () { var val = $text.val(); $range.val(val); @@ -327,20 +334,20 @@ var HTML5 = $range.prop('type') === 'range'; if (!HTML5) { $range.range('set', val); - } + } var update = $slider.data('update'); if ($.isFunction(update)) { update($slider, val); - } - }; + } + }; var reset = function () { $text.val(startvalue); textChange(); - }; + }; var resetdefault = function () { $text.val(opts.start); textChange(); - }; + }; // connect slider and input $range.on('change', rangeChange); $text.on('change', textChange); @@ -354,34 +361,34 @@ return $slider; }; - /** creates a single TinyRangeSlider for param "paramname", + /** creates a single TinyRangeSlider with options "options", the new value is passed to the "onSubmit" function. */ - var singleSlider = function (data, paramname, onChange, onSubmit) { + var singleSlider = function (data, options, onChange, onSubmit) { var classname = 'singleslider'; var $div = $('
'); - var opts = sliderOptions[paramname]; - var startvalue = data.settings[paramname] || opts.start; - var $slider = tinySlider(data, paramname, startvalue); + var startvalue = data.settings[options.param] || options.start; + var $slider = tinySlider(data, options, startvalue); var getValue = function () { // get the new value and do something with it var val = $slider.data('$text').val(); - onSubmit(val); + if (typeof onSubmit === 'function') { + onSubmit(val); + } }; $div.append($slider); setupFormDiv(data, $div, classname, getValue); - var hasPreview = opts.preview; + var hasPreview = options.preview; if (hasPreview) { var cls = data.settings.cssPrefix + classname; var $preview = preview(cls); $div.append($preview); $slider.data({ 'cls' : cls, - 'preview' : $preview, - 'update' : onChange + 'preview' : $preview }); - onChange($slider, startvalue); - } + } + $slider.data({'update' : onChange}); }; /** creates a compound RGB slider @@ -405,8 +412,8 @@
'+color.label+'
\ '; $(html).appendTo($tr); - var $brgt = tinySlider(data, 'brgt', color.a); - var $cont = tinySlider(data, 'cont', color.m); + var $brgt = tinySlider(data, sliderOptions.brightness, color.a); + var $cont = tinySlider(data, sliderOptions.contrast, color.m); $table.data(value+'a', $brgt.data('$text')); $table.data(value+'m', $cont.data('$text')); $('').append($brgt).appendTo($tr); @@ -426,7 +433,9 @@ 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); + if (typeof onSubmit === 'function') { + (rgbm, rgba); + } }; $.each(primaryColors, insertTableRow); setupFormDiv(data, $div, 'rgbslider', submitSliderValues); diff -r 8f8dff61535a -r 05a07c9852a3 webapp/src/main/webapp/jquery/jquery.digilib.transparent.js --- a/webapp/src/main/webapp/jquery/jquery.digilib.transparent.js Thu Feb 06 16:11:31 2014 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.transparent.js Thu Feb 06 19:32:55 2014 +0100 @@ -64,16 +64,28 @@ }, }; + var sliderOptions = { + param : 'trop', + label : "Transparency", + tooltip : "set opacity of the transparent image", + icon : "set-opacity.png", + preview : false, + min : 0.0, + max : 1.0, + step : 0.05, + start : 0.0 + }; + var defaults = { // is transparent image visible? 'isTransparentVisible' : false, - // Transparency of image - 'opacity' : 0.5, + // Opacity of transparent image + 'trop' : 0.5, // digilib file path for transparent image - 'tfn' : '', + 'trfn' : '', // digilib file number for transparent image - 'tpn' : '', - // relative digilib coordinates for transparent image + 'trpn' : '', + // digilib coordinates for transparent image (relative to scaler image) 'trect' : null, // general buttonset of this plugin 'transparentSet' : ['toggletransparent', 'setopacity', 'movetransparent', 'zoomtransparent'] @@ -81,66 +93,83 @@ var actions = { // show or hide transparent image - toggleTransparent : function (data, param) { - var settings = data.settings; - var show = !data.settings.isTransparentVisible; - data.settings.isTransparentVisible = show; - fn.highlightButtons(data, 'transparent', show); - renderTransparent(data); + toggleTransparent : function (data) { + if (data.$transparent == null) { + createTransparent(data); + } + showTransparent(data); console.log('toggleTransparent'); - }, + }, + // make the scaler image shine through - setOpacity : function (data, param) { + setOpacity : function (data) { + var $tp = data.$transparent; + if ($tp == null) { + return; + } var settings = data.settings; - console.log('setOpacity'); - }, + var onChange = function($slider, val) { + $tp.css('opacity', val); + }; + var onSubmit = function(val) { + $tp.css('opacity', val); + settings.trop = val; + }; + var $slider = fn.slider(data, sliderOptions, onChange, onSubmit); + console.log('setOpacity', settings.trop, $slider); + }, + // move the transparent image with respect to the scaler image moveTransparent : function (data, param) { var settings = data.settings; console.log('moveTransparent'); - }, + }, + // zoom the transparent image with respect to the scaler image zoomTransparent : function (data, param) { var settings = data.settings; console.log('zoomTransparent'); - } + } }; // show a transparent image on top of the scaler image - var renderTransparent = function (data) { - //var zoomArea = data.zoomArea; - //if (!data.imgTrafo) return; + var createTransparent = function (data) { var settings = data.settings; - var cssPrefix = data.settings.cssPrefix; - var selector = '#'+cssPrefix+'transparent'; - var $tp = data.$tp; - if ($tp == null) { - $tp = $('
'); - var queryString = fn.getParamString(settings, ['dw', 'dh']); - var file = settings.tfn - ? "&fn=" + settings.tfn - : "&pn=" + settings.tpn; - var url = settings.scalerBaseUrl + '?' + queryString + file; - var css = { - 'position' : 'absolute', - 'background-image' : 'url(' + url + ')', - 'background-repeat' : 'no-repeat', - 'background-position' : '0px 0px', - 'opacity' : settings.opacity - }; - $tp.css(css); - data.$elem.append($tp); - data.$tp = $tp; - } + var cssPrefix = settings.cssPrefix; + var $tp = $('
'); + var queryString = fn.getParamString(settings, ['dw', 'dh']); + var file = settings.trfn + ? "&fn=" + settings.trfn + : "&pn=" + settings.trpn; + var url = settings.scalerBaseUrl + '?' + queryString + file; + var css = { + 'background-image' : 'url(' + url + ')', + 'background-repeat' : 'no-repeat', + 'background-position' : '0px 0px', + 'display' : 'none', + 'position' : 'absolute', + 'opacity' : settings.trop + }; + $tp.css(css); + data.$transparent = $tp; + data.$elem.append($tp); + showTransparent(data); + }; + + // show transparent image + var showTransparent = function (data) { + var $tp = data.$transparent; var show = data.settings.isTransparentVisible; - if (show){ + data.settings.isTransparentVisible = !show; + fn.highlightButtons(data, 'transparent', show); + if (show) { $tp.fadeIn(); data.imgRect.adjustDiv($tp); } else { $tp.fadeOut(); - } - }; + } + }; // reload display after the transparent has been moved or resized var redisplay = function (data) { @@ -185,6 +214,9 @@ geom = digilib.fn.geometry; // import digilib functions $.extend(fn, digilib.fn); + if (fn.slider == null) { + return console.error('jquery.digilib.sliders.js is needed for transparent plugin') + } FULL_AREA = geom.rectangle(0,0,1,1); // add defaults, actions, buttons to the main digilib object $.extend(digilib.defaults, defaults);