Should resolve #402 (only for cicular beds)
This commit is contained in:
Ilya Novoselov
parent
f3ee2d2bfd
commit
b81a4b6d5e
4 changed files with 92 additions and 32 deletions
|
|
@ -97,7 +97,7 @@ default_settings = {
|
|||
{"x": 0.0, "y": 0.0}
|
||||
],
|
||||
"bedDimensions": {
|
||||
"x": 200.0, "y": 200.0
|
||||
"x": 200.0, "y": 200.0, "r": 100
|
||||
}
|
||||
},
|
||||
"appearance": {
|
||||
|
|
|
|||
|
|
@ -186,37 +186,68 @@ GCODE.renderer = (function(){
|
|||
|
||||
ctx.translate(offsetBedX, offsetBedY);
|
||||
|
||||
ctx.beginPath();
|
||||
var width = renderOptions["bed"]["x"] * zoomFactor;
|
||||
var height = renderOptions["bed"]["y"] * zoomFactor;
|
||||
var origin = {
|
||||
x: 0,
|
||||
y: -1 * renderOptions["bed"]["y"] * zoomFactor
|
||||
};
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.rect(origin.x, origin.y, width, height);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
var i;
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
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();
|
||||
if(renderOptions["bed"]["circular"]) {
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
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.beginPath();
|
||||
ctx.arc(0, 0, renderOptions["bed"]["r"] * zoomFactor, 0, Math.PI * 2, true);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
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.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.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();
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
ctx.rect(origin.x, origin.y, width, height);
|
||||
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
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.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.stroke();
|
||||
|
||||
ctx.translate(-offsetBedX, -offsetBedY);
|
||||
};
|
||||
|
|
@ -358,6 +389,12 @@ GCODE.renderer = (function(){
|
|||
offsetModelY = -1 * (renderOptions["bed"]["y"] / 2 - (mdlInfo.min.y + mdlInfo.modelSize.y / 2)) * zoomFactor;
|
||||
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;
|
||||
offsetModelY = canvasCenter.y;
|
||||
offsetBedX = 0;
|
||||
offsetBedY = 0;
|
||||
} else {
|
||||
offsetModelX = 0;
|
||||
offsetModelY = 0;
|
||||
|
|
@ -397,8 +434,13 @@ GCODE.renderer = (function(){
|
|||
init: function(){
|
||||
startCanvas();
|
||||
initialized = true;
|
||||
zoomFactor = Math.min((canvas.width - 10) / renderOptions["bed"]["x"], (canvas.height - 10) / renderOptions["bed"]["y"]);
|
||||
ctx.translate((canvas.width - renderOptions["bed"]["x"] * zoomFactor) / 2, renderOptions["bed"]["y"] * zoomFactor + (canvas.height - renderOptions["bed"]["y"] * zoomFactor) / 2);
|
||||
var bedWidth = renderOptions["bed"]["x"];
|
||||
var bedHeight = renderOptions["bed"]["y"];;
|
||||
if(renderOptions["bed"]["circular"]) {
|
||||
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);
|
||||
|
||||
offsetModelX = 0;
|
||||
offsetModelY = 0;
|
||||
|
|
|
|||
|
|
@ -68,16 +68,22 @@ function SettingsViewModel(loginStateViewModel, usersViewModel) {
|
|||
|
||||
self.printer_bedDimensionX = ko.observable(undefined);
|
||||
self.printer_bedDimensionY = ko.observable(undefined);
|
||||
self.printer_bedDimensionR = ko.observable(undefined);
|
||||
self.printer_bedCircular = ko.observable(undefined);
|
||||
self.printer_bedDimensions = ko.computed({
|
||||
read: function () {
|
||||
return {
|
||||
x: parseFloat(self.printer_bedDimensionX()),
|
||||
y: parseFloat(self.printer_bedDimensionY())
|
||||
y: parseFloat(self.printer_bedDimensionY()),
|
||||
r: parseFloat(self.printer_bedDimensionR()),
|
||||
circular: self.printer_bedCircular()
|
||||
};
|
||||
},
|
||||
write: function(value) {
|
||||
self.printer_bedDimensionX(value.x);
|
||||
self.printer_bedDimensionY(value.y);
|
||||
self.printer_bedDimensionR(value.r);
|
||||
self.printer_bedCircular(value.circular);
|
||||
},
|
||||
owner: self
|
||||
});
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@
|
|||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="settings-bedSize">Bed Size</label>
|
||||
<div class="controls form-inline">
|
||||
<div class="controls form-inline" data-bind="ifnot: printer_bedCircular">
|
||||
<label>X:</label>
|
||||
<div class="input-append">
|
||||
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: printer_bedDimensionX" id="settings-bedX">
|
||||
|
|
@ -160,6 +160,18 @@
|
|||
<span class="add-on">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls form-inline" data-bind="if: printer_bedCircular">
|
||||
<label>Radius:</label>
|
||||
<div class="input-append">
|
||||
<input type="number" step="0.01" class="input-mini text-right" data-bind="value: printer_bedDimensionR" id="settings-bedR">
|
||||
<span class="add-on">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls form-inline">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" data-bind="checked: printer_bedCircular" id="settings-bedCircular">Circular
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue