changeset 1579:97b7800578b8 measure-maps

measure plugin: show measured angle
author hertzhaft
date Sun, 13 Nov 2016 18:44:19 +0100
parents 3d7ebabb8cb6
children 9b701efc0c14
files webapp/src/main/webapp/jquery/jquery.digilib.geometry.js webapp/src/main/webapp/jquery/jquery.digilib.js webapp/src/main/webapp/jquery/jquery.digilib.measure.css webapp/src/main/webapp/jquery/jquery.digilib.measure.js
diffstat 4 files changed, 42 insertions(+), 34 deletions(-) [+]
line wrap: on
line diff
--- a/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js	Sun Nov 13 14:56:04 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.geometry.js	Sun Nov 13 18:44:19 2016 +0100
@@ -24,7 +24,7 @@
  */
 
 (function($) {
-//var dlGeometry = function() {
+    var RAD2DEG = 180.0 / Math.PI;
     /*
      * Size class
      */
@@ -214,7 +214,7 @@
 
         // degree of angle between line and the positive X axis
         that.deg = function (pos) {
-            return this.rad(pos) / Math.PI * 180;
+            return this.rad(pos) * RAD2DEG;
         };
 
         // returns position in css-compatible format
@@ -732,7 +732,7 @@
     transform.getRotation = function(angle) {
         // returns a Transform that is a rotation by angle degrees around [0,0]
         if (angle !== 0) {
-            var t = Math.PI * parseFloat(angle) / 180.0;
+            var t = parseFloat(angle) / RAD2DEG;
             var cost = Math.cos(t);
             var sint = Math.sin(t);
             var traf = {
@@ -796,13 +796,13 @@
             rectangle : rectangle,
             transform : transform
     };
-    
+
     // install function called by digilib on plugin object
     var install = function() {
         // add constructor object to fn
         this.fn.geometry = geometry;
     };
-    
+
     // digilib plugin object
     var plugin = {
             name : 'geometry',
--- a/webapp/src/main/webapp/jquery/jquery.digilib.js	Sun Nov 13 14:56:04 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.js	Sun Nov 13 18:44:19 2016 +0100
@@ -1859,8 +1859,8 @@
      */
     var cropFloat = function (x, dec) {
         // return parseInt(10000 * x, 10) / 10000;
-        var decimals = dec || defaults.decimals;
-        return +(Math.round(x + "e+" + decimals)  + "e-" + decimals);
+        var m = Math.pow(10, dec || defaults.decimals);
+        return Math.round(x * m) / m;
     };
 
     /** return string from number with reduced precision.
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.css	Sun Nov 13 14:56:04 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.css	Sun Nov 13 18:44:19 2016 +0100
@@ -94,6 +94,12 @@
   margin-right: 3px;
 }
 
+#dl-measure-angle {
+  display: inline-block;
+  width: 6em;
+  text-align: right;
+}
+
 .dl-measure-number {
   display: inline-block;
   color: lightgreen;
--- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.js	Sun Nov 13 14:56:04 2016 +0100
+++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.js	Sun Nov 13 18:44:19 2016 +0100
@@ -832,6 +832,8 @@
         activeShapeType: 'Line',
         // last measured distance
         lastMeasuredValue: 0,
+        // last measured angle to x-axis
+        lastMeasuredAngle: 0,
         // measuring unit (index into unit list)
         unitFrom: 17,
         // converted unit (index into unit list)
@@ -1017,6 +1019,12 @@
         return p[v1].distance(p[v2]);
         };
 
+    // calculate the angle of the line between two vertices
+    var getScreenAngle = function (shape, v1, v2) {
+        var p = shape.properties.screenpos;
+        return geom.line(p[v1], p[v2]).deg();
+        };
+
     // get the vertex before the given one
     var getPrecedingVertex = function(shape, vertex) {
         var props = shape.properties;
@@ -1034,12 +1042,21 @@
         return getScreenDistance(shape, v0, v1);
         };
 
+    // calculate the angle from one shape vertex to the one before it (in rectified digilib coords)
+    var getPrecedingVertexAngle = function(data, shape, v1) {
+        if (v1 == null) {
+          v1 = shape.properties.vtx;
+        }
+        var v0 = getPrecedingVertex(shape, v1);
+        return getScreenAngle(shape, v0, v1);
+        };
+
     // calculate distance from current to preceding vertex (in rectified digilib coords)
     var getRectifiedLength = function(data, shape) {
         // var coords = shape.geometry.coordinates;
         var total = 0;
         if (shape.geometry.type === 'LineString') { // sum up distances
-            for (vtx = 1; vtx < shape.screenpos.length; vtx++) {
+            for (vtx = 1; vtx < shape.properties.screenpos.length; vtx++) {
                 total += getPrecedingVertexDistance(data, shape, vtx);
                 }
         } else {
@@ -1103,11 +1120,6 @@
         return val * factor * factor;
         };
 
-    // UGLY: info whether to show area (not length) for this shape type
-    var showArea = function(data, type) {
-        return data.settings.shapeInfo[type].display === 'area';
-        };
-
     // convert a length into both units 
     var convertLength = function (data, dist) {
         var factor = data.measureFactor;
@@ -1138,17 +1150,17 @@
         var type = getActiveShapeType(data);
         var factor = data.measureFactor;
         var px = data.lastMeasuredValue;
-        // var area = showArea(data, type);
-        //nvar val = area
-        //  ? scaleArea(px, factor)
         var val = scaleValue(px, factor);
         updateConversion(data, val, type);
+        var angle = data.lastMeasuredAngle;
+        data.measureWidgets.angle.text(fn.cropFloatStr(angle, 1)+'°');
         };
 
     // display info for shape
     var updateMeasuredValue = function(data, shape) {
         data.lastMeasuredValue = getPrecedingVertexDistance(data, shape);
-        console.debug(shape, data.lastMeasuredValue);
+        data.lastMeasuredAngle = getPrecedingVertexAngle(data, shape);
+        console.debug(shape, data.lastMeasuredValue, data.lastMeasuredAngle);
         updateUnits(data);
         };
 
@@ -1162,9 +1174,10 @@
         var s = data.settings;
         var factor = data.measureFactor;
         var type = shape.geometry.type;
-        var scaled = showArea(data, type)
-          ? scaleArea(getRectifiedArea(data, shape), factor)
-          : scaleValue(getRectifiedLength(data, shape), factor);
+        // var scaled = showArea(data, type)
+        //   ? scaleArea(getRectifiedArea(data, shape), factor)
+        //   : scaleValue(getRectifiedLength(data, shape), factor);
+        var scaled = scaleValue(getRectifiedLength(data, shape), factor);
         var name = s.shapeInfo[type].name;
         var display = s.shapeInfo[type].display;
         var l = convertLength(data, scaled);
@@ -1215,16 +1228,6 @@
             };
         };
 
-    // disable the calibration input 
-    var setCalibrationInputState = function(data) {
-        var widgets = data.measureWidgets;
-        var type = getActiveShapeType(data);
-        var display = data.settings.shapeInfo[type].display;
-        var state = display !== 'length' && display !== 'radius' && display !== 'spacing';
-        widgets.value1.prop('disabled', state);
-        widgets.type.text(display);
-        };
-
     // returns a screenpoint manipulation function
     var snapToUnit = function(data) {
         // snap to the next rounded unit distance
@@ -1275,13 +1278,11 @@
     // set the current shape type (from shape select widget)
     var changeActiveShapeType = function(data) {
         data.settings.activeShapeType = data.measureWidgets.shape.val();
-        setCalibrationInputState(data);
         };
 
     // set the current shape type
     var setActiveShapeType = function(data, shape) {
         data.settings.activeShapeType = shape.geometry.type;
-        setCalibrationInputState(data);
         };
 
     // set the current unit (from unit select widget)
@@ -1802,6 +1803,7 @@
           'type',
           'value1', 'unit1', 'eq',
           'value2', 'unit2',
+          'angle',
           'shapecolor', 'guidecolor', 'constrcolor', 'selectedcolor', 'handlecolor',
           'move'
           ],
@@ -1809,13 +1811,13 @@
         startb:       $('<button id="dl-measure-startb" title="click to draw a measuring shape on top of the image">M</button>'),
         shape:        $('<select id="dl-measure-shape" title="select a shape to use for measuring" />'),
         eq:           $('<span class="dl-measure-label">=</span>'),
-        type:         $('<span id="dl-measure-shapetype" class="dl-measure-label">length</span>'),
+        type:         $('<span id="dl-measure-shapetype" class="dl-measure-label">measured</span>'),
         fac:          $('<span id="dl-measure-factor" class="dl-measure-number" />'),
         value1:       $('<input id="dl-measure-value1" class="dl-measure-input" title="last measured value - click to change the value" value="0.0" />'),
         value2:       $('<span id="dl-measure-value2" class="dl-measure-label" title="last measured value, converted to the secondary unit" value="0.0"/>'),
         unit1:        $('<select name="measureUnit1" id="dl-measure-unit1" title="current measuring unit - click to change" />'),
         unit2:        $('<select name="measureUnit2" id="dl-measure-unit2" title="secondary measuring unit - click to change" />'),
-        angle:        $('<span id="dl-measure-angle" class="dl-measure-number" title="last measured angle" />'),
+        angle:        $('<span id="dl-measure-angle" class="dl-measure-label" title="last measured angle" />'),
         shapecolor:   $('<span id="dl-measure-shapecolor" class="dl-measure-color" title="select line color for shapes"></span>'),
         guidecolor:   $('<span id="dl-measure-guidecolor" class="dl-measure-color" title="select guide line color for shapes"></span>'),
         constrcolor:  $('<span id="dl-measure-constrcolor" class="dl-measure-color" title="select construction line color for shapes"></span>'),