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 {
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 @@ img#dl-measure-move {
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 @@
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;
......@@ -1253,6 +1262,7 @@
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
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 : $('<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>'),
shape : $('<select id="dl-measure-shape" title="select a shape to use for measuring" />'),
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" />'),
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 id="dl-measure-unit1" title="current 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" />');
$.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