Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

Added showX(YZ)Axis options to Graph3d #2686

Merged
merged 6 commits into from
Feb 8, 2017
Merged

Added showX(YZ)Axis options to Graph3d #2686

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
306c1e1
Added showX(YZ)Axis to Graph3d
nmehrle Dec 26, 2016
454d8d2
Added show_Axis options to docs and playground example
nmehrle Feb 6, 2017
bd0bbd3
Resolved merge conflict
nmehrle Feb 6, 2017
2af493e
Added show_Axis options to docs and playground example
nmehrle Feb 6, 2017
db72a4d
Merge remote-tracking branch 'refs/remotes/origin/develop' into develop
nmehrle Feb 6, 2017
2fa74d6
Merge branch 'develop' into develop
yotamberk Feb 6, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion docs/graph3d/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -422,9 +422,27 @@ <h2 id="Configuration_Options">Configuration Options</h2>
<td>showGrid</td>
<td>boolean</td>
<td>true</td>
<td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
<td>If true, grid lines are drawn in the x-y surface (the bottom of the 3d
graph).</td>
</tr>
<tr>
<td>showXAxis</td>
<td>boolean</td>
<td>true</td>
<td>If true, X axis and X axis labels are drawn.</td>
</tr>
<tr>
<td>showYAxis</td>
<td>boolean</td>
<td>true</td>
<td>If true, Y axis and Y axis labels are drawn.</td>
</tr>
<tr>
<td>showZAxis</td>
<td>boolean</td>
<td>true</td>
<td>If true, Z axis and Z axis labels are drawn.</td>
</tr>
<tr>
<td>showPerspective</td>
<td>boolean</td>
Expand Down
13 changes: 13 additions & 0 deletions examples/graph3d/playground/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,19 @@ <h2>Options</h2>
<td>showGrid</td>
<td><input type="checkbox" id="showGrid" checked /></td>
</tr>
<tr>
<td>showXAxis</td>
<td><input type="checkbox" id="showXAxis" checked /></td>
</tr>
<tr>
<td>showYAxis</td>
<td><input type="checkbox" id="showYAxis" checked /></td>
</tr>
<tr>
<td>showZAxis</td>
<td><input type="checkbox" id="showZAxis" checked /></td>
</tr>

<tr>
<td>showPerspective</td>
<td><input type="checkbox" id="showPerspective" checked /></td>
Expand Down
3 changes: 3 additions & 0 deletions examples/graph3d/playground/playground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,6 +406,9 @@ function getOptions() {
style: document.getElementById("style").value,
showAnimationControls: (document.getElementById("showAnimationControls").checked != false),
showGrid: (document.getElementById("showGrid").checked != false),
showXAxis: (document.getElementById("showXAxis").checked != false),
showYAxis: (document.getElementById("showYAxis").checked != false),
showZAxis: (document.getElementById("showZAxis").checked != false),
showPerspective: (document.getElementById("showPerspective").checked != false),
showLegend: (document.getElementById("showLegend").checked != false),
showShadow: (document.getElementById("showShadow").checked != false),
Expand Down
121 changes: 67 additions & 54 deletions lib/graph3d/Graph3d.js
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@ var DEFAULTS = {
xValueLabel : function(v) { return v; },
yValueLabel : function(v) { return v; },
zValueLabel : function(v) { return v; },
showXAxis : true,
showYAxis : true,
showZAxis : true,
showGrid : true,
showPerspective : true,
showShadow : false,
Expand Down Expand Up @@ -1288,7 +1291,7 @@ Graph3d.prototype._redrawAxis = function() {
to = new Point3d(x, yRange.max, zRange.min);
this._line3d(ctx, from, to, this.gridColor);
}
else {
else if (this.showXAxis) {
from = new Point3d(x, yRange.min, zRange.min);
to = new Point3d(x, yRange.min+gridLenX, zRange.min);
this._line3d(ctx, from, to, this.axisColor);
Expand All @@ -1298,10 +1301,12 @@ Graph3d.prototype._redrawAxis = function() {
this._line3d(ctx, from, to, this.axisColor);
}

yText = (armVector.x > 0) ? yRange.min : yRange.max;
var point3d = new Point3d(x, yText, zRange.min);
var msg = ' ' + this.xValueLabel(x) + ' ';
this.drawAxisLabelX(ctx, point3d, msg, armAngle, textMargin);
if (this.showXAxis) {
yText = (armVector.x > 0) ? yRange.min : yRange.max;
var point3d = new Point3d(x, yText, zRange.min);
var msg = ' ' + this.xValueLabel(x) + ' ';
this.drawAxisLabelX(ctx, point3d, msg, armAngle, textMargin);
}

step.next();
}
Expand All @@ -1320,7 +1325,7 @@ Graph3d.prototype._redrawAxis = function() {
to = new Point3d(xRange.max, y, zRange.min);
this._line3d(ctx, from, to, this.gridColor);
}
else {
else if (this.showYAxis){
from = new Point3d(xRange.min, y, zRange.min);
to = new Point3d(xRange.min+gridLenY, y, zRange.min);
this._line3d(ctx, from, to, this.axisColor);
Expand All @@ -1330,71 +1335,79 @@ Graph3d.prototype._redrawAxis = function() {
this._line3d(ctx, from, to, this.axisColor);
}

xText = (armVector.y > 0) ? xRange.min : xRange.max;
point3d = new Point3d(xText, y, zRange.min);
var msg = ' ' + this.yValueLabel(y) + ' ';
this.drawAxisLabelY(ctx, point3d, msg, armAngle, textMargin);
if (this.showYAxis) {
xText = (armVector.y > 0) ? xRange.min : xRange.max;
point3d = new Point3d(xText, y, zRange.min);
var msg = ' ' + this.yValueLabel(y) + ' ';
this.drawAxisLabelY(ctx, point3d, msg, armAngle, textMargin);
}

step.next();
}

// draw z-grid lines and axis
ctx.lineWidth = 1;
prettyStep = (this.defaultZStep === undefined);
step = new StepNumber(zRange.min, zRange.max, this.zStep, prettyStep);
step.start(true);
if (this.showZAxis) {
ctx.lineWidth = 1;
prettyStep = (this.defaultZStep === undefined);
step = new StepNumber(zRange.min, zRange.max, this.zStep, prettyStep);
step.start(true);

xText = (armVector.x > 0) ? xRange.min : xRange.max;
yText = (armVector.y < 0) ? yRange.min : yRange.max;
xText = (armVector.x > 0) ? xRange.min : xRange.max;
yText = (armVector.y < 0) ? yRange.min : yRange.max;

while (!step.end()) {
var z = step.getCurrent();
while (!step.end()) {
var z = step.getCurrent();

// TODO: make z-grid lines really 3d?
var from3d = new Point3d(xText, yText, z);
var from2d = this._convert3Dto2D(from3d);
to = new Point2d(from2d.x - textMargin, from2d.y);
this._line(ctx, from2d, to, this.axisColor);
// TODO: make z-grid lines really 3d?
var from3d = new Point3d(xText, yText, z);
var from2d = this._convert3Dto2D(from3d);
to = new Point2d(from2d.x - textMargin, from2d.y);
this._line(ctx, from2d, to, this.axisColor);

var msg = this.zValueLabel(z) + ' ';
this.drawAxisLabelZ(ctx, from3d, msg, 5);
var msg = this.zValueLabel(z) + ' ';
this.drawAxisLabelZ(ctx, from3d, msg, 5);

step.next();
}
step.next();
}

ctx.lineWidth = 1;
from = new Point3d(xText, yText, zRange.min);
to = new Point3d(xText, yText, zRange.max);
this._line3d(ctx, from, to, this.axisColor);
ctx.lineWidth = 1;
from = new Point3d(xText, yText, zRange.min);
to = new Point3d(xText, yText, zRange.max);
this._line3d(ctx, from, to, this.axisColor);
}

// draw x-axis
var xMin2d;
var xMax2d;
ctx.lineWidth = 1;
if (this.showXAxis) {
var xMin2d;
var xMax2d;
ctx.lineWidth = 1;

// line at yMin
xMin2d = new Point3d(xRange.min, yRange.min, zRange.min);
xMax2d = new Point3d(xRange.max, yRange.min, zRange.min);
this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
// line at ymax
xMin2d = new Point3d(xRange.min, yRange.max, zRange.min);
xMax2d = new Point3d(xRange.max, yRange.max, zRange.min);
this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
// line at yMin
xMin2d = new Point3d(xRange.min, yRange.min, zRange.min);
xMax2d = new Point3d(xRange.max, yRange.min, zRange.min);
this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
// line at ymax
xMin2d = new Point3d(xRange.min, yRange.max, zRange.min);
xMax2d = new Point3d(xRange.max, yRange.max, zRange.min);
this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
}

// draw y-axis
ctx.lineWidth = 1;
// line at xMin
from = new Point3d(xRange.min, yRange.min, zRange.min);
to = new Point3d(xRange.min, yRange.max, zRange.min);
this._line3d(ctx, from, to, this.axisColor);
// line at xMax
from = new Point3d(xRange.max, yRange.min, zRange.min);
to = new Point3d(xRange.max, yRange.max, zRange.min);
this._line3d(ctx, from, to, this.axisColor);
if (this.showYAxis) {
ctx.lineWidth = 1;
// line at xMin
from = new Point3d(xRange.min, yRange.min, zRange.min);
to = new Point3d(xRange.min, yRange.max, zRange.min);
this._line3d(ctx, from, to, this.axisColor);
// line at xMax
from = new Point3d(xRange.max, yRange.min, zRange.min);
to = new Point3d(xRange.max, yRange.max, zRange.min);
this._line3d(ctx, from, to, this.axisColor);
}

// draw x-label
var xLabel = this.xLabel;
if (xLabel.length > 0) {
if (xLabel.length > 0 && this.showXAxis) {
yOffset = 0.1 / this.scale.y;
xText = (xRange.max + 3*xRange.min)/4;
yText = (armVector.x > 0) ? yRange.min - yOffset: yRange.max + yOffset;
Expand All @@ -1404,7 +1417,7 @@ Graph3d.prototype._redrawAxis = function() {

// draw y-label
var yLabel = this.yLabel;
if (yLabel.length > 0) {
if (yLabel.length > 0 && this.showYAxis) {
xOffset = 0.1 / this.scale.x;
xText = (armVector.y > 0) ? xRange.min - xOffset : xRange.max + xOffset;
yText = (yRange.max + 3*yRange.min)/4;
Expand All @@ -1415,7 +1428,7 @@ Graph3d.prototype._redrawAxis = function() {

// draw z-label
var zLabel = this.zLabel;
if (zLabel.length > 0) {
if (zLabel.length > 0 && this.showZAxis) {
offset = 30; // pixels. // TODO: relate to the max width of the values on the z axis?
xText = (armVector.x > 0) ? xRange.min : xRange.max;
yText = (armVector.y < 0) ? yRange.min : yRange.max;
Expand Down
3 changes: 3 additions & 0 deletions lib/graph3d/Settings.js
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,9 @@ var OPTIONKEYS = [
'xValueLabel',
'yValueLabel',
'zValueLabel',
'showXAxis',
'showYAxis',
'showZAxis',
'showGrid',
'showPerspective',
'showShadow',
Expand Down