manage sketches and file manager

js/Keyboard.js

@@ -49,8 +49,8 @@ function initKeyboard() {
 		var ch = String.fromCharCode(event.which);
 
 		switch (ch) {
-			case 'c': clearDoodle(); break;
+			case 'c': newSketch(); break;
-			case 'n': clearDoodle(); break;
+			case 'n': newSketch(); break;
 			case 'p': print(); break;
 			case 'u': oopsUndo(); break;
 			case 'g': settingsWindow.downloadGcode(); break;
@@ -59,8 +59,8 @@ function initKeyboard() {
 			case 'h': previewUp(true); break;
 			case 'H': previewDown(true); break;
 			case 's': saveSketch(); break;
-			case 'L': nextDoodle(); break;
+			case 'L': nextSketch(); break;
-			case 'l': prevDoodle(); break;
+			case 'l': prevSketch(); break;
 			case '[': previewTwistLeft(); break;
 			case ']': previewTwistRight(); break;
 			case '|': resetTwist(); break;

js/Svg.js

@@ -56,6 +56,8 @@ function loadFromSvg(svgData) {
 
 	clearDoodle();
 
+	svgData = svgData.replace("M0,0 ",""); //RC: hack
+
 	var p = svgData.indexOf("<path");
 	if (p == -1) { console.log("loadFromSvg: could not find parsing start point"); return false; }
 	p = svgData.indexOf('d="', p);
@@ -73,7 +75,17 @@ function loadFromSvg(svgData) {
 				return true;
 			} else { //something else, must be a pair of coordinates...
 				var tx = 0, ty = 0, numberEnd = 0, len = 0;
+				// var firstComma = svgData.indexOf(',', p);
+				// var firstSpace = svgData.indexOf(' ', p);
+
 				numberEnd = svgData.indexOf(',', p);
+
+				////// RC: if instead of a comma a space is used between a pair use that as a separator
+				var firstSpace = svgData.indexOf(' ', p);
+				if (firstSpace<numberEnd) numberEnd=firstSpace;   
+				//console.log('numberEnd',numberEnd,firstSpace);
+				////////////////
+
 				if (numberEnd == -1) { console.log("could not find comma in coordinate pair"); return false; }
 				len = numberEnd - p;
 				tx = parseFloat(svgData.substr(p, len));

js/buttonbehaviors.js

@@ -76,8 +76,8 @@ function initButtonBehavior() {
 	btnPrint.on("onButtonClick", print);
 	btnStop.on("onButtonClick", stopPrint);
 	btnSave.on("onButtonClick", saveSketch);
-	btnPrevious.on("onButtonClick", prevDoodle);
+	btnPrevious.on("onButtonClick", previousSketch);
-	btnNext.on("onButtonClick", nextDoodle);
+	btnNext.on("onButtonClick", nextSketch);
 	btnOops.on("onButtonHold", onBtnOops);
 	// vertical shape buttons
 	btnToggleVerticalShapes.on("onButtonClick", onBtnToggleVerticalShapes);
@@ -93,8 +93,10 @@ function initButtonBehavior() {
 	btnZoom.on("onButtonHold", onBtnZoom);
 	btnRotate.on("onButtonHold", onBtnRotate);
 
-	getSavedSketchStatus();
+	//getSavedSketchStatus();
-	setSketchModified(false);
+	listSketches();
+	// setSketchModified(false);
+	// updateSketchButtonStates();
 
 	function onBtnToggleVerticalShapes() {
 		var btnImg;
@@ -183,7 +185,7 @@ function initButtonBehavior() {
 	}
 
 	function onBtnNew(e) {
-		clearDoodle();
+		newSketch();
 	}
 
 	function onBtnWordArt(e) {
@@ -423,7 +425,8 @@ function setState(newState,newHasControl) {
 		btnSave.disable();
 		break;
 	default:
-		updatePrevNextButtonState();
+		// updatePrevNextButtonState();
+		updateSketchButtonStates();
 		if (isModified) btnSave.enable();
 	break;
 	}

js/canvasDrawing.js

@@ -157,7 +157,7 @@ function draw(_x, _y, _width) {
 function clearDoodle() {
   //console.log("f:clearDoodle");
 
-  updatePrevNextButtonStateOnClear();
+  //updatePrevNextButtonStateOnClear();
 
   _points = [];
 
@@ -177,6 +177,7 @@ function clearDoodle() {
   resetVerticalShapes();
 
   setSketchModified(false);
+  // updateSketchButtonStates();
 }
 
 function redrawDoodle(recalcBoundsAndTransforms) {

js/main.js

@@ -42,15 +42,26 @@ $(function() {
   if (getURLParameter("r") != "null") wifiboxIsRemote = (getURLParameter("r") == "1");
   if (getURLParameter("u") != "null") autoUpdate = (getURLParameter("u") == "1");
 
-	if (wifiboxIsRemote) {
+  var hostname;
-    // var hostname = "http://10.0.0.45";
+  if (wifiboxIsRemote) hostname = 'http://192.168.5.1';
-    var hostname = "http://192.168.5.1";
+  if (getURLParameter("wifiboxURL") != "null") hostname = getURLParameter("wifiboxURL");
+  if (!hostname) hostname = "http://" + window.location.host;
+
   wifiboxURL = hostname+"/d3dapi";
   wifiboxCGIBinURL = hostname+"/cgi-bin/d3dapi";
-	} else {
+
-		wifiboxURL = "http://" + window.location.host + "/d3dapi";
+  
-		wifiboxCGIBinURL = "http://" + window.location.host + "/cgi-bin/d3dapi";
+  //var api = wifiboxURL+'/d3dapi/sketch/';
-	}
+
+	// if (wifiboxIsRemote) {
+ //    // var hostname = "http://10.0.0.45";
+ //    var hostname = "http://192.168.5.1";
+	// 	wifiboxURL = hostname+"/d3dapi";
+	// 	wifiboxCGIBinURL = hostname+"/cgi-bin/d3dapi";
+	// } else {
+	// 	wifiboxURL = "http://" + window.location.host + "/d3dapi";
+	// 	wifiboxCGIBinURL = "http://" + window.location.host + "/cgi-bin/d3dapi";
+	// }
 
   if (!communicateWithWifibox) {
     sendPrintCommands = false; // 'communicateWithWifibox = false' implies this

js/settings/SettingsWindow.js

@@ -176,6 +176,10 @@ function SettingsWindow() {
 			saveAs(blob, "doodle3d.svg");
 		}
 	};
+
+	this.openFileManager = function() {
+		location.href = "filemanager/"+location.search;
+	}
 }
 
 /*************************

js/sketches.js

@@ -6,158 +6,95 @@
  * See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
  */
 
-var currentSketchId = 0;
+var curSketch = 0;
-var numSavedSketches = 0;
+var sketches = []; //contains fileIDs
 
-function getSavedSketchStatus() {
+function previousSketch(e) {
-	$.ajax({
+	loadSketch(curSketch-1);
-		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;
-				updatePrevNextButtonStateOnClear();
-			}
-		}
-	}).fail(function() {
-		console.log("getSavedSketchStatus failed");
-	});
 }
 
-function setSketchModified(_isModified, doNotClearCurrent) {
+function nextSketch(e) {
+	loadSketch(curSketch+1);
+}
+
+function newSketch(e) {
+	clearDoodle();
+	curSketch = sketches.length; //index of the last item + 1
+	updateSketchButtonStates();
+}
+
+function listSketches() {
+	console.log('listSketches')
+	$.get(wifiboxURL + "/sketch/list", function(data) {
+		if (data.status=='success') {
+			sketches = data.data.list;
+			curSketch = sketches.length-1;
+			setSketchModified(false);
+			updateSketchButtonStates();
+		}
+	})
+}
+
+function setSketchModified(_isModified) {
 	isModified = _isModified;
-
+	updateSketchButtonStates();
-	// alert("isModified: " + isModified);
-	//console.log("setModified: " + isModified + (typeof(doNotClearCurrent) !== 'undefined' ? " (doNotClearCurrent: "+doNotClearCurrent+")" : "")); //TEMP
-
-	if (isModified) btnSave.enable();
-	else btnSave.disable();
-
-	//if (typeof(doNotClearCurrent) !== 'undefined' && !doNotClearCurrent) setCurrentSketchId(-1);
-
-	
-	//sketchModified  = isModified; /// ERROR?
 }
 
-function setCurrentSketchId(sId) {
+function updateSketchButtonStates() {
-	console.log("setCurrentSketchId: " + sId + " / " + numSavedSketches);
+	console.log('sketch: isModified',isModified,'curSketch',curSketch,'sketches.length',sketches.length);
-	// var enablePrev = false;
-	// var enableNext = false;
 
-	currentSketchId = sId;
+	if (isModified) {
-
+		btnSave.enable();
-	//clamp
-	if (currentSketchId > numSavedSketches) currentSketchId = numSavedSketches;
-	if (currentSketchId < 1) currentSketchId = 1;
-
-	//update textbox
-	//$("#txtSketch").val(currentSketchId);
-	
-	updatePrevNextButtonState();
 	}
-
+	else {
-function updatePrevNextButtonStateOnClear() {
-	if (numSavedSketches > 0) btnPrevious.enable();
-	btnNext.disable();
-	currentSketchId = numSavedSketches+1; //after the end of the list
 		btnSave.disable();
 	}
 
-function updatePrevNextButtonState() {
+	if (curSketch<sketches.length-1) {
-
-	//btnPrevious state
-	if (numSavedSketches==0 || currentSketchId < 2) {
-		btnPrevious.disable();
-	} else {
-		btnPrevious.enable();
-	}
-
-	//btnNext state
-	if (numSavedSketches==0 || currentSketchId >= numSavedSketches) {
-		btnNext.disable();
-	} else {
 		btnNext.enable();
-	}
-}
-
-function 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);
+		btnNext.disable();
-				//console.log("sketch content:\n" + response.data.data);
-				if (loadFromSvg(response.data.data)) {
-					setSketchModified(false, true);
-					setCurrentSketchId(response.data.id);
 	}
+
+	if (curSketch>0) {
+		btnPrevious.enable();
+	} else {
+		btnPrevious.disable();
 	}
+
 }
-	}).fail(function() {
+
-		console.log("loadSketch failed: ", response);
+function loadSketch(_curSketch) {
-	});
+	curSketch = _curSketch;
+
+	if (curSketch<0) curSketch=0;
+	if (curSketch>sketches.length-1) curSketch=sketches.length-1;
+
+	var id = sketches[curSketch];
+
+	console.log('sketch: loadSketch curSketch',curSketch,'id',id);
+
+	$.get(wifiboxURL + "/sketch", {id:id}, function(response) {
+		if (response.status=='success') {
+			console.log('sketch: loaded',response);
+			var svgData = response.data.data;
+			loadFromSvg(svgData);
+			setSketchModified(false);
+		} else {
+			console.log('error loading sketch: ',response);
+			listSketches();
+		}
+		
+	})
 }
 
 function saveSketch() {
-	svg = saveToSvg();
+	console.log("sketch: saveSketch");
-	console.log("generated SVG [" + _points.length + " points, " + svg.length + " bytes]:\n" + svg);
+	var svgData = saveToSvg();
+
+	$.post(wifiboxURL + "/sketch", {data: svgData}, function(response) {
+		console.log("sketch: saveSketch: response",response);
+		listSketches();
+	})
 
-	$.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);
-				numSavedSketches = response.data.id;
-				setCurrentSketchId(response.data.id);
-			}
-		}
-	}).fail(function() {
-		console.log("saveSketch failed: ", response);
-	});
-}
-
-function prevDoodle(e) {
-  console.log("f:prevDoodle(): " + currentSketchId + " / " + numSavedSketches);
-  //alert('prev ' + numSavedSketches);
-  //return;
-
-  //TODO: if (enabled) {
-	  var sketchId = (currentSketchId > 0) ? currentSketchId : numSavedSketches;
-	  if (sketchId > 1) sketchId--;
-
-
-	  //alert(sketchId);
-
-	  loadSketch(sketchId);
-  //}
-}
-
-function nextDoodle(e) {
-  console.log("f:nextDoodle()");
-  //alert('next ' + numSavedSketches);
-  //return;
-
-  //TODO: if (enabled) {
-	  var sketchId = (currentSketchId > 0) ? currentSketchId : numSavedSketches;
-	  if (sketchId < numSavedSketches) sketchId++;
-	  loadSketch(sketchId);
-  //}
 }

www/filemanager/index.html

@@ -6,14 +6,14 @@
 </head>
 <body>
 
-<a href="?"><img src="../img/logo/doodle3d.png" height="25"></a><br>
+<img src="../img/logo/doodle3d.png" height="25">
 <hr>
 <button id="btnSelectAll">Select all</button>
 <button id="btnDeselectAll">Deselect all</button>
 <button id="btnDelete">Delete</button>
 <button id="btnDownload">Download</button> <!-- <a id="link" href="#">Download</a> -->
 
-<form id="frmUpload" action="#"><button id="btnUpload">Upload</button><input id="uploads" type="file" accept="image/svg+xml" multiple/></form>
+<form id="frmUpload"><button id="btnUpload">Upload</button><input id="uploads" type="file" accept="image/svg+xml" multiple/></form>
 
 <span id="txtInfo"></span>
 

www/filemanager/js/main.js

@@ -1,27 +1,36 @@
-var api = 'http://10.0.0.40/d3dapi/sketch/';
+/*
+ * This file is part of the Doodle3D project (http://doodle3d.com).
+ *
+ * Copyright (c) 2014, Doodle3D
+ * This software is licensed under the terms of the GNU GPL v2 or later.
+ * See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
+ */
+
+// http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery
+function getURLParameter(name) {
+  return decodeURI((new RegExp('[&?]'+name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]);
+}
+
+var wifiboxURL = "";
+
+if (getURLParameter("r") != "null") wifiboxURL = 'http://192.168.5.1';
+if (getURLParameter("wifiboxURL") != "null") wifiboxURL = getURLParameter("wifiboxURL");
+
+var api = wifiboxURL+'/d3dapi/sketch/';
 
 $("#btnDelete").click(deleteSelectedSketches);
 $("#btnSelectAll").click(selectAll);
 $("#btnDeselectAll").click(deselectAll);
-// $("#btnUpload").click(upload);
 $("#uploads").change(upload);
 $("#btnDownload").click(download);
 
-$("#btnUpload").click(function() {
+$("#btnUpload").click(function(e) {
-  console.log('trigger')
+  e.preventDefault();
   $("#uploads").trigger('click');
 });
 
-// $("a").on("click", function () {
-//     var d = new Date().toISOString().slice(0, 19).replace(/-/g, "");
-//     $(this).attr("href", "data:application/octet-stream;"+encodeURIComponent("test")).attr("download", "file-" + d + ".svg");
-// });
-
-
 var isBusy = true;
-// var statusMessage = "";
 
-// updateFreeSpace();
 updateButtonStates();
 
 $.get(api+'list', function(data) { //?id=00003
@@ -38,7 +47,6 @@ $.get(api+'list', function(data) { //?id=00003
       console.log('done');
       isBusy = false;
       updateFreeSpace();
-      //updateStatusMessage('loading '+list.length+' sketches...');
       updateButtonStates();
     });
 
@@ -46,6 +54,9 @@ $.get(api+'list', function(data) { //?id=00003
     console.log('failure',data)
   }
 
+}).fail(function(status) {
+  alert("Error ("+status.status+") connecting to "+api+'list');
+  console.log(status);
 });
 
 function loadSketch(list,cb) {
@@ -77,7 +88,7 @@ function addItem(id,svgData,doPrepend) {
   else if (svgData.indexOf("CDATA")==-1) path = "";
   else path = svgData.split('d="')[1].split('"')[0]; 
 
-  var item = $('<div class="item" data="'+id+'">');
+  var item = $('<div class="item" data="'+id+'" title="'+id+'">');
   var svg = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 640 540"><path fill="none" stroke="black" stroke-width="2" d="'+path+'"></path></svg>';
   
   item.click(function() {
@@ -170,7 +181,6 @@ function uploadFile(files, index, next) {
     //process file
     var svg = convertSvg(evt.target.result);
 
-    // setTimeout(function() {
     $.post(api, {data:svg}, function(data) {
       if (data.status=='success') {
         var id = data.data.id;
@@ -183,11 +193,8 @@ function uploadFile(files, index, next) {
         } else {
           next(); //no more files, call back
         }
-
       }
     });
-    // },500);
-
 
   }
 
@@ -237,7 +244,11 @@ function convertSvg(svg) {
   var re = /([a-zA-Z])\s?([0-9]{1,}) ([0-9]{1,})/g;
   svg = svg.replace(re,"$1$2,$3");
   re = /<\/svg>/g;
-  return svg.replace(re,"<!--<![CDATA[d3d-keys {\"height\":5,\"outlineShape\":\"none\",\"twist\":0}]]>-->\n</svg>");
+  svg = svg.replace(re,"<!--<![CDATA[d3d-keys {\"height\":5,\"outlineShape\":\"none\",\"twist\":0}]]>-->\n</svg>");
+
+  svg = svg.replace("M0,0 ",""); //RC: hack
+
+  return svg;
 }
 
 function download() {

www/settings.html

@@ -173,13 +173,19 @@
         <small id="updateInfo"></small>
  	</fieldset>
 
-    <fieldset id="debugPanel">
+  <fieldset id="extraPanel">
- 		<legend>Debug</legend>
+    <legend>Sketches</legend>
- 		<input type="button" onclick="settingsWindow.downloadlogs()" name="downloadlogs" value="Download logs" class="button" id="downloadlogs"/>
+    <input type="button" onclick="settingsWindow.openFileManager()" name="btnFileMgr" value="Open FileManager" class="button" id="btnFileMgr"/>
     <input type="button" onclick="settingsWindow.downloadGcode()" name="downloadGcode" value="Download GCODE" class="button" id="downloadGcode"/>
     <input type="button" onclick="settingsWindow.downloadSvg()" name="downloadSvg" value="Download SVG" class="button" id="downloadSvg"/>
   </fieldset>
     
+  <fieldset id="debugPanel">
+ 		<legend>Debug</legend>
+ 		<input type="button" onclick="settingsWindow.downloadlogs()" name="downloadlogs" value="Download logs" class="button" id="downloadlogs"
+     />
+  </fieldset>
+  
   <fieldset id="restorePanel">
  		<legend>Restore</legend>
  		<input type="button" name="restoresettings" value="Restore settings to defaults" class="button" id="restoreSettings"/>