Mercurial > hg > digilib-old

changeset 455:9c16290e6f44

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
ongoing experimental intermediary release - calibration and scale modes are working
author robcast
date Mon, 30 Jan 2006 16:02:04 +0100
parents 96bf096d9ab3
children 2a9d37492997
files client/digitallibrary/greyskin/diginew.jsp client/digitallibrary/greyskin/dllib.js
diffstat 2 files changed, 123 insertions(+), 183 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/greyskin/diginew.jsp	Mon Jan 30 16:02:04 2006 +0100
+++ b/client/digitallibrary/greyskin/diginew.jsp	Mon Jan 30 16:02:04 2006 +0100
@@ -50,6 +50,7 @@
 	var isBirdDivVisible = cookie.getbool("isBirdDivVisible");
 	var isAboutDivVisible = false;
 	var isSizeMenuVisible = false;
+    var isScaleMenuVisible = false;
 	var isOriginalSize = false;
 	var isPixelByPixel = false;
 	var dlTarget = window.name;
@@ -76,24 +77,13 @@
 
 	function toggleSizeMenu() {
 		isSizeMenuVisible = !isSizeMenuVisible;
-		showSizeMenu(isSizeMenuVisible);
+		showMenu("size-menu", "size", isSizeMenuVisible);
 		}
 
-	function toggleOriginalSize(on) {
-		isOriginalSize = (arguments.length == 1)
-			? on
-			: !isOriginalSize;
-		togglePixelByPixel(false);
-		originalSize(isOriginalSize);
-		}
-
-	function togglePixelByPixel(on) {
-		isPixelByPixel = (arguments.length == 1)
-			? on
-			: !isPixelByPixel;
-		toggleOriginalSize(false);
-		pixelByPixel(isPixelByPixel);
-		}
+    function toggleScaleMenu() {
+        isScaleMenuVisible = !isScaleMenuVisible;
+        showMenu("scale-menu", "scale", isScaleMenuVisible);
+        }
 
 	function setOnImage(id, src, value) {
 	// replace img src and display "on" status
@@ -137,26 +127,22 @@
 </head>
 
 <body onload="onBodyLoad();" onunload="onBodyUnload();">
-
  <!-- slot for the scaled image -->
  <div id="scaler">
 	<img id="pic"></img>
  </div>
 
  <!-- sensitive overlay for zoom area etc -->
- <div id="overlay">
- </div>
+ <div id="overlay"></div>
  
  <!-- the zoom area selection rectangle -->
- <div id="zoom">
- </div>
+ <div id="zoom"></div>
  
  <!-- the bird's eye overview image -->
  <img id="bird-image"></img>
 
  <!-- the bird's eye select area -->
- <div id="bird-area">
- </div>
+ <div id="bird-area"></div>
 
  <!-- the arrows -->
  <a class="arrow" id="up"    href="javascript:moveBy(0, -0.5)"></a>
@@ -179,23 +165,29 @@
  <!-- the calibration div -->
  <div id="calibration">
  	<div>
-	<p>0 px</p>
- 	<p class="cm">10 cm</p>
+ 	<p class="cm">measure the length of this scale on your screen</p>
 	</div>
  </div>
 
  <!-- the size menu -->
- <div id="sizes">
-	<p><a href="javascript:resize(1)">1 x</a></p>
-	<p><a href="javascript:resize(1.41)">1.41 x</a></p>
-	<p><a href="javascript:resize(2)">2 x</a></p>
-	<p><a href="javascript:resize(3)">3 x</a></p>
+ <div id="size-menu" class="popup-menu">
+	<p><a href="javascript:setSize(1)">1 x</a></p>
+	<p><a href="javascript:setSize(1.41)">1.41 x</a></p>
+	<p><a href="javascript:setSize(2)">2 x</a></p>
+	<p><a href="javascript:setSize(3)">3 x</a></p>
 	<div id="sizes-bar">
 		<div id="sizes-slider"></div>
 	</div>
 	<p id="sizes-value"></p>
  </div>
 
+<!-- the scale menu -->
+ <div id="scale-menu" class="popup-menu">
+  <p><a href="javascript:setScale('fit')">fit to screen</a></p>
+  <p><a href="javascript:setScale('pixel')">pixel by pixel</a></p>
+  <p><a href="javascript:setScale('original')">original size</a></p>
+ </div>
+
  <!-- the buttons -->
  <div id="buttons">
 	<div class="separator">
@@ -279,7 +271,7 @@
 	<div class="button">
 		<a
 			class="icon"
-			href="javascript:pageWidth()"
+			href="javascript:zoomFullpage('width')"
 			>
 
 			<img
@@ -294,21 +286,6 @@
 	<div class="button">
 		<a
 			class="icon"
-			href="javascript:toggleSizeMenu()"
-			>
-
-			<img
-				class="png"
-				id="size"
-				title="resize page"
-				src="size.png"
-			>
-		</a>
-	</div>
-	
-	<div class="button">
-		<a
-			class="icon"
 			href="javascript:gotoPage('-1')"
 			>
 
@@ -544,6 +521,21 @@
 		</a>
 	</div>
 	
+  <div class="button">
+    <a
+      class="icon"
+      href="javascript:toggleSizeMenu()"
+      >
+
+      <img
+        class="png"
+        id="size"
+        title="set page size"
+        src="size.png"
+      >
+    </a>
+  </div>
+
 	<div class="button">
 		<a
 			class="icon"
@@ -558,47 +550,17 @@
 			>
 		</a>
 	</div>
-
+  
 	<div class="button">
 		<a
 			class="icon"
-			href="javascript:calibrate('y')"
+			href="javascript:toggleScaleMenu()"
 			>
 
 			<img
 				class="png"
-				id="calibration-y"
-				title="calibrate screen y-ratio"
-				src="calibration-y.png"
-			>
-		</a>
-	</div>
-
-	<div class="button">
-		<a
-			class="icon"
-			href="javascript:pixelByPixel()"
-			>
-
-			<img
-				class="png"
-				id="pixel-by-pixel"
-				title="view image pixel by pixel"
-				src="pixel-by-pixel.png"
-			>
-		</a>
-	</div>
-
-	<div class="button">
-		<a
-			class="icon"
-			href="javascript:originalSize()"
-			>
-
-			<img
-				class="png"
-				id="original-size"
-				title="view image in original size"
+				id="scale"
+				title="change image scale"
 				src="original-size.png"
 			>
 		</a>
--- a/client/digitallibrary/greyskin/dllib.js	Mon Jan 30 16:02:04 2006 +0100
+++ b/client/digitallibrary/greyskin/dllib.js	Mon Jan 30 16:02:04 2006 +0100
@@ -214,8 +214,8 @@
     this.buttons1Div = null;
     this.buttons2Div = null;
     /* parse parameters */
+    this.params = new DLParameters();
     // put the query parameters (sans "?") in the parameters array
-    this.params = new DLParameters();
     this.params.parse(location.search.slice(1));
     // treat special parameters
     this.area = this.parseArea();
@@ -268,11 +268,11 @@
     var picsize = getElementRect(elem);
     var trafo = new Transform();
     // subtract area offset and size
-    trafo.concat(getTranslation(new Position(-this.area.x, -this.area.y)));
-    trafo.concat(getScale(new Size(1/this.area.width, 1/this.area.height)));
+    trafo.concat(trafo.getTranslation(new Position(-this.area.x, -this.area.y)));
+    trafo.concat(trafo.getScale(new Size(1/this.area.width, 1/this.area.height)));
     // scale to screen size
-    trafo.concat(getScale(picsize));
-    trafo.concat(getTranslation(picsize));
+    trafo.concat(trafo.getScale(picsize));
+    trafo.concat(trafo.getTranslation(picsize));
     // FIX ME: Robert, kannst Du mal nachsehen, ob das folgende tut, was es soll?
     // oder gibt es dafuer neuen Code? -- ROC: Bisher funktioniert es nicht!
     // rotate
@@ -347,7 +347,7 @@
 	    digilib.renderMarks();
 		digilib.showBirdDiv(isBirdDivVisible);
 		digilib.showArrows();		// show arrow overlays for zoom navigation
-		digilib.moveCenter(true);	// click to move point to center
+		//digilib.moveCenter(true);	// click to move point to center
 		// new Slider("sizes", 1, 5, 2);
 	    focus();
 	}
@@ -548,8 +548,7 @@
 
 Digilib.prototype.isFullArea = function(area) {
     if (!area) area = this.area;
-    // pixel by pixel is not always full area
-    return (area.width == 1.0) && (area.height == 1.0) && ! this.flags.get("clip");
+    return (area.width == 1.0) && (area.height == 1.0);
 }
 
 Digilib.prototype.canMove = function(movx, movy) {
@@ -731,14 +730,22 @@
     };
     var birdImgRect = getElementRect(birdImg);
     var area = this.area;
-    // scale area down to img size
-    var birdAreaRect = new Rectangle(
-        // what about borders ??
-        birdImgRect.x + birdImgRect.width  * area.x,
-        birdImgRect.y + birdImgRect.height * area.y,
-        birdImgRect.width  * area.width,
-        birdImgRect.height * area.height
-        );
+    if (this.flags.get("osize") || this.flags.get("clip")) {
+    		// in original-size and pixel-by-pixel mode the area size is not valid
+    		var birdAreaRect = new Rectangle(
+        		birdImgRect.x + birdImgRect.width  * area.x,
+        		birdImgRect.y + birdImgRect.height * area.y, 
+        		5, 
+        		5);
+    } else {
+    		// scale area down to img size
+    		var birdAreaRect = new Rectangle(
+        		// what about borders ??
+        		birdImgRect.x + birdImgRect.width  * area.x,
+	        birdImgRect.y + birdImgRect.height * area.y,
+	        birdImgRect.width  * area.width,
+	        birdImgRect.height * area.height);
+	}
     moveElement(birdArea, birdAreaRect);
     showElement(birdArea, true);
     moveElement(overlay, birdImgRect);
@@ -823,110 +830,79 @@
         );
 	}
 
-Digilib.prototype.calibrate = function(direction) {
-    // calibrate screen
-    var startPos; // anchor for dragging
-    var newRect;  // position after drag
+Digilib.prototype.calibrate = function() {
+    // calibrate screen resolution
     var calDiv = getElement("calibration");
-    var pixel = calDiv.getElementsByTagName("p")[0];
-    var overlay = getElement("overlay");
-    moveElement(overlay, getWinRect());
-    showElement(overlay, true);
-    var xDir = direction == "x";
+    var calRect = getElementRect(calDiv);
     moveCenter(false);
-    registerEvent("mousedown", document, calibrationStartDrag);
+    var wins = getWinSize();
+    calRect.setCenter(new Position(wins.width / 2, wins.height / 2));
+    moveElement(calDiv, calRect);
+    showElement(calDiv, true);
+    var cm = window.prompt("The length of the scale on your screen in centimeter:");
+    if (cm) {
+    		var dpi = calRect.width / parseFloat(cm) * 2.54;
+    		this.params.set("ddpi", cropFloat(dpi));
+    	}
+    	showElement(calDiv, false);
+}
 
-    function calibrationStartDrag(evt) {
-    // mousedown handler: start drag
-        startPos = evtPosition(evt);
-        unregisterEvent("mousedown", document, calibrationStartDrag);
-        registerEvent("mousemove", document, calibrationMove);
-        registerEvent("mouseup",   document, calibrationEndDrag);
-        newRect = new Rectangle(
-            startPos.x,
-            startPos.y,
-            xDir ? 1 : CALIBRATION_WIDTH,
-            xDir ? CALIBRATION_WIDTH : 1
-            );
-        moveElement(calDiv, newRect);
-        showElement(calDiv, true);
-        // debugProps(getElementRect(bird))
-        return stopEvent(evt);
-        }
 
-    function calibrationMove(evt) {
-    // mousemove handler: drag
-        var pos = evtPosition(evt);
-        var dx = (xDir) ? pos.x - startPos.x : CALIBRATION_WIDTH;
-        var dy = (xDir) ? CALIBRATION_WIDTH : pos.y - startPos.y;
-        // move birdArea div, keeping size
-        newRect = new Rectangle(startPos.x, startPos.y, dx, dy);
-        pixel.innerHTML = (xDir ? dx : dy) + " px";
-        moveElement(calDiv, newRect);
-        showElement(calDiv, true);
-        return stopEvent(evt);
-        }
-
-    function calibrationEndDrag(evt) {
-    // mouseup handler: calibrate
-        unregisterEvent("mousemove", document, calibrationMove);
-        unregisterEvent("mouseup",   document, calibrationEndDrag);
-        if (xDir) {
-            var val = newRect.width * 0.254; // ratio dm/inch
-            cookie.add("ddpi", val);
-            cookie.add("ddpix", val);
-        } else {
-            var val = newRect.height * 0.254;
-            cookie.add("ddpiy", val);
-            }
-        showElement(calDiv, false);
-        showElement(overlay, false);
-        moveCenter(true);
-        return stopEvent(evt);
-        }
-    }
-
-Digilib.prototype.originalSize = function(on) {
-    // set osize flag, needs calibrated screen
-    if (on) {
-        var dpi = cookie.get("ddpi");
-        if (dpi == null) {
-            alert("Screen has not yet been calibrated - using default value of 72 dpi");
-            dpi = 72;
-            }
-        this.params.set("ddpi", dpi);
+Digilib.prototype.setScale = function(scale) {
+	// sets original-size, pixel-by-pixel or fit-to-screen scale type
+	if (scale == "pixel") {
+		// pixel by pixel
+		this.flags.set("clip");
+		this.flags.reset("osize");
+		this.flags.reset("fit");
+	} else if (scale == "original") {
+		// original size -- needs calibrated screen
+        if (!this.params.isSet("ddpi")) {
+        		var dpi = cookie.get("ddpi");
+	        if (dpi == null) {
+    		        alert("Your screen has not yet been calibrated - using default value of 72 dpi");
+            		dpi = 72;
+            	}
+        		this.params.set("ddpi", dpi);
+        	}
         this.flags.set("osize");
-        this.display();
+        this.flags.reset("clip");
+		this.flags.reset("fit");
     } else {
+    		// scale to screen size (default)
+    		this.flags.reset("clip");
     		this.flags.reset("osize");
     	}
+    this.display();
 }
 
-Digilib.prototype.pixelByPixel = function(on) {
-    // sets clip flag
-    if (on) { 
-        this.flags.set("clip");
-        this.display();
-        }
-    else this.flags.reset("clip");
-}
+Digilib.prototype.getScale = function() {
+	// returns scale type
+	if (this.flags.get("clip")) {
+		return "pixel";
+	} else if (this.flags.get("osize")) {
+		return "original";
+	} else {
+		return "fit";
+	}
+}	
 
 Digilib.prototype.pageWidth = function() {
 	this.zoomFullpage('width');
 }
 
-Digilib.prototype.resize = function(factor) {
+Digilib.prototype.setSize = function(factor) {
     this.params.set("ws", factor);
-    this.showSizeMenu(false);
     this.display();
 }
 
-Digilib.prototype.showSizeMenu = function(show) {
-    var menu = getElement("sizes");
+Digilib.prototype.showMenu = function(menuId, buttonId, show) {
+    var menu = getElement(menuId);
     if (show) {
-        // align menu with button
-        var buttonPos = getElementPosition(getElement("size"));
-        moveElement(menu, new Position(buttonPos.x - 50, buttonPos.y));
+        // align right side of menu with button
+        var buttonPos = getElementPosition(getElement(buttonId));
+        var menusize = getElementSize(menu);
+        moveElement(menu, new Position(buttonPos.x - menusize.width - 3, buttonPos.y));
         }
     showElement(menu, show);
 }
@@ -965,7 +941,7 @@
 function removeMark(reload) {dl.removeMark(reload)};
 function zoomArea() {dl.zoomArea()};
 function zoomBy(factor) {dl.zoomBy(factor)};
-function zoomFullpage() {dl.zoomFullpage()};
+function zoomFullpage(a) {dl.zoomFullpage(a)};
 function moveCenter(on) {dl.moveCenter(on)};
 function isFullArea(area) {dl.isFullArea(area)};
 function canMove(movx, movy) {dl.canMove(movx, movy)};
@@ -983,11 +959,13 @@
 function showBirdDiv(show) {dl.showBirdDiv(show)};
 function showAboutDiv(show) {dl.showAboutDiv(show)};
 function calibrate(direction) {dl.calibrate(direction)};
+function setScale(a) {dl.setScale(a)};
+function getScale(a) {dl.getScale(a)};
 function originalSize(on) {dl.originalSize(on)};
 function pixelByPixel(on) {dl.pixelByPixel(on)};
 function pageWidth() {dl.pageWidth()};
-function resize(factor) {dl.resize(factor)};
-function showSizeMenu(show) {dl.showSizeMenu(show)};
+function setSize(factor) {dl.setSize(factor)};
+function showMenu(a,b,c) {dl.showMenu(a,b,c)};
 
 
 // :tabSize=4:indentSize=4:noTabs=true: