added a button for importing photos for tracing by hand

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

@@ -66,6 +66,7 @@ function initKeyboard() {
 			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/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,6 +72,7 @@ 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);
@@ -191,6 +195,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

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

@@ -74,6 +74,7 @@ $(function() {
   // initVerticalShapes();
   initWordArt();
   initShapeDialog();
+  initScanDialog();
 
   disableDragging();
   

less/base_centerpanel.less

@@ -127,4 +127,20 @@
 
 }
 
+#mycanvas {
+  position: absolute;
+}
+#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%;
+  width: 100%;
+}
 

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/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>