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

# By Adriaan Wormgoor (6) and peteruithoven (4)
# Via Adriaan Wormgoor (2) and peteruithoven (2)
* 'master' of https://github.com/Doodle3D/doodle3d-client:
  objectHeight and twist fix and temp display fix
  minor repositioning of temp-guage so that it doesn't overlap with the info-button
  gcode generated twist now complies with the doodle preview
  made the 'ok' button have a mouseover 'hand' cursor
  commented out call to missing setPrintprogress()
  removed wrong unit in settings
  Removed unused draw logic
  additions to Thermometer to allow the general Update function to show() and hide() the Thermometer's container DIV
  new favicon (for Firefox)
  a few new favicons and homescreen icons

Conflicts:
	js/Thermometer.js
	js/gcodeGenerating_v01.js

css/fixedPosInterface.css

@@ -261,8 +261,8 @@ body {
 /* THERMOMETER */
 #thermometerContainer {
   position: absolute;
-  right: 30px;
+  right: 25px;
-  top: 410px;
+  top: 370px;
 }
 #thermometerCanvas {
   /*background: #59b2b8;*/

css/settingsPopup.css

@@ -70,4 +70,5 @@ div.content .btnOK {
   height: 86px;
   background: url('../img/buttons/btnOk_settings.png') no-repeat;
   margin: 0 0 0 10px;
+  cursor: pointer;
 }

js/Printer.js

@@ -106,6 +106,8 @@ function Printer() {
     	return;
     }
     
+    this.targetTemperature = settings["printer.temperature"]; // slight hack
+    
 		this.sendPrintPart(this.sendIndex, this.sendLength);
 	}
 	this.byteSize = function(s){
@@ -139,6 +141,7 @@ function Printer() {
 				  	if (lastOne) {
 		          console.log("Printer:sendPrintPart:gcode sending completed");
 		          this.gcode = [];
+		          self.targetTemperature = settings["printer.temperature"]; // slight hack
 		        } else {
 		          self.sendPrintPart(sendIndex + sendLength, sendLength);
 		        }

js/Thermometer.js

@@ -24,9 +24,11 @@ function Thermometer() {
     [244, 50, 50]   // 'ready / hot'
   ];
 
-  this.init = function(targCanvas) {
+  this.init = function(targCanvas, targCanvasContainer) {
     console.log("Thermometer.init()");
 
+    $displayThermometer = targCanvasContainer;
+
     this.$canvas = targCanvas;
     this.canvas = this.$canvas[0];
     this.context = this.canvas.getContext('2d');

js/buttonbehaviors.js

@@ -311,7 +311,7 @@ function update() {
     thermometer.update(printer.temperature, printer.targetTemperature);
 	}
 
-  setPrintprogress(printer.currentLine/printer.num_lines);
+  //setPrintprogress(printer.currentLine/printer.num_lines);
 
 	var btnPrint= $("#btnPrint");
 	

js/draw_logic.js

@@ -1,277 +0,0 @@
-var oopsTimer;
-var dragging;
-var path;
-var svg;
-var preview;
-var previewCtx;
-
-var svgPathRegExp = /[LM]\d* \d*/ig;
-var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
-
-var svgTopLeftCoords = [];
-function initDrawing() {
-
-	path = document.getElementById('path');
-	svg = document.getElementById('svg');
-
-  svgTopLeftCoords[0] = $("#drawAreaContainer").css("left").match(/[0-9]/g).join("");
-  svgTopLeftCoords[1] = $("#drawAreaContainer").css("top").match(/[0-9]/g).join("");
-
-  svg.addEventListener('mousedown',onMouseDown,false);
-	svg.addEventListener('mousemove',onMouseMove,false);
-	svg.addEventListener('mouseup',onMouseUp,false);
-	svg.addEventListener('touchstart',onTouchDown,false);
-	svg.addEventListener('touchmove',onTouchMove,false);
-	btnNew.addEventListener('mousedown',clear,false);
-	btnNew.addEventListener('touchstart',clear,false);
-	btnOops.addEventListener('touchstart',startOops,false);
-	btnOops.addEventListener('touchend',stopOops,false);
-	btnOops.addEventListener('mousedown',startOops,false);
-	btnOops.addEventListener('mouseup',stopOops,false);
-	btnPrint.addEventListener('mousedown',print,false);
-	btnPrint.addEventListener('touchstart',print,false);
-	btnSave.addEventListener('mousedown',print,false);
-	btnSave.addEventListener('touchstart',print,false);
-
-	document.body.addEventListener('touchmove',prevent,false);
-	
-	preview = document.getElementById('preview');
-	previewCtx = preview.getContext('2d');
-	redrawPreview();
-};
-
-function prevent(e) {
-	e.preventDefault();
-}
-
-function clear() {
-	path.attributes.d.nodeValue = "M0 0";
-	redrawPreview();
-}
-
-function startOops() {
-	oopsTimer = setInterval("oops()",1000/30);
-}
-
-function stopOops() {
-	clearInterval(oopsTimer);
-}
-
-function oops() {
-	str = path.attributes.d.nodeValue;
-	n = str.lastIndexOf(" L");
-	if(n != -1) {
-		path.attributes.d.nodeValue = str.substr(0,n);	
-		redrawPreview();
-		//requestAnimationFrame(updatePreview);
-	}
-}
-
-function moveTo(x,y) {
-	if (path.attributes.d.nodeValue=="M0 0") {
-		path.attributes.d.nodeValue = "M" + x + " " + y;
-	} else {
-		path.attributes.d.nodeValue += " M" + x + " " + y;
-	}
-	updatePreview(x,y,true)
-	//redrawPreview();
-}
-
-function lineTo(x,y) {
-	path.attributes.d.nodeValue += " L" + x + " " + y;
-	//updatePreview();
-	//requestAnimationFrame(updatePreview);
-	updatePreview(x,y,false);
-}
-
-function onTouchDown(e) {
-	var x = e.touches[0].pageX - svgTopLeftCoords[0];
-	var y = e.touches[0].pageY - svgTopLeftCoords[1];
-	moveTo(x,y);	
-}
-
-function onTouchMove(e) {
-	e.preventDefault();
-  var x = e.touches[0].pageX - svgTopLeftCoords[0];
-	var y = e.touches[0].pageY - svgTopLeftCoords[1];
-	lineTo(x,y);
-}
-
-function onMouseDown(e) {
-	dragging = true;
-	moveTo(e.offsetX,e.offsetY);
-}
-
-function onMouseMove(e) {
-	if (!dragging) return;
-	lineTo(e.offsetX,e.offsetY);
-}
-
-function onMouseUp(e) {
-	dragging = false;
-}
-
-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";
-
-  console.log("output :" + output );
-
-	$.post("/doodle3d.of", { data:output }, function(data) {
-	 	btnPrint.disabled = false;
-	});
-}
-
-var numLayers 	= 100; //50
-var globalScale = 0.20;			// global scale of preview
-var globalAlpha = 0.20;			// global alpha of preview
-var scaleY 			= 0.4; 			// additional vertical scale per path for 3d effect
-var strokeWidth = 2; //4; 
-var rStep 			= Math.PI/40; //Math.PI/40; //
-var yStep 			= 3; //6;
-var svgWidth 		= 650; //parseInt($(svg).css("width"));
-var svgHeight 	= 450; //parseInt($(svg).css("height"));
-var layerCX			= svgWidth/2*globalScale;
-var layerCY			= svgHeight/2*globalScale;
-var layerOffsetY= 360;
-var prevX 			= 0;
-var prevY 			= 0;
-var highlight		= true; //highlight bottom, middle and top layers
-
-function redrawPreview() {
-	var svgData = path.attributes.d.nodeValue;
-	var linesRaw = svgData.match(svgPathRegExp);
-  console.log("svgData: " + svgData);
-  console.log("linesRaw: " + linesRaw);
-  console.log("");
-//  console.log("");
-	var lines = new Array();
-	for(var i=0;i<linesRaw.length;i++) {
-		var lineRaw = linesRaw[i];
-		var results = svgPathParamsRegExp.exec(lineRaw);
-  console.log("results: " + results);
-  console.log("");
-		results[2] = parseInt(results[2])*globalScale; // posX
-		results[3] = parseInt(results[3])*globalScale; // posY
-		lines.push(results);
-	}
-  console.log("");
-  console.log("");
-
-	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 == 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.beginPath();
-		for(var j=0;j<lines.length;j++) {
-			var line = lines[j];
-			var command = line[1];
-			var posX = line[2];
-			var posY = line[3];
-			if(command == "M") previewCtx.moveTo(posX,posY);
-			else if(command == "L") previewCtx.lineTo(posX,posY);	
-		}
-		previewCtx.stroke();
-		
-		y -= yStep;
-		r += rStep;
-		previewCtx.restore();
-	}
-	previewCtx.globalAlpha = globalAlpha;
-}
-function updatePreview(x,y,move) {
-	x *= globalScale;
-	y *= globalScale;
-	
-	if(!move) {
-		var tY = 0;
-		var r = 0;
-		
-		if(!highlight) {
-			previewCtx.globalAlpha = globalAlpha;
-			previewCtx.beginPath(); 
-		}
-		for(var i=0;i<numLayers;i++) {
-			
-			if(highlight && (i == 0 || i == numLayers/2 || i == numLayers-1)){
-				previewCtx.stroke();
-	  		previewCtx.globalAlpha = 1;
-	  		previewCtx.beginPath(); 
-			}
-			
-			previewCtx.save();
-			previewCtx.translate(layerCX,layerOffsetY+layerCY+tY);		
-			previewCtx.scale(1, scaleY)
-			previewCtx.rotate(r);	
-			previewCtx.translate(-layerCX,-layerCY);
-			
-			previewCtx.moveTo(prevX,prevY);	
-			previewCtx.lineTo(x,y);	
-			
-			tY -= yStep;
-			r += rStep;
-			previewCtx.restore();
-			
-			if(highlight && (i == 0 || i == numLayers/2 || i == numLayers-1)){
-				previewCtx.stroke();
-				previewCtx.globalAlpha = globalAlpha;
-				previewCtx.beginPath(); 
-			}
-		}
-	}
-	previewCtx.stroke();
-	prevX = x;
-	prevY = y;
-}
-
-/*(function() {
-    var lastTime = 0;
-    var vendors = ['webkit', 'moz'];
-    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
-        window.cancelAnimationFrame =
-          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
-    }
-
-    if (!window.requestAnimationFrame)
-        window.requestAnimationFrame = function(callback, element) {
-            var currTime = new Date().getTime();
-            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
-              timeToCall);
-            lastTime = currTime + timeToCall;
-            return id;
-        };
-
-    if (!window.cancelAnimationFrame)
-        window.cancelAnimationFrame = function(id) {
-            clearTimeout(id);
-        };
-}());*/

js/gcodeGenerating_v01.js

@@ -90,8 +90,18 @@ function generate_gcode(callback) {
   console.log("");
   //*/
 
-  objectHeight = Math.ceil(numLayers / 5); // in settings objectHeight = 20, in previewRendering_v01.js numLayers is 100, hence the / 5
+  // max amount of real world layers 
-  objectHeight = (numLayers / maxNumLayers) * maxObjectHeight; // in settings objectHeight = 20, in previewRendering_v01.js numLayers is 100, hence the / 5
+  var layers = maxObjectHeight / layerHeight; //maxObjectHeight instead of objectHeight
+  
+  // translate numLayers in preview to objectHeight in real world
+  //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
+  objectHeight = Math.round(numLayers/maxNumLayers*maxObjectHeight);
+
+  // translate preview rotation (per layer) to real world rotation
+  var rStepGCode = rStep * maxNumLayers/layers; ///maxNumLayers*maxObjectHeight;
+  // correct direction
+  rStepGCode = -rStepGCode;
 	
   // todo hier een array van PATHS maken wat de losse paths zijn
 
@@ -146,10 +156,9 @@ function generate_gcode(callback) {
 
     // sort-of in de buurt van (360/2.5)
     // // -> aight.. er zijn 750 lines vs 1000 in de d3d app. 135 = .75 * 180... dit kan je nog rechttrekken als je NET wat slimmer nadenkt :)
-    // update: NEE, het is niet .75 * 180 want 135 was niet de beste value. //TODO dus.
+    // update: NEE, het is niet .75 * 180 want 135 was niet de beste value.
-    var radToDeg = 180/Math.PI;
+    //pointsRotate(p, rStep * progress * 139);
-    //pointsRotate(p, (rStep * radToDeg) * progress);
+    pointsRotate(p, rStepGCode * layer);
-    pointsRotate(p, (rStep * 139) * progress);
 
     if (layer == 0) {
       //gcode.push("M107"); //fan off
@@ -226,8 +235,6 @@ function generate_gcode(callback) {
       console.log("f:generategcode() >> (layer/layers) > (objectHeight/maxObjectHeight) is true -> breaking at layer " + (layer + 1));
       break;
     }
-
-
   }
 
   // add gcode end commands

js/main.js

@@ -45,7 +45,7 @@ $(function() {
   initPreviewRendering();
   initButtonBehavior();
 
-	thermometer.init($("#thermometerCanvas"));
+	thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
 
   printer.init();
 	$(document).on(Printer.UPDATE,update);

settings.html

@@ -82,7 +82,7 @@
 			<legend>Doodle3D settings</legend>
 			<label for="simplifyMinDistance">Minimal line distance:</label><input id="simplifyMinDistance" type="number" class="small" name="doodle3d.simplify.minDistance">px<br>
 			<label for="maxObjectHeight">Max object height:</label><input id="maxObjectHeight" type="number" class="small" name="printer.maxObjectHeight">mm<br>
-			<label for="screenToMillimeterScale">Pixels to mm scale:</label><input id="screenToMillimeterScale" type="number" step="0.1" class="small" name="printer.screenToMillimeterScale">px<br>
+			<label for="screenToMillimeterScale">Pixels to mm scale:</label><input id="screenToMillimeterScale" type="number" step="0.1" class="small" name="printer.screenToMillimeterScale"><br>
 		</fieldset>
 
 		<fieldset>