# HG changeset patch
# User hertzhaft
# Date 1327607061 -3600
# Node ID 3b334a7d81ecd488a189f76a439435bd4c2f132e
# Parent  17bf6ac7a8cda15717e1fa4929b76e27fef9c85b
finished calibration dialog

diff -r 17bf6ac7a8cd -r 3b334a7d81ec webapp/src/main/webapp/jquery/jquery.digilib.buttons.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Thu Jan 26 17:51:47 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.buttons.js	Thu Jan 26 20:44:21 2012 +0100
@@ -244,13 +244,7 @@
                 var $calDiv = $('#calibration');
                 var $input = $('#calibration-input');
                 $calDiv.fadeIn();
-                $
-                // 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));
-                    }
- */
+                $input.focus();
             },
 
             // shows ScaleModeSelector
@@ -337,21 +331,41 @@
             <div id="calibration" class="calibration">\
                 <div class="ruler">\
                     <div class="cm">Please enter the length of this scale on your screen</div>\
-                    <input id="calibration-input" /> cm\
+                    <div>\
+                        <input id="calibration-input" size="5"/> cm\
+                        <button class="calibration-button" id="calibrationOk">OK</button>\
+                        <button class="calibration-button" id="calibrationCancel">Cancel</button>\
+                    </div>\
+                    <div class="calibration-error">Please enter a numeric value like this: 12.3</div>\
                 </div>\
             </div>';
         var $calDiv = $(html);
-        //$rulerDiv.append($cmDiv);
-        //$rulerDiv.append($cmInput);
-        //$calDiv.append($rulerDiv);
         $elem.append($calDiv);
+        var $input = $calDiv.find("input");
+        var $ok = $calDiv.find("#calibrationOk");
+        var $cancel = $calDiv.find("#calibrationCancel");
+        data.calibrationDiv = $calDiv;
+        data.calibrationErrorDiv = $calDiv.find("div.calibration-error");
+        data.calibrationInput = $input;
         var calRect = geom.rectangle($calDiv);
         var screenRect = fn.getFullscreenRect(data);
-        console.debug('calRect:', calRect);
-        console.debug('screenRect:', screenRect);
         calRect.setCenter(screenRect.getCenter());
-        console.debug('calRect:', calRect);
         calRect.adjustDiv($calDiv);
+        var handler = function(event) {
+            var _data = data;
+            if (event.keyCode == 27 || event.target.id == 'calibrationCancel') {
+                $calDiv.fadeOut();
+                return false;
+                }
+            if (event.keyCode == 13 || event.target.id == 'calibrationOk') {
+                changeCalibration(_data);
+                return false;
+                }
+            _data.calibrationInput.removeClass('error');
+            };
+        $ok.on("click", handler);
+        $cancel.on("click", handler);
+        $input.on("keypress", handler);
     };
 
     /** creates HTML structure for the scale mode menu
@@ -393,6 +407,23 @@
         digilib.actions.setScaleMode(data, newMode);
     };
 
+    /** event handler
+     */
+    var changeCalibration = function (data) {
+        var $calDiv = data.calibrationDiv;
+        var $input = data.calibrationInput;
+        var cm = $input.val();
+        var w = $calDiv.width();
+  		var dpi = fn.cropFloat(w / parseFloat(cm) * 2.54);
+  		console.debug('width', w, 'cm', cm, 'input dpi:', dpi);
+  		if(!fn.isNumber(dpi)) {
+  		    $input.addClass('error');
+  		    return;
+  		    }
+  		digilib.actions.calibrate(data, dpi);
+        $calDiv.fadeOut();
+    };
+
     // creates HTML structure for a single button
     var createButton = function (data, $div, buttonName) {
         var $elem = data.$elem;
diff -r 17bf6ac7a8cd -r 3b334a7d81ec webapp/src/main/webapp/jquery/jquery.digilib.css
--- a/webapp/src/main/webapp/jquery/jquery.digilib.css	Thu Jan 26 17:51:47 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.css	Thu Jan 26 20:44:21 2012 +0100
@@ -114,7 +114,6 @@
 	background: url('blue.png');
 	position: absolute;
 	border: 1px solid lightcyan;
-	top: 0px;
 	width: 400px;
 	display: none;
 	z-index: 9999;
@@ -133,7 +132,32 @@
 	}
 
 div.digilib div.cm {
+	padding: 5px;
+	}
+
+div.digilib div.calibration-error {
+	color: red;
 	padding: 10px;
+	display: none;
+	}
+
+div.digilib button.calibration-button {
+	margin: 0px 10px;
+	border: 1px solid lightcyan;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-weight: bold;
+	color: lightcyan;
+	background-color: transparent;
+	}
+
+div.digilib input.calibration-input {
+	margin: 0px 10px;
+	}
+
+div.digilib input.error {
+	color: red;
+	background-color: khaki;
 	}
 
 div.infobutton {
diff -r 17bf6ac7a8cd -r 3b334a7d81ec webapp/src/main/webapp/jquery/jquery.digilib.js
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Thu Jan 26 17:51:47 2012 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Thu Jan 26 20:44:21 2012 +0100
@@ -1765,6 +1765,7 @@
             setFitMode : setFitMode,
             canMove : canMove,
             isFullArea : isFullArea,
+            isNumber : isNumber,
             getFullscreenRect : getFullscreenRect,
             getBorderWidth : getBorderWidth,
             cropFloat : cropFloat,