vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 01:07:56 +01:00
Code Issues Releases Wiki Activity

Changes to how we draw to the canvas and how the preview is rendered. This has massive speedup results for tablets and phones.

Browse Source
This commit is contained in:
Adriaan Wormgoor 2013-08-16 22:27:26 +02:00
parent aa82d6daa8
commit ed8ceb7879
3 changed files with 228 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
js/buttonbehaviors.js
View File

@ -118,16 +118,17 @@ function initButtonBehavior() {
function startMoveUp(e) {
e.preventDefault();
// console.log("btnMoveUp mouse down");
previewUp();
previewUp(true);
clearInterval(btnMoveUpInterval);
btnMoveUpInterval = setInterval( function() {
previewUp();
previewUp(true);
}, 1000/30);
}
function stopMoveUp(e) {
e.preventDefault();
console.log("btnMoveUp mouse up");
clearInterval(btnMoveUpInterval);
previewUp();
}
btnMoveUp.mousedown(function(e) { startMoveUp(e) });
btnMoveUp.mouseup(function(e) { stopMoveUp(e) });
@ -137,16 +138,17 @@ function initButtonBehavior() {
function startMoveDown(e) {
e.preventDefault();
// console.log("btnMoveDown mouse down");
previewDown();
previewDown(true);
clearInterval(btnMoveDownInterval);
btnMoveDownInterval = setInterval( function() {
previewDown();
previewDown(true);
}, 1000/30);
}
function stopMoveDown(e) {
e.preventDefault();
console.log("btnMoveDown mouse up");
clearInterval(btnMoveDownInterval);
previewDown();
}
btnMoveDown.mousedown(function(e) { startMoveDown(e) });
btnMoveDown.mouseup(function(e) { stopMoveDown(e) });
@ -156,16 +158,17 @@ function initButtonBehavior() {
function startTwistLeft(e) {
e.preventDefault();
// console.log("btnTwistLeft mouse down");
previewTwistLeft();
previewTwistLeft(true);
clearInterval(btnTwistLeftInterval);
btnTwistLeftInterval = setInterval( function() {
previewTwistLeft();
previewTwistLeft(true);
}, 1000/30);
}
function stopTwistLeft(e) {
e.preventDefault();
// console.log("btnTwistLeft mouse up");
clearInterval(btnTwistLeftInterval);
previewTwistLeft();
}
btnTwistLeft.mousedown(function(e) { startTwistLeft(e) });
btnTwistLeft.mouseup(function(e) { stopTwistLeft(e) });
@ -175,16 +178,17 @@ function initButtonBehavior() {
function startTwistRight(e) {
e.preventDefault();
// console.log("btnTwistRight mouse down");
previewTwistRight();
previewTwistRight(true);
clearInterval(btnTwistRightInterval);
btnTwistRightInterval = setInterval( function() {
previewTwistRight();
previewTwistRight(true);
}, 1000/30);
}
function stopTwistRight(e) {
e.preventDefault();
// console.log("btnTwistRight mouse up");
clearInterval(btnTwistRightInterval);
previewTwistLeft();
}
btnTwistRight.mousedown(function(e) { startTwistRight(e) });
btnTwistRight.mouseup(function(e) { stopTwistRight(e) });
@ -223,20 +227,23 @@ function initButtonBehavior() {
btnStop.bind('touchstart mousedown',stopPrint);
}
function stopPrint() {
printer.stop();
console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);
if (sendPrintCommands) printer.stop();
}
function prevDoodle(e) {
console.log("f:prevDoodle()");
console.log("f:prevDoodle()");
}
function nextDoodle(e) {
console.log("f:nextDoodle()");
}
function print(e) {
console.log("f:print()");
console.log("f:print() >> sendPrintCommands = " + sendPrintCommands);
if (sendPrintCommands) {
$("#textdump").text("");
if (_points.length > 2) {
@ -255,7 +262,8 @@ function print(e) {
// console.log("");
// console.log("");
$("#textdump").text(gcode.join("\n"));
if (debugMode) $("#textdump").text(gcode.join("\n"));
// copyToClipboard(gencode);
//*/
} else {
@ -266,6 +274,9 @@ function print(e) {
// $.post("/doodle3d.of", { data:output }, function(data) {
// btnPrint.disabled = false;
// });
} else {
console.log("sendPrintCommands is false: not sending print command to 3dprinter");
}
}
@ -288,33 +299,34 @@ function oopsUndo() {
redrawDoodle();
redrawPreview();
}
function previewUp() {
function previewUp(redrawLess) {
// console.log("f:previewUp()");
if (numLayers < 100) {
numLayers++;
}
redrawPreview();
redrawPreview(redrawLess);
}
function previewDown() {
function previewDown(redrawLess) {
// console.log("f:previewDown()");
if (numLayers > 2) {
numLayers--;
}
redrawPreview();
redrawPreview(redrawLess);
}
function previewTwistLeft() {
function previewTwistLeft(redrawLess) {
if (redrawLess == undefined) redrawLess = false;
// console.log("f:previewTwistLeft()");
// if (rStep < Math.PI) {
rStep -= twistIncrement;
// }
redrawPreview();
redrawPreview(redrawLess);
}
function previewTwistRight() {
function previewTwistRight(redrawLess) {
// console.log("f:previewTwistRight()");
// if (rStep < Math.PI) {
rStep += twistIncrement;
// }
redrawPreview();
redrawPreview(redrawLess);
}

115
js/canvasDrawing_v01.js
View File

@ -139,6 +139,9 @@ function clearDoodle() {
prevX = 0;
prevY = 0;
updatePrevX = -1;
updatePrevY = -1;
doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom
doodleTransform = [0, 0, 1.0, 1.0]; // [ x, y, scaleX, scaleY ]
@ -165,6 +168,7 @@ function redrawDoodle() {
}
function adjustBounds(x, y) {
var newPointsOutsideOfCurrentBounds = false;
// console.log("f:adjustBounds("+x+","+y+")");
if (doodleBounds[0] == -1) {
@ -177,11 +181,27 @@ function redrawDoodle() {
return;
}
doodleBounds[0] = Math.min(doodleBounds[0], x); // left
doodleBounds[2] = Math.max(doodleBounds[2], x); // right
doodleBounds[1] = Math.min(doodleBounds[1], y); // top
doodleBounds[3] = Math.max(doodleBounds[3], y); // bottom
if (x < doodleBounds[0]) {
doodleBounds[0] = x;
newPointsOutsideOfCurrentBounds = true;
}
if (x > doodleBounds[2]) {
doodleBounds[2] = x;
newPointsOutsideOfCurrentBounds = true;
}
if (y < doodleBounds[1]) {
doodleBounds[1] = y;
newPointsOutsideOfCurrentBounds = true;
}
if (y > doodleBounds[3]) {
doodleBounds[3] = y;
newPointsOutsideOfCurrentBounds = true;
}
// doodleBounds[0] = Math.min(doodleBounds[0], x); // left
// doodleBounds[2] = Math.max(doodleBounds[2], x); // right
//
// doodleBounds[1] = Math.min(doodleBounds[1], y); // top
// doodleBounds[3] = Math.max(doodleBounds[3], y); // bottom
// draw the bounding rect (DEBUG)
/*
@ -195,6 +215,7 @@ function redrawDoodle() {
// console.log(" new bounds: " + doodleBounds);
return newPointsOutsideOfCurrentBounds;
}
// does what exactly?
@ -264,15 +285,11 @@ function onCanvasMouseDown(e) {
draw(x, y, 0.5);
}
var prevPoint = {x:-1, y:-1};
function onCanvasMouseMove(e) {
if (!dragging) return;
// console.log("onmousemove");
// _points.push([e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop, false]);
// adjustBounds(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
// adjustPreviewTransformation();
// draw(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
var x, y;
if (e.offsetX != undefined) {
x = e.offsetX;
@ -282,21 +299,24 @@ function onCanvasMouseMove(e) {
y = e.layerY;
}
if (prevPoint.x != -1 || prevPoint.y != -1) {
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
if (dist > 5) {
_points.push([x, y, false]);
adjustBounds(x, y);
adjustBounds(x, y)
adjustPreviewTransformation();
draw(x, y);
// update counter -> this was for getting a handle on how often the Canvas fires a move-event
/*
movementCounter++;
if (new Date().getTime() - prevCountingTime > 1000) {
// console.log("number of moves in 1sec: " + movementCounter)
prevCountingTime= new Date().getTime();
$("#numtimes").text(movementCounter + " times");
movementCounter = 0;
prevPoint.x = x;
prevPoint.y = y;
}
} else {
_points.push([x, y, false]);
adjustBounds(x, y)
adjustPreviewTransformation();
draw(x, y);
prevPoint.x = x;
prevPoint.y = y;
}
//*/
// DEBUG
// $("#textdump").text("");
@ -304,7 +324,12 @@ function onCanvasMouseMove(e) {
// $("#textdump").append("doodletransform:" + doodleTransform + "\n");
if (new Date().getTime() - prevRedrawTime > redrawInterval) {
// redrawing the whole preview the first X points ensures that the doodleBounds is set well
if (_points.length < 50) {
redrawPreview();
} else {
updatePreview(x, y, true);
}
prevRedrawTime = new Date().getTime();
}
}
@ -351,11 +376,24 @@ function onCanvasTouchMove(e) {
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
if (prevPoint.x != -1 || prevPoint.y != -1) {
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
if (dist > 5) {
_points.push([x, y, false]);
adjustBounds(x, y);
adjustBounds(x, y)
adjustPreviewTransformation();
draw(x, y);
prevPoint.x = x;
prevPoint.y = y;
}
} else {
_points.push([x, y, false]);
adjustBounds(x, y)
adjustPreviewTransformation();
draw(x, y);
prevPoint.x = x;
prevPoint.y = y;
}
// update counter -> this was for getting a handle on how often the Canvas fires a move-event
/*
@ -369,36 +407,27 @@ function onCanvasTouchMove(e) {
//*/
if (new Date().getTime() - prevRedrawTime > redrawInterval) {
// redrawing the whole preview the first X points ensures that the doodleBounds is set well
if (_points.length < 50) {
redrawPreview();
} else {
updatePreview(x, y, true);
}
prevRedrawTime = new Date().getTime();
}
}
function onCanvasTouchEnd(e) {
// console.log("ontouchend");
console.log("doodleBounds: " + doodleBounds);
console.log("doodleTransform: " + doodleTransform);
// ctx.stroke();
console.log("_points.length :" + _points.length);
redrawPreview();
}
function prevent(e) {
e.preventDefault();
}
/*
function print(e) {
output = path.attributes.d.nodeValue;
console.log(output);
output = output.split("M").join("\n");
output = output.split(" L").join("_");
output = output.split(" ").join(",");
output = output.split("_").join(" ");
output = "\nBEGIN\n" + output + "\n\nEND\n";
$.post("/doodle3d.of", { data:output }, function(data) {
btnPrint.disabled = false;
});
}
//*/

110
js/previewRendering_v01.js
View File

@ -11,7 +11,7 @@ var svgPathRegExp = /[LM]\d* \d*/ig;
var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
var prevRedrawTime = new Date().getTime();
var redrawInterval = 1000 / 20; // ms
var redrawInterval = 1000 / 30; // ms
function initPreviewRendering() {
console.log("f:initPreviewRendering()");
@ -44,7 +44,9 @@ var prevY = 0;
var highlight = true; //highlight bottom, middle and top layers
var linesRaw = "";
function redrawPreview() {
var debug_redrawSimplification = 6;
function redrawPreview(redrawLess) {
if (redrawLess == undefined) redrawLess = false;
//*/
//TODO
/*
@ -53,6 +55,26 @@ function redrawPreview() {
niet?
*/
if (!redrawLess) {
//debug_redrawSimplification = Math.round(_points.length / 65);
//*
if (_points.length < 100) {
debug_redrawSimplification = 6;
} else if (_points.length < 250) {
debug_redrawSimplification = 7;
} else if (_points.length < 400) {
debug_redrawSimplification = 8;
} else if (_points.length < 550) {
debug_redrawSimplification = 9;
} else if (_points.length < 700) {
debug_redrawSimplification = 10;
} else {
debug_redrawSimplification = 11;
}
//*/
// console.log("debug_redrawSimplification: " + debug_redrawSimplification);
}
if (_points.length < 2) return;
var y = 0;
@ -65,12 +87,19 @@ function redrawPreview() {
for(var i = 0; i < numLayers; i++) {
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
previewCtx.globalAlpha = 1;
} else {
previewCtx.globalAlpha = globalAlpha;
}
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
y -= yStep;
r += rStep;
continue;
}
previewCtx.save();
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
@ -89,6 +118,9 @@ function redrawPreview() {
previewCtx.moveTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
for(var j = 1; j < _points.length; j++) {
adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[j])
// if (redrawLess && Math.floor(j/debug_redrawSimplification)%2 == 0 ) continue;
// if (redrawLess && Math.floor(j/debug_redrawSimplification)%2 == 0 ) continue;
if (redrawLess && j%debug_redrawSimplification != 0 ) continue;
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
}
previewCtx.stroke();
@ -113,49 +145,65 @@ function centeredAndScaledDoodlePoint(p) {
return obj;
}
/*
function updatePreview(x, y, move) {
x *= globalScale;
y *= globalScale;
//*
var updatePrevX = -1;
var updatePrevY = -1;
function updatePreview(_x, _y, redrawLess) {
if (redrawLess == undefined) redrawLess = false;
redrawLess = false;
if(!move) {
var tY = 0;
if (_points.length < 2) return;
if (updatePrevX == -1 || updatePrevY == -1) {
updatePrevX = _x;
updatePrevY = _y;
return;
}
// if (_points.length < 16 && Math.sqrt(Math.pow((updatePrevX - _x), 2) + Math.pow((updatePrevY - _y), 2)) < 8) return;
var y = 0;
var r = 0;
if(!highlight) {
previewCtx.globalAlpha = globalAlpha;
previewCtx.beginPath();
}
previewCtx.lineWidth = strokeWidth;
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
for(var i = 0; i < numLayers; i++) {
if(highlight && (i == 0 || i == numLayers/2 || i == numLayers-1)){
previewCtx.stroke();
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
previewCtx.globalAlpha = 1;
previewCtx.beginPath();
} else {
previewCtx.globalAlpha = globalAlpha;
}
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
y -= yStep;
r += rStep;
continue;
}
previewCtx.save();
previewCtx.translate(layerCX,layerOffsetY+layerCY+tY);
previewCtx.scale(1, scaleY)
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
previewCtx.scale(viewerScale, scaleY * viewerScale);
previewCtx.rotate(r);
previewCtx.translate(-layerCX,-layerCY);
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
previewCtx.moveTo(prevX,prevY);
previewCtx.lineTo(x,y);
tY -= yStep;
previewCtx.beginPath();
var prevPoint = centeredAndScaledDoodlePoint([updatePrevX, updatePrevY]);
previewCtx.moveTo(prevPoint.x, prevPoint.y);
var adjustedDoodlePoint = centeredAndScaledDoodlePoint([_x, _y]);
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
previewCtx.stroke();
y -= yStep;
r += rStep;
previewCtx.restore();
if(highlight && (i == 0 || i == numLayers/2 || i == numLayers-1)){
previewCtx.stroke();
}
previewCtx.globalAlpha = globalAlpha;
previewCtx.beginPath();
}
}
}
previewCtx.stroke();
prevX = x;
prevY = y;
updatePrevX = _x;
updatePrevY = _y;
}
//*/