Mercurial > hg > digilib-old
changeset 1137:3b5968aeefac
new region icons; autozoom on click
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/img/fullscreen3.svg Fri Nov 16 16:27:23 2012 +0100 +++ b/webapp/src/main/webapp/jquery/img/fullscreen3.svg Fri Nov 16 18:26:55 2012 +0100 @@ -14,7 +14,7 @@ height="32" id="svg2388" sodipodi:version="0.32" - inkscape:version="0.48.2 r9819" + inkscape:version="0.48.0 r9654" sodipodi:docname="fullscreen3.svg" inkscape:export-filename="/Users/casties/Library/Eclipse/digilib/webapp/src/main/webapp/jquery/img/annotationmark-bg-16.png" inkscape:export-xdpi="44.971478" @@ -119,29 +119,30 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="14.74" - inkscape:cx="-7.5948188" - inkscape:cy="15.995577" - inkscape:current-layer="g3411" + inkscape:zoom="16" + inkscape:cx="9.150834" + inkscape:cy="12.945999" + inkscape:current-layer="g3379" showgrid="true" inkscape:grid-bbox="true" inkscape:document-units="px" - inkscape:window-width="1842" - inkscape:window-height="1156" - inkscape:window-x="1920" - inkscape:window-y="22" + inkscape:window-width="1315" + inkscape:window-height="837" + inkscape:window-x="1436" + inkscape:window-y="-4" inkscape:window-maximized="1" showguides="true" inkscape:guide-bbox="true" inkscape:snap-object-midpoints="true" inkscape:snap-bbox="false" inkscape:snap-grids="false" - inkscape:snap-global="false" + inkscape:snap-global="true" inkscape:snap-nodes="true" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" - fit-margin-bottom="0"> + fit-margin-bottom="0" + gridtolerance="20"> <sodipodi:guide orientation="1,0" position="16.010855,33.58209" @@ -685,6 +686,173 @@ <g transform="translate(-7.8129058,-7.9934033)" style="display:none" + inkscape:label="addregion" + id="g3379" + inkscape:groupmode="layer" + sodipodi:insensitive="true"> + <path + inkscape:connector-curvature="0" + id="path3381" + d="M 12.915288,12.614163 C 9.9553318,15.224054 8.0396378,22.651647 8.0396378,22.651647 l 14.4127362,-0.1326 0.0088,-14.1838871 c 0,0 -6.585901,1.6691121 -9.545857,4.2790031 z" + style="opacity:0.5;fill:#ff0000;fill-opacity:0.50196078;stroke:none" + sodipodi:nodetypes="zcccz" /> + <g + id="g4161" + transform="matrix(0.88047082,0,0,0.88047082,43.111551,8.4688286)"> + <path + sodipodi:nodetypes="cccccccc" + inkscape:connector-curvature="0" + id="path4157" + d="m -24.060724,15.48514 16.4634304,6.098262 -4.6191624,1.83225 7.0538924,7.098116 -3.8922573,3.880236 -7.0695311,-7.0585 -1.91344,4.670384 z" + style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" /> + <path + style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" + d="m -21.906223,17.63962 11.306776,4.103633 -3.379194,1.410923 7.411577,7.345093 -2.431021,2.361109 -7.452469,-7.508167 -1.460981,3.098274 z" + id="path4159" + inkscape:connector-curvature="0" + sodipodi:nodetypes="cccccccc" /> + </g> + <path + style="color:#000000;fill:none;stroke:#ff0000;stroke-width:1.39999998;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:0.50196078;stroke-dasharray:4.19999993, 4.19999993;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible" + d="m 23.198761,8.7499996 c -0.0625,14.4999994 -0.0625,14.4999994 -0.0625,14.4999994 l -14.5625,0" + id="path4034" + inkscape:connector-curvature="0" /> + </g> + <g + transform="translate(-7.8129058,-7.9934033)" + style="display:none" + inkscape:label="findregion" + id="g4224" + inkscape:groupmode="layer" + sodipodi:insensitive="true"> + <path + style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline" + d="m 15.286676,16.485057 0.06185,14.849984 17.012321,0.1799 -0.06185,-14.959775 z" + id="path4195-3" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ccccc" /> + <g + style="display:inline" + id="g7334-3" + transform="matrix(0.82051283,0,0,0.82051283,8.888901,-1.5837498)"> + <path + inkscape:connector-curvature="0" + id="path3290-4" + d="m 7.0446086,42.697351 c -5.781968,5.436776 -5.781968,5.436776 -5.781968,5.436776" + style="fill:none;stroke:#000000;stroke-width:3.0204308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" /> + <path + transform="matrix(1.088683,0,0,1.172638,-8.8022,17.946136)" + d="m 24.857143,16.857143 a 6,5.5714288 0 1 1 -12,0 6,5.5714288 0 1 1 12,0 z" + sodipodi:ry="5.5714288" + sodipodi:rx="6" + sodipodi:cy="16.857143" + sodipodi:cx="18.857143" + id="path3286-5" + style="fill:none;stroke:#000000;stroke-opacity:1;display:inline" + sodipodi:type="arc" /> + </g> + </g> + <g + inkscape:groupmode="layer" + id="g4193" + inkscape:label="showregions" + style="display:none" + transform="translate(-7.8129058,-7.9934033)" + sodipodi:insensitive="true"> + <path + sodipodi:nodetypes="ccccc" + inkscape:connector-curvature="0" + id="path4026" + d="m 15.286676,16.485057 0.06185,14.849984 17.012321,0.1799 -0.06185,-14.959775 z" + style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline" /> + </g> + <g + transform="translate(-7.8129058,-7.9934033)" + style="display:none" + inkscape:label="delregion" + id="g4203" + inkscape:groupmode="layer" + sodipodi:insensitive="true"> + <path + sodipodi:nodetypes="ccccc" + inkscape:connector-curvature="0" + id="path4023" + d="m 15.286676,16.485057 0.06185,14.849984 17.012321,0.1799 -0.06185,-14.959775 z" + style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline" /> + <path + inkscape:connector-curvature="0" + id="path4207" + d="M 12.9086,35.04952 C 34.738922,12.950479 34.738922,12.950479 34.738922,12.950479" + style="fill:none;stroke:#000000;stroke-width:3.28205132;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" /> + </g> + <g + inkscape:groupmode="layer" + id="g4165" + inkscape:label="delregions" + style="display:none" + transform="translate(-7.8129058,-7.9934033)" + sodipodi:insensitive="true"> + <path + style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline" + d="m 34.599176,15.650015 -6.51e-4,6.974984 4.574821,-0.0701 c 0,0 0.16775,-3.502856 -2.749349,-6.959775 -2.917099,-3.456919 -1.824821,0.05489 -1.824821,0.05489 z" + id="path4018" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ccczc" /> + <path + style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline" + d="m 15.286676,16.485057 0.06185,14.849984 17.012321,0.1799 -0.06185,-14.959775 z" + id="path4029" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ccccc" /> + <path + sodipodi:nodetypes="ccczc" + inkscape:connector-curvature="0" + id="path4032" + d="m 12.973066,32.412483 0.06315,-6.412484 -4.512321,-0.0549 c 0,0 -0.29275,3.065356 2.624349,6.522275 2.917099,3.456919 1.824821,-0.05489 1.824821,-0.05489 z" + style="opacity:0.5;fill:#ff0000;fill-opacity:1;stroke:#4d4d4d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline" /> + <path + style="fill:none;stroke:#000000;stroke-width:3.28205132;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" + d="M 12.9086,35.04952 C 34.738922,12.950479 34.738922,12.950479 34.738922,12.950479" + id="path7472-9" + inkscape:connector-curvature="0" /> + </g> + <g + inkscape:groupmode="layer" + id="g4312" + inkscape:label="findcoords" + style="display:none" + transform="translate(-7.8129058,-7.9934033)" + sodipodi:insensitive="true"> + <path + style="fill:none;stroke:#ff0000;stroke-width:1.39999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.50196078;stroke-dasharray:2.8, 2.8;stroke-dashoffset:0;display:inline" + d="m 15.286675,16.485057 0.06185,14.849984 17.012321,0.1799 -0.06185,-14.959775 z" + id="path4195-3-7" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ccccc" /> + <g + transform="matrix(0.82051283,0,0,0.82051283,8.888901,-1.5837498)" + id="g4316" + style="display:inline"> + <path + style="fill:none;stroke:#000000;stroke-width:3.0204308;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" + d="m 7.0446086,42.697351 c -5.781968,5.436776 -5.781968,5.436776 -5.781968,5.436776" + id="path4318" + inkscape:connector-curvature="0" /> + <path + sodipodi:type="arc" + style="fill:none;stroke:#000000;stroke-opacity:1;display:inline" + id="path4320" + sodipodi:cx="18.857143" + sodipodi:cy="16.857143" + sodipodi:rx="6" + sodipodi:ry="5.5714288" + d="m 24.857143,16.857143 a 6,5.5714288 0 1 1 -12,0 6,5.5714288 0 1 1 12,0 z" + transform="matrix(1.088683,0,0,1.172638,-8.8022,17.946136)" /> + </g> + </g> + <g + transform="translate(-7.8129058,-7.9934033)" + style="display:none" inkscape:label="annotations-user" id="g4602" inkscape:groupmode="layer"
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/webapp/src/main/webapp/jquery/img/gen_fullscreen_icons.cmd Fri Nov 16 18:26:55 2012 +0100 @@ -0,0 +1,26 @@ +@echo off +setlocal +set SVGFILE=fullscreen3.svg +set XSLTFILE=gen_fullscreen_icons.xsl +set SVGDIR=fullscreen\svg_gen +rem PNG directory relative to SVGDIR +set PNGDIR=32 + +rem run XSLT to create separate SVG files (in fullscreen/svg) +set SAXON=java -jar U:\Programme\Saxon-9.1\saxon9.jar +echo Running Saxon to create separate SVGs +mkdir %SVGDIR% +%SAXON% %SVGFILE% %XSLTFILE% + +rem create PNGs from separate SVGs using inkscape +set INKSCAPE=U:\programme\inkscape\inkscape.exe +echo Running Inkscape to create PNGs +cd %SVGDIR% +mkdir %PNGDIR% +for %%f in (*.svg) do ( + echo %%f + %INKSCAPE% --file=%%f --export-height=32 --export-png=%PNGDIR%\%%~nf.png + ) + +echo done. +endlocal
--- a/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js Fri Nov 16 16:27:23 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js Fri Nov 16 18:26:55 2012 +0100 @@ -280,6 +280,20 @@ that.overlapsRect = function(rect) { return this.intersect(rect) != null; }; + // returns the ratio of height to width + that.getProportion = function() { + return this.height/this.width; + }; + // shrink/grow rectangle until it has the given proportion + that.setProportion = function(ratio, canGrow) { + var prop = this.getProportion(); + if (ratio < prop == canGrow) { + this.width = this.height / ratio; + } else { + this.height = this.width * ratio; + } + return this; + }; // changes this rectangle's x/y values so it stays inside of rectangle // "rect", keeping the proportions that.stayInside = function(rect) {
--- a/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Fri Nov 16 16:27:23 2012 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.regions.js Fri Nov 16 18:26:55 2012 +0100 @@ -73,27 +73,22 @@ removeallregions : { onclick : "removeAllUserRegions", tooltip : "delete all user defined regions", - icon : "delallregions.png" + icon : "delregions.png" }, regions : { onclick : "toggleRegions", tooltip : "show or hide regions", - icon : "regions.png" + icon : "showregions.png" }, findcoords : { onclick : "findCoords", tooltip : "find a region by entering its relative coordinates", - icon : "regions.png" + icon : "findcoords.png" }, finddata : { onclick : "findData", tooltip : "find a region by entering text", - icon : "regions.png" - }, - regioninfo : { - onclick : "showRegionInfo", - tooltip : "show information about user defined regions", - icon : "regioninfo.png" + icon : "findregion.png" } }; @@ -104,6 +99,8 @@ 'showRegionNumbers' : true, // default width for region when only point is given 'regionWidth' : 0.005, + // zoomfactor for displaying larger area around region (for autoZoomOnClick) + 'regionAutoZoomFactor' : 3, // is there region content in the page? 'processHtmlRegions' : false, // region defined by users and in the URL @@ -112,16 +109,16 @@ 'onClickRegion' : null, // callback when new user region is defined 'onNewRegion' : null, - // turn any region into a clickable link to its detail view (DEPRECATED) - 'autoZoomOnClick' : false, + // turn any region into a clickable link to its detail view + 'autoZoomOnClick' : true, // zoom in when displaying the found region 'autoZoomOnFind' : false, // css selector for area/a elements (must also be marked with class "dl-keep") 'areaSelector' : 'map.dl-regioncontent area, map.dl-regioncontent a', // general buttonset of this plugin - 'regionSet' : ['regions', 'findcoords', 'finddata', 'lessoptions'], + 'regionSet' : ['regions', 'finddata', 'findcoords', 'lessoptions'], // buttonset for region editing by user - 'userRegionSet' : ['defineregion', 'removeregion', 'removeallregions', 'regioninfo'], + 'userRegionSet' : ['defineregion', 'removeregion', 'removeallregions'], // url param for regions 'rg' : null, // array with region data @@ -187,7 +184,7 @@ selector = 'div.'+CSS+'regionURL'; var $region = data.$elem.find(selector).last(); if ($region.length > 0) { - $regionDiv.remove(); + $region.remove(); redisplay(data); return; } @@ -214,53 +211,6 @@ renderRegions(data, 1); }, - // show region info in a window - showRegionInfo : function (data) { - var $elem = data.$elem; - var infoSelector = '#'+CSS+'regionInfo'; - if (fn.isOnScreen(data, infoSelector)) return; // already onscreen - var $regions = getRegions(data, 'regionURL'); - if ($regions.length == 0) return; // no user regions available - var html = '\ - <div id="'+CSS+'regionInfo" class="'+CSS+'keep '+CSS+'regionInfo">\ - <table class="'+CSS+'infoheader">\ - <tr>\ - <td class="'+CSS+'infobutton html">HTML</td>\ - <td class="'+CSS+'infobutton svgattr">SVG</td>\ - <td class="'+CSS+'infobutton csv">CSV</td>\ - <td class="'+CSS+'infobutton digilib">Digilib</td>\ - <td class="'+CSS+'infobutton x">X</td>\ - </tr>\ - </table>\ - </div>'; - $info = $(html); - $info.appendTo($elem); - $info.append(regionInfoHTML(data, $regions)); - $info.append(regionInfoSVG(data, $regions)); - $info.append(regionInfoCSV(data, $regions)); - $info.append(regionInfoDigilib(data, $regions)); - var bind = function (name) { - $info.find('.'+name).on('click.regioninfo', function () { - $info.find('div.'+CSS+'info').hide(); - $info.find('div.'+CSS+name).show(); - fn.centerOnScreen(data, $info); - return false; - }); - }; - bind('html'); - bind('svgattr'); - bind('csv'); - bind('digilib'); - $info.on('click.regioninfo', function () { - fn.withdraw($info); - }); - $info.find('.x').on('click.regioninfo', function () { - fn.withdraw($info); - }); - $info.fadeIn(); - fn.centerOnScreen(data, $info); - }, - // display region coordinates in a selected edit line (for copying) showRegionCoords : function (data, $regionDiv) { var $elem = data.$elem; @@ -400,7 +350,7 @@ var filterOptions = function (text) { if (!text) { // not text, display all options, select first (empty) - $options.show(); + // $options.show(); $select.prop("selectedIndex", 0); return; } @@ -633,52 +583,6 @@ return sorted.join(''); }; - // html for later insertion - var regionInfoHTML = function (data, $regions) { - var $infoDiv = $('<div class="'+CSS+'info '+CSS+'html"/>'); - $infoDiv.append($('<div/>').text('<map class="'+CSS+'keep '+CSS+'regioncontent">')); - $regions.each(function (index, region) { - var rect = $(region).data('rect'); - var coords = packCoords(rect, ','); - $infoDiv.append($('<div/>').text('<area coords="' + coords + '"/>')); - }); - $infoDiv.append($('<div/>').text('</map>')); - return $infoDiv; - }; - - // SVG-style - var regionInfoSVG = function (data, $regions) { - var $infoDiv = $('<div class="'+CSS+'info '+CSS+'svgattr"/>'); - $regions.each(function (index, region) { - var rect = $(region).data('rect'); - var coords = packCoords(rect, ','); - $infoDiv.append($('<div/>').text('"' + coords + '"')); - }); - return $infoDiv; - }; - - // CSV-style - var regionInfoCSV = function (data, $regions) { - var $infoDiv = $('<div class="'+CSS+'info '+CSS+'csv"/>'); - $regions.each(function (index, region) { - var rect = $(region).data('rect'); - var coords = packCoords(rect, ','); - $infoDiv.append($('<div/>').text(index+1 + ": " + coords)); - }); - return $infoDiv; - }; - - // digilib-style (h,w@x,y) - var regionInfoDigilib = function (data, $regions) { - var $infoDiv = $('<div class="'+CSS+'info '+CSS+'digilib"/>'); - $regions.each(function (index, region) { - var rect = $(region).data('rect'); - var coords = packCoords(rect, ','); - $infoDiv.append($('<div/>').text(coords)); - }); - return $infoDiv; - }; - // show a region on top of the scaler image var renderRegion = function (data, $regionDiv, anim) { if (!data.imgTrafo) return; @@ -748,9 +652,19 @@ console.debug('pack regions:', rg); }; - // zoom to the region coordinates - var zoomToRegion = function (data, rect) { - digilib.actions.zoomArea(data, rect); + // zoom in, displaying the region in the middle of the screen + var zoomToRegion = function (data, $regionDiv) { + var settings = data.settings; + var rect = $regionDiv.data('rect'); + var za = rect.copy(); + var factor = settings.regionAutoZoomFactor; + za.width *= factor; + za.height *= factor; + // var screen = fn.getFullscreenRect(data); + za.setProportion(1, true); // avoid extreme zoomArea proportions + za.setCenter(rect.getCenter()).stayInside(FULL_AREA); + fn.setZoomArea(data, za); + fn.redisplay(data); }; // reload display after a region has been added or removed @@ -868,7 +782,7 @@ $data.on('update', handleUpdate); $data.on('newRegion', handleNewRegion); $data.on('regionClick', handleRegionClick); - // default: autoZoom to region, when clicked - DEPRECATED + // default: autoZoom to region, when clicked if (settings.autoZoomOnClick && settings.onClickRegion == null) { settings.onClickRegion = zoomToRegion; }
--- a/webapp/src/main/webapp/jquery/test-findregions.html Fri Nov 16 16:27:23 2012 +0100 +++ b/webapp/src/main/webapp/jquery/test-findregions.html Fri Nov 16 18:26:55 2012 +0100 @@ -33,13 +33,15 @@ <script type="text/javascript"> $(document).ready(function(){ var opts = { - digilibBaseUrl : 'http://img.biblhertz.it/digilib', interactionMode : 'fullscreen', + previewImgWidth : 1200, + previewImgHeight : 800, + maxBgSize : 30000, editRegions : true, processHtmlRegions : true, showRegionNumbers : true, + fn : 'piantediroma/00030-1577_Duperac_Stefano_BL_Map_Room_Maps_23805', - onClickRegion : 'showRegionCoords', onNewRegion : 'showRegionCoords', regionSortString : function(s) { var a = s.match(/[A-Z]\w\w.*$/i);