Add logic for stepping through saved sketches (WIP, untested).

js_src/buttonbehaviors.js

@@ -188,57 +188,70 @@ function initButtonBehavior() {
 
   //btnStop.on('touchstart mousedown',stopPrint);
 
+  	//TEMP function to test sketch loading
   	var btnLoadSketch = $('#btnLoadSketch');
   	btnLoadSketch.mouseup(function(e) {
   		var sketchId = $('#sketchId').val();
   		console.log("loading sketch with id " + sketchId);
 
-		wifiboxURL = "http://192.168.5.1/d3dapi";
+  		loadSketch(sketchId);
-		$.ajax({
-			url: wifiboxURL + "/sketch/" + sketchId,
-			dataType: 'json',
-			type: 'GET',
-			//timeout: this.timeoutTime,
-			success: function(response) {
-				if (response.status == 'error' || response.status == 'fail') {
-					console.log("loadSketch fail/error: " + response.msg + " -- ", response);
-				} else {
-					console.log("loadSketch success: loaded id #" + response.data.id, response);
-					//console.log("sketch content:\n" + response.data.data);
-					loadFromSvg(response.data.data);
-				}
-			}
-		}).fail(function() {
-			console.log("loadSketch failed: ", response);
-		});
   	});
 
-	btnSave.mouseup(function(e) {
+	//btnPrevious.mouseup(function(e) { prevDoodle(); });
-		svg = saveToSvg();
+	//btnNext.mouseup(function(e) { nextDoodle(); });
-		console.log("generated SVG [" + _points.length + " points, " + svg.length + " bytes]:\n" + svg);
+}
 
-		wifiboxURL = "http://192.168.5.1/d3dapi";
+function loadSketch(sketchId) {
-		$.ajax({
+	wifiboxURL = "http://192.168.5.1/d3dapi";
-			url: wifiboxURL + "/sketch",
+	$.ajax({
-			dataType: 'json',
+		url: wifiboxURL + "/sketch/" + sketchId,
-			type: 'POST',
+		dataType: 'json',
-			data: { data: svg },
+		type: 'GET',
-			//timeout: this.timeoutTime,
+//			timeout: this.timeoutTime,
-			success: function(response) {
+		success: function(response) {
-				if (response.status == 'error' || response.status == 'fail') {
+			if (response.status == 'error' || response.status == 'fail') {
-					console.log("saveSketch fail/error: " + response.msg + " -- ", response);
+				console.log("loadSketch fail/error: " + response.msg + " -- ", response);
-				} else {
+			} else {
-					console.log("saveSketch success: saved with id #" + response.data.id, response);
+				console.log("loadSketch success: loaded id #" + response.data.id, response);
+				//console.log("sketch content:\n" + response.data.data);
+				if (loadFromSvg(response.data.data)) {
+					setSketchModified(false, true);
+					setCurrentSketchId(response.data.id);
 				}
 			}
-		}).fail(function() {
+		}
-			console.log("saveSketch failed: ", response);
+	}).fail(function() {
-		});
+		console.log("loadSketch failed: ", response);
 	});
-
-	btnPrevious.mouseup(function(e) { prevDoodle(); });
-	btnNext.mouseup(function(e) { nextDoodle(); });
 }
+
+//btnSave.mouseup(saveSketch);
+function saveSketch() {
+	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.msg + " -- ", response);
+			} else {
+				console.log("saveSketch success: saved with id #" + response.data.id, response);
+				setSketchModified(false, true);
+				numberOfSketches = response.data.id;
+				setCurrentSketchId(response.data.id);
+			}
+		}
+	}).fail(function() {
+		console.log("saveSketch failed: ", response);
+	});
+});
+
 function stopPrint() {
   console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);
   //if (!confirm("Weet je zeker dat je huidige print wilt stoppen?")) return;
@@ -250,9 +263,19 @@ function stopPrint() {
 
 function prevDoodle(e) {
   console.log("f:prevDoodle()");
+  //TODO: if (enabled) {
+	  var sketchId = (currentSketchId > 0) ? currentSketchId : numberOfSketches;
+	  if (sketchId > 1) sketchId--;
+	  loadSketch(sketchId);
+  //}
 }
 function nextDoodle(e) {
   console.log("f:nextDoodle()");
+  //TODO: if (enabled) {
+	  var sketchId = (currentSketchId > 0) ? currentSketchId : numberOfSketches;
+	  if (sketchId < numberOfSketches) sketchId++;
+	  loadSketch(sketchId);
+  //}
 }
 
 function print(e) {
@@ -333,6 +356,7 @@ function previewUp(redrawLess) {
   //    console.log("f:previewUp()");
   if (numLayers < maxNumLayers) {
     numLayers++;
+    setSketchModified(true);
   }
 //  redrawPreview(redrawLess);
   redrawRenderedPreview(redrawLess);
@@ -341,6 +365,7 @@ function previewDown(redrawLess) {
   //    console.log("f:previewDown()");
   if (numLayers > minNumLayers) {
     numLayers--;
+    setSketchModified(true);
   }
 //  redrawPreview(redrawLess);
   redrawRenderedPreview(redrawLess);
@@ -348,13 +373,19 @@ function previewDown(redrawLess) {
 function previewTwistLeft(redrawLess) {
   if (redrawLess == undefined) redrawLess = false;
   //    console.log("f:previewTwistLeft()");
-  if (rStep > -previewRotationLimit) rStep -= twistIncrement;
+  if (rStep > -previewRotationLimit) {
+	  rStep -= twistIncrement;
+	  setSketchModified(true);
+  }
   //  redrawPreview(redrawLess);
   redrawRenderedPreview(redrawLess);
 }
 function previewTwistRight(redrawLess) {
   //    console.log("f:previewTwistRight()");
-  if (rStep < previewRotationLimit) rStep += twistIncrement;
+  if (rStep < previewRotationLimit) {
+	  rStep += twistIncrement;
+	  setSketchModified(true);
+  }
   //  redrawPreview(redrawLess);
   redrawRenderedPreview(redrawLess);
 }

js_src/canvasDrawing.js

@@ -263,6 +263,7 @@ function adjustPreviewTransformation() {
 }
 
 
+//TODO: use local variables instead of _points,numLayers,VERTICALSHAPE and rStep so we can leave a current doodle in tact if an error occurs while parsing
 function loadFromSvg(svgData) {
 	var mode = '', x = 0, y = 0;
 
@@ -310,7 +311,7 @@ function loadFromSvg(svgData) {
 
 				var isMove = mode == 'm' || mode == 'M';
 
-				//TODO: create function for adding a point?
+				//TODO: create script-wide function for adding points?
 				//console.log("inserting "+x+","+y+" ",isMove);
 				updatePrevX = x;
 				updatePrevY = y;
@@ -329,7 +330,6 @@ function loadFromSvg(svgData) {
 
 	parseCommand(); //depends on value of p, so don't move this without taking that into consideration
 
-	//TODO: untested from here
 	const fieldDefMarker = "<!--<![CDATA[d3d-keys";
 	p = svgData.indexOf(fieldDefMarker);
 	if (p == -1) { console.log("loadFromSvg: could not find metadata marker"); return false; }
@@ -351,12 +351,6 @@ function loadFromSvg(svgData) {
 
 	renderToImageDataPreview();
 
-	/* TODO: behaviour for prev/next buttons:
-	 * - call update/status once to init number of saved sketches - 0 means both buttons disabled, otherwise set current to -1, total amount to number and enable left (i.e. clicking that loads last saved sketch)
-	 * - when going back and forth, update current and enable/disable both buttons when borders (i.e. 1 and total amount) are reached
-	 * - when saving, set current to -1 again and update total amount
-	 */
-
 	return true;
 }
 
@@ -437,6 +431,7 @@ function onCanvasMouseDown(e) {
   adjustBounds(x, y);
   adjustPreviewTransformation();
   draw(x, y, 0.5);
+  setSketchModified(true);
 }
 
 var prevPoint = {x:-1, y:-1};
@@ -497,6 +492,8 @@ function onCanvasMouseMove(e) {
 //      redrawPreview();
     }
   }
+
+  setSketchModified(true);
 }
 prevUpdateFullPreview = 0; // 0 is not a timeframe but refers to the _points array
 prevUpdateFullPreviewInterval = 25; // refers to number of points, not a timeframe
@@ -537,6 +534,7 @@ function onCanvasTouchDown(e) {
   adjustBounds(x, y);
   adjustPreviewTransformation();
   draw(x, y, .5);
+  setSketchModified(true);
 
   movementCounter = 0;
 
@@ -604,6 +602,8 @@ function onCanvasTouchMove(e) {
     }
     prevRedrawTime = new Date().getTime();
   }
+
+  setSketchModified(true);
 }
 
 function onCanvasTouchEnd(e) {

js_src/main.js

@@ -20,6 +20,10 @@ var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previ
 var showhideInterval;
 var showOrHide = false;
 
+var numSavedSketches = -1;
+var currentSketchId = -1;
+var isModified = false;
+
 $(function() {
   console.log("ready");
 
@@ -67,6 +71,9 @@ $(function() {
 	settingsWindow.init(wifiboxURL,wifiboxCGIBinURL);
 	$(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded);
 
+	getSavedSketchStatus();
+	setSketchModified(false);
+
   if(debugMode) {
     console.log("debug mode is true");
     $("body").css("overflow", "auto");
@@ -106,6 +113,67 @@ $(function() {
   }
 });
 
+function enableButton(domId, handler) {
+	var elem = $(domId)
+	elem.removeClass("disabled");
+	elem.unbind('touchstart mousedown');
+	elem.bind('touchstart mousedown', handler);
+}
+
+function disableButton(domId) {
+	var elem = $(domId)
+	elem.addClass("disabled");
+	elem.unbind('touchstart mousedown');
+}
+
+function getSavedSketchStatus() {
+	$.ajax({
+		url: wifiboxURL + "/sketch/status",
+		dataType: 'json',
+		type: 'GET',
+		//timeout: this.timeoutTime,
+		success: function(response) {
+			if (response.status == 'error' || response.status == 'fail') {
+				console.log("getSavedSketchStatus fail/error: " + response.msg + " -- ", response);
+			} else {
+				console.log("getSavedSketchStatus success: num. saved: " + response.data.number_of_sketches + ", space available: " + response.data.available);
+				numSavedSketches = response.data.number_of_sketches;
+			}
+		}
+	}).fail(function() {
+		console.log("getSavedSketchStatus failed: ", response);
+	});
+}
+
+function setSketchModified(isModified, doNotClearCurrent) {
+	console.log("setModified: " + isModified + (typeof(doNotClearCurrent) !== 'undefined' ? " (doNotClearCurrent: "+doNotClearCurrent+")" : "")); //TEMP
+
+	if (isModified) { enableButton(btnSave, saveSketch); }
+	else { disableButton(btnSave); }
+
+	if (typeof(doNotClearCurrent) !== 'undefined' && !doNotClearCurrent) setCurrentSketchId(-1);
+	sketchModified  = isModified;
+}
+
+function setCurrentSketchId(sId) {
+	console.log("setCurrentSketchId: " + sId + " / " + numberOfSketches);
+	var enablePrev = false, enableNext = false;
+	if (numberOfSketches == 0) {
+		/* variables are initialized to false, so nothing to be done here */
+	} else if (numberOfSketches > 0) {
+		//if we are not at a saved sketch, consider all saved sketches as 'previous' ones
+		enablePrev = currentSketchId > 1 || currentSketchId == -1;
+		enableNext = currentSketchId < numberOfSketches;
+	}
+
+	if (enablePrev) { enableButton(btnPrevious, prevDoodle); }
+	else { disableButton(btnPrevious); }
+
+	if (enableNext) { enableButton(btnNext, nextDoodle); }
+	else { disableButton(btnNext); }
+
+}
+
 function showOrHideThermo() {
   console.log("f:showOrHideThermo()");
   if (showOrHide) {

js_src/verticalShapes.js

@@ -12,24 +12,28 @@ function initVerticalShapes() {
   $(".verticalShapes, .straight").on('mouseup touchend', function(e) {
     e.preventDefault();
     console.log("diverging");
+    if (VERTICALSHAPE != verticalShapes.NONE) setSketchModified(true);
     VERTICALSHAPE = verticalShapes.NONE;
     redrawRenderedPreview();
   })
   $(".verticalShapes, .diverging").on('mouseup touchend', function(e) {
     e.preventDefault();
     console.log("diverging");
+    if (VERTICALSHAPE != verticalShapes.DIVERGING) setSketchModified(true);
     VERTICALSHAPE = verticalShapes.DIVERGING;
     redrawRenderedPreview();
   })
   $(".verticalShapes, .converging").on('mouseup touchend', function(e) {
     e.preventDefault();
     console.log("converging");
+    if (VERTICALSHAPE != verticalShapes.CONVERGING) setSketchModified(true);
     VERTICALSHAPE = verticalShapes.CONVERGING;
     redrawRenderedPreview();
   })
   $(".verticalShapes, .sinus").on('mouseup touchend', function(e) {
     e.preventDefault();
     console.log("sinus");
+    if (VERTICALSHAPE != verticalShapes.SINUS) setSketchModified(true);
     VERTICALSHAPE = verticalShapes.SINUS;
     redrawRenderedPreview();
   })