From ed8ceb787900e16af4444c95fea31cfd76dac21c Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Fri, 16 Aug 2013 22:27:26 +0200 Subject: [PATCH] Changes to how we draw to the canvas and how the preview is rendered. This has massive speedup results for tablets and phones. --- js/buttonbehaviors.js | 96 +++++++++++++++----------- js/canvasDrawing_v01.js | 133 +++++++++++++++++++++-------------- js/previewRendering_v01.js | 138 +++++++++++++++++++++++++------------ 3 files changed, 228 insertions(+), 139 deletions(-) diff --git a/js/buttonbehaviors.js b/js/buttonbehaviors.js index 19eef8a..57ef2d2 100644 --- a/js/buttonbehaviors.js +++ b/js/buttonbehaviors.js @@ -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,49 +227,56 @@ 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); - $("#textdump").text(""); - if (_points.length > 2) { + if (sendPrintCommands) { + $("#textdump").text(""); + if (_points.length > 2) { - setState(PRINTING_STATE); - var gcode = generate_gcode(); - //startPrint(gencode); - printer.print(gcode); + setState(PRINTING_STATE); + var gcode = generate_gcode(); + //startPrint(gencode); + printer.print(gcode); -// console.log(""); -// console.log(""); -// console.log("-------------------------------------------------"); -// console.log("generated gcode:"); -// console.log(gencode); -// console.log("-------------------------------------------------"); -// console.log(""); -// console.log(""); -// console.log(""); + // console.log(""); + // console.log(""); + // console.log("-------------------------------------------------"); + // console.log("generated gcode:"); + // console.log(gencode); + // console.log("-------------------------------------------------"); + // console.log(""); + // console.log(""); + // console.log(""); - $("#textdump").text(gcode.join("\n")); - // copyToClipboard(gencode); - //*/ - } else { - console.log("f:print >> not enough points!"); - } + if (debugMode) $("#textdump").text(gcode.join("\n")); + + // copyToClipboard(gencode); + //*/ + } else { + console.log("f:print >> not enough points!"); + } -// $.post("/doodle3d.of", { data:output }, function(data) { -// btnPrint.disabled = false; -// }); + // $.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); } diff --git a/js/canvasDrawing_v01.js b/js/canvasDrawing_v01.js index db0a1e7..5a51a82 100644 --- a/js/canvasDrawing_v01.js +++ b/js/canvasDrawing_v01.js @@ -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; } - _points.push([x, y, false]); - 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; + 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) + 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; } - //*/ // DEBUG // $("#textdump").text(""); @@ -304,7 +324,12 @@ function onCanvasMouseMove(e) { // $("#textdump").append("doodletransform:" + doodleTransform + "\n"); if (new Date().getTime() - prevRedrawTime > redrawInterval) { - redrawPreview(); + // 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]; - _points.push([x, y, false]); - adjustBounds(x, y); - adjustPreviewTransformation(); - draw(x, y); - + 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) + 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) { - redrawPreview(); + // 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; - }); -} -//*/ \ No newline at end of file +} \ No newline at end of file diff --git a/js/previewRendering_v01.js b/js/previewRendering_v01.js index 375a617..1728b56 100644 --- a/js/previewRendering_v01.js +++ b/js/previewRendering_v01.js @@ -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){ + + 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; - var r = 0; - - if(!highlight) { - previewCtx.globalAlpha = globalAlpha; - previewCtx.beginPath(); - } - for(var i=0;i