Skip to content
Permalink
Browse files

Small adjustments to #407

- Refactored drawGrid into two functions drawRectangularGrid and drawCircularGrid
- Made sure grid for circular beds always "starts" at (0,0) so that e.g. for a radius of 105mm the center of the bed will be on the grid lines
- Made center on circular bed be better visible by making origin lines thicker
- Made initial focus on bed center properly
  • Loading branch information...
foosel committed Mar 22, 2014
1 parent ba7d0a6 commit c858c8f75b3ba7192864272935a7525e80d6bc78
Showing with 91 additions and 57 deletions.
  1. +91 −57 src/octoprint/static/gcodeviewer/js/renderer.js
@@ -182,74 +182,97 @@ GCODE.renderer = (function(){
};

var drawGrid = function() {
console.log("Drawing grid");

ctx.translate(offsetBedX, offsetBedY);
if(renderOptions["bed"]["circular"]) {
drawCircularGrid();
} else {
drawRectangularGrid();
}
ctx.translate(-offsetBedX, -offsetBedY);
};

var drawRectangularGrid = function() {
var i;
var width = renderOptions["bed"]["x"] * zoomFactor;
var height = renderOptions["bed"]["y"] * zoomFactor;
var origin = {
x: 0,
y: -1 * renderOptions["bed"]["y"] * zoomFactor
};

if(renderOptions["bed"]["circular"]) {
ctx.strokeStyle = renderOptions["colorGrid"];
ctx.fillStyle = "#ffffff";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.strokeStyle = renderOptions["colorGrid"];
ctx.fillStyle = "#ffffff";
ctx.lineWidth = 2;

ctx.beginPath();
ctx.arc(0, 0, renderOptions["bed"]["r"] * zoomFactor, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
ctx.rect(origin.x, origin.y, width, height);

ctx.strokeStyle = renderOptions["colorGrid"];
ctx.lineWidth = 1;
ctx.fill();
ctx.stroke();

ctx.beginPath();
for (i = -renderOptions["bed"]["r"]; i <= renderOptions["bed"]["r"]; i += gridStep) {
var x = i;
var y = Math.sqrt(Math.pow(renderOptions["bed"]["r"], 2) - Math.pow(x, 2));
ctx.strokeStyle = renderOptions["colorGrid"];
ctx.lineWidth = 1;

ctx.moveTo(x * zoomFactor, y * zoomFactor);
ctx.lineTo(x * zoomFactor, -1 * y * zoomFactor);
ctx.beginPath();
for (i = 0; i <= renderOptions["bed"]["x"]; i += gridStep) {
ctx.moveTo(i * zoomFactor, 0);
ctx.lineTo(i * zoomFactor, -1 * renderOptions["bed"]["y"] * zoomFactor);
}
ctx.stroke();

ctx.moveTo(y * zoomFactor, x * zoomFactor);
ctx.lineTo(-1 * y * zoomFactor, x * zoomFactor);
}
ctx.stroke();
} else {
var width = renderOptions["bed"]["x"] * zoomFactor;
var height = renderOptions["bed"]["y"] * zoomFactor;
var origin = {
x: 0,
y: -1 * renderOptions["bed"]["y"] * zoomFactor
};
ctx.beginPath();
for (i = 0; i <= renderOptions["bed"]["y"]; i += gridStep) {
ctx.moveTo(0, -1 * i * zoomFactor);
ctx.lineTo(renderOptions["bed"]["x"] * zoomFactor, -1 * i * zoomFactor);
}
ctx.stroke();
};

ctx.beginPath();
ctx.strokeStyle = renderOptions["colorGrid"];
ctx.fillStyle = "#ffffff";
ctx.lineWidth = 2;
var drawCircularGrid = function() {
var i;

ctx.rect(origin.x, origin.y, width, height);
ctx.strokeStyle = renderOptions["colorGrid"];
ctx.fillStyle = "#ffffff";
ctx.lineWidth = 2;

ctx.fill();
ctx.stroke();
//~~ bed outline & origin
ctx.beginPath();

ctx.strokeStyle = renderOptions["colorGrid"];
ctx.lineWidth = 1;
// outline
ctx.arc(0, 0, renderOptions["bed"]["r"] * zoomFactor, 0, Math.PI * 2, true);

ctx.beginPath();
for (i = 0; i <= renderOptions["bed"]["x"]; i += gridStep) {
ctx.moveTo(i * zoomFactor, 0);
ctx.lineTo(i * zoomFactor, -1 * renderOptions["bed"]["y"] * zoomFactor);
}
ctx.stroke();
// origin
ctx.moveTo(-1 * renderOptions["bed"]["r"] * zoomFactor, 0);
ctx.lineTo(renderOptions["bed"]["r"] * zoomFactor, 0);
ctx.moveTo(0, -1 * renderOptions["bed"]["r"] * zoomFactor);
ctx.lineTo(0, renderOptions["bed"]["r"] * zoomFactor);

ctx.beginPath();
for (i = 0; i <= renderOptions["bed"]["y"]; i += gridStep) {
ctx.moveTo(0, -1 * i * zoomFactor);
ctx.lineTo(renderOptions["bed"]["x"] * zoomFactor, -1 * i * zoomFactor);
}
ctx.stroke();
}
// draw
ctx.fill();
ctx.stroke();

ctx.translate(-offsetBedX, -offsetBedY);
ctx.strokeStyle = renderOptions["colorGrid"];
ctx.lineWidth = 1;

//~~ grid starting from origin
ctx.beginPath();
for (i = 0; i <= renderOptions["bed"]["r"]; i += gridStep) {
var x = i;
var y = Math.sqrt(Math.pow(renderOptions["bed"]["r"], 2) - Math.pow(x, 2));

ctx.moveTo(x * zoomFactor, y * zoomFactor);
ctx.lineTo(x * zoomFactor, -1 * y * zoomFactor);

ctx.moveTo(y * zoomFactor, x * zoomFactor);
ctx.lineTo(-1 * y * zoomFactor, x * zoomFactor);

ctx.moveTo(-1 * x * zoomFactor, y * zoomFactor);
ctx.lineTo(-1 * x * zoomFactor, -1 * y * zoomFactor);

ctx.moveTo(y * zoomFactor, -1 * x * zoomFactor);
ctx.lineTo(-1 * y * zoomFactor, -1 * x * zoomFactor);
}
ctx.stroke();
};

var drawLayer = function(layerNum, fromProgress, toProgress, isNotCurrentLayer){
@@ -371,10 +394,12 @@ GCODE.renderer = (function(){
};

var applyOffsets = function(mdlInfo) {
var canvasCenter;

// determine bed and model offsets
if (ctx) ctx.translate(-offsetModelX, -offsetModelY);
if (renderOptions["centerViewport"] || renderOptions["zoomInOnModel"]) {
var canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
if (mdlInfo) {
offsetModelX = canvasCenter.x - (mdlInfo.min.x + mdlInfo.modelSize.x / 2) * zoomFactor;
offsetModelY = canvasCenter.y + (mdlInfo.min.y + mdlInfo.modelSize.y / 2) * zoomFactor;
@@ -390,8 +415,8 @@ GCODE.renderer = (function(){
offsetBedX = -1 * (renderOptions["bed"]["x"] / 2 - (mdlInfo.min.x + mdlInfo.modelSize.x / 2)) * zoomFactor;
offsetBedY = (renderOptions["bed"]["y"] / 2 - (mdlInfo.min.y + mdlInfo.modelSize.y / 2)) * zoomFactor;
} else if (renderOptions["bed"]["circular"]) {
var canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
offsetModelX = canvasCenter.x;
canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
offsetModelX = canvasCenter.x;
offsetModelY = canvasCenter.y;
offsetBedX = 0;
offsetBedY = 0;
@@ -438,10 +463,19 @@ GCODE.renderer = (function(){
var bedWidth = renderOptions["bed"]["x"];
var bedHeight = renderOptions["bed"]["y"];;
if(renderOptions["bed"]["circular"]) {
bedWidth = bedHeight = renderOptions["bed"]["r"] *2;
bedWidth = bedHeight = renderOptions["bed"]["r"] * 2;
}
zoomFactor = Math.min((canvas.width - 10) / bedWidth, (canvas.height - 10) / bedHeight);
ctx.translate((canvas.width - bedWidth * zoomFactor) / 2, bedHeight * zoomFactor + (canvas.height - bedHeight * zoomFactor) / 2);

var translationX, translationY;
if (renderOptions["bed"]["circular"]) {
translationX = canvas.width / 2;
translationY = canvas.height / 2;
} else {
translationX = (canvas.width - bedWidth * zoomFactor) / 2;
translationY = bedHeight * zoomFactor + (canvas.height - bedHeight * zoomFactor) / 2;
}
ctx.translate(translationX, translationY);

offsetModelX = 0;
offsetModelY = 0;

0 comments on commit c858c8f

Please sign in to comment.
You can’t perform that action at this time.