Hacky implementation of an SVG generator + api call to save generated data.

.gitignore

@@ -1,2 +1,2 @@
-
+node_modules
 .project

www/js/buttonbehaviors.js

@@ -7,7 +7,7 @@ var twistIncrement = Math.PI/1800;
 
 var btnOopsInterval;
 
-var btnNew, btnPrevious, btnNext;
+var btnNew, btnSave, btnPrevious, btnNext;
 var btnOops, btnStop, btnClear;
 var btnMoveUp, btnMoveDown, btnTwistLeft, btnTwistRight;
 var btnInfo, btnSettings;
@@ -32,6 +32,7 @@ function initButtonBehavior() {
   btnInfo = $(".btnInfo");
   btnSettings = $(".btnSettings");
   btnNew = $(".btnNew");
+  btnSave = $(".btnSave");
   btnPrint= $(".btnPrint");
   btnStop = $(".btnStop");
 
@@ -186,6 +187,31 @@ function initButtonBehavior() {
   //*/
 
   //btnStop.on('touchstart mousedown',stopPrint);
+
+	btnSave.mouseup(function(e) {
+		svg = saveToSvg();
+		console.log("generated SVG [" + _points.length + " points, " + svg.length + " bytes]:\n" + svg);
+
+		wifiboxURL = "http://192.168.5.1/d3dapi";
+		$.ajax({
+			url: wifiboxURL + "/sketch",
+			dataType: 'json',
+			type: 'POST',
+			data: { data: svg },
+			//timeout: this.timeoutTime,
+			success: function(response) {
+				if (response.status == 'error' || response.status == 'fail')
+					console.log("saveSketch fail/error: ", response);
+				else
+					console.log("saveSketch success: saved with id #" + response.data.id, response);
+			}
+		}).fail(function() {
+			console.log("saveSketch failed: ", response);
+		});
+	});
+
+	btnPrevious.mouseup(function(e) { prevDoodle(); });
+	btnNext.mouseup(function(e) { nextDoodle(); });
 }
 function stopPrint() {
   console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);
@@ -198,7 +224,6 @@ function stopPrint() {
 
 function prevDoodle(e) {
   console.log("f:prevDoodle()");
-  console.log("f:prevDoodle()");
 }
 function nextDoodle(e) {
   console.log("f:nextDoodle()");
@@ -213,14 +238,14 @@ function print(e) {
 
   	//setState(Printer.BUFFERING_STATE,printer.hasControl);
     printer.overruleState(Printer.BUFFERING_STATE);
-    
+
     btnStop.css("display","none"); // hack
-    
+
-    // we put the gcode generation in a little delay 
+    // we put the gcode generation in a little delay
     // so that for example the print button is disabled right away
     clearTimeout(gcodeGenerateDelayer);
-    gcodeGenerateDelayer = setTimeout(function() { 
+    gcodeGenerateDelayer = setTimeout(function() {
-    	
+
     	var gcode = generate_gcode();
     	if (sendPrintCommands) {
     		if(gcode.length > 0) {
@@ -237,7 +262,7 @@ function print(e) {
 				$("#textdump").text("");
 				$("#textdump").text(gcode.join("\n"));
 			}
-			
+
     }, gcodeGenerateDelay);
   } else {
     console.log("f:print >> not enough points!");
@@ -317,11 +342,11 @@ function update() {
 	progressbar.update(printer.currentLine, printer.totalLines);
 }
 
-function setState(newState,newHasControl) { 
+function setState(newState,newHasControl) {
 	if(newState == state && newHasControl == hasControl) return;
 
 	prevState = state;
-	
+
 	console.log("setState: ",prevState," > ",newState," ( ",newHasControl,")");
 	setDebugText("State: "+newState);
 
@@ -353,34 +378,34 @@ function setState(newState,newHasControl) {
 		case Printer.BUFFERING_STATE:
 		case Printer.PRINTING_STATE:
 		case Printer.STOPPING_STATE:
-			thermometer.show();	
+			thermometer.show();
 			break;
 		default:
-			thermometer.hide();	
+			thermometer.hide();
 			break;
 	}
 
 	// progress indicator
 	switch(newState) {
 		case Printer.PRINTING_STATE:
-			progressbar.show(); 
+			progressbar.show();
 			break;
 		default:
 			progressbar.hide();
 			break;
 	}
-	
+
 	if(newState == Printer.WIFIBOX_DISCONNECTED_STATE) {
 		message.set("Lost connection to WiFi box",Message.ERROR);
 	}	else if(prevState == Printer.WIFIBOX_DISCONNECTED_STATE) {
 		message.set("Connected to WiFi box",Message.INFO,true);
 	} else if(newState == Printer.DISCONNECTED_STATE) {
 		message.set("Printer disconnected",Message.WARNING,true);
-	} else if(prevState == Printer.DISCONNECTED_STATE && newState == Printer.IDLE_STATE || 
+	} else if(prevState == Printer.DISCONNECTED_STATE && newState == Printer.IDLE_STATE ||
 						prevState == Printer.UNKNOWN_STATE && newState == Printer.IDLE_STATE) {
 		message.set("Printer connected",Message.INFO,true);
 	}
-	
+
 	state = newState;
 	hasControl = newHasControl;
 }

www/js/canvasDrawing.js

@@ -300,6 +300,49 @@ function onCanvasMouseDown(e) {
   draw(x, y, 0.5);
 }
 
+function saveToSvg() {
+	var lastX = 0, lastY = 0, lastIsMove;
+	var data = ''; //TODO: change data to an array which is collapsed after the loop?
+	var svg = '';
+
+	var boundsWidth = doodleBounds[3] - doodleBounds[1];
+	var boundsHeight = doodleBounds[2] - doodleBounds[0];
+
+	svg += '<?xml version="1.0" standalone="no"?>\n';
+	svg += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n';
+	svg += '<svg width="' + boundsWidth + '" height="' + boundsHeight + '" version="1.1" xmlns="http://www.w3.org/2000/svg">\n';
+	svg += '\t<desc>Doodle 3D sketch</desc>\n';
+
+	for (var i = 0; i < _points.length; ++i) {
+		var x = _points[i][0], y = _points[i][1], isMove = _points[i][2];
+		var dx = x - lastX, dy = y - lastY;
+
+		if (i == 0)
+			data += 'M'; //emit absolute move on first pair of coordinates
+		else if (isMove != lastIsMove)
+			data += isMove ? 'm' : 'l';
+
+		data += dx + ',' + dy + ' ';
+
+		lastX = x;
+		lastY = y;
+		lastIsMove = isMove;
+	}
+
+	svg += '\t<path d="' + data + '" fill="none" stroke="black" stroke-width="1" />\n';
+
+	var field = 'height', value = numLayers;
+	svg += '\t<!-- ' + field + ': ' + value + ' -->\n';
+	field = 'outlineShape', value = VERTICALSHAPE;
+	svg += '\t<!-- ' + field + ': ' + value + ' -->\n';
+	field = 'twist', value = rStep;
+	svg += '\t<!-- ' + field + ': ' + value + ' -->\n';
+
+	svg += '</svg>\n';
+
+	return svg;
+}
+
 var prevPoint = {x:-1, y:-1};
 function onCanvasMouseMove(e) {
 //  console.log("f:onCanvasMouseMove()");