# HG changeset patch # User hertzhaft # Date 1422026590 -3600 # Node ID bf94aaa0a2c165d0127aa95e7d19d46dfe25a5b3 # Parent cac657d25ba9325702483c7287164e2a8d4ea38a calculate polygon area, display info about shape on mouseover diff -r cac657d25ba9 -r bf94aaa0a2c1 webapp/src/main/webapp/jquery/jquery.digilib.js --- a/webapp/src/main/webapp/jquery/jquery.digilib.js Fri Jan 23 12:16:46 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.js Fri Jan 23 16:23:10 2015 +0100 @@ -1623,9 +1623,9 @@ } } var ar = getImgAspectRatio(data); - p1.x *= ar; - p2.x *= ar; - dist['rectified'] = p1.distance(p2); + var r1 = geom.position(p1.x * ar, p1.y); + var r2 = geom.position(p2.x * ar, p2.y); + dist['rectified'] = r1.distance(r2); } return dist; }; diff -r cac657d25ba9 -r bf94aaa0a2c1 webapp/src/main/webapp/jquery/jquery.digilib.measure.css --- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.css Fri Jan 23 12:16:46 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.css Fri Jan 23 16:23:10 2015 +0100 @@ -65,7 +65,7 @@ } .dl-measure-item { - pointer-events: visible; + pointer-events: visibleStroke; } .dl-measure-item:hover { diff -r cac657d25ba9 -r bf94aaa0a2c1 webapp/src/main/webapp/jquery/jquery.digilib.measure.js --- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Fri Jan 23 12:16:46 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Fri Jan 23 16:23:10 2015 +0100 @@ -717,9 +717,9 @@ // index of default shape selectedShape : 0, // measuring unit (index into unit list) - unitFrom : 1, + unitFrom : 17, // converted unit (index into unit list) - unitTo : 2, + unitTo : 0, // maximal denominator for mixed fractions maxDenominator : 20, // number of decimal places for convert results @@ -767,7 +767,7 @@ return; }, drawshape : function(data) { - var shape = currentShape(data); + var shape = getSelectedShape(data); data.measureWidgets.startb.addClass('dl-drawing'); digilib.actions.addShape(data, shape, shapeCompleted); console.debug('measure: action drawshape', shape); @@ -795,52 +795,66 @@ var onChangeShape = function(event, shape) { var data = this; console.debug('measure: onChangeShape', data, shape); - var dist = rectifiedDist(data, shape); - updateLength(data, dist); + updateInfo(data, shape); }; // event handler for renderShape var onRenderShape = function(event, shape) { - // event handler for clickShape - var onClickShape = function(event) { - console.debug('measure: onClickShape', shape.geometry.type); + // event handler for updating shape info + var shapeInfo = function(event) { + updateInfo(data, shape); }; var data = this; var $elem = shape.$elem; - $elem.on('mousedown.measure', onClickShape); + $elem.on('mouseover.measure', shapeInfo); console.debug('measure: onRenderShape', data, shape); }; - // calculate a rectified distance from a shape with digilib coords + // calculate the distance of the first 2 points of a shape (rectified digilib coords) var rectifiedDist = function(data, shape) { var coords = shape.geometry.coordinates; - var p0 = geom.position(coords[0]); - var p1 = geom.position(coords[1]); - var dist = fn.getDistance(data, p0, p1); - return dist.rectified; + var total = 0; + var pos1 = geom.position(coords[0]); + for (i = 1; i < coords.length; i++) { + var pos2 = geom.position(coords[i]); + var dist = fn.getDistance(data, pos1, pos2); + total += dist.rectified; + pos1 = pos2; + } + return total; }; - // recalculate units - var updateUnits = function(data) { - var val = data.lastMeasuredValue; + // calculate the area of a polygon (rectified digilib coords) + var rectifiedArea = function(data, shape) { + var ar = fn.getImgAspectRatio(data); + var rectifyPoint = function (c) { + return geom.position(ar * c[0], c[1]); + }; + var coords = $.map(shape.geometry.coordinates, rectifyPoint); + var area = 0; + j = coords.length-1; + for (i = 0; i < coords.length; i++) { + area += (coords[j].x + coords[i].x) * (coords[j].y - coords[i].y); + j = i; //j is previous vertex to i + } + return Math.abs(area/2); + }; + + // convert length to second unit + var convertLength = function(data, val) { var widgets = data.measureWidgets; var u1 = parseFloat(widgets.unit1.val()); var u2 = parseFloat(widgets.unit2.val()); - var v2 = val * u1 / u2; - widgets.value2.val(fn.cropFloatStr(mRound(v2))); + return val * u1 / u2; } - // recalculate after measuring - var updateLength = function(data, dist) { + // convert area to second unit + var convertArea = function(data, val) { var widgets = data.measureWidgets; - var fac = data.lastMeasureFactor; - var val = dist * fac; - widgets.len.text(fn.cropFloatStr(dist)); - widgets.value1.val(fn.cropFloatStr(mRound(val))); - data.lastMeasuredValue = val; - data.lastMeasuredDistance = dist; - updateUnits(data); - }; + var u1 = parseFloat(widgets.unit1.val()); + var u2 = parseFloat(widgets.unit2.val()); + return val * u1 * u1 / (u2 * u2); + } // recalculate factor after entering a new value in input element "value1" var updateFactor = function(data) { @@ -848,19 +862,69 @@ var val = parseFloat(widgets.value1.val()); var dist = data.lastMeasuredDistance; var fac = val / dist; - widgets.fac.text(fn.cropFloatStr(fac)); + // widgets.fac.text(fn.cropFloatStr(fac)); + var conv = convertLength(data, val); + widgets.value2.val(fn.cropFloatStr(mRound(conv))); data.lastMeasureFactor = fac; data.lastMeasuredValue = val; - updateUnits(data); + }; + + // info window for line + var infoLine = function(data, shape) { + var dist = rectifiedDist(data, shape); + var fac = data.lastMeasureFactor; + var val = dist * fac; + var conv = convertLength(data, val); + var widgets = data.measureWidgets; + widgets.value1.val(fn.cropFloatStr(mRound(val))); + widgets.value2.val(fn.cropFloatStr(mRound(conv))); + data.lastMeasuredValue = val; + data.lastMeasuredDistance = dist; + }; + + // info window for polygon + var infoPolygon = function(data, shape) { + var area = rectifiedArea(data, shape); + var fac = data.lastMeasureFactor; + var val = area * fac * fac ; + var conv = convertArea(data, val); + var widgets = data.measureWidgets; + widgets.value1.val(fn.cropFloatStr(mRound(val))); + widgets.value2.val(fn.cropFloatStr(mRound(conv))); + }; + + // info window for rectangle + var infoRect = function(data, shape) { + var widgets = data.measureWidgets; + widgets.value1.val('rect 1'); + widgets.value2.val('rect 2'); + }; + + // recalculate after measuring + var updateInfo = function(data, shape) { + var type = shape.geometry.type; + console.debug('measure: updateInfo', type); + if (type === 'Line') { + return infoLine(data, shape); + } + if (type === 'LineString') { + return infoLine(data, shape); + } + if (type === 'Rectangle') { + return infoRect(data, shape); + } + if (type === 'Polygon') { + return infoPolygon(data, shape); + } }; // return a shape of the currently selected shape type - var currentShape = function(data) { - var shape = getSelectedShapeType(data); + var getSelectedShape = function(data) { + var selection = getSelectedShapeType(data); var stroke = getSelectedStroke(data); - var item = { + var shape = { geometry : { - type : shape.type + type : selection.type }, properties : { stroke : stroke, @@ -868,7 +932,7 @@ cssclass : 'dl-measure-item' } }; - return item; + return shape; }; // return shape type selected by user (on the toolbar) @@ -944,18 +1008,18 @@ var widgets = { names : [ 'move', 'startb', 'shape', - 'lenlabel', 'len', - 'eq1', 'value1', 'unit1', - 'eq2', 'value2', 'unit2' + // 'lenlabel', 'len', 'eq1', + 'value1', 'unit1', 'eq2', + 'value2', 'unit2' ], move : $(''), startb : $(''), shape : $(''), value2 : $(''),