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()");

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()");