Mercurial > hg > digilib
changeset 1572:046d89ff70b3 measure-maps
merge in newer files from default branch
| author | hertzhaft |
|---|---|
| date | Mon, 07 Nov 2016 01:40:01 +0100 |
| parents | 001e6fa1c7fb |
| children | 6f15d2ad5333 |
| files | webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js webapp/src/main/webapp/jquery/jquery.digilib.css webapp/src/main/webapp/jquery/jquery.digilib.js webapp/src/main/webapp/jquery/jquery.digilib.regions.js webapp/src/main/webapp/jquery/jquery.digilib.sliders.js |
| diffstat | 5 files changed, 158 insertions(+), 61 deletions(-) [+] |
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js Thu Nov 03 22:55:51 2016 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.birdseye.js Mon Nov 07 01:40:01 2016 +0100 @@ -35,7 +35,7 @@ var FULL_AREA; var buttons = { - bird : { + bird: { 'onclick' : "showBirdDiv", 'tooltip' : "show bird's eye view", 'icon' : "birds-eye.png" @@ -56,7 +56,7 @@ var actions = { // event handler: toggles the visibility of the bird's eye window - showBirdDiv : function (data, show) { + showBirdDiv: function (data, show) { var settings = data.settings; if (data.$birdDiv == null) { // no bird div: create it @@ -87,8 +87,11 @@ // insert in button list -- not elegant if (digilib.plugins.buttons != null) { // if (digilib.defaults.buttonSettings != null) { - digilib.defaults.buttonSettings.fullscreen.standardSet.splice(9, 0, 'bird'); - digilib.defaults.buttonSettings.embedded.standardSet.splice(5, 0, 'bird'); + var fset = digilib.defaults.buttonSettings.fullscreen.standardSet; + var eset = digilib.defaults.buttonSettings.embedded.standardSet; + // dynamic insert before [about, reset, moreoptions] + fset.splice(fset.length - 3, 0, 'bird'); + eset.splice(eset.length - 3, 0, 'bird'); } }; @@ -140,8 +143,8 @@ var getBirdImgUrl = function (data) { var settings = data.settings; var birdDivOptions = { - dw : settings.birdDivWidth, - dh : settings.birdDivHeight + dw: settings.birdDivWidth, + dh: settings.birdDivHeight }; var birdSettings = $.extend({}, settings, birdDivOptions); // use only the relevant parameters @@ -275,7 +278,7 @@ newRect = null; data.$elem.find('.'+cssPrefix+'overlay').hide(); // hide all overlays (marks/regions) // hide image - digilib.fn.fadeScalerImg(data, 0); + digilib.fn.fadeScalerImg(data, 'hide'); $document.on("mousemove.dlBirdMove", birdZoomMove); $document.on("mouseup.dlBirdMove", birdZoomEndDrag); return false;
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css Thu Nov 03 22:55:51 2016 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.css Mon Nov 07 01:40:01 2016 +0100 @@ -113,7 +113,6 @@ background-color: red; opacity: 0.3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; - filter: alpha(opacity=30); } div.dl-digilib div.dl-region a:link, @@ -131,7 +130,6 @@ border: none; opacity: 0.3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; - filter: alpha(opacity=30); } div.dl-digilib div.dl-regionHTML { @@ -164,7 +162,6 @@ border: 5px solid aqua; opacity: 0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; - filter: alpha(opacity=80); } div.dl-digilib div.dl-findregion { @@ -172,7 +169,6 @@ border: 5px solid aqua; opacity: 0.8; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; - filter: alpha(opacity=80); } div.dl-digilib select.dl-finddata { @@ -355,7 +351,6 @@ background-color: black; opacity: 0.3; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; - filter: alpha(opacity=30); } div.dl-digilib table.dl-scalertable img.button { @@ -428,7 +423,6 @@ background-color: gray; opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - filter: alpha(opacity=50); z-index: 100; }
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js Thu Nov 03 22:55:51 2016 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.js Mon Nov 07 01:40:01 2016 +0100 @@ -102,6 +102,10 @@ 'previewImgParamNames' : ['fn','pn','dw','dh','mo','rot'], // reserved space in full page display (default value accounts for body margins) 'scalerInsets' : { 'x' : 26, 'y': 20 }, + // how transparent does the background image get while changing the zoom area? + 'scalerFadedOpacity' : 0.6, + // show a little window with file size and zoom information + 'showZoomInfo' : false, // number of decimal places, for cropping parameters wx,wy,wh,ww 'decimals' : 4 }; @@ -261,6 +265,10 @@ // create HTML structure for scaler setupScalerDiv(data); // additional initializations before setup (e.g. for single nested settings) + if (settings.showZoomInfo) { + actions.zoomInfo(data); + loadImageInfo(data); + } if (typeof hook === 'function') { hook(data); console.debug('init hook', hook, data); @@ -320,6 +328,28 @@ centerOnScreen(data, $about); }, + /** show the 'zoominfo' window + * + * @param data + */ + zoomInfo : function(data) { + var $elem = data.$elem; + var settings = data.settings; + var cssPrefix = settings.cssPrefix; + var zoomInfoSelector = '#'+cssPrefix+'zoominfo'; + if (isOnScreen(data, zoomInfoSelector)) { + $(zoomInfoSelector).fadeToggle(); + return; + } + var html = '\ + <div id="'+cssPrefix+'zoominfo" class="'+cssPrefix+'zoominfo" style="display:none">\ + <div id="'+cssPrefix+'zoominfo1" />\ + <div id="'+cssPrefix+'zoominfo2" />\ + </div>'; + var $zoominfo = $(html); + $zoominfo.appendTo($elem); + }, + /** goto given page nr (+/-: relative) * * @param data @@ -375,9 +405,9 @@ // interactively var onComplete = function(data, rect) { if (rect == null) return; + // hide image, show dimmed background + fadeScalerImg(data, 'fadeOut'); setZoomArea(data, rect); - // reset modes - setFitMode(data, 'both'); setScaleMode(data, 'screen'); redisplay(data); }; @@ -394,9 +424,9 @@ * @param mode */ zoomFull : function (data, mode) { + setFitMode(data, mode); + data.$scaler.css('opacity', data.settings.scalerFadedOpacity); setZoomArea(data, FULL_AREA.copy()); - setFitMode(data, mode); - // zoom full only works in screen mode setScaleMode(data, 'screen'); redisplay(data); }, @@ -506,6 +536,8 @@ var settings = data.settings; var paramNames = settings.digilibParamNames; var params = data.queryParams; + // dim image, show something is happening + data.$scaler.css('opacity', data.settings.scalerFadedOpacity); // delete all digilib parameters for (var i = 0; i < paramNames.length; i++) { var paramName = paramNames[i]; @@ -562,8 +594,7 @@ } return url; }, - - + /** set image quality * * @param data @@ -995,11 +1026,12 @@ loadImageInfo(data); } } - // update if we have a preview - if (data.hasPreviewBg) { - $(data).trigger('update'); - } - //FIXME: highlightButtons(data); + // update if we have a preview + // --- too early here, 'update' is triggered by scalerImgLoadedHandler + // if (data.hasPreviewBg) { + // $(data).trigger('update'); + // } + // FIXME: highlightButtons(data); // send event $(data).trigger('redisplay'); } catch (e) { @@ -1059,6 +1091,20 @@ var data = this; updateImgTrafo(data); setupZoomDrag(data); + updateZoomInfo(data); + }; + + var updateZoomInfo = function (data) { + if (!data.settings.showZoomInfo) { + return; + } + var $zoominfo = $('#'+data.settings.cssPrefix+'zoominfo'); + // console.debug(data.$elem.width(), data.zoomArea.width, json.width); + var json = data.imgInfo; + var px = data.$img.width(); + var percent = Math.round(px / data.zoomArea.width / json.width * 100); + $zoominfo.children().first().text(json.width+'x'+json.height); + $zoominfo.children().last().text('zoom '+percent+'%'); }; /** @@ -1278,14 +1324,15 @@ $scaler.css('cursor', 'auto'); // adjust scaler div size (beware: setting position makes the element relative) imgRect.getSize().adjustDiv($scaler); + // initial load of scaler background (for preview) + if (!data.hasPreviewBg) { + setPreviewBg(data, data.zoomArea); + } // show image in case it was hidden (for example in zoomDrag) - $img.css('visibility', 'visible'); - $img.fadeIn(); - // $scaler.css({'opacity' : '1'}); - $scaler.fadeTo('slow', 1); - data.hasPreviewBg = false; + fadeScalerImg(data, 'fadeIn'); // update display (render marks, etc.) updateDisplay(data); + // console.debug("* load handler finished"); }; }; @@ -1300,6 +1347,8 @@ var handleImageInfo = function (evt, json) { console.debug("handleImageInfo:", json); var data = this; + var $zoominfo = $('#'+data.settings.cssPrefix+'zoominfo'); + $zoominfo.fadeIn(); updateDisplay(data); }; @@ -1307,7 +1356,7 @@ * */ var handleChangeZoomArea = function (evt, newZa) { - console.debug("handleChangeZoomArea:", newZa); + // console.debug("handleChangeZoomArea:", newZa); var data = this; // hide all overlays (marks/regions) data.$elem.find('.'+data.settings.cssPrefix+'overlay').hide(); @@ -1328,9 +1377,11 @@ newarea.y -= 0.5 * (newarea.height - area.height); newarea = FULL_AREA.fit(newarea); setZoomArea(data, newarea); + // hide image, show dimmed background + fadeScalerImg(data, 'fadeOut'); // reset modes setScaleMode(data, 'screen'); - setFitMode(data, 'both'); + // setFitMode(data, 'both'); // ###? redisplay(data); }; @@ -1423,14 +1474,15 @@ 'cursor' : 'move' }; if (newZoomArea != null) { - // check if aspect ratio has changed - if (Math.abs(newZoomArea.getAspect() - data.zoomArea.getAspect()) > 0.001 ) { - var newRect = data.imgTrafo.transform(newZoomArea); + // check if aspect ratio has changed + if (Math.abs(newZoomArea.getAspect() - data.zoomArea.getAspect()) > 0.001) { + var newRect = imgTrafo.transform(newZoomArea); var newAspect = newRect.getAspect(); var newSize = data.maxImgSize.fitAspect(newAspect); // set scaler to presumed new size newSize.adjustDiv($scaler); - console.debug("adjusting aspect ratio for preview", data.maxImgSize, newSize); + console.debug("adjusting aspect ratio of preview:", + data.maxImgSize.toString(), '=>', newSize.toString()); } // get transform for new zoomArea (use 'screen' instead of data.scaleMode) imgTrafo = getImgTrafo($scaler, newZoomArea, data.settings.rot, @@ -1461,8 +1513,8 @@ scalerCss[data.bgSizeName] += ', ' + Math.round(fullRect.width) + 'px ' + Math.round(fullRect.height) + 'px'; scalerCss['background-position'] += ', ' + Math.round(fullRect.x) + 'px '+ Math.round(fullRect.y) + 'px'; } - // console.debug('setPreviewBg', scalerCss); } + // console.debug('* setPreviewBg', scalerCss[data.bgSizeName], 'pos', scalerCss['background-position']); $scaler.css(scalerCss); data.hasPreviewBg = true; }; @@ -1488,10 +1540,8 @@ $elem.find('.'+data.settings.cssPrefix+'overlay').hide(); // hide all overlays (marks/regions) startPos = geom.position(evt); delta = null; - // hide the scaler img, show background of div instead - $img.css('visibility', 'hidden'); - $img.hide(); - $scaler.fadeTo('slow', 0.7); + // hide image, show dimmed background + fadeScalerImg(data, 'hide'); // set low res background immediately on mousedown setPreviewBg(data); $document.on("mousemove.dlZoomDrag", dragMove); @@ -1519,12 +1569,8 @@ $document.off("mousemove.dlZoomDrag", dragMove); $document.off("mouseup.dlZoomDrag", dragEnd); if (delta == null || delta.distance() < 2) { - // no movement - $img.css('visibility', 'visible'); - $img.fadeIn(); - $scaler.fadeTo('slow', 1); - // $scaler.css({'opacity' : '1', 'background-image' : 'none'}); - data.hasPreviewBg = false; + // no change, show image again + fadeScalerImg(data, 'fadeIn'); // unhide marks etc. updateDisplay(data); return false; @@ -1581,6 +1627,35 @@ return parseInt(q[1], 10); }; + /** hide or show image, fade scaler background + * + */ + var fadeScalerImg = function (data, show) { + var $img = data.$img; + var $scaler = data.$scaler; + if (show == null || show === 'hide') { + $scaler.css('opacity', data.settings.scalerFadedOpacity); + $img.fadeOut(function(){ + // console.debug("* img hide", $img.css('display')); + }); + } else if (show === 'fadeOut') { + $scaler.fadeTo('fast', data.settings.scalerFadedOpacity, function() { + // console.debug("* scaler fadeOut", $img.css('display'), $img.css('opacity')); + $img.fadeOut(function(){ + console.debug("* img fadeOut", $img.css('display')); + }); + }); + } else { + data.hasPreviewBg = false; + $img.fadeIn(function(){ + // console.debug("* img fadeIn", $img.css('display')); + }); + $scaler.fadeTo('slow', 1, function() { + // console.debug("* scaler fadeIn", $img.css('display'), $img.css('opacity')); + }); + } + }; + /** set image quality as a number (0..2). * */ @@ -1882,6 +1957,7 @@ storeOptions : storeOptions, redisplay : redisplay, updateDisplay : updateDisplay, + fadeScalerImg : fadeScalerImg, showDiv : showDiv, defineArea : defineArea, setZoomArea : setZoomArea,
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Thu Nov 03 22:55:51 2016 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Mon Nov 07 01:40:01 2016 +0100 @@ -171,9 +171,9 @@ } var onComplete = function (data, rect) { if (rect == null) return; - var count = getRegions(data, 'regionURL').length; + var index = getRegions(data, 'regionURL').length + 1; var attr = {'class' : CSS+'regionURL '+CSS+'overlay'}; - var item = {'rect' : rect, 'index' : count, 'attributes' : attr}; + var item = {'rect' : rect, 'index' : index, 'attributes' : attr}; var $regionDiv = addRegionDiv(data, item); fn.highlightButtons(data, 'defineregion', 0); redisplay(data); @@ -232,7 +232,7 @@ var show = !data.settings.isRegionVisible; data.settings.isRegionVisible = show; fn.highlightButtons(data, 'regions', show); - renderRegions(data, 0); + renderRegions(data, 1); return show; }, @@ -689,7 +689,7 @@ za.setCenter(rect.getCenter()).stayInside(FULL_AREA); fn.setZoomArea(data, za); // hide image - fn.fadeScalerImg(data, 0); + fn.fadeScalerImg(data, 'fadeOut'); fn.redisplay(data); }; @@ -762,7 +762,7 @@ console.debug("regions: handleUpdate"); var settings = data.settings; fn.highlightButtons(data, 'regions' , settings.isRegionVisible); - renderRegions(data); + renderRegions(data, 1); }; // additional buttons
--- a/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Thu Nov 03 22:55:51 2016 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.sliders.js Mon Nov 07 01:40:01 2016 +0100 @@ -100,6 +100,9 @@ var actions = { // shows brightness slider sliderBrgt : function (data) { + if (removeSlider(data)) { + return; + } // 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); var options = sliderOptions.brightness; @@ -117,6 +120,9 @@ // shows contrast slider sliderCont : function (data) { + if (removeSlider(data)) { + return; + } var options = sliderOptions.contrast; var onChange = function($slider, val) { var m = Math.pow(2, parseFloat(val)); @@ -132,6 +138,9 @@ // shows rotate slider sliderRot : function (data) { + if (removeSlider(data)) { + return; + } var options = sliderOptions.rotation; var onChange = null; var onSubmit = function(val) { @@ -142,6 +151,9 @@ // shows RGB sliders sliderRGB : function (data) { + if (removeSlider(data)) { + return; + } var onSubmit = function(m, a) { digilib.actions.setRGB(data, m, a); }; @@ -248,8 +260,6 @@ var cls = cssPrefix + cssSuffix; var tiny = cssPrefix + 'tinyslider'; var $elem = data.$elem; - var sliderSelector = '#'+cssPrefix+'slider'; - if (fn.isOnScreen(data, sliderSelector)) return null; // already onscreen var html = '\ <div id="'+cssPrefix+'slider" class="'+cls+'">\ <form class="'+cls+'">\ @@ -303,6 +313,19 @@ return $div; }; + /** removes slider window if on screen + */ + var removeSlider = function (data) { + var selector = '#'+ data.settings.cssPrefix + 'slider'; + if (fn.isOnScreen(data, selector)) { + var $div = $(selector); + fn.withdraw($div); + return true; + } + return false; + }; + + /** creates a TinyRange slider */ var tinySlider = function (data, options, startvalue) { @@ -366,9 +389,10 @@ the new value is passed to the "onSubmit" function. */ var singleSlider = function (data, options, onChange, onSubmit) { + var settings = data.settings; var classname = 'singleslider'; - var $div = $('<div/>'); - var startvalue = data.settings[options.param] || options.start; + var $div = $('<div>'); + var startvalue = settings[options.param] || options.start; var $slider = tinySlider(data, options, startvalue); var getValue = function () { // get the new value and do something with it @@ -381,7 +405,7 @@ setupFormDiv(data, $div, classname, getValue); var hasPreview = options.preview; if (hasPreview) { - var cls = data.settings.cssPrefix + classname; + var cls = settings.cssPrefix + classname; var $preview = preview(cls); $div.append($preview); $slider.data({ @@ -398,8 +422,8 @@ var rgbSlider = function (data, onSubmit) { var css = data.settings.cssPrefix; var cls = css + 'rgbslider'; - var $div = $('<div/>'); - var $table = $('<table class="'+cls+'" />'); + var $div = $('<div>'); + var $table = $('<table>', { class: cls }); var $preview = preview(cls); $div.append($table); $div.append($preview); @@ -407,7 +431,7 @@ var insertTableRow = function(index, value) { var color = colorVals[value]; // start values are set in "handleSetup" - var $tr = $('<tr/>').appendTo($table); + var $tr = $('<tr>').appendTo($table); var html = '\ <td class="'+css+'color '+css+value+'">\ <div>'+color.label+'</div>\ @@ -417,8 +441,8 @@ var $cont = tinySlider(data, sliderOptions.contrast, color.m); $table.data(value+'a', $brgt.data('$text')); $table.data(value+'m', $cont.data('$text')); - $('<td class="'+css+'rgb"/>').append($brgt).appendTo($tr); - $('<td class="'+css+'rgb"/>').append($cont).appendTo($tr); + $('<td>', { class: css+'rgb' }).append($brgt).appendTo($tr); + $('<td>', { class: css+'rgb' }).append($cont).appendTo($tr); }; var onChange = function ($slider) { // show effects of color brightness/contrast on a grey scale