progress on printmanager

js/api/API.js

@@ -11,8 +11,15 @@ var API = function() {
 	var _wifiboxURL = 'http://192.168.5.1/d3dapi/';
 	var _wifiboxCGIBinURL = 'http://192.168.5.1/cgi-bin/d3dapi/';
 	var _timeoutTime = 10000;
+	var _isBusy = false;
+
+	function setURL(url,cgiUrl) {
+		_wifiboxURL = url;
+		_wifiboxCGIBinURL = cgiUrl || url;
+	}
 
 	function post(cmd,data,success,fail) {
+		_isBusy = true;
 		$.ajax({
 			url: _wifiboxURL + cmd,
 			type: "POST",
@@ -20,6 +27,7 @@ var API = function() {
 			dataType: 'json',
 			timeout: _timeoutTime,
 			success: function(response){
+				_isBusy = false;
 				if(response.status == "error" || response.status == "fail") {
 					console.log('API.post fail',cmd)
 					if (fail) fail(response);
@@ -29,18 +37,21 @@ var API = function() {
 				}
 			}
 		}).fail(function(jqXHR, textStatus) {
+			_isBusy = false;
 			console.log('API.post fail',cmd,jqXHR,textStatus);
 			if (fail) fail(jqXHR,textStatus);
 		});
 	}
 
 	function get(cmd,success,fail) {
+		_isBusy = true;
 		$.ajax({
 			url: _wifiboxURL + cmd,
 			type: "GET",
 			dataType: 'json',
 			timeout: _timeoutTime,
-			success: function(response){
+			success: function(response) {
+				_isBusy = false;
 				if (response.status == "error" || response.status == "fail") {
 					console.log('API.get fail',cmd,response);
 					if (fail) fail(response);
@@ -50,14 +61,21 @@ var API = function() {
 				}
 			}
 		}).fail(function() {
+			_isBusy = false;
 			console.log('API.get fail',cmd);
 			if (fail) fail();
 		});
 	}
 
+	function getBusy() {
+		return _isBusy;
+	}
+
 	return {
 		get: get,
-		post: post
+		post: post,
+		getBusy: getBusy,
+		setURL: setURL,
 	}
 
 }();

js/api/ConfigAPI.js

@@ -7,7 +7,12 @@
  */
 
 function ConfigAPI() {
-	
+	var className = 'ConfigAPI';
+
+	function init() {
+		console.log(className,'init is deprecated');
+	}
+
 	function loadAll(success,fail) {
 		API.get('config/all',success,fail);
 	};
@@ -73,6 +78,7 @@ function ConfigAPI() {
 	}
 
 	return {
+		init: init,
 		loadAll: loadAll,
 		load: load,
 		save: save,

js/api/PrinterAPI.js

@@ -7,10 +7,15 @@
  */
 
 function PrinterAPI() {
+	var className = 'PrinterAPI';
 
 	this.remainingLines = [];
 	this.totalLinesAtStart = 0;
 
+	this.init = function() {
+		console.log(className,'init is deprecated');
+	}
+
 	this.state = function(success,fail) {
 		API.get('printer/state',success,fail);
 	};
@@ -57,8 +62,8 @@ function PrinterAPI() {
 			var data = {gcode: chunk.join("\n"), first: first, start: start};
 			
 			_printPartPost(lines,data,function() {
-				console.log('_printPartPost cb');
+				// console.log('_printPartPost cb');
-				cb(); //??? needed
+				// cb(); //??? needed
 			});
 
 		} else {

www/index.html

@@ -182,8 +182,8 @@
 <script src="js/libs/jquery-coolfieldset.min.js"></script>
 <script src="js/libs/FileSaver.min.js"></script>
 <script src="js/libs/jquery-fastclick.min.js"></script>
-<script src="js/doodle3d-api.min.js"></script>
+<script src="js/doodle3d-api.js"></script>
-<script src="js/doodle3d-client.min.js"></script>
+<script src="js/doodle3d-client.js"></script>
 
 </body>
 </html>

www/printmanager/css/style.css

@@ -1,6 +1,7 @@
 body {
-  font-family: Helvetica, Abel, Arial;
+  font-family: Abel, 'sans-serif-thin', Sans-serif, Helvetica, Arial;
   font-size: 1em;
+  margin: 0 0 0 0;
 
   -webkit-user-select: none; /* webkit (safari, chrome) browsers */
   -moz-user-select: none; /* mozilla browsers */
@@ -12,13 +13,47 @@ button {
   font-size: 1em;
 }
 
+#toolbar {
+  padding-top: 10px;
+  padding-left: 10px;
+  float: left;
+  width: 300px;
+  height: 100%;
+}
+
+#btnPrint {
+  font-size: 30px;
+  /*width: 100px;*/
+  /*height: 100px;*/
+}
+
+#toolbar h1 {
+  margin-top: 5px;
+  font-size: 1.5em;
+}
+
+#rightToolbar {
+  margin-top: 5px;
+  margin-right: 5px;
+  float: right;
+}
+
+#toolbar button {
+  display: block;
+  margin-top: 10px;
+  margin-right: 10px;
+}
+
 #svgContainer {
-  width: 540px;
+  /*margin-top: 10px;*/
-  height: 540px;
+  background-color: #fff;
+  width: 640px;
+  height: 640px;
   border: 1px solid black;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
+  top: 10px;
   display: inline-block;
 }
 #svgContainer svg {
@@ -27,8 +62,8 @@ button {
 }
 
 #printPreview {
-  width: 540px;
+  width: 640px;
-  height: 540px;
+  height: 640px;
   border: 1px solid black;
   margin: 0 auto;
   position: relative;
@@ -70,6 +105,7 @@ button {
 img#logo {
   cursor: pointer;
   margin-right: 10px;
+  width: 200px;
 }
 
 #buttonsPanel {
@@ -79,7 +115,8 @@ img#logo {
 span.statusvar {
   background-color: #7cf;
   margin: 2px 2px 2px 2px;
-  padding: 5px 5px 2px 5px;
+  /*padding: 5px 5px 2px 5px;*/
+  display: block;
 }
 
 #preview {

www/printmanager/index.html

@@ -3,45 +3,47 @@
 <head>
   <title>Doodle3D</title>
   <link href="css/style.css" rel="stylesheet" media="screen">
-
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
-  <link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.css" rel="stylesheet">
-  <link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/lightness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet">
-  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
-
 </head>
 <body>
 
-  <img id="logo" src="../img/logo/doodle3d.png" height="25" alt="Doodle3D">PrintManager
+  <div id="toolbar">
-  <button id="btnRefresh">Refresh</button>
+    <img id="logo" src="../img/logo/doodle3d.png" alt="Doodle3D">
-<!--   <button id="btnPlus">+</button>
+    <h1>Management App</h1>
-  <button id="btnMin">-</button> -->
+    <hr>
-  <button id="btnPrepare">Prepare</button>
+    <button id="btnRefresh">Refresh</button>
-  <button id="btnPrint">Print</button>
+    <button id="btnDownload">Download</button>
-  <button id="btnStop">Stop</button>
+    <button id="btnPrint">Print</button>
-  <input type="file" name="file"/>
+    <button id="btnStop">Stop</button>
-  <span class="statusvar" id="lblState"></span>
+    <button id="btnExtrude">Extrude 10mm</button>
-  <span class="statusvar" id="lblNozzle"></span>
+    <span class="statusvar" id="lblState"></span>
-  <span class="statusvar" id="lblBed"></span>
+    <span class="statusvar" id="lblNozzle"></span>
-  <span class="statusvar" id="txtInfo"></span>
+    <span class="statusvar" id="lblBed"></span>
-  <span class="statusvar" id="lblBufferProgress"></span>
+    <span class="statusvar" id="txtInfo"></span>
-  <span class="statusvar" id="lblPrintProgress"></span>
+    <span class="statusvar" id="lblBufferProgress"></span>
-  <hr>
+    <span class="statusvar" id="lblPrintProgress"></span>
+    <hr>
+  </div>
 
   <div id="svgContainer"></div>
-  <div id="printPreview"></div>
 
+  <div id="rightToolbar">
+    
+  </div>
+  <!-- <canvas id="printPreview" id="canvas" width="400" height="400"></canvas> -->
+
+  <script src="../js/libs/jquery-1-9-1.min.js"></script>
   <script src="../js/doodle3d-api.js"></script>
-  <script src="js/touchSwipe.min.js"></script>
   <script src="js/Point.js"></script>
   <script src="js/Rectangle.js"></script>
   <script src="js/Polyline.js"></script>
   <script src="js/Path.js"></script>
   <script src="js/Svg.js"></script>
   <script src="js/Doodle.js"></script>
+  <script src="js/ViewerItem.js"></script>
   <script src="js/Viewer.js"></script>
   <script src="js/Doodle2gcode.js"></script>
+  <script src="js/PrintPreview.js"></script>
   <script src="js/main.js"></script>
   
 </body>

www/printmanager/js/Doodle.js

@@ -1,32 +1,40 @@
 var Doodle = function(svgData,settings) {
 
   var path = new Path();
-  var height = 50; //in mm
+  var height = 10; //in mm
   var offset = new Point(0,0);
   var scale = 1;
   var rotation = 0;
-  var twist = 0;
+  var twist = .1;
 
-  if (svgData!==undefined) {
+  if (settings!=undefined) {
+    if (settings.height!=undefined) height = settings.height;
+    if (settings.twist!=undefined) twist = settings.twist;
+    if (settings.scale!=undefined) scale = settings.scale;
+    if (settings.offset!=undefined) offset = settings.offset;
+  }
+
+  if (svgData!=undefined) {
     setFromSvgPathDescription(svgData);
     removeShortPaths(); //move this to main.js?
 
-    //TODO: determine current offset from boundingbox and store in 'offset' variable
+    // offset.x += path.getBoundingBox().getX();
+    // offset.y += path.getBoundingBox().getY();
+
     path.alignCorner(); //set left-top corner of path boundingbox to 0,0
+
+    // scale = 1;
+
+    // console.log(path.getBoundingBox().getX(),offset);
   }
 
-  if (settings!==undefined) {
-    if (settings.height!==undefined) height = settings.height;
-    if (settings.twist!==undefined) twist = settings.twist;
-  }
 
   function setFromSvgPathDescription(svgData) {
     // if (!svgData) svgData = "";
     // else if (typeof(svgData)!='string') svgData = "";
     // // else if (svgData.indexOf("CDATA")==-1) svgData = "";
     // else svgData = svgData.split('d="')[1].split('"')[0]; 
-
+    // console.log('svgData',svgData);
-    console.log('svgData',svgData);
 
     svgData+=' '; //add a trailing space
 

www/printmanager/js/Doodle2gcode.js

@@ -1,17 +1,23 @@
 var Doodle2gcode = function() {
   var className = "Doodle2gcode";
 
-  var speed = 50;
+  var speed = 100 * 60; //mm/min
+  var travelSpeed = 150 * 60 //mm/min
+  var retractionSpeed = 45 * 60 //mm/min
+  var retractionAmount = 4.5;
   var layerHeight = .2;
   var filamentDiameter = 2.89;
   var nozzleDiameter = .4;
   var dimensions = {x:200,y:200,z:200};
   var px2mm = .3;
+  var flow = 1;
+  var filamentArea = Math.PI * (filamentDiameter/2)*(filamentDiameter/2);
+  var extrusionPerMM = layerHeight / filamentArea * flow;
 
-  var nozzleFilamentRatio = nozzleDiameter / filamentDiameter;
+  // var nozzleFilamentRatio = nozzleDiameter / filamentDiameter;
-  var layerNozzleRatio = layerHeight / nozzleDiameter;
+  // var layerNozzleRatio = layerHeight / nozzleDiameter;
-  var extrudeFactor = nozzleFilamentRatio * layerNozzleRatio;
+  // var extrudeFactor = nozzleFilamentRatio * layerNozzleRatio;
-  var flowRatio = 1;
+  // var flowRatio = 1;
 
   var extruder = 0;
 
@@ -19,16 +25,13 @@ var Doodle2gcode = function() {
     var gcode = "";
     extruder = 0;
     for (var z=0,layer=0; z<dimensions.z; z+=layerHeight,layer++) {
+      gcode += ';LAYER:' + layer + '\n';
+      if (layer==0) gcode += 'M107\nM220 S50\n'; //fan off, print half speed
+      else if (layer==1) gcode += 'M106 S255\nM220 S100\n' //fan on, print full speed
       for (var i=0; i<doodles.length; i++) {
-        
         var path = getDoodlePathAtHeight(doodles[i],z);
-        
+
-        // var path = new Path();
+        // console.log(path.getBoundingBox().toString());
-        // path.moveTo(0,0);
-        // path.lineTo(100,0);
-        // path.lineTo(100,100);
-        // path.lineTo(0,100);
-        // path.lineTo(0,0);
 
         gcode += path2gcode(path,z);
       }
@@ -49,12 +52,12 @@ var Doodle2gcode = function() {
     // var org = path.getOffset();
     var box = path.getBoundingBox();
 
-    // console.log(box.toString());
 
+
+    //center object on origin to apply transformations
     path.translate(-box.getX(),-box.getY());
     path.translate(-box.getWidth()/2,-box.getHeight()/2);
 
-    // path.alignCenter();
     path.scale(scale);
     path.scale(scaler);
 
@@ -63,8 +66,11 @@ var Doodle2gcode = function() {
 
     // path.rotate(rotation);
     path.rotate(twist,box.getCenter());
-    // path.alignCorner();
+
-    path.translate(offset.x,offset.y);
+    var scaledCenterX = box.getCenter().x * (1-(scale * scaler));
+    var scaledCenterY = box.getCenter().y * (1-(scale * scaler));
+
+    path.translate(offset.x - scaledCenterX, offset.y - scaledCenterY);
 
     return path;
   }
@@ -76,28 +82,41 @@ var Doodle2gcode = function() {
     path.scale(px2mm);
     path.translate(0,-dimensions.y);
 
+// G1 X95.054 Y95.154 E4.83242
+// G1 F2400 E0.33242   ;retract voor travel
+// G0 F9000 X98.641 Y93.617
+// ;TYPE:WALL-INNER
+// G1 F2400 E4.83242   ;unretract na een travel en voor 
+// G1 F1200 X98.621 Y93.596 E4.83297
+
+
+
     for (var i=0; i<polylines.length; i++) {
       var points = polylines[i].getPoints();
       for (var j=0; j<points.length; j++) {
         var x = points[j].x;
         var y = -points[j].y;
 
-        gcode += (j==0 ? 'G0' : 'G1');
+        //retract + travel + unretract
-        gcode += ' ';
+        if (j==0) {
-        gcode += 'X' + x.toFixed(2);
+          gcode += 'G0 F' + retractionSpeed + ' E' + (extruder-retractionAmount).toFixed(4) + '\n';
-        gcode += ' ';
+          gcode += 'G0 F' + travelSpeed + ' X' + x.toFixed(2) + ' Y' + y.toFixed(2) + ' Z' + z.toFixed(2) + '\n';
-        gcode += 'Y' + y.toFixed(2);
+          gcode += 'G1 F' + retractionSpeed + ' E' + extruder.toFixed(4) + '\n';
-        gcode += ' ';
+        } else {
-        gcode += 'Z' + z.toFixed(2);
+          gcode += 'G1 '; //gcode command
-        gcode += ' ';
+          if (j==1) gcode += 'F' + speed + ' '; //print speed
+          gcode += 'X' + x.toFixed(2) + ' Y' + y.toFixed(2) + ' ';
 
-        if (j>0) {
+          //extrude
-          var dist = points[j-1].distance(points[j]) * px2mm;
+          if (j>0) {
-          extruder += dist * extrudeFactor * flowRatio;
+            var dist = points[j-1].distance(points[j]) * px2mm;
-          gcode += 'E' + extruder.toFixed(4);
+            extruder += dist * extrusionPerMM;
+            gcode += 'E' + extruder.toFixed(4);
+          }
+
+          gcode += '\n';
         }
 
-        gcode += '\n';
       }
     }
     return gcode;

www/printmanager/js/PrintPreview.js

@@ -0,0 +1,374 @@
+var PrintPreview = function(jqCanvas) {
+  var canvas = jqCanvas[0];
+
+  // === basic wheel reinvention stuff ===
+
+  // function $(id) { return document.getElementById(id) }
+
+  // comparison function using a key, to pass to .sort()
+  function keycomp(key) {
+    return function(a, b) {
+      var ka = key(a)
+      var kb = key(b)
+      if (ka < kb) return -1
+        if (ka > kb) return 1
+          return 0 
+      }
+    }
+
+  // return a list transformed by a function
+  function map(f, list) {
+    var rv = []
+    for (var ii = 0; ii < list.length; ii++) rv.push(f(list[ii]))
+      return rv
+  }
+
+  // === 3d transforms ===
+
+  // We represent transforms as a 3x4 list of lists (ahem, array of arrays):
+  // [[x_from_x, x_from_y, x_from_z, x_off],
+  //  [y_from_x, y_from_y, y_from_z, y_off],
+  //  [z_from_x, z_from_y, z_from_z, z_off]]
+  // And we only actually multiply points through them in xform.
+  function translate(x, y, z) {
+    return [[1, 0, 0, x], [0, 1, 0, y], [0, 0, 1, z]]
+  }
+  function identity() { return translate(0, 0, 0) }
+  // rotation around the Z-axis
+  function rotate(theta) {
+    var s = Math.sin(theta)
+    var c = Math.cos(theta)
+    return [[c, -s, 0, 0], [s, c, 0, 0], [0, 0, 1, 0]]
+  }
+  // exchange two of the X, Y, Z axes --- useful for making rotate() go around
+  // another axis :)
+function transpose_axes(a, b) {
+  var rv = identity()
+  var tmp = rv[a]
+  rv[a] = rv[b]
+  rv[b] = tmp
+  return rv
+}
+  // you'd think we'd have a scale() function too, but I haven't needed it yet.
+  // concatenate two transforms --- the magic that makes it all possible
+  function concat(x1, x2) {
+    var rv = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]]
+    for (var ii = 0; ii < 3; ii++) {
+      rv[ii][3] = x2[ii][3]
+      for (var jj = 0; jj < 3; jj++) {
+        rv[ii][3] += x1[jj][3] * x2[ii][jj]
+        for (var kk = 0; kk < 3; kk++) {
+          rv[ii][jj] += x1[kk][jj] * x2[ii][kk]
+        }
+      }
+    }
+    return rv
+  }
+  // concatenate N transforms.  I'd insert a special case for 0 transforms,
+  // but amusingly this function isn't all that performance-critical.
+  function concat_n(xforms) {
+    var rv = identity()
+    for (var ii = 0; ii < xforms.length; ii++) rv = concat(rv, xforms[ii]) 
+      return rv
+  }
+  // transform a point.
+  function xform(xform, p) {
+    var result_vec = []
+    for (var ii = 0; ii < 3; ii++) {
+      var rv = xform[ii][3]
+      for (var jj = 0; jj < 3; jj++) rv += xform[ii][jj] * p[jj]
+        result_vec.push(rv)
+    }
+    return result_vec
+  }
+  // transform multiple points.
+  function xform_points(xf, points) {
+    var xp = []
+    for (var ii = 0; ii < points.length; ii++) {
+      xp.push(xform(xf, points[ii]))
+    }
+    return xp
+  }
+  // perspective-transform a point --- into 2d.
+  function persp(p) { return [p[0] / p[2], p[1] / p[2]] }
+  // perspective-transform multiple points
+  function persp_points(points) {
+    return map(persp, points)
+  }
+
+  // return the normal of a triangle defined by three points.
+  function normal(p1, p2, p3) {
+    var v1 = [p1[0]-p2[0], p1[1]-p2[1], p1[2]-p2[2]]
+    var v2 = [p2[0]-p3[0], p2[1]-p3[1], p2[2]-p3[2]]
+    var n = [v1[1]*v2[2]-v1[2]*v2[1], 
+    v1[2]*v2[0]-v1[0]*v2[2],
+    v1[0]*v2[1]-v1[1]*v2[0]]
+    var mag = Math.sqrt(n[0]*n[0] + n[1]*n[1] + n[2]*n[2])
+    return [n[0]/mag, n[1]/mag, n[2]/mag]
+  }
+
+  // === 3d shapes ===
+  // We represent these as an array of three arrays
+  // [points, lines, polies] where each line is two indices into the points array
+  // and each poly is three indices into the points array
+
+  function dup(array) {
+    var newarray = new Array(array.length)
+    for (var ii = 0; ii < array.length; ii++) newarray[ii] = array[ii]
+      return newarray
+  }
+
+  // transform a shape, returning a new shape
+  function xform_shape(xf, shape) {
+    // de-alias new lines and polies
+    return [xform_points(xf, shape[0]), dup(shape[1]), dup(shape[2])]
+  }
+
+  // add a new shape onto an old shape, mutating the old one
+  function augment(shape1, shape2) {
+    var s1p = shape1[0]
+    var off = s1p.length
+    for (var ii = 0; ii < shape2[0].length; ii++) s1p.push(shape2[0][ii])
+    var s2ll = shape2[1].length  // in case of aliasing
+  for (var ii = 0; ii < s2ll; ii++) 
+    shape1[1].push([shape2[1][ii][0] + off, shape2[1][ii][1] + off])
+  var s2pl = shape2[2].length
+  for (var ii = 0; ii < s2pl; ii++) {
+    var tri = shape2[2][ii]
+    shape1[2].push([tri[0]+off, tri[1]+off, tri[2]+off])
+  }
+}
+
+  // given a shape, make a more complicated shape by copying it through transform
+  // xf n times, and connecting the corresponding points.  This is more powerful
+  // than the usual kind of extrusion, and can be used to create fairly 
+  // interesting shapes --- a snail shell from a circle, for instance.
+  function extrude_shape(xf, shape, n) {
+    if (n == null) n = 1
+      var new_part = shape
+    var old_line_base = 0 // where the lines to attach the triangles start
+    for (var ii = 0; ii < n; ii++) {
+      var new_part = xform_shape(xf, new_part)
+      var shape_length = shape[0].length
+      var new_line_base = shape[1].length  // for triangles later
+      augment(shape, new_part)
+      var new_part_length = new_part[0].length
+      // connect corresponding points
+      for (var jj = 0; jj < new_part_length; jj++) {
+        shape[1].push([shape_length + jj - new_part_length, shape_length + jj])
+      }
+      // make triangles
+      var nlines = new_part[1].length
+      // var old_line_base = new_line_base - nlines
+      for (var jj = 0; jj < nlines; jj++) {
+        var old_line = shape[1][old_line_base + jj]
+        var new_line = shape[1][new_line_base + jj]
+        shape[2].push([old_line[0], old_line[1], new_line[0]])
+        shape[2].push([new_line[1], new_line[0], old_line[1]])
+      }
+      old_line_base = new_line_base
+    }
+  }
+  // a shape consisting of a single point
+  function point_shape(x, y, z) { return [[[x, y, z]], [], []] }
+  // approximate a circle in the x-y plane around the origin; radius r and n points
+  function circle(r, n) {
+    var shape = point_shape(r, 0, 0)
+    extrude_shape(rotate(Math.atan(1)*8/n), shape, n)
+    return shape
+  }
+  // approximate a torus with major radius r2 and minor radius r1,
+  // with correspondingly n2 and n1 points around each axis
+  function make_torus(r1, r2, n1, n2) {
+    var c = xform_shape(translate(r2, 0, 0), circle(r1, n1))
+    extrude_shape(concat_n([transpose_axes(1, 2), 
+      rotate(Math.atan(1)*8/n2),
+      transpose_axes(1, 2)]),
+    c, n2)
+    return c
+  }
+
+  // === drawing code ===
+
+  // draw a 3d shape on a canvas
+  // 95% of the run time is in this function and its kids
+  function draw_shape(canvas, xf, shape, alpha) {
+    var ctx = canvas.getContext('2d')
+    var w = canvas.width
+    var h = canvas.height
+
+    // set up coordinate system so canvas is (-1, -1) to (1, 1)
+    ctx.save()
+    ctx.translate(w/2, h/2)
+    ctx.scale(w/2, h/2)  
+
+    // 1/3 of the time is in these two lines (when not doing polies)
+    var points3d = xform_points(xf, shape[0])
+    var points = persp_points(points3d)
+    var lines = shape[1]
+    // 2/3 of the time is in this loop (when we're not doing polies)
+    if (alpha == null) {
+      ctx.strokeStyle = 'grey'
+      ctx.lineWidth = 1/(w/2)
+      ctx.beginPath()
+      var p1, p2
+      for (var ii = 0; ii < lines.length; ii++) {
+        p1 = points[lines[ii][0]]
+        p2 = points[lines[ii][1]]
+        ctx.moveTo(p1[0], p1[1])
+        ctx.lineTo(p2[0], p2[1])
+      }
+      ctx.stroke()
+    }
+
+    // when we're doing polies, 90% of our time is spent doing polies
+    if (alpha != null) {
+      // Sort polygons by depth so we draw the farthest-away stuff first
+      // ("painter's algorithm")
+      var minusdepth = function(p) {
+        return [-(points3d[p[0]][2] + points3d[p[1]][2] + points3d[p[2]][2]), p] 
+      }
+      var polies = map(minusdepth, shape[2])
+      polies.sort(keycomp(function(p) { return p[0] }))
+
+      // draw all the polygons
+      var tri, p1, p2, p3, n, bright
+      for (var ii = 0; ii < polies.length; ii++) {
+        tri = polies[ii][1]
+        if (alpha == '1') {
+          // light surface
+          n = normal(points3d[tri[0]], points3d[tri[1]], points3d[tri[2]])
+          // I'm not sure how to make backface removal work with perspective: 
+          // if (n[2] > 0 && alpha == '1') continue // backface removal
+
+          // lighting from (1, -1, -1) direction
+          bright = parseInt(((n[0]-n[1]-n[2]) / Math.sqrt(3) * 255))
+          if (bright < 20) bright = 20
+        } else {
+          // lighting doesn't make sense if the object is transparent,
+          // so we color by depth to have some variation in color...
+          var maxd = polies[polies.length-1][0]
+          var mind = polies[0][0]
+          var d = polies[ii][0]
+          bright = parseInt((d-mind)/(maxd-mind) * 255)
+        }
+        ctx.fillStyle = 'rgba(' + bright + ',' + bright + ',' + bright + ',' + alpha + ')';
+        ctx.beginPath()
+        p1 = points[tri[0]]
+        p2 = points[tri[1]]
+        p3 = points[tri[2]]
+        ctx.moveTo(p1[0], p1[1])
+        ctx.lineTo(p2[0], p2[1])
+        ctx.lineTo(p3[0], p3[1])
+        // ctx.closePath()  seems to be unnecessary
+        ctx.fill()
+      }
+    }
+
+    ctx.restore()
+  }
+  // clear a canvas
+  function cls(canvas) {
+    var ctx = canvas.getContext('2d')
+    ctx.fillStyle = 'black'
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+  }
+
+  // // === drawing of particular shapes. also DOM. ===
+  // angle = 0
+  // function unit_cube() {
+  //   var shape = point_shape(0, 0, 0)
+  //   extrude_shape(translate(0,0,1), shape)
+  //   extrude_shape(translate(0,1,0), shape)
+  //   extrude_shape(translate(1,0,0), shape)
+  //   return shape
+  // }
+
+  // // this was where I tested stuff as I wrote this
+  // function make_some_junk() {
+  //   // make a unit cube centered on the origin
+  //   var shape = xform_shape(translate(-0.5, -0.5, -0.5), unit_cube())
+
+  //   // add some circles
+  //   augment(shape, circle(0.707, 16))
+  //   augment(shape, xform_shape(transpose_axes(0, 2), circle(0.707, 16)))
+  //   augment(shape, xform_shape(transpose_axes(1, 2), circle(0.707, 16)))
+  //   augment(shape, circle(1, 15))
+
+  //   // add a disc
+  //   var big_disc = circle(2, 20)
+  //   extrude_shape(translate(0, 0, 0.5), big_disc, 2)
+  //   augment(shape, big_disc)
+  //   return shape
+  // }
+  // var some_junk = make_some_junk()
+
+  // function draw_some_junk(canvas) {
+  //   var xf = concat_n([transpose_axes(1, 2),
+  //     rotate(angle),
+  //     transpose_axes(1, 2),
+  //     rotate(angle*1.618),
+  //     translate(0, 0, 2.5)])
+
+  //   draw_shape(canvas, xf, some_junk)
+  // }
+
+  var torus = make_torus(1, 3, 12, 12)
+
+  console.log('torus',torus);
+
+  function draw() {
+    // var start = new Date()
+    // var alpha = null
+    // if ($('fill').checked) {
+    //   alpha = ($('translucent').checked ? '0.5' : 1)
+    // }
+    // if ($('trails').checked) {
+    //     $('canvas').getContext('2d').globalAlpha = 0.33
+    //   } else {
+      // $('canvas').getContext('2d').globalAlpha = 1
+      // }
+
+      var angle = 0;
+      var alpha = 1;
+
+      draw_shape(canvas, 
+        concat_n([
+          rotate(0),
+          transpose_axes(1, 2),
+          rotate(0),  // to reduce periodicity
+          transpose_axes(1, 2),
+          translate(0, 0, 6),
+          // transpose_axes(1, 2),
+          // rotate(1), 
+        ]),
+        torus, alpha);
+
+      // var end = new Date()
+      // var ms = $('ms')
+      // if (ms) {
+      //   var msvalue = ms.value + ' ' + (end.getTime() - start.getTime())
+      //   if (msvalue.length > 25) msvalue = msvalue.substr(msvalue.length - 25)
+      //     ms.value = msvalue
+      // }
+    }
+
+  //   function update() {
+  //     if (!$('go').checked) return
+  //       angle += 3.14159 / 30
+  //     cls($('canvas'))
+  //     draw_torus($('canvas'))
+  //   }
+  //   function init(ev) {
+  //     setInterval(update, 100)
+  //   // this doesn't work: $('fill').addEventListener('change', update, true)
+  //   // how do you do what I want to do there?
+  //   cls($('canvas'))
+  //   draw_torus($('canvas'))
+  // }
+  // window.addEventListener('load', init, true)
+
+  return {
+    draw: draw,
+  }
+}

www/printmanager/js/Viewer.js

@@ -1,176 +1,14 @@
 var Viewer = function(viewer) {
   var className = "Viewer";
-  var doodles = [];
+  var items = [];
-
-  //Object houd data bij van svg transformaties
-  //(alle svg's worden automatisch hier in gezet, positie is relatief aan zijn html parent)
-  //  x -> x positie
-  //  y -> y positie
-  //  scale -> scale
-  //  svg -> svg object
-  var svgsData = [];
-
-  console.log(className,viewer);
 
   function setDoodles(_doodles) {
     doodles = _doodles;
-    console.log(className,'items',doodles);
-
     for (var i=0; i<doodles.length; i++) {
-      var doodle = doodles[i];
+      var item = new ViewerItem(doodles[i]);
-      var path = doodle.getPath();
+      items.push(item);
-      var svgData = doodle.getSvgPathDescription();
+      var svg = item.getSvg();
-      var box = path.getBoundingBox();
-
-      var svg = $('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="640" height="540"><path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" stroke-width="2" d="'+svgData+'"></path></svg>');
       viewer.append(svg);
-
-      var box = path.getBoundingBox();
-      var viewbox = box.getX() + " " + box.getY() + " " + box.getWidth() + " " + box.getHeight();
-      svg[0].setAttribute("viewBox", viewbox); //changig the viewBox with jQuery doesn't work (may be because of capital B)
-      svg.attr('width',box.getWidth()+2);
-      svg.attr('height',box.getHeight()+2);
-
-      initTouch(svg,doodle)
-    }
-  }
-
-  function initTouch(svg,doodle) {
-    // $("svg").each(function () {
-    //   var svg = $(this);
-    //   var data = {
-    //     x: 0,
-    //     y: 0,
-    //     scale: 1,
-    //   };
-    //   svgsData.push(data);
-
-    var startX;
-    var startY;
-    var touchX;
-    var touchY;
-    var offsetX = 0;
-    var offsetY = 0;
-    var handleGesture = false;
-
-    var offsetZoom = 1;
-    var zoom = 1;
-
-    var mouseDown = false;
-
-    svg.on("mousedown", function (e) {
-      var event = e.originalEvent;
-      mouseDown = true;
-
-      touchX = startX = event.pageX;
-      touchY = startY = event.pageY;
-    });
-
-    $(document).on("mousemove", function (e) {
-      if (mouseDown) {
-        var event = e.originalEvent;
-
-        touchX = event.pageX;
-        touchY = event.pageY;
-
-        var dX = touchX - startX;
-        var dY = touchY - startY;
-
-        svg.css({
-          left: offsetX + dX,
-          top: offsetY + dY
-        });
-      }
-    });
-
-    svg.on("mouseup", function (e) {
-      var event = e.originalEvent;
-      mouseDown = false;
-
-      offsetX = offsetX + touchX - startX;
-      offsetY = offsetY + touchY - startY;
-
-      setData();
-    });
-
-    svg.on("touchstart", function (e) {
-      var event = e.originalEvent;
-      event.preventDefault();
-
-      if (event.touches.length === 1) {
-        var touch = event.touches[0];
-
-        touchX = startX = touch.pageX;
-        touchY = startY = touch.pageY;
-      }
-      else {
-        handleGesture = true;
-      }
-    });
-
-    svg.on("touchmove", function (e) {
-      var event = e.originalEvent;
-      event.preventDefault();
-
-      if (event.touches.length === 1 && !handleGesture) {
-        var touch = event.touches[0];
-        touchX = touch.pageX;
-        touchY = touch.pageY;
-
-        var dX = touchX - startX;
-        var dY = touchY - startY;
-
-        svg.css({
-          left: offsetX + dX,
-          top: offsetY + dY
-        });
-      }
-    });
-
-    svg.on("touchend", function (e) {
-      var event = e.originalEvent;
-
-      if (event.touches.length === 0) {
-        if (handleGesture) {
-          handleGesture = false;
-        }
-        else {
-          offsetX = offsetX + touchX - startX;
-          offsetY = offsetY + touchY - startY;
-
-          setData();
-        }
-      }
-    });
-
-    svg.swipe({
-      pinchStatus: function (event, phase, direction, distance , duration , fingerCount, pinchZoom) {
-        if (phase === "cancel" || phase === "end") {
-          offsetZoom = offsetZoom*zoom;
-
-          setData();
-        }
-        else {
-          zoom = pinchZoom;
-
-          svg.css({transform: "scale(" + offsetZoom*zoom + ")"});
-        }
-      },
-      fingers: 2,
-      pinchThreshold: 0
-    });
-
-    function setData () {
-      var offset = {
-        x: offsetX - svg.width()*offsetZoom/2 + svg.width()/2,
-        y: offsetY - svg.height()*offsetZoom/2 + svg.height()/2
-      }
-      doodle.setScale(offsetZoom);
-      doodle.setOffset(offset);
-      // data.scale = offsetZoom;
-      // data.x = offsetX - svg.width()*offsetZoom/2 + svg.width()/2;
-      // data.y = offsetY - svg.height()*offsetZoom/2 + svg.height()/2;
-      // console.log(data);
     }
   }
 

www/printmanager/js/ViewerItem.js

@@ -0,0 +1,136 @@
+var ViewerItem = function(doodle) {
+
+  var path = doodle.getPath();
+  var svgData = doodle.getSvgPathDescription();
+  var box = path.getBoundingBox();
+  var svg = $('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="640" height="540"><path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="black" d="'+svgData+'"></path></svg>');
+  var viewbox = box.getX() + " " + box.getY() + " " + box.getWidth() + " " + box.getHeight();
+  var xDown = 0, yDown = 0;
+  var xCur = 0, yCur = 0;
+  var dragging = false;
+  var prevDist = 0;
+
+  svg[0].setAttribute("viewBox", viewbox); //changig the viewBox with jQuery doesn't work (may be because of capital B)
+  svg.attr('width',box.getWidth()+2);
+  svg.attr('height',box.getHeight()+2);
+
+  updateView();
+
+  function updateView() {
+    var box = path.getBoundingBox();
+    var scaledCenterX = box.getCenter().x * (1-doodle.getScale());
+    var scaledCenterY = box.getCenter().y * (1-doodle.getScale());
+    svg[0].setAttribute("stroke-width", 1/doodle.getScale());
+    svg.css({
+      transform: "scale(" + doodle.getScale() + ")",
+      left: doodle.getOffset().x - scaledCenterX + xCur - xDown,
+      top: doodle.getOffset().y - scaledCenterY + yCur - yDown
+    });
+  }
+
+  function getDoodle() {
+    return doodle;
+  }
+
+  function getSvg() {
+    return svg;
+  }
+
+  function startDrag(x,y) {
+    if (!dragging) {
+      dragging = true;
+      xDown = x;
+      yDown = y;
+      updateDrag(x,y);
+    }
+  }
+
+  function updateDrag(x,y) {
+    xCur = x;
+    yCur = y;
+    updateView();
+  }
+
+  function stopDrag() {
+    if (dragging) {
+      dragging = false;
+      doodle.getOffset().x += xCur - xDown;
+      doodle.getOffset().y += yCur - yDown;
+      xCur = 0;
+      yCur = 0;
+      xDown = 0;
+      yDown = 0;
+    }
+  }
+
+  function distance(x1,y1,x2,y2) {
+    return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
+  }
+
+  function zoomBy(f) { 
+    var newScale = doodle.getScale()+f;
+    var box = path.getBoundingBox();
+    var anchorpoint = box.getCenter();
+    if (newScale*box.getWidth()<100) return;
+    if (newScale*box.getHeight()<100) return;
+    doodle.setScale(newScale);
+    doodle.getOffset().x -= f*anchorpoint.x;
+    doodle.getOffset().y -= f*anchorpoint.y;
+    updateView();
+  }
+
+  svg.on("mousedown", function (e) {
+    startDrag(e.originalEvent.pageX,e.originalEvent.pageY);
+  });
+
+  $(document).on("mousemove", function (e) {
+    if (dragging) {
+      updateDrag(e.originalEvent.pageX,e.originalEvent.pageY);
+    }
+  });
+
+  svg.on("mouseup", function (e) {
+    stopDrag();
+  });
+
+  $(document).on("mouseup", function (e) {
+    stopDrag();
+  });
+  
+  svg.on("touchstart", function (e) {
+    var event = e.originalEvent;
+    event.preventDefault();
+    var touch = event.touches[0];
+    startDrag(touch.pageX,touch.pageY); //drag
+    if (event.touches.length === 2) { //zoom
+      var touch2 = event.touches[1];
+      prevDist = distance(touch.pageX,touch.pageY,touch2.pageX,touch2.pageY);
+    }
+  });
+
+  svg.on("touchmove", function (e) {
+    var event = e.originalEvent;
+    event.preventDefault();
+    if (dragging) {
+      var touch = event.touches[0];
+      updateDrag(touch.pageX,touch.pageY);
+      if (event.touches.length === 2) {
+        var touch2 = event.touches[1];
+        var dist = distance(touch.pageX,touch.pageY,touch2.pageX,touch2.pageY);
+        var scaler = (dist-prevDist) / 100; //100 is an arbitrary scaler
+        zoomBy(scaler);
+        prevDist = dist;
+      }
+    }
+  });
+
+  svg.on("touchend", function (e) {
+    var event = e.originalEvent;
+    stopDrag();
+  });
+
+  return {
+    getDoodle: getDoodle,
+    getSvg: getSvg,
+  }
+}