Merge branch 'master' into develop

Makefile

@@ -52,7 +52,9 @@ endif
 endef
 
 define Package/doodle3d-client/install
+
 	$(INSTALL_DIR) $(1)/www
+	$(INSTALL_DIR) $(1)/www/filemanager
 	$(INSTALL_DIR) $(1)/www/css
 	$(INSTALL_DIR) $(1)/www/img
 	#$(INSTALL_DIR) $(1)/www/js
@@ -69,6 +71,7 @@ define Package/doodle3d-client/install
 	$(CP) $(PKG_BUILD_DIR)/www/css/styles.min.css $(1)/www/css/
 	
 	$(CP) $(PKG_BUILD_DIR)/www/img/* $(1)/www/img/
+	$(CP) $(PKG_BUILD_DIR)/www/filemanager/* $(1)/www/filemanager/
 	
 ifeq ($(CONFIG_DOODLE3D_CLIENT_MINIFY_JS),y)
 		$(CP) $(PKG_BUILD_DIR)/www/js/doodle3d-client.min.js $(1)/www/js/

README.md

@@ -5,9 +5,10 @@ Doodle3D client app
 # How to build
 
 ## Prerequisites
-- get `npm`, the Node.js package manager, for instance using macports on OSX.
+- install npm, the Node.js package manager: `sudo port install npm`
-- (prerequisite) install Grunt: `sudo pm install -g grunt-cli`.
+- install Grunt: `sudo npm install -g grunt-cli`
-- run `npm install` in the project root to install project dependencies
+- run `npm install` in the **project root** to install project dependencies
 
-Finally run grunt to build minified css and js files. By default, it will keep
+## Build
+- run `grunt` in the project root to to build minified css and js files. By default, it will keep
 running to automatically rebuild when source files are changed.

js/AddScanDialog.js

@@ -0,0 +1,41 @@
+//var shapeResolution=3;
+var shapePopup;
+
+function initScanDialog() {
+  scanPopup = new Popup($("#popupScan"), $("#popupMask"));
+  $("#btnScanOk").on("onButtonClick", onBtnScanOk);
+  $("#btnCloseScan").on("onButtonClick", onBtnCloseScan);
+}
+
+function onBtnCloseScan() {
+  $('#imgGuide').hide();
+  $('#btnCloseScan').hide();
+}
+
+function onBtnScanOk() {
+  scanPopup.commit();
+}
+
+function showScanDialog() {
+  scanPopup.open();
+}
+
+function readURL(input) {
+
+    if (input.files && input.files[0]) {
+        var reader = new FileReader();
+
+        reader.onload = function (e) {
+          $('#imgGuide').attr('src', e.target.result);
+          $('#imgGuide').show();
+          $('#btnCloseScan').show();
+          scanPopup.commit();
+        }
+
+        reader.readAsDataURL(input.files[0]);
+    }
+}
+
+$("#fileScan").change(function(){
+    readURL(this);
+});

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,13 +59,14 @@ 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;
 			case 't': showWordArtDialog(); break;
 			case 'i': showShapeDialog(); break;
+			case 'T': showScanDialog(); break;
 			
 			case ';': moveShape(-5,0); break;
 			case '\'': moveShape(5,0); 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

@@ -13,6 +13,7 @@ var btnSettings, btnWordArt;
 var btnToggleEdit, buttonGroupEdit, btnZoom, btnMove, btnRotate;
 var btnToggleVerticalShapes, btnHeight, btnTwist, btnShape, btnConv, btnStraight, btnSine, btnDiv;
 var buttonGroupAdd, popupWordArt;
+var btnScan, popupScan;
 
 var state;
 var prevState;
@@ -43,8 +44,10 @@ function initButtonBehavior() {
 	buttonGroupAdd = $("#buttonGroupAdd");
 	btnShape = new Button("#btnShape");
 	btnWordArt = new Button("#btnWordArt");
+    btnScan = new Button("#btnScan");
 	popupWordArt = $("#popupWordArt");
 	popupShape = $("#popupShape");
+    popupScan = $("#popupScan");
 	popupMask = $("#popupMask");
 	logoPanel = $("#logopanel");
 	btnToggleEdit = new Button("#btnToggleEdit");
@@ -69,11 +72,12 @@ function initButtonBehavior() {
 	btnAdd.on("onButtonClick", onBtnAdd);
 	btnWordArt.on("onButtonClick", onBtnWordArt);
 	btnShape.on("onButtonClick", onBtnShape);
+    btnScan.on("onButtonClick", onBtnScan);
 	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);
@@ -89,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;
@@ -179,7 +185,7 @@ function initButtonBehavior() {
 	}
 
 	function onBtnNew(e) {
-		clearDoodle();
+		newSketch();
 	}
 
 	function onBtnWordArt(e) {
@@ -191,6 +197,11 @@ function initButtonBehavior() {
 		buttonGroupAdd.fadeOut();
 	}
 
+    function onBtnScan(e) {
+        showScanDialog();
+		buttonGroupAdd.fadeOut();
+    }
+    
 	btnSettings.on("onButtonClick", openSettingsWindow);
 
 	// 29-okt-2013 - we're not doing help for smartphones at the moment
@@ -414,8 +425,9 @@ function setState(newState,newHasControl) {
 		btnSave.disable();
 		break;
 	default:
-		updatePrevNextButtonState();
+		// updatePrevNextButtonState();
-	if (isModified) btnSave.enable();
+		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/gcodeGenerating.js

@@ -218,6 +218,7 @@ function subsituteVariables(gcode) {
     case "makerbot_replicator2x": printerType = "r2x"; break;
     case "makerbot_thingomatic": printerType = "t6"; break;
     case "makerbot_generic": printerType = "r2"; break;
+    case "_3Dison_plus": printerType = "r2"; break;
   }
   var heatedBedReplacement = (heatedbed)? "" : ";";
 

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");
-		wifiboxURL = hostname+"/d3dapi";
+  if (!hostname) hostname = "http://" + window.location.host;
-		wifiboxCGIBinURL = hostname+"/cgi-bin/d3dapi";
+
-	} else {
+  wifiboxURL = hostname+"/d3dapi";
-		wifiboxURL = "http://" + window.location.host + "/d3dapi";
+  wifiboxCGIBinURL = hostname+"/cgi-bin/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
@@ -74,6 +85,7 @@ $(function() {
   // initVerticalShapes();
   initWordArt();
   initShapeDialog();
+  initScanDialog();
 
   disableDragging();
   

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;
+	else {
-	if (currentSketchId < 1) currentSketchId = 1;
+		btnSave.disable();
-
-	//update textbox
-	//$("#txtSketch").val(currentSketchId);
-	
-	updatePrevNextButtonState();
-}
-
-function updatePrevNextButtonStateOnClear() {
-	if (numSavedSketches > 0) btnPrevious.enable();
-	btnNext.disable();
-	currentSketchId = numSavedSketches+1; //after the end of the list
-	btnSave.disable();
-}
-
-function updatePrevNextButtonState() {
-
-	//btnPrevious state
-	if (numSavedSketches==0 || currentSketchId < 2) {
-		btnPrevious.disable();
-	} else {
-		btnPrevious.enable();
 	}
 
-	//btnNext state
+	if (curSketch<sketches.length-1) {
-	if (numSavedSketches==0 || currentSketchId >= numSavedSketches) {
-		btnNext.disable();
-	} else {
 		btnNext.enable();
+	} else {
+		btnNext.disable();
 	}
+
+	if (curSketch>0) {
+		btnPrevious.enable();
+	} else {
+		btnPrevious.disable();
+	}
+
 }
 
-function loadSketch(sketchId) {
+function loadSketch(_curSketch) {
+	curSketch = _curSketch;
 
-	$.ajax({
+	if (curSketch<0) curSketch=0;
-		url: wifiboxURL + "/sketch/" + sketchId,
+	if (curSketch>sketches.length-1) curSketch=sketches.length-1;
-		dataType: 'json',
+
-		type: 'GET',
+	var id = sketches[curSketch];
-//			timeout: this.timeoutTime,
+
-		success: function(response) {
+	console.log('sketch: loadSketch curSketch',curSketch,'id',id);
-			if (response.status == 'error' || response.status == 'fail') {
+
-				console.log("loadSketch fail/error: " + response.msg + " -- ", response);
+	$.get(wifiboxURL + "/sketch", {id:id}, function(response) {
-			} else {
+		if (response.status=='success') {
-				console.log("loadSketch success: loaded id #" + response.data.id, response);
+			console.log('sketch: loaded',response);
-				//console.log("sketch content:\n" + response.data.data);
+			var svgData = response.data.data;
-				if (loadFromSvg(response.data.data)) {
+			loadFromSvg(svgData);
-					setSketchModified(false, true);
+			setSketchModified(false);
-					setCurrentSketchId(response.data.id);
+		} else {
-				}
+			console.log('error loading sketch: ',response);
-			}
+			listSketches();
 		}
-	}).fail(function() {
+		
-		console.log("loadSketch failed: ", response);
+	})
-	});
 }
 
 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);
-  //}
 }

less/base_centerpanel.less

@@ -57,6 +57,7 @@
   left: 0;
   width: 78%;
   height: 100%;
+  text-align: center;
 }
 
 #mycanvas {
@@ -127,4 +128,24 @@
 
 }
 
+#mycanvas {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+#imgGuide {
+  // z-index: -1000;
+  // position: absolute;
+  // -webkit-filter: contrast(400%);   
+  //-webkit-filter: brightness(100%);
+  // opacity: 50%;
+  opacity: 0.4;
+  filter: alpha(opacity=40);
+  pointer-events:none;
+  
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+  margin-left: auto;
+}
 

less/buttons.less

@@ -130,6 +130,16 @@
   left: 4px;
   position: absolute;
 }
+
+#btnCloseScan {
+  top: 4px;
+  right: 8px;
+  position: absolute; 
+  display: none;
+  opacity: 0.7;
+  filter: alpha(opacity=70);
+}
+
 #buttonGroupEdit {
   position: absolute;
   top: 5px;
@@ -163,10 +173,10 @@
   margin-top: -60%;
   margin-left: 70%;
   width: 200%;
-  max-width: 140px;    /*fixme: can this grow based on it's content?*/ 
+  max-width: 240px;    /*fixme: can this grow based on it's content?*/ 
   padding: 5% 0 5% 5%;
-  #btnWordArt, #btnShape {
+  #btnWordArt, #btnShape, #btnScan {
-    width: 45%;
+    width: 30%;
   }
 }
 

less/popup.less

@@ -47,6 +47,21 @@
 	}
 }
 
+#popupScan {
+  width: 330px;
+	height:210px;
+	margin-left: -165px;
+	margin-top: -105px;
+	
+	input[type="file"] {
+		width: 98%;
+	}
+	#btnScanOk {
+		float: right;
+		margin: 15px 0 0 0;
+	}
+}
+
 #popupShape {
 	width: 310px;
 	margin-left: -155px;

www/css/settings.css

@@ -17,6 +17,7 @@ body,th,td {
 	/*min-width: 370px;*/
 	width: 100%;
 	height: 100%;
+	overflow: scroll;
 }
 /*form#settingsForm {*/
 /*width: 100% auto;*/

www/filemanager/css/style.css

@@ -0,0 +1,49 @@
+body {
+  font-family: Helvetica, Abel, Arial;
+  font-size: 1em;
+
+  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
+  -moz-user-select: none; /* mozilla browsers */
+  -khtml-user-select: none; /* webkit (konqueror) browsers */
+  -ms-user-select: none; /* IE10+ */
+}
+
+button {
+  font-size: 1em;
+}
+
+div.item {
+  width:150px;
+  height:130px;
+  border:1px solid black;
+  display: inline-block;
+  overflow: hidden;
+  background-color: white;
+  margin-right: 5px;
+}
+
+div.item.selected {
+  background-color: #7cf;
+}
+
+div.item input[type='checkbox'] {
+  position: absolute;
+}
+
+#frmUpload {
+  display: inline;
+}
+
+input[type='file'] {
+  width: 1px;
+  opacity:0    
+}
+
+#txtInfo {
+  float: right;
+  /*display: inline-block;*/
+}
+
+img#logo {
+  cursor: pointer;
+}

www/filemanager/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Doodle3D</title>
+  <link href="css/style.css" rel="stylesheet" media="screen">
+</head>
+<body>
+
+<img id="logo" 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"><button id="btnUpload">Upload</button><input id="uploads" type="file" accept="image/svg+xml" multiple/></form>
+
+<span id="txtInfo"></span>
+
+<hr>
+<form>
+<div id="svgContainer"></div>
+</form>
+
+<script src="../js/libs/jquery-1-9-1.min.js"></script>
+<script src="js/main.js"></script>
+
+
+</body>
+</html>

www/filemanager/js/main.js

@@ -0,0 +1,267 @@
+/*
+ * 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/';
+
+$("#logo").click(onLogoClick)
+$("#btnDelete").click(deleteSelectedSketches);
+$("#btnSelectAll").click(selectAll);
+$("#btnDeselectAll").click(deselectAll);
+$("#uploads").change(upload);
+$("#btnDownload").click(download);
+
+$("#btnUpload").click(function(e) {
+  e.preventDefault();
+  $("#uploads").trigger('click');
+});
+
+var isBusy = true;
+
+updateButtonStates();
+
+$.get(api+'list', function(data) { //?id=00003
+
+  if (data.status=='success') {
+    var list = data.data.list;
+    // list.reverse();
+
+    isBusy = true;
+    updateButtonStates();
+    updateStatusMessage('loading '+list.length+' sketches...');
+
+    loadSketch(list, function() {
+      console.log('done');
+      isBusy = false;
+      updateFreeSpace();
+      updateButtonStates();
+    });
+
+  } else {
+    console.log('failure',data)
+  }
+
+}).fail(function(status) {
+  alert("Error ("+status.status+") connecting to "+api+'list');
+  console.log(status);
+});
+
+function onLogoClick() {
+  location.href='/'+location.search;
+}
+
+function loadSketch(list,cb) {
+  var id = list.pop();
+  
+  $.get(api+'?id='+id, function(data) {
+
+    if (data.status=='success') {
+      addItem(id,data.data.data);
+    }
+
+    updateStatusMessage('loading '+list.length+' sketches...');
+
+    if (list.length>0) {
+      loadSketch(list,function() {
+        cb();
+      })
+    } else {
+      cb();
+    }
+  });
+}
+
+function addItem(id,svgData,doPrepend) {
+  var path;
+
+  if (!svgData) path = "";
+  else if (typeof(svgData)!='string') path = "";
+  else if (svgData.indexOf("CDATA")==-1) path = "";
+  else path = svgData.split('d="')[1].split('"')[0]; 
+
+  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() {
+    $(this).toggleClass('selected');
+    console.log($(this).attr("data"));
+    updateButtonStates();
+  })
+  item.append(svg);
+
+  if (doPrepend) $('#svgContainer').prepend(item);
+  else $('#svgContainer').append(item);
+  item.hide().fadeIn();
+
+  updateButtonStates();
+}
+
+function deleteSketches(list,cb) {
+  var id = list.pop();
+  
+  $.post(api+'delete', {id:id}, function(data) {
+
+    $('.item[data='+id+']').fadeOut('slow',function() {
+      $(this).remove(); //remove when effect is finished
+    });
+
+    updateStatusMessage("Deleting " + list.length + ' sketches...');
+
+    if (list.length>0) {
+      deleteSketches(list,cb);
+    } else {
+      cb();
+    }
+
+  });
+}
+
+function deleteSelectedSketches() {
+  if (confirm('Do you want to delete '+$('.item.selected').length+' drawings?')) {
+
+    var ids = [];
+    $('.item.selected').map(function(){
+      ids.push($(this).attr('data'));
+    });
+
+    isBusy = true;
+    updateButtonStates();
+
+    deleteSketches(ids,function() {
+      console.log('done deleting sketches');
+      isBusy = false;
+      updateButtonStates();
+      updateFreeSpace();
+    });
+
+    deselectAll();
+    updateButtonStates();
+  }
+}
+
+function selectAll() {
+  $('.item').addClass('selected');
+  updateButtonStates();
+}
+
+function deselectAll() {
+  $('.item').removeClass('selected');
+  updateButtonStates();
+}
+
+function updateButtonStates() {
+  var numItems = $('.item').length;
+  var numSelected = $('.item.selected').length;
+  var noSelection = numSelected==0;
+
+  $("#btnDelete").attr("disabled",isBusy || noSelection);
+  $("#btnDownload").attr("disabled",isBusy || noSelection);
+  $("#btnDeselectAll").attr("disabled",isBusy || noSelection);
+  $("#btnSelectAll").attr("disabled",isBusy || numItems==0);
+  $("#btnUpload").attr("disabled",isBusy || !noSelection);
+  $("#btnDelete").text("Delete" + (noSelection ? "" :  " ("+numSelected+")"));
+  $("#btnDownload").text("Download" + (noSelection ? "" :  " ("+numSelected+")"));
+}
+
+function uploadFile(files, index, next) {
+  var reader = new FileReader();
+  reader.readAsText(files[index], "UTF-8");
+  reader.onload = function (evt) {
+    console.log("onload",index); //,files[index],evt.target);
+
+    //process file
+    var svg = convertSvg(evt.target.result);
+
+    $.post(api, {data:svg}, function(data) {
+      if (data.status=='success') {
+        var id = data.data.id;
+        addItem(id,svg,true);
+
+        updateStatusMessage('uploading '+(files.length-index)+' sketches...');
+
+        if (index<files.length-1) {
+          uploadFile(files, index+1, next);
+        } else {
+          next(); //no more files, call back
+        }
+      }
+    });
+
+  }
+
+  reader.onerror = function (evt) {
+    console.log("onerror");
+    next(); //stop processing file(s), call back/
+  }
+}
+
+function upload() {
+  var files = $("#uploads")[0].files
+  var reader = new FileReader();
+  var cur = 0;
+  isBusy = true;
+  updateButtonStates();
+  updateStatusMessage("Uploading " + files.length + " files");
+
+  uploadFile(files, cur, function() {
+    console.log("done");
+    isBusy = false;
+    updateButtonStates();
+    updateFreeSpace();
+    $("#frmUpload")[0].reset();
+  })
+}
+
+function updateFreeSpace() {
+  $.get(api+'status', function(data) { //?id=00003
+    if (data.status=='success') {
+      var numSketches = data.data.number_of_sketches;
+      var freeKb = Math.round(data.data.available/1024);
+      updateStatusMessage(numSketches+" sketches, "+freeKb+"k bytes free");
+    }
+  });
+}
+
+function updateStatusMessage(msg) {
+  $("#txtInfo").text(msg);
+}
+
+function convertSvg(svg) {
+  if (!svg) return "";
+  if (typeof(svg)!='string') return "";
+  if (svg.indexOf("CDATA")>-1) return svg; //assume this SVG is already ok
+
+  //this fixes SVG's created by the kunstcentraal app
+  var re = /([a-zA-Z])\s?([0-9]{1,}) ([0-9]{1,})/g;
+  svg = svg.replace(re,"$1$2,$3");
+  re = /<\/svg>/g;
+  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() {
+  $('.item.selected').each(function() {
+    var id = $(this).attr('data');
+    var svgData = $(this).html();
+    console.log('downloading',id);
+    $('<a target="_blank" href="data:image/svg+xml,'+encodeURIComponent(svgData)+'" download="'+id+'.svg">')[0].click();
+  });
+}
+

www/index.html

@@ -40,6 +40,7 @@
     <div id="buttonGroupAdd" class="buttonGroup">
       <img id="btnWordArt" class="btn" src="img/buttons/btnWordArt.png" />
       <img id="btnShape" class="btn" src="img/buttons/btnShape.png" />
+      <img id="btnScan" class="btn" src="img/buttons/btnGuide.png" />
     </div>
 
   </div>
@@ -75,10 +76,12 @@
     </div>
 
     <div id="drawareacontainer">
-
       <div id="canvasContainers">
+
         <div id="mycanvasContainer">
+          <img id="imgGuide">
           <canvas id="mycanvas"></canvas>
+          <img id="btnCloseScan" class="btn" src="img/buttons/btnClose.png" />
         </div>
 
         <div id="previewContainer">
@@ -126,6 +129,15 @@
     </div>
   </div>
     
+  <div class="popup" id="popupScan">
+    <div class="content">
+      <h1>Use photo as a guide</h1>
+      <input id="fileScan" type="file"/>
+      <!-- <input id="txtDummy" type="text"/> -->
+      <img id="btnScanOk" class="btn" src="img/buttons/btnOk.png">
+    </div>
+  </div>
+
   <div class="popup" id="popupShape">
     <div class="content">
       <h1>Add a new shape</h1>

www/settings.html

@@ -173,14 +173,20 @@
         <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>
     
-    <fieldset id="restorePanel">
+  <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"/>
  		<span id="restoreState"></span>