# 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 : $(''),
- eq : $('='),
- info : $('length'),
- fac : $(''),
- value1 : $(''),
- value2 : $(''),
- unit1 : $(''),
- unit2 : $(''),
- angle : $('')
+ info : $('
'),
+ startb : $(''),
+ shape : $(''),
+ eq : $('='),
+ type : $('length'),
+ fac : $(''),
+ value1 : $(''),
+ value2 : $(''),
+ unit1 : $(''),
+ unit2 : $(''),
+ angle : $(''),
+ linecolor : $(''),
+ guidecolor : $(''),
+ selcolor : $(''),
+ move : $('
')
};
var $measureBar = $('