vertical shapes implemented

css/fixedPosInterface.css

@@ -17,6 +17,37 @@ body {
 /*}*/
 
 
+#verticalShapes {
+  position:absolute;
+  right: -56px;
+  bottom: 15px;
+  /*background-color: #fff;*/
+}
+
+.verticalshape {
+  width: 50px;
+  height: 50px;
+  border: 2px solid #333;
+  border-radius: 0px 5px 5px 0px;
+  margin-top: 4px;
+  /*background-color: #f0f;*/
+  cursor: pointer;
+}
+
+.straight {
+  background: url('../img/vertical_shape_icons/straight.png') no-repeat;
+}
+.diverging {
+  background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
+}
+.converging {
+  background: url('../img/vertical_shape_icons/converging.png') no-repeat;
+}
+.sinus {
+  background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
+}
+
+
 /* Portrait */
 @media screen and (orientation:portrait) {
   body {
@@ -186,8 +217,8 @@ body {
 /* THERMOMETER */
 #thermometerContainer {
   position: absolute;
-  right: 25px;
+  right: 5px;
-  top: 370px;
+  top: 360px;
 }
 #thermometerCanvas {
   /*background: #59b2b8;*/

index.html

@@ -68,6 +68,12 @@
         <div class="manipulationBtn" id="btnTwistRight"></div>
       </div>
     </div>
+    <div id="verticalShapes">
+      <div class="verticalshape straight"> </div>
+      <div class="verticalshape diverging"> </div>
+      <div class="verticalshape converging"> </div>
+      <div class="verticalshape sinus"> </div>
+    </div>
   </div>
   <div id="debug_textArea">
     <textarea rows="5" cols="115" id="textdump"></textarea>
@@ -92,6 +98,7 @@
 <script src="js/libs/jquery-1.8.3.min.js"></script>
 <script src="js/SettingsWindow.js"></script>
 <script src="js/d3dServerInterfacing.js"></script>
+<script src="js/verticalShapes.js"></script>
 <script src="js/buttonbehaviors.js"></script>
 <script src="js/canvasDrawing_v01.js"></script>
 <script src="js/previewRendering_v02.js"></script>

js/canvasDrawing_v01.js

@@ -147,6 +147,7 @@ function clearDoodle() {
 
   clearMainView();
   resetPreview();
+  resetVerticalShapes();
 }
 
 function redrawDoodle() {

js/gcodeGenerating_v01.js

@@ -9,7 +9,7 @@ gcodeStart.push("G1 Z15 F9000"); 		// move the platform down 15mm
 gcodeStart.push("G92 E0"); 					// zero the extruded length
 gcodeStart.push("G1 F200 E10");			// extrude 10mm of feed stock
 gcodeStart.push("G92 E0");					// zero the extruded length again
-gcodeStart.push("G92 X-100 Y-100 E0"); // zero the extruded length again and make center the start position
+//gcodeStart.push("G92 X-100 Y-100 E0"); // zero the extruded length again and make center the start position
 gcodeStart.push("G1 F9000");				
 gcodeStart.push("G90"); 						// absolute positioning
 gcodeStart.push("M117 Printing Doodle...  ");	// display message (20 characters to clear whole screen)
@@ -43,16 +43,22 @@ function generate_gcode(callback) {
     startGcode = $("#startgcode").val().trim().split("\n");
   } else {
     console.log("   no start-gcode in settings.html, using defaults")
-    startGcode.concat(gcodeStart);
+    startGcode = startGcode.concat(gcodeStart);
   }
 
+  console.log("f:generate_gcode() >> startGcode:");
+  console.log(startGcode);
+  console.log("");
+  console.log("f:generate_gcode() >> endGcode:");
+  console.log(endGcode);
+
   // 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);
+    endGcode = endGcode.concat(gcodeEnd);
   }
 
   gcode = [];
@@ -148,7 +154,8 @@ function generate_gcode(callback) {
     var progress = layer / layers;
 
     // float layerScale = scaleFunction(float(layer)/layers); // scaleFactor van de layer -> lookup naar vfunc[] voor die scaleVals
-    var layerScale = 1.0;
+//    var layerScale = 1.0;
+    var layerScale = scaleFunction(progress);
 
     // if begin point this row and end point last row are close enough, isLoop is true
     var isLoop = lineLength(points[0][0], points[0][1], points[points.length-1][0], points[points.length-1][1]) < 3;
@@ -264,8 +271,24 @@ function generate_gcode(callback) {
 }
 
 function scaleFunction(percent) {
-  var r;
+  var r = 1.0;
 
+  switch (VERTICALSHAPE) {
+    case verticalShapes.NONE:
+      r = 1.0;
+      break;
+    case verticalShapes.DIVERGING:
+      r = .5 + (percent * .5);
+      break;
+    case verticalShapes.CONVERGING:
+      r = 1.0 - (percent * .8);
+      break;
+    case verticalShapes.SINUS:
+      r = (Math.cos(percent * Math.PI * 4) * .25) + .75;
+      break;
+  }
+
+//  return 1.0 - (percent *.8);
   return r;
 }
 

js/main.js

@@ -10,6 +10,7 @@ var settingsWindow = new SettingsWindow();
 
 var firstTimesettingsLoaded = true;
 
+
 $(function() {
   console.log("ready");
 
@@ -38,6 +39,7 @@ $(function() {
   initDoodleDrawing();
   initPreviewRendering();
   initButtonBehavior();
+  initVerticalShapes();
 
 	thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
 

js/previewRendering_v02.js

@@ -103,6 +103,7 @@ function redrawPreview(redrawLess) {
 
   for(var i = 0; i < numLayers; i++) {
 
+    var verticalScaleFactor = scaleFunction(i / maxNumLayers);
 
     if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
       previewCtx.globalAlpha = 1;
@@ -120,7 +121,7 @@ function redrawPreview(redrawLess) {
 
     previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
 //    previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y);
-    previewCtx.scale(viewerScale, scaleY * viewerScale);
+    previewCtx.scale(viewerScale * verticalScaleFactor, scaleY * viewerScale * verticalScaleFactor);
     previewCtx.rotate(r);
     previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
 
@@ -185,6 +186,8 @@ function renderToImageDataPreview() {
 
     for(var i=0;i<numLayers;i++) {
 
+      var verticalScaleFactor = scaleFunction(i / maxNumLayers);
+
       if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
         previewCtx.globalAlpha = 1;
       } else {
@@ -194,7 +197,8 @@ function renderToImageDataPreview() {
       previewCtx.save();
 
       previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
-      previewCtx.scale(1, scaleY)
+//      previewCtx.scale(1, scaleY)
+      previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor)
       previewCtx.rotate(r);
       previewCtx.translate(-layerCX,-layerCY);
 
@@ -225,6 +229,8 @@ function redrawRenderedPreview(redrawLess) {
 
   for(var i = 0; i < numLayers; i++) {
 
+    var verticalScaleFactor = scaleFunction(i / maxNumLayers);
+
     if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
       previewCtx.globalAlpha = 1;
     } else {
@@ -239,7 +245,8 @@ function redrawRenderedPreview(redrawLess) {
     previewCtx.save();
 
     previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
-    previewCtx.scale(1, scaleY)
+//    previewCtx.scale(1, scaleY)
+    previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor);
     previewCtx.rotate(r);
     previewCtx.translate(-layerCX,-layerCY);
 
@@ -288,7 +295,6 @@ function updatePreview(_x, _y, redrawLess) {
 
   for(var i = 0; i < numLayers; i++) {
 
-
     if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
       previewCtx.globalAlpha = 1;
     } else {

js/verticalShapes.js

@@ -0,0 +1,41 @@
+var VERTICALSHAPE;
+var verticalShapes = {
+  "NONE": 'none',
+  "DIVERGING": 'diverging',
+  "CONVERGING": 'converging',
+  "SINUS": 'sinus'
+};
+
+function initVerticalShapes() {
+  // TODO give these vertical shapes a better spot
+  VERTICALSHAPE = verticalShapes.NONE;
+  $(".verticalShapes, .straight").on('mouseup touchend', function(e) {
+    e.preventDefault();
+    console.log("diverging");
+    VERTICALSHAPE = verticalShapes.NONE;
+    redrawRenderedPreview();
+  })
+  $(".verticalShapes, .diverging").on('mouseup touchend', function(e) {
+    e.preventDefault();
+    console.log("diverging");
+    VERTICALSHAPE = verticalShapes.DIVERGING;
+    redrawRenderedPreview();
+  })
+  $(".verticalShapes, .converging").on('mouseup touchend', function(e) {
+    e.preventDefault();
+    console.log("converging");
+    VERTICALSHAPE = verticalShapes.CONVERGING;
+    redrawRenderedPreview();
+  })
+  $(".verticalShapes, .sinus").on('mouseup touchend', function(e) {
+    e.preventDefault();
+    console.log("sinus");
+    VERTICALSHAPE = verticalShapes.SINUS;
+    redrawRenderedPreview();
+  })
+
+}
+
+function resetVerticalShapes() {
+  VERTICALSHAPE = verticalShapes.NONE;
+}