# HG changeset patch # User hertzhaft # Date 1425122562 -3600 # Node ID 9f0bf576214c61c4549c4f09fb73e8f0441be1ac # Parent eee1d8cc672b0993a71013fdd7d0d72914275028 measure: add info icon; color bars diff -r eee1d8cc672b -r 9f0bf576214c webapp/src/main/webapp/jquery/img/info.png Binary file webapp/src/main/webapp/jquery/img/info.png has changed diff -r eee1d8cc672b -r 9f0bf576214c webapp/src/main/webapp/jquery/img/move.png Binary file webapp/src/main/webapp/jquery/img/move.png has changed diff -r eee1d8cc672b -r 9f0bf576214c webapp/src/main/webapp/jquery/jquery.digilib.measure.css --- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.css Thu Feb 26 11:37:11 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.css Sat Feb 28 12:22:42 2015 +0100 @@ -85,7 +85,12 @@ img#dl-measure-move { vertical-align: middle; - margin: 0px 4px 4px 0px; + margin: 0px 0px 4px 4px; +} + +img#dl-measure-info { + vertical-align: middle; + margin: 0px 4px 4px 4px; } .dl-measure-shape { @@ -112,3 +117,13 @@ fill: none; } +span#dl-measure-linecolor, +span#dl-measure-guidecolor, +span#dl-measure-selectedcolor { + display: inline-block; + width: 4px; + height: 16px; + vertical-align: middle; + margin: 0px 0px 2px 4px; + background-color: darkgray; + diff -r eee1d8cc672b -r 9f0bf576214c webapp/src/main/webapp/jquery/jquery.digilib.measure.js --- a/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Thu Feb 26 11:37:11 2015 +0100 +++ b/webapp/src/main/webapp/jquery/jquery.digilib.measure.js Sat Feb 28 12:22:42 2015 +0100 @@ -714,12 +714,12 @@ measureButtonSet : ['measurebar'], // unit data units : UNITS, - // choice of colors offered by measure bar - lineColors : ['white', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet', 'black'], - // default color + // default shape color lineColor : 'red', - // color while the line is drawn - drawColor : 'green', + // construction line color + guideColor : 'cornsilk', + // selected shape color + selectedColor : 'cyan', // implemented measuring shape types, for select widget implementedShapes : ['Line', 'LineString', 'Proportion', 'Rect', 'Rectangle', 'Polygon', 'Circle', 'Ellipse', 'Oval', 'Grid'], // all measuring shape types @@ -993,7 +993,7 @@ 'properties': { 'editable': true, 'selected': false, - 'stroke': getSelectedStroke(data), + 'stroke': getLineStroke(data), 'stroke-width': 1, 'cssclass': shapeClass(shapeType) // 'center' : data.settings.drawFromCenter @@ -1008,7 +1008,7 @@ var display = data.settings.shapeInfo[type].display; var state = display !== 'length' && display !== 'radius'; widgets.value1.prop('disabled', state); - widgets.info.text(display); + widgets.type.text(display); }; // returns a screenpoint manipulation function @@ -1050,11 +1050,20 @@ }; // return line color from settings (TODO: chosen by user) - var getSelectedStroke = function(data) { + var getLineStroke = function(data) { // TODO: colorpicker return data.settings.lineColor; }; + // return color from settings + var getGuideStroke = function(data) { + return data.settings.guideColor; + }; + + // return color from settings (TODO: chosen by user) + var getSelectedStroke = function(data) { + return data.settings.selectedColor; + }; // load shape types into select element var populateShapeSelect = function(data) { var $shape = data.measureWidgets.shape; @@ -1252,7 +1261,8 @@ var axis0 = side0.parallel(mid3); // short axis var axis1 = side1.parallel(mid0); // long axis var maxDiam = axis0.length()-1; // maximal diameter for small circles - var handle = axis1.perpendicularPoint(p[3]); // drag point projected on long axis + var handle = axis1.perpendicularPoint(p[3]); // drag point projected on long axis + console.debug(handle.distance(mid2), maxDiam); if (handle.distance(mid0) > axis1.length()) { // constrain handle handle.moveTo(mid2); @@ -1323,22 +1333,29 @@ console.debug('measure: setupMeasureBar'); var widgets = { names : [ - 'move', 'startb', 'shape', 'info', + 'startb', 'shape', + 'type', 'value1', 'unit1', 'eq', - 'value2', 'unit2' + 'value2', 'unit2', + 'linecolor', 'guidecolor', 'selcolor', + 'move' ], - move : $(''), - startb : $(''), - shape : $(''), - value2 : $(''), - unit1 : $(''), - angle : $('') + info : $(''), + startb : $(''), + shape : $(''), + value2 : $(''), + unit1 : $(''), + angle : $(''), + linecolor : $(''), + guidecolor : $(''), + selcolor : $(''), + move : $('') }; var $measureBar = $('
'); $.each(widgets.names, function(index, item) {