# HG changeset patch
# User hertzhaft
# Date 1298246635 -3600
# Node ID 1a7b14deae3acd428589b6106d13c71de7a20364
# Parent b484631f37c1fc3f77110e5646a23c4e547ee9ca
regions plugin works, inclunding event handlers
diff -r b484631f37c1 -r 1a7b14deae3a client/digitallibrary/jquery/jquery-test-full.html
--- a/client/digitallibrary/jquery/jquery-test-full.html Mon Feb 21 01:00:26 2011 +0100
+++ b/client/digitallibrary/jquery/jquery-test-full.html Mon Feb 21 01:03:55 2011 +0100
@@ -69,7 +69,8 @@
$(document).ready(function(){
var opts = {
interactionMode : 'fullscreen',
- scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler'
+ scalerBaseUrl : 'http://digilib.biblhertz.it/digilib04/servlet/Scaler',
+ showRegionNumbers : true
};
var $div = $('div.digilib');
$div.digilib(opts);
diff -r b484631f37c1 -r 1a7b14deae3a client/digitallibrary/jquery/jquery.digilib.css
--- a/client/digitallibrary/jquery/jquery.digilib.css Mon Feb 21 01:00:26 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.css Mon Feb 21 01:03:55 2011 +0100
@@ -57,10 +57,24 @@
}
div.digilib div.region {
+ position: absolute;
background-color: red;
+ opacity: 0.3;
+}
+
+div.digilib div.region:hover {
opacity: 0.5;
}
+div.regionnumber {
+ color: white;
+ font-size: 11px;
+ font-weight: bold;
+ height: 15px;
+ width: 16px;
+ margin: 3px;
+}
+
/* special definitions for fullscreen */
div.digilib.dl_fullscreen div.buttons {
position: fixed;
diff -r b484631f37c1 -r 1a7b14deae3a client/digitallibrary/jquery/jquery.digilib.js
--- a/client/digitallibrary/jquery/jquery.digilib.js Mon Feb 21 01:00:26 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.js Mon Feb 21 01:03:55 2011 +0100
@@ -791,8 +791,9 @@
if (i) {
settings.mk += ',';
}
- settings.mk += cropFloat(data.marks[i].x).toString() +
- '/' + cropFloat(data.marks[i].y).toString();
+ settings.mk +=
+ cropFloatStr(data.marks[i].x) + '/' +
+ cropFloatStr(data.marks[i].y);
}
}
// Scaler flags
@@ -1236,7 +1237,7 @@
var data = this;
updateDisplay(data);
};
-
+
// place marks on the image
var renderMarks = function (data) {
if (data.$img == null || data.imgTrafo == null) return;
@@ -1251,8 +1252,9 @@
var mpos = data.imgTrafo.transform(mark);
console.debug("renderMarks: mpos=",mpos);
// create mark
- var html = ''+(i+1)+'
';
+ var html = ''+(i+1)+'
';
var $mark = $(html);
+ $mark.attr("id", "dibilib.mark." + i);
$elem.append($mark);
mpos.adjustDiv($mark);
}
@@ -1362,8 +1364,6 @@
var $scaler = data.$scaler;
var $img = data.$img;
var fullRect = null;
- // hide marks
- data.$elem.find('div.mark').hide();
// hide the scaler img, show background of div instead
$img.css('visibility', 'hidden');
var scalerCss = {
@@ -1405,9 +1405,10 @@
// drag the image and load a new detail on mouse up
var dragStart = function (evt) {
- console.debug("dragstart at=",evt);
+ console.debug("dragstart at=", evt);
// don't start dragging if not zoomed
if (isFullArea(data.zoomArea)) return false;
+ $elem.find(".overlay").hide(); // hide all overlays (marks/regions)
startPos = geom.position(evt);
delta = null;
// set low res background immediately on mousedown
@@ -1449,6 +1450,7 @@
$scaler.css({'opacity' : '1', 'background-image' : 'none'});
// unhide marks
data.$elem.find('div.mark').show();
+ $(data).trigger('redisplay');
return false;
}
// get old zoom area (screen coordinates)
@@ -1553,6 +1555,11 @@
return parseInt(10000 * x, 10) / 10000;
};
+ // idem, string version
+ var cropFloatStr = function (x) {
+ return cropFloat(x).toString();
+ };
+
// fallback for console.log calls
if (customConsole) {
var logFunction = function(type) {
@@ -1593,7 +1600,10 @@
getScaleMode : getScaleMode,
setScaleMode : setScaleMode,
isFullArea : isFullArea,
- getBorderWidth : getBorderWidth
+ isNumber : isNumber,
+ getBorderWidth : getBorderWidth,
+ cropFloat : cropFloat,
+ cropFloatStr : cropFloatStr
};
// hook digilib plugin into jquery
diff -r b484631f37c1 -r 1a7b14deae3a client/digitallibrary/jquery/jquery.digilib.pluginstub.js
--- a/client/digitallibrary/jquery/jquery.digilib.pluginstub.js Mon Feb 21 01:00:26 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.pluginstub.js Mon Feb 21 01:03:55 2011 +0100
@@ -4,7 +4,10 @@
(function($) {
+ // affine geometry
var geom;
+ // plugin object with digilib data
+ var digilib;
var FULL_AREA;
@@ -31,16 +34,15 @@
};
// plugin installation called by digilib on plugin object.
- var install = function(digilib) {
+ var install = function(plugin) {
+ digilib = plugin;
console.debug('installing stub plugin. digilib:', digilib);
// import geometry classes
geom = digilib.fn.geometry;
FULL_AREA = geom.rectangle(0,0,1,1);
- // add defaults
+ // add defaults, actins, buttons
$.extend(digilib.defaults, defaults);
- // add actions
$.extend(digilib.actions, actions);
- // add buttons
$.extend(digilib.buttons, buttons);
};
diff -r b484631f37c1 -r 1a7b14deae3a client/digitallibrary/jquery/jquery.digilib.regions.js
--- a/client/digitallibrary/jquery/jquery.digilib.regions.js Mon Feb 21 01:00:26 2011 +0100
+++ b/client/digitallibrary/jquery/jquery.digilib.regions.js Mon Feb 21 01:03:55 2011 +0100
@@ -11,19 +11,23 @@
*/
(function($) {
+ // the digilib object
+ var digilib;
// the data object passed by digilib
var data;
- var buttons;
+ // the functions made available by digilib
var fn;
- // affine geometry plugin stub
+ // affine geometry plugin
var geom;
var FULL_AREA;
+ var ID_PREFIX = "digilib-region-";
+
var buttons = {
addregion : {
- onclick : "setRegion",
- tooltip : "set a region",
+ onclick : "defineRegion",
+ tooltip : "define a region",
icon : "addregion.png"
},
delregion : {
@@ -46,16 +50,22 @@
var defaults = {
// are regions shown?
'isRegionVisible' : true,
+ // are region numbers shown?
+ 'showRegionNumbers' : false,
// buttonset of this plugin
'regionSet' : ['addregion', 'delregion', 'regions', 'regioninfo', 'lessoptions'],
- // array of defined regions
- 'regions' : []
- };
+ // url param for regions
+ 'rg' : null,
+ };
var actions = {
// define a region interactively with two clicked points
- "setRegion" : function(data) {
+ "defineRegion" : function(data) {
+ if (!data.settings.isRegionVisible) {
+ alert("Please turn on regions visibility!");
+ return;
+ }
var $elem = data.$elem;
var $body = $('body');
var bodyRect = geom.rectangle($body);
@@ -66,9 +76,8 @@
var $overlay = $('');
$body.append($overlay);
bodyRect.adjustDiv($overlay);
- // the region to be defined
- var $regionDiv = $('');
- $elem.append($regionDiv);
+ // we count regions from 1
+ var $regionDiv = addRegionDiv(data, data.regions.length + 1);
// mousedown handler: start sizing
var regionStart = function (evt) {
@@ -106,126 +115,188 @@
// clip region
clickRect.clipTo(scalerRect);
clickRect.adjustDiv($regionDiv);
- data.settings.regions.push(clickRect); // TODO: trafo, params
+ storeRegion(data, $regionDiv);
// fn.redisplay(data);
+ fn.highlightButtons(data, 'addregion', 0);
+ redisplay(data);
return false;
};
// bind start zoom handler
$overlay.one('mousedown.dlRegion', regionStart);
+ fn.highlightButtons(data, 'addregion', 1);
},
// remove the last added region
"removeRegion" : function (data) {
- var $regionDiv = data.settings.regions.pop();
+ if (!data.settings.isRegionVisible) {
+ alert("Please turn on regions visibility!");
+ return;
+ }
+ var region = data.regions.pop();
+ if (region == null) return;
+ var $regionDiv = region.$div;
$regionDiv.remove();
- // fn.redisplay(data);
+ redisplay(data);
},
- // add a region programmatically
- "addRegion" : function(data, pos, url) {
- // TODO: backlink mechanism
- if (pos.length === 4) {
- // TODO: trafo
- var $regionDiv = $('');
- $regionDiv.attr("id", "region" + i);
- var regionRect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
- regionRect.adjustDiv($regionDiv);
- if (!data.regions) {
- data.regions = [];
- }
- data.regions.push($regionDiv);
- }
+ // show/hide regions
+ "toggleRegions" : function (data) {
+ var show = !data.settings.isRegionVisible;
+ data.settings.isRegionVisible = show;
+ fn.highlightButtons(data, 'regions' , show);
+ showRegionDivs(data);
}
};
var addRegion = actions.addRegion;
- var realizeRegions = function (data) {
- // create regions from parameters
- var settings = data.settings;
- var rg = settings.rg;
- var regions = rg.split(",");
- for (var i = 0; i < regions.length ; i++) {
- var pos = regions.split("/", 4);
- // TODO: backlink mechanism
- var url = paramString.match(/http.*$/);
- addRegion(data, pos, url);
- }
+ // store a region div
+ var storeRegion = function (data, $regionDiv) {
+ var regions = data.regions;
+ var rect = geom.rectangle($regionDiv);
+ var regionRect = data.imgTrafo.invtransform(rect);
+ regionRect.$div = $regionDiv;
+ regions.push(regionRect);
+ console.debug("regions", data.regions, "regionRect", regionRect);
+ };
+
+ // add a region to data.$elem
+ var addRegionDiv = function (data, nr) {
+ var $regionDiv = $('');
+ $regionDiv.attr("id", ID_PREFIX + nr);
+ data.$elem.append($regionDiv);
+ if (data.settings.showRegionNumbers) {
+ var $regionNr = $('');
+ $regionNr.text(nr);
+ $regionDiv.append($regionNr);
+ }
+ return $regionDiv;
+ };
+
+ // create a region div from the data.regions collection
+ var createRegionDiv = function (data, index) {
+ var regions = data.regions;
+ if (index > regions.length) return null;
+ var region = regions[index];
+ var $regionDiv = addRegionDiv(data, index + 1); // we count regions from 1
+ region.$div = $regionDiv;
+ // TODO store original coords in $regionDiv.data for embedded mode?
+ return $regionDiv;
+ };
+
+ // create regions
+ var createRegionDivs = function (data) {
+ for (var i = 0; i < data.regions.length ; i++) {
+ createRegionDiv(data, i);
+ }
};
- // display current regions
- var renderRegions = function (data) {
+ // show a region on top of the scaler image
+ var showRegionDiv = function (data, index) {
+ if (!data.imgTrafo) return;
+ var $elem = data.$elem;
var regions = data.regions;
- for (var i = 0; i < regions.length; i++) {
- var region = regions[i];
- if (data.zoomArea.containsPosition(region)) {
- var rpos = data.imgTrafo.transform(region);
- console.debug("renderRegions: rpos=", rpos);
- // create region
- var $regionDiv = $('');
- $regionDiv.attr("id", "region" + data.regions.length);
- $elem.append($regionDiv);
- rpos.adjustDiv($regionDiv);
- }
+ if (index > regions.length) return;
+ var region = regions[index]
+ var $regionDiv = region.$div;
+ if (!$regionDiv) {
+ console.debug("showRegionDiv: region has no $div", region);
+ // alert("showRegionDiv: region has no $div to show");
+ return;
+ }
+ var regionRect = region.copy();
+ var show = data.settings.isRegionVisible;
+ if (show && data.zoomArea.overlapsRect(regionRect)) {
+ regionRect.clipTo(data.zoomArea);
+ var screenRect = data.imgTrafo.transform(regionRect);
+ screenRect.adjustDiv($regionDiv);
+ $regionDiv.show();
+ } else {
+ $regionDiv.hide();
+ }
+ };
+
+ // show regions
+ var showRegionDivs = function (data) {
+ for (var i = 0; i < data.regions.length ; i++) {
+ showRegionDiv(data, i);
+ }
+ };
+
+ var unpackRegions = function (data) {
+ // create regions from parameters
+ var rg = data.settings.rg;
+ if (rg == null) return;
+ var regions = data.regions;
+ var rs = rg.split(",");
+ for (var i = 0; i < rs.length; i++) {
+ var r = rs[i];
+ var pos = r.split("/", 4);
+ var rect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
+ regions.push(rect);
+ // TODO: backlink mechanism
+ // var url = paramString.match(/http.*$/);
}
};
- var serializeRegions = function (data) {
- if (data.regions) {
- settings.rg = '';
- for (var i = 0; i < data.regions.length; i++) {
- if (i) {
- settings.rg += ',';
- }
- settings.rg +=
- cropFloat(data.regions[i].x).toString() + '/' +
- cropFloat(data.regions[i].y).toString() + '/' +
- cropFloat(data.regions[i].width).toString() + '/' +
- cropFloat(data.regions[i].height).toString();
- }
+ // pack regions array into a parameter string
+ var packRegions = function (data) {
+ var regions = data.regions;
+ if (!regions.length) return;
+ var rg = '';
+ for (var i = 0; i < regions.length; i++) {
+ region = regions[i];
+ if (i) {
+ rg += ',';
}
+ rg += [
+ fn.cropFloatStr(region.x),
+ fn.cropFloatStr(region.y),
+ fn.cropFloatStr(region.width),
+ fn.cropFloatStr(region.height)
+ ].join('/');
+ }
+ data.settings.rg = rg;
};
+ var redisplay = function (data) {
+ packRegions(data);
+ fn.redisplay(data);
+ }
+
var handleSetup = function (evt) {
- console.debug("regions: handleSetup");
data = this;
-// if (data.settings.isBirdDivVisible) {
-// setupBirdDiv(data);
-// data.$birdDiv.show();
-// }
+ console.debug("regions: handleSetup", data.settings.rg);
+ unpackRegions(data);
+ createRegionDivs(data);
};
var handleUpdate = function (evt) {
- console.debug("regions: handleUpdate");
data = this;
-// if (data.settings.isBirdDivVisible) {
-// renderBirdArea(data);
-// setupBirdDrag(data);
-// }
+ fn.highlightButtons(data, 'regions' , data.settings.isRegionVisible);
+ showRegionDivs(data);
+ console.debug("regions: handleUpdate", data.settings.rg);
};
var handleRedisplay = function (evt) {
+ data = this;
+ showRegionDivs(data);
console.debug("regions: handleRedisplay");
- data = this;
-// if (data.settings.isBirdDivVisible) {
-// updateBirdDiv(data);
-// }
};
var handleDragZoom = function (evt, zoomArea) {
console.debug("regions: handleDragZoom, zoomArea:", zoomArea);
data = this;
-// if (data.settings.isBirdDivVisible) {
-// setBirdZoom(data, zoomArea);
-// }
};
// plugin installation called by digilib on plugin object.
- var install = function(digilib) {
+ var install = function(plugin) {
+ digilib = plugin;
console.debug('installing regions plugin. digilib:', digilib);
+ fn = digilib.fn;
// import geometry classes
- geom = digilib.fn.geometry;
+ geom = fn.geometry;
FULL_AREA = geom.rectangle(0,0,1,1);
// add defaults, actions, buttons
$.extend(digilib.defaults, defaults);
@@ -244,12 +315,16 @@
if (buttonSet.length && buttonSet.length > 0) {
buttonSettings['regionSet'] = buttonSet;
buttonSettings.buttonSets.push('regionSet');
- }
+ }
// install event handler
$data.bind('setup', handleSetup);
$data.bind('update', handleUpdate);
$data.bind('redisplay', handleRedisplay);
$data.bind('dragZoom', handleDragZoom);
+ // regions array
+ data.regions = [];
+ // add "rg" to digilibParamNames
+ data.settings.digilibParamNames.push('rg');
};
// plugin object with name and install/init methods