Commit 20443d9b authored by hertzhaft's avatar hertzhaft

measure: add info icon; color bars

parent 6755e1b2
webapp/src/main/webapp/jquery/img/move.png

2.81 KB | W: | H:

webapp/src/main/webapp/jquery/img/move.png

370 Bytes | W: | H:

webapp/src/main/webapp/jquery/img/move.png
webapp/src/main/webapp/jquery/img/move.png
webapp/src/main/webapp/jquery/img/move.png
webapp/src/main/webapp/jquery/img/move.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -85,7 +85,12 @@ option.dl-units { ...@@ -85,7 +85,12 @@ option.dl-units {
img#dl-measure-move { img#dl-measure-move {
vertical-align: middle; 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 { .dl-measure-shape {
...@@ -112,3 +117,13 @@ img#dl-measure-move { ...@@ -112,3 +117,13 @@ img#dl-measure-move {
fill: none; 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;
...@@ -714,12 +714,12 @@ ...@@ -714,12 +714,12 @@
measureButtonSet : ['measurebar'], measureButtonSet : ['measurebar'],
// unit data // unit data
units : UNITS, units : UNITS,
// choice of colors offered by measure bar // default shape color
lineColors : ['white', 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet', 'black'],
// default color
lineColor : 'red', lineColor : 'red',
// color while the line is drawn // construction line color
drawColor : 'green', guideColor : 'cornsilk',
// selected shape color
selectedColor : 'cyan',
// implemented measuring shape types, for select widget // implemented measuring shape types, for select widget
implementedShapes : ['Line', 'LineString', 'Proportion', 'Rect', 'Rectangle', 'Polygon', 'Circle', 'Ellipse', 'Oval', 'Grid'], implementedShapes : ['Line', 'LineString', 'Proportion', 'Rect', 'Rectangle', 'Polygon', 'Circle', 'Ellipse', 'Oval', 'Grid'],
// all measuring shape types // all measuring shape types
...@@ -993,7 +993,7 @@ ...@@ -993,7 +993,7 @@
'properties': { 'properties': {
'editable': true, 'editable': true,
'selected': false, 'selected': false,
'stroke': getSelectedStroke(data), 'stroke': getLineStroke(data),
'stroke-width': 1, 'stroke-width': 1,
'cssclass': shapeClass(shapeType) 'cssclass': shapeClass(shapeType)
// 'center' : data.settings.drawFromCenter // 'center' : data.settings.drawFromCenter
...@@ -1008,7 +1008,7 @@ ...@@ -1008,7 +1008,7 @@
var display = data.settings.shapeInfo[type].display; var display = data.settings.shapeInfo[type].display;
var state = display !== 'length' && display !== 'radius'; var state = display !== 'length' && display !== 'radius';
widgets.value1.prop('disabled', state); widgets.value1.prop('disabled', state);
widgets.info.text(display); widgets.type.text(display);
}; };
// returns a screenpoint manipulation function // returns a screenpoint manipulation function
...@@ -1050,11 +1050,20 @@ ...@@ -1050,11 +1050,20 @@
}; };
// return line color from settings (TODO: chosen by user) // return line color from settings (TODO: chosen by user)
var getSelectedStroke = function(data) { var getLineStroke = function(data) {
// TODO: colorpicker // TODO: colorpicker
return data.settings.lineColor; 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 // load shape types into select element
var populateShapeSelect = function(data) { var populateShapeSelect = function(data) {
var $shape = data.measureWidgets.shape; var $shape = data.measureWidgets.shape;
...@@ -1252,7 +1261,8 @@ ...@@ -1252,7 +1261,8 @@
var axis0 = side0.parallel(mid3); // short axis var axis0 = side0.parallel(mid3); // short axis
var axis1 = side1.parallel(mid0); // long axis var axis1 = side1.parallel(mid0); // long axis
var maxDiam = axis0.length()-1; // maximal diameter for small circles 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); console.debug(handle.distance(mid2), maxDiam);
if (handle.distance(mid0) > axis1.length()) { // constrain handle if (handle.distance(mid0) > axis1.length()) { // constrain handle
handle.moveTo(mid2); handle.moveTo(mid2);
...@@ -1323,22 +1333,29 @@ ...@@ -1323,22 +1333,29 @@
console.debug('measure: setupMeasureBar'); console.debug('measure: setupMeasureBar');
var widgets = { var widgets = {
names : [ names : [
'move', 'startb', 'shape',
'info', 'info',
'startb', 'shape',
'type',
'value1', 'unit1', 'eq', 'value1', 'unit1', 'eq',
'value2', 'unit2' 'value2', 'unit2',
'linecolor', 'guidecolor', 'selcolor',
'move'
], ],
move : $('<img id="dl-measure-move" src="img/move.png" title="move measuring bar around the screen"></img>'), info : $('<img id="dl-measure-info" src="img/info.png" title="display info window for shapes"></img>'),
startb : $('<button id="dl-measure-startb" title="click to draw a measuring shape on top of the image">M</button>'), 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" />'), shape : $('<select id="dl-measure-shape" title="select a shape to use for measuring" />'),
eq : $('<span class="dl-measure-label">=</span>'), eq : $('<span class="dl-measure-label">=</span>'),
info : $('<span id="dl-measure-shapetype" class="dl-measure-label">length</span>'), type : $('<span id="dl-measure-shapetype" class="dl-measure-label">length</span>'),
fac : $('<span id="dl-measure-factor" class="dl-measure-number" />'), 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" />'), 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"/>'), value2 : $('<span id="dl-measure-value2" class="dl-measure-label" title="last measured value, converted to the secondary unit" value="0.0"/>'),
unit1 : $('<select id="dl-measure-unit1" title="current measuring unit - click to change" />'), unit1 : $('<select id="dl-measure-unit1" title="current measuring unit - click to change" />'),
unit2 : $('<select id="dl-measure-unit2" title="secondary measuring unit - click to change" />'), unit2 : $('<select 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-number" title="last measured angle" />'),
linecolor : $('<span id="dl-measure-linecolor" title="select main line color for shapes"></span>'),
guidecolor : $('<span id="dl-measure-guidecolor" title="select construction line color for shapes"></span>'),
selcolor : $('<span id="dl-measure-selectedcolor" title="select line color for selected shapes"></span>'),
move : $('<img id="dl-measure-move" src="img/move.png" title="move measuring bar around the screen"></img>')
}; };
var $measureBar = $('<div id="dl-measure-toolbar" />'); var $measureBar = $('<div id="dl-measure-toolbar" />');
$.each(widgets.names, function(index, item) { $.each(widgets.names, function(index, item) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment