Merge branch 'master' of https://github.com/Doodle3D/doodle3d-client

Conflicts:
	js/buttonbehaviors.js

css/d3d_btns.css

@@ -23,6 +23,7 @@ img {
 /*  http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari  */
 .btn {
   background-repeat: no-repeat;
+  cursor: pointer
 }
 
 /*
@@ -94,10 +95,14 @@ img {
 */
 
 
-#drawAreaContainer > .buttons {
+#drawAreaContainer > .manipulationBtns {
 	margin: 5px;
 }
 
+.manipulationBtn {
+  cursor: pointer;
+}
+
 #btnsUpDown {
 	position: absolute;
 	right: 200px;

css/fixedPosInterface.css

@@ -94,7 +94,7 @@ body {
 }
 
 #svg {
-  cursor: hand;
+  cursor: pointer;
 }
 
 #drawAreaContainer {
@@ -103,8 +103,8 @@ body {
   left: 193px;
   width: 650px;
   height: 450px;
-  background-color: white;
+  background-color: #fff;
-  border: 4px solid black;
+  border: 4px solid #000;
   border-radius: 15px;
 }
 

css/settingsPopup.css

@@ -58,7 +58,7 @@ div.content > div.settings {
   overflow-x: hidden;
   padding: 10px 10px 10px 10px;
 }
-div.content > div.buttons {
+div.content > div.manipulationBtns {
   display: table-cell;
   vertical-align: bottom;
   width: 125px;

fixedPosInterface01_v02.html

@@ -70,7 +70,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" width="150" height="450"></canvas>
-    <div class="buttons cf">
+    <div class="manipulationBtns cf">
       <div id="btnsUpDown">
         <img id="btnUp" src="img/buttons/btnUp.png">
         <img id="btnDown" src="img/buttons/btnDown.png">

index.html

@@ -51,14 +51,14 @@
     <!--</svg>-->
     <canvas id="preview"></canvas>
     <canvas id="preview_tmp"></canvas>
-    <div class="buttons cf">
+    <div class="manipulationBtns cf">
       <div id="btnsUpDown">
-        <div id="btnMoveUp"></div>
+        <div class="manipulationBtn" id="btnMoveUp"></div>
-        <div id="btnMoveDown"></div>
+        <div class="manipulationBtn" id="btnMoveDown"></div>
       </div>
       <div id="btnsTurnLeftRight">
-        <div id="btnTwistLeft"></div>
+        <div class="manipulationBtn" id="btnTwistLeft"></div>
-        <div id="btnTwistRight"></div>
+        <div class="manipulationBtn" id="btnTwistRight"></div>
       </div>
     </div>
   </div>
@@ -72,7 +72,7 @@
       </header>
       <div class="content">
         <div class="settings">henk</div>
-        <div class="buttons">
+        <div class="manipulationBtns">
           <div class="btnOK"></div>
         </div>
       </div>

js/Printer.js

@@ -1,3 +1,28 @@
+var $printProgressContainer = $("#printProgressContainer");
+var $progressbar = $("#progressbar");
+var $progressAmount = $(".progressAmount");
+function setPrintprogress(val) {
+  if (isNaN(val)) return;
+//  console.log("f:setPrintprogress() >> val " + val);
+  $progressbar.css("width", val*100 + "%");
+  $progressAmount.text(Math.floor(val*100) + "%");
+}
+
+var thermoVal = 0;
+var thermocounter = 0;
+var $displayThermometer = $("#thermometerContainer");
+var $thermometer = $("#thermometer");
+//var thermoInterval;
+function updateThermometer(curr, targ) {
+  console.log("f:updateThermometer() >> curr temp " + curr + ", targ temp " + targ);
+  if (isNaN(curr) || isNaN(targ)) return;
+
+  $thermometer.css("height", (curr/targ)*100 + "%");
+  //    $thermometer.css("background-position", -val*100 + "%");
+  $(".thermoAmount").text(curr+"/"+targ);
+}
+
+
 function Printer() {
 	this.temperature = 0;
 	this.targetTemperature = 0;

js/SettingsWindow.js

@@ -4,12 +4,15 @@ var settings = {
 "network.ap.address": "192.168.10.1",
 "network.ap.netmask": "255.255.255.0",
 "printer.temperature": 220,
-"printer.objectHeight": '???',
+"printer.objectHeight": 20,
+"printer.maxObjectHeight": 150,
 "printer.layerHeight": 0.2,
 "printer.wallThickness": 0.7,
+"printer.screenToMillimeterScale": 0.3,
 "printer.speed": 50,
 "printer.travelSpeed": 200,
 "printer.filamentThickness": 2.85,
+"printer.enableTraveling": true,
 "printer.useSubLayers": true,
 "printer.firstLayerSlow": true,
 "printer.autoWarmUp": true,
@@ -17,12 +20,13 @@ var settings = {
 "printer.simplify.minNumPoints": 15,
 "printer.simplify.minDistance": 3,
 "printer.retraction.enabled": true,
-"printer.retraction.speed": 250,
+"printer.retraction.speed": 50,
 "printer.retraction.minDistance": 1,
-"printer.retraction.amount": 2,
+"printer.retraction.amount": 5,
 "printer.autoWarmUpCommand": "M104 S220 (hardcoded temperature)"
 }
 
+
 function SettingsWindow() {
 	this.wifiboxURL;
 	this.window;
@@ -501,7 +505,7 @@ function SettingsWindow() {
 var objectHeight = 20;
 var layerHeight = .2;
 //var wallThickness = .5;
-var hop = 0;
+//var hop = 0;
 //var speed = 70;
 //var travelSpeed = 200;
 var enableTraveling = true;
@@ -510,10 +514,10 @@ var minScale = .3;
 var maxScale = 1;
 var shape = "%";
 var twists = 0;
-var useSubLayers = true;
+//var useSubLayers = true;
 //var debug = false; // debug moved to main.js
 var loglevel = 2;
-var zOffset = 0;
+//var zOffset = 0;
 var serverport = 8888;
 var autoLoadImage = "hand.txt";
 var loadOffset = [0, 0]; // x en y ?
@@ -522,18 +526,18 @@ var loopAlways = false;
 var firstLayerSlow = true;
 var useSubpathColors = false;
 var autoWarmUp = true;
-var maxObjectHeight = 150;
+//var maxObjectHeight = 150;
 var maxScaleDifference = .1;
 var frameRate = 60;
 var quitOnEscape = true;
 var screenToMillimeterScale = .3; // 0.3
-var targetTemperature = 230;
+//var targetTemperature = 220;
-var simplifyiterations = 10;
+//var simplifyiterations = 10;
-var simplifyminNumPoints = 15;
+//var simplifyminNumPoints = 15;
-var simplifyminDistance = 3;
+//var simplifyminDistance = 3;
-var retractionspeed = 50;
+//var retractionspeed = 50;
-var retractionminDistance = 5;
+//var retractionminDistance = 5;
-var retractionamount = 3;
+//var retractionamount = 3;
 var sideis3D = true;
 var sidevisible = true;
 var sidebounds = [900, 210, 131, 390];

js/buttonbehaviors.js

@@ -12,6 +12,7 @@ var btnOops, btnStop, btnClear;
 var btnMoveUp, btnMoveDown, btnTwistLeft, btnTwistRight;
 var btnInfo, btnSettings;
 var btnDebug; // debug
+var displayTemp, displayProgress;
 
 var displayTempEnabled = false;
 
@@ -36,6 +37,7 @@ function initButtonBehavior() {
   btnPrint= $("#btnPrint");
   btnStop = $("#btnStop");
   displayTemp = $("#displayTemp");
+  displayProgress = $("#printProgressContainer");
 
 //  btnPrevious = $("#btnPrevious");
 //  btnNext = $("#btnNext");
@@ -43,28 +45,6 @@ function initButtonBehavior() {
   //debug
   btnDebug = $(".debugBtn");
 
-  /*if (!btnNew.addEventListener) {
-    btnNew.attachEvent('onmousedown',clearDoodle);
-    btnNew.attachEvent('ontouchstart',clearDoodle);
-    btnPrint.attachEvent('onmousedown',print);
-    btnPrint.attachEvent('ontouchstart',print);
-
-//    btnPrevious.attachEvent('onmousedown',prevDoodle);
-//    btnPrevious.attachEvent('ontouchstart',prevDoodle);
-//    btnNext.attachEvent('onmousedown',nextDoodle);
-//    btnNext.attachEvent('ontouchstart',nextDoodle);
-  } else {
-    btnNew.addEventListener('mousedown',clearDoodle,false);
-    btnNew.addEventListener('touchstart',clearDoodle,false);
-    btnPrint.addEventListener('mousedown',print,false);
-    btnPrint.addEventListener('touchstart',print,false);
-
-//    btnPrevious.addEventListener('mousedown',prevDoodle,false);
-//    btnPrevious.addEventListener('touchstart',prevDoodle,false);
-//    btnNext.addEventListener('mousedown',nextDoodle,false);
-//    btnNext.addEventListener('touchstart',nextDoodle,false);
-  }*/
-
 	btnNew.bind('touchstart mousedown',clearDoodle);
 	btnPrint.bind('touchstart mousedown',print);
 
@@ -81,23 +61,6 @@ function initButtonBehavior() {
     clearDoodle();
   });
 
-//  btnPrevious.mouseup(function(e) {
-//    e.preventDefault();
-//    console.log("btnPrevious");
-//  })
-//  btnPrevious.bind("touchend", function(e) {
-//    e.preventDefault();
-//    console.log("btnPrevious");
-//  })
-//  btnNext.mouseup(function(e) {
-//    e.preventDefault();
-//    console.log("btnNext");
-//  })
-//  btnNext.bind("touchend", function(e) {
-//    e.preventDefault();
-//    console.log("btnPrevious");
-//  })
-
   function startOops(e) {
     //      console.log("btnOops mouse down");
     e.preventDefault();
@@ -188,7 +151,7 @@ function initButtonBehavior() {
     e.preventDefault();
     //      console.log("btnTwistRight mouse up");
     clearInterval(btnTwistRightInterval);
-    previewTwistLeft();
+    previewTwistRight();
   }
   btnTwistRight.mousedown(function(e) { startTwistRight(e) });
   btnTwistRight.mouseup(function(e) { stopTwistRight(e) });
@@ -244,27 +207,23 @@ function nextDoodle(e) {
 function print(e) {
 	console.log("f:print() >> sendPrintCommands = " + sendPrintCommands);
 
-  if (sendPrintCommands) {
   $("#textdump").text("");
   if (_points.length > 2) {
 
     setState(PRINTING_STATE);
     var gcode = generate_gcode();
     //startPrint(gencode);
+
+    if (sendPrintCommands) {
       printer.print(gcode);
+    } else {
+      console.log("sendPrintCommands is false: not sending print command to 3dprinter");
+    }
 
-      //		console.log("");
+    //if (debugMode) {
-      //		console.log("");
+      //console.log("f:print() >> debugMode is true, dumping gcode to textarea #textdump");
-      //		console.log("-------------------------------------------------");
-      //		console.log("generated gcode:");
-      //		console.log(gencode);
-      //		console.log("-------------------------------------------------");
-      //		console.log("");
-      //		console.log("");
-      //		console.log("");
-
-      //if (debugMode) 
       $("#textdump").text(gcode.join("\n"));
+    //}
 
     //  copyToClipboard(gencode);
     //*/
@@ -276,9 +235,6 @@ 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");
-  }
 }
 
 
@@ -303,7 +259,7 @@ function oopsUndo() {
 }
 function previewUp(redrawLess) {
   //    console.log("f:previewUp()");
-  if (numLayers < 100) {
+  if (numLayers < maxNumLayers) {
     numLayers++;
   }
 //  redrawPreview(redrawLess);
@@ -311,7 +267,7 @@ function previewUp(redrawLess) {
 }
 function previewDown(redrawLess) {
   //    console.log("f:previewDown()");
-  if (numLayers > 2) {
+  if (numLayers > minNumLayers) {
     numLayers--;
   }
 //  redrawPreview(redrawLess);
@@ -340,16 +296,21 @@ function previewTwistRight(redrawLess) {
 function update() {
 	if(!displayTempEnabled && printer.alive) {
 		displayTemp.show();
+    $displayThermometer.show();
 		displayTempEnabled = true;
 	} else if(displayTempEnabled && !printer.alive) {
 		displayTemp.hide();
+    $displayThermometer.hide();
 		displayTempEnabled = false;
 	}
 	
 	if(displayTempEnabled) {
 		displayTemp.text(printer.temperature+"/"+printer.targetTemperature);
+    updateThermometer(printer.temperature, printer.targetTemperature);
 	}
 
+  setPrintprogress(printer.currentLine/printer.num_lines);
+
 	var btnPrint= $("#btnPrint");
 	
 	setState(printer.printing? PRINTING_STATE : IDLE_STATE);
@@ -365,6 +326,7 @@ function setState(newState) {
 			btnPrint.removeClass("disabled"); // enable print button
 			btnStop.addClass("disabled"); // disable stop button
 			btnPrint.bind('touchstart mousedown',print);
+      displayProgress.hide();
 
 			break;
 		case PRINTING_STATE: 
@@ -372,6 +334,7 @@ function setState(newState) {
 			btnPrint.addClass("disabled"); // disable print button
 			btnStop.removeClass("disabled"); // enable stop button
 			btnPrint.unbind('touchstart mousedown');
+      displayProgress.show();
 
 			break;
 	}

js/gcodeGenerating_v01.js

@@ -24,12 +24,72 @@ gcodeEnd.push("M84"); 							// disable axes / steppers
 gcodeEnd.push("G90"); 							// absolute positioning
 gcodeEnd.push("M117 Done                ");	// display message (20 characters to clear whole screen)
 
+
 var gcode = [];
 function generate_gcode(callback) {
   console.log("f:generategcode()");
 
+  var startGcode = [];
+  var endGcode = [];
+
+  // get gcode start statements
+  if ($("#startgcode").val().trim().length != 0) {
+    console.log("   found contents for start-gcode in settings.html")
+    startGcode = $("#startgcode").val().trim().split("\n");
+  } else {
+    console.log("   no start-gcode in settings.html, using defaults")
+    startGcode.concat(gcodeStart);
+  }
+
+  // get gcode end statements
+  if ($("#endgcode").val().trim().length != 0) {
+    console.log("   found contents for end-gcode in settings.html")
+    endGcode = $("#endgcode").val().trim().split("\n");
+  } else {
+    console.log("   no end-gcode in settings.html, using defaults")
+    endGcode.concat(gcodeEnd);
+  }
+
   gcode = [];
 
+  console.log("settings: ",settings);
+  var speed 						      = settings["printer.speed"]
+  var normalSpeed 			      = speed;
+  var bottomSpeed 			      = speed*0.5;
+  var travelSpeed 			      = settings["printer.travelSpeed"]
+  var filamentThickness       = settings["printer.filamentThickness"];
+  var wallThickness 		      = settings["printer.wallThickness"];
+  var screenToMillimeterScale = isNaN(settings["printer.screenToMillimeterScale"]) ? 0.3 : settings["printer.screenToMillimeterScale"]; // TODO add this item to the settings on 'kastje'
+  var layerHeight 			      = settings["printer.layerHeight"];
+  var objectHeight		        = settings["printer.objectHeight"];
+  var maxObjectHeight		      = isNaN(settings["printer.maxObjectHeight"]) ? 150 : settings["printer.maxObjectHeight"]; // TODO add this item to the settings on 'kastje'
+  var temperature 			      = settings["printer.temperature"];
+  var useSubLayers 			      = settings["printer.useSubLayers"];
+  var enableTraveling 	      = isNaN(settings["printer.enableTraveling"]) ? true : settings["printer.enableTraveling"]; // TODO add this item to the settings on 'kastje'
+  var retractionspeed 	      = settings["printer.retraction.speed"];
+  var retractionminDistance   = settings["printer.retraction.minDistance"];
+  var retractionamount 	      = settings["printer.retraction.amount"];
+
+  /*
+  console.log("f:generate_gcode >> EFFE CHECKEN:");
+  console.log("   speed: " + speed);
+  console.log("   travelSpeed: " + travelSpeed);
+  console.log("   filamentThickness: " + filamentThickness);
+  console.log("   wallThickness: " + wallThickness);
+  console.log("   screenToMillimeterScale: " + screenToMillimeterScale);
+  console.log("   layerHeight: " + layerHeight);
+  console.log("   objectHeight: " + objectHeight);
+  console.log("   maxObjectHeight: " + maxObjectHeight);
+  console.log("   temperature: " + temperature);
+  console.log("   maxObjectHeight: " + maxObjectHeight);
+  console.log("   useSubLayers: " + useSubLayers);
+  console.log("   enableTraveling: " + enableTraveling);
+  console.log("   retractionspeed: " + retractionspeed);
+  console.log("   retractionminDistance: " + retractionminDistance);
+  console.log("   retractionamount: " + retractionamount);
+  console.log("");
+  //*/
+
   objectHeight = Math.ceil(numLayers / 5); // in settings objectHeight = 20, in previewRendering_v01.js numLayers is 100, hence the / 5
   objectHeight = numLayers; // in settings objectHeight = 20, in previewRendering_v01.js numLayers is 100, hence the / 5
 
@@ -43,20 +103,10 @@ function generate_gcode(callback) {
 //  console.log("paths.toString(): " + paths.toString());
 //  return;
 
-	console.log("settings: ",settings);
-	var speed 						= settings["printer.speed"]
-	var normalSpeed 			= speed;
-  var bottomSpeed 			= speed*0.5;
-	var travelSpeed 			= settings["printer.travelSpeed"]
-	var filamentThickness = settings["printer.filamentThickness"];
-	var wallThickness 		= settings["printer.wallThickness"];
-	var layerHeight 			= settings["printer.layerHeight"];
-	var temperature 			= settings["printer.temperature"];
-
   console.log("printer temperature: ",temperature);
 	gcode.push("M109 S" + temperature); // set target temperature and wait for the extruder to reach it
   // add gcode begin commands
-  gcode = gcode.concat(gcodeStart);
+  gcode = gcode.concat(startGcode);
 	
   //gcode.push("M109 S" + temperature); // set target temperature and wait for the extruder to reach it
 
@@ -72,11 +122,8 @@ function generate_gcode(callback) {
 //    y: doodleBounds[1]
   }
 
-  
-	
   console.log("f:generategcode() >> layers: " + layers);
-  
+  if (layers == Infinity) return;
-  
 
   for (var layer = 0; layer < layers; layer++) {
 
@@ -149,7 +196,7 @@ function generate_gcode(callback) {
 //        ofPoint to = commands[(even || isLoop || loopAlways) ? i : last-i].to;
         var to = new Point(); to.set(commands[i][0], commands[i][1]);
         var sublayer = (layer == 0) ? 0.0 : layer + (useSubLayers ? (curLayerCommand/totalLayerCommands) : 0);
-        var z = (sublayer + 1) * layerHeight + zOffset;
+        var z = (sublayer + 1) * layerHeight; // 2013-09-06 removed zOffset (seemed to be useless)
 
         var isTraveling = !isLoop && i==0;
         var doRetract = prev.distance(to) > retractionminDistance;
@@ -157,7 +204,7 @@ function generate_gcode(callback) {
         if (enableTraveling && isTraveling) {
 //          console.log("enableTraveling && isTraveling >> doRetract: " + doRetract + ", retractionspeed: " + retractionspeed);
           if (doRetract) gcode.push("G0 E" + (extruder - retractionamount).toFixed(3) + " F" + (retractionspeed * 60).toFixed(3)); //retract
-          gcode.push("G0 X" + to.x.toFixed(3) + " Y" + to.y.toFixed(3) + " Z" + (z + (doRetract ? hop : 0)).toFixed(3) + " F" + (travelSpeed * 60).toFixed(3));
+          gcode.push("G0 X" + to.x.toFixed(3) + " Y" + to.y.toFixed(3) + " Z" + z.toFixed(3) + " F" + (travelSpeed * 60).toFixed(3));
           if (doRetract) gcode.push("G0 E" + extruder.toFixed(3) + " F" + (retractionspeed * 60).toFixed(3)); // return to normal 
         } else {
 //          console.log("       else");
@@ -174,7 +221,7 @@ function generate_gcode(callback) {
     }
 
     if ((layer/layers) > (objectHeight/maxObjectHeight)) {
-      console.log("f:generategcode() >> (layer/layers) > (objectHeight/maxObjectHeight) is true -> breaking");
+      console.log("f:generategcode() >> (layer/layers) > (objectHeight/maxObjectHeight) is true -> breaking at layer " + (layer + 1));
       break;
     }
 
@@ -182,7 +229,7 @@ function generate_gcode(callback) {
   }
 
   // add gcode end commands
-  gcode = gcode.concat(gcodeEnd);
+  gcode = gcode.concat(endGcode);
 
   // debug
 //  var _gc = gc.join("\n");

js/main.js

@@ -46,6 +46,30 @@ $(function() {
     $("body").css("overflow", "auto");
     $("#debug_textArea").css("display", "block");
     $("#preview_tmp").css("display", "block");
+
+    /* TEMP CODE!! -> artificially populates the startgcode and endgcode textareas in the settings window */
+    // todo remove this temporary code...
+    /*
+    setTimeout(function() {
+      $("#startgcode").text("");
+      $("#startgcode").append("G21 (mm) \n");
+      $("#startgcode").append("G91 (relative) \n");
+      $("#startgcode").append("G28 X0 Y0 Z0 (physical home) \n");
+      $("#startgcode").append("M104 S230 (temperature) \n");
+      $("#startgcode").append("G1 E10 F250 (flow) \n");
+      $("#startgcode").append("G92 X-100 Y-100 Z0 E10 \n");
+      $("#startgcode").append("G1 Z3 F5000 (prevent diagonal line) \n");
+      $("#startgcode").append("G90 (absolute) \n");
+      $("#startgcode").append("M106 (fan on)");
+      console.log("$('#startgcode'): " + $("#startgcode").val());
+
+      $("#endgcode").text("");
+      $("#endgcode").append("G1 X-100 Y-100 F15000 (fast homing) \n");
+      $("#endgcode").append("M107 \n");
+      $("#endgcode").append("M84 (disable axes) \n");
+      console.log("$('#endgcode'): " + $("#endgcode").val());
+    }, 1000);
+    //*/
   }
 })
 function settingsLoaded() {

js/previewRendering_v02.js

@@ -37,15 +37,16 @@ function initPreviewRendering() {
   redrawPreview();
 }
 
-//var numLayers 	= 100; //50
+var numLayers 	= 10;     // current number of preview layers
-var numLayers 	= 100; // 100
+var maxNumLayers= 100;    // maximum number of preview layers
+var minNumLayers= 2;      // minimum number of preview layers
 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 rStep 			= Math.PI/90; // 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"));