@@ -87,7 +88,7 @@
-
+
diff --git a/js/buttonbehaviors.js b/js/buttonbehaviors.js
index 5639ade..1fce102 100644
--- a/js/buttonbehaviors.js
+++ b/js/buttonbehaviors.js
@@ -305,14 +305,16 @@ function previewUp(redrawLess) {
if (numLayers < 100) {
numLayers++;
}
- redrawPreview(redrawLess);
+// redrawPreview(redrawLess);
+ redrawRenderedPreview();
}
function previewDown(redrawLess) {
// console.log("f:previewDown()");
if (numLayers > 2) {
numLayers--;
}
- redrawPreview(redrawLess);
+// redrawPreview(redrawLess);
+ redrawRenderedPreview();
}
function previewTwistLeft(redrawLess) {
if (redrawLess == undefined) redrawLess = false;
@@ -320,14 +322,16 @@ function previewTwistLeft(redrawLess) {
// if (rStep < Math.PI) {
rStep -= twistIncrement;
// }
- redrawPreview(redrawLess);
+ // redrawPreview(redrawLess);
+ redrawRenderedPreview();
}
function previewTwistRight(redrawLess) {
// console.log("f:previewTwistRight()");
// if (rStep < Math.PI) {
rStep += twistIncrement;
// }
- redrawPreview(redrawLess);
+ // redrawPreview(redrawLess);
+ redrawRenderedPreview();
}
diff --git a/js/canvasDrawing_v01.js b/js/canvasDrawing_v01.js
index 5a51a82..4466bc9 100644
--- a/js/canvasDrawing_v01.js
+++ b/js/canvasDrawing_v01.js
@@ -328,6 +328,7 @@ function onCanvasMouseMove(e) {
if (_points.length < 50) {
redrawPreview();
} else {
+// redrawPreview();
updatePreview(x, y, true);
}
prevRedrawTime = new Date().getTime();
@@ -349,7 +350,8 @@ function onCanvasMouseUp(e) {
// $("#textdump").append("doodlebounds:" + doodleBounds + "\n");
// $("#textdump").append("doodletransform:" + doodleTransform + "\n");
- redrawPreview();
+// redrawPreview();
+ renderToImageDataPreview();
}
function onCanvasTouchDown(e) {
@@ -425,7 +427,8 @@ function onCanvasTouchEnd(e) {
console.log("_points.length :" + _points.length);
- redrawPreview();
+ // redrawPreview();
+ renderToImageDataPreview();
}
function prevent(e) {
diff --git a/js/main.js b/js/main.js
index 7f64a79..674926c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -34,6 +34,7 @@ $(function() {
initDoodleDrawing();
initPreviewRendering();
+
initButtonBehavior();
initSettingsPopup(wifiboxURL);
@@ -51,6 +52,7 @@ $(function() {
console.log("debug mode is true");
$("body").css("overflow", "auto");
$("#debug_textArea").css("display", "block");
+ $("#preview_tmp").css("display", "block");
}
printer.init();
diff --git a/js/previewRendering_v02.js b/js/previewRendering_v02.js
new file mode 100644
index 0000000..a85fc38
--- /dev/null
+++ b/js/previewRendering_v02.js
@@ -0,0 +1,313 @@
+//*
+var $preview;
+var preview;
+var previewCtx;
+
+$preview = $("#preview");
+
+preview = document.getElementById('preview');
+previewCtx = preview.getContext('2d');
+
+var preview_tmp;
+var previewCtx_tmp;
+
+var svgPathRegExp = /[LM]\d* \d*/ig;
+var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
+
+var prevRedrawTime = new Date().getTime();
+var redrawInterval = 1000 / 30; // ms
+
+function initPreviewRendering() {
+ console.log("f:initPreviewRendering()");
+
+ // DEBUG --> mbt preview_tmp (voor de toImageData truc)
+ var _ratio = preview.width / canvas.width;
+ preview_tmp = document.getElementById('preview_tmp');
+ preview_tmp.width = preview.width;
+ preview_tmp.height = canvas.height * _ratio;
+ $("#preview_tmp").css("top", -preview_tmp.height);
+
+ previewCtx_tmp = preview_tmp.getContext('2d');
+
+ layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
+ layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
+ layerOffsetY = preview.height - 1.75 * layerCY;
+ yStep = preview.height / 150;
+
+ redrawPreview();
+}
+
+//var numLayers = 100; //50
+var numLayers = 100; // 100
+var globalScale = 0.3; // global scale of preview (width preview / width canvas)
+var globalAlpha = 0.20; // global alpha of preview
+var scaleY = 0.4; // additional vertical scale per path for 3d effect
+var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally)
+var strokeWidth = 2; //4;
+//var rStep = Math.PI/40; //Math.PI/40; //
+var rStep = Math.PI/45; // Math.PI/180; //Math.PI/40; //
+var yStep;// = preview.height / 150; // 3; //6;
+//var svgWidth = 500; // 650 //parseInt($(svg).css("width"));
+//var svgHeight = 450; //450; //parseInt($(svg).css("height"));
+var layerCX, layerCY;
+//var layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
+//var layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
+var layerOffsetY; //= preview.height - 1.75 * layerCY; // 330; // previewHeight - 120
+var prevX = 0;
+var prevY = 0;
+var highlight = true; //highlight bottom, middle and top layers
+
+var linesRaw = "";
+var debug_redrawSimplification = 6;
+function redrawPreview(redrawLess) {
+ if (redrawLess == undefined) redrawLess = false;
+
+ if (_points.length < 2) return;
+
+ 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);
+ }
+
+ var y = 0;
+ var r = 0;
+
+ //preview.width = preview.width;
+ previewCtx.clearRect(0, 0, preview.width, preview.height);
+ previewCtx.lineWidth = strokeWidth;
+ previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
+
+ 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);
+// previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y);
+ previewCtx.scale(viewerScale, scaleY * viewerScale);
+ previewCtx.rotate(r);
+ previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
+
+ var adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[0]);
+
+ previewCtx.beginPath();
+ previewCtx.moveTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
+ for(var j = 1; j < _points.length; j++) {
+ adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[j])
+ if (redrawLess && j%debug_redrawSimplification != 0 ) continue;
+ previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
+ }
+ previewCtx.stroke();
+
+ y -= yStep;
+ r += rStep;
+ previewCtx.restore();
+ }
+ previewCtx.globalAlpha = globalAlpha;
+}
+
+function renderToImageDataPreview() {
+ console.log("f:renderToImageDataPreview()");
+
+ if (_points.length < 2) return;
+
+ //*
+ // the first step
+ previewCtx_tmp.clearRect(0, 0, preview.width, preview.height);
+ previewCtx_tmp.lineWidth = strokeWidth;
+ previewCtx_tmp.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
+
+ previewCtx_tmp.save();
+ previewCtx_tmp.translate(layerCX, layerCY);
+ previewCtx_tmp.scale(viewerScale, viewerScale);
+ previewCtx_tmp.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
+
+ var adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[0]);
+
+ previewCtx_tmp.beginPath();
+ previewCtx_tmp.moveTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
+ for(var j = 1; j < _points.length; j++) {
+ adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[j])
+ previewCtx_tmp.lineTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
+ }
+ previewCtx_tmp.stroke();
+ previewCtx_tmp.closePath();
+ previewCtx_tmp.restore();
+ //*/
+
+ // var saved_rect = previewCtx_tmp.getImageData(0, 0, layerCX*2, layerCY*2);
+ var saved_rect_todataurl = preview_tmp.toDataURL();
+ doodleImageCapture = new Image();
+ doodleImageCapture.onload = function() {
+
+ previewCtx.clearRect(0, 0, preview.width, preview.height);
+ previewCtx.lineWidth = strokeWidth;
+ previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
+
+ var y = 0;
+ var r = 0;
+
+ for(var i=0;i