Updated preview rendering. onMouseUp / onTouchEnd the preview is now cached to an Image() object (image/png) (via a proxy Canvas element (id='preview_tmp') and used to draw the preview. This allows for much faster move up/down and twist left/right behavior.

css/fixedPosInterface.css

@@ -109,7 +109,11 @@ body {
 }
 
 #preview_tmp {
-  /*border: 1px solid #8fc;*/
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 500;
+  border: 1px solid #f80;
   display: none;
 }
 

index.html

@@ -7,6 +7,7 @@
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   <link rel="apple-touch-icon-precomposed" href="img/icon.png"/>
+    <link rel="icon" type="image/ico" href="favicon.ico"/>
   <meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
 
   <!-- Bootstrap -->
@@ -49,7 +50,7 @@
       <!--<path id="path" d="M200 100 L450 100 L450 350 L200 350 L200 100" fill="none" stroke="black" stroke-width="3"/>-->
     <!--</svg>-->
     <canvas id="preview"></canvas>
-    <canvas id="preview_tmp" width="150" height="125"></canvas>
+    <canvas id="preview_tmp"></canvas>
     <div class="buttons cf">
       <div id="btnsUpDown">
         <div id="btnMoveUp"></div>
@@ -87,7 +88,7 @@
 <script src="js/d3dServerInterfacing.js"></script>
 <script src="js/buttonbehaviors.js"></script>
 <script src="js/canvasDrawing_v01.js"></script>
-<script src="js/previewRendering_v01.js"></script>
+<script src="js/previewRendering_v02.js"></script>
 <script src="js/gcodeGenerating_v01.js"></script>
 <script src="js/init_layout.js"></script>
 <script src="js/Printer.js"></script>

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();
 }
 
 

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) {

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();

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<numLayers;i++) {
+
+      if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
+        previewCtx.globalAlpha = 1;
+      } else {
+        previewCtx.globalAlpha = globalAlpha;
+      }
+
+      previewCtx.save();
+
+      previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
+      previewCtx.scale(1, scaleY)
+      previewCtx.rotate(r);
+      previewCtx.translate(-layerCX,-layerCY);
+
+      previewCtx.drawImage(doodleImageCapture, 0, 0);
+
+      y -= yStep;
+      r += rStep;
+      previewCtx.restore();
+    }
+  };
+  doodleImageCapture.src = saved_rect_todataurl;
+
+  previewCtx.globalAlpha = globalAlpha;
+}
+
+// called by the move up/down or twist left/right buttons
+// it is assumed that the preview has been rendered to an Image object, which will be used to draw the preview with (much better performance)
+function redrawRenderedPreview() {
+  console.log("f:redrawRenderedPreview()");
+
+  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 < numLayers; i++) {
+
+    if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
+      previewCtx.globalAlpha = 1;
+    } else {
+      previewCtx.globalAlpha = globalAlpha;
+    }
+
+    previewCtx.save();
+
+    previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
+    previewCtx.scale(1, scaleY)
+    previewCtx.rotate(r);
+    previewCtx.translate(-layerCX,-layerCY);
+
+    previewCtx.drawImage(doodleImageCapture, 0, 0);
+
+    y -= yStep;
+    r += rStep;
+    previewCtx.restore();
+  }
+}
+
+function centeredAndScaledDoodlePoint(p) {
+  var obj = { x: 0, y: 0};
+
+  obj.x = (p[0] - ((doodleBounds[2] - doodleBounds[0])/2)) * (globalScale * doodleTransform[2]);
+  obj.y = (p[1] - ((doodleBounds[3] - doodleBounds[1])/2)) * (globalScale * doodleTransform[3]);
+//  obj.x = (p[0] - (doodleBounds[2] - doodleBounds[0])) * (globalScale * doodleTransform[2]);
+//  obj.y = (p[1] - (doodleBounds[3] - doodleBounds[1])) * (globalScale * doodleTransform[3]);
+//  obj.x = (p[0] - doodleTransform[0]) * (globalScale * doodleTransform[2]);
+//  obj.y = (p[1] - doodleTransform[1]) * (globalScale * doodleTransform[3]);
+
+  return obj;
+}
+
+//*
+var updatePrevX = -1;
+var updatePrevY = -1;
+function updatePreview(_x, _y, redrawLess) {
+  if (redrawLess == undefined) redrawLess = false;
+  redrawLess = false;
+
+  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;
+
+  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.scale(viewerScale, scaleY * viewerScale);
+    previewCtx.rotate(r);
+    previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
+
+
+    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();
+  }
+  previewCtx.globalAlpha = globalAlpha;
+  updatePrevX = _x;
+  updatePrevY = _y;
+
+}
+//*/