added absolute conversion to path and minor other changes

src/octoprint/plugins/svgtogcode/__init__.py

@@ -235,7 +235,7 @@ class SvgToGcodePlugin(octoprint.plugin.SlicerPlugin,
 
 	def get_assets(self):
 		return dict(
-			js=[ "js/convert.js", "js/working_area.js", "js/gcode_parser.js", "js/lib/snap.svg-min.js", "js/lib/photobooth_min.js", "js/matrix_oven.js", "js/render_fills.js", "js/drag_scale_rotate.js"],
+			js=[ "js/convert.js", "js/working_area.js", "js/gcode_parser.js", "js/lib/snap.svg-min.js", "js/lib/photobooth_min.js", "js/matrix_oven.js", "js/render_fills.js", "js/drag_scale_rotate.js", "js/svg2gcode.js"],
 			less=["less/svgtogcode.less"],
 			css=["css/svgtogcode.css", "css/mrbeam.css"]
 		)
@@ -344,7 +344,7 @@ class SvgToGcodePlugin(octoprint.plugin.SlicerPlugin,
 		if not machinecode_path:
 			path, _ = os.path.splitext(model_path)
 			machinecode_path = path + ".gco"
-		
+
 		self._svgtogcode_logger.info("### Slicing %s to %s using profile stored at %s" % (model_path, machinecode_path, profile_path))
 
 		## direct call

src/octoprint/plugins/svgtogcode/static/js/convert.js

@@ -22,7 +22,7 @@ $(function(){
 		self.profiles = ko.observableArray();
 		self.defaultSlicer = undefined;
 		self.defaultProfile = undefined;
-		
+
 		// expert settings
 		self.showHints = ko.observable(false);
 		self.showExpertSettings = ko.observable(false);
@@ -37,7 +37,7 @@ $(function(){
 		self.minSpeed = ko.observable(20);
 		self.fill_areas = ko.observable(false);
 		self.show_fill_areas_checkbox = ko.observable(false);
-		
+
 		// image engraving stuff
 		// preset values are a good start for wood engraving
 		self.images_placed = ko.observable(false);
@@ -46,16 +46,16 @@ $(function(){
 		});
 		self.imgIntensityWhite = ko.observable(0);
 		self.imgIntensityBlack = ko.observable(500);
-		self.imgFeedrateWhite = ko.observable(1500); 
+		self.imgFeedrateWhite = ko.observable(1500);
 		self.imgFeedrateBlack = ko.observable(250);
 		self.imgDithering = ko.observable(false);
 		self.imgSharpening = ko.observable(1);
 		self.imgContrast = ko.observable(1);
 		self.beamDiameter = ko.observable(0.2);
-		
+
 		self.sharpeningMax = 25;
 		self.contrastMax = 2;
-		
+
 		// preprocessing preview ... returns opacity 0.0 - 1.0
 		self.sharpenedPreview = ko.computed(function(){
 			if(self.imgDithering()) return 0;
@@ -73,7 +73,6 @@ $(function(){
 				return contrastPercents - sharpeningPercents/2;
 			}
 		}, self);
-		
 
 		self.maxSpeed.subscribe(function(val){
 			self._configureFeedrateSlider();
@@ -91,7 +90,7 @@ $(function(){
 				if(self.laserIntensity() === undefined){
 					var intensity = self.settings.settings.plugins.svgtogcode.defaultIntensity();
 					self.laserIntensity(intensity);
-				} 
+				}
 				if(self.laserSpeed() === undefined){
 					var speed = self.settings.settings.plugins.svgtogcode.defaultFeedrate();
 					self.laserSpeed(speed);
@@ -107,7 +106,7 @@ $(function(){
 				self.convert();
 			}
 		};
-		
+
 		self.cancel_conversion = function(){
 			if(self.slicing_in_progress()){
 				//console.log('cancel slicing', self.slicing_in_progress());
@@ -139,14 +138,14 @@ $(function(){
 				if(uniqueDesigns > 1){
 					gcode_name += "_"+(uniqueDesigns-1)+"more";
 				}
-				
+
 				return gcode_name;
-			} else { 
+			} else {
 				console.error("no designs placed.");
 				return;
 			}
 		};
-		
+
 		self.settingsString = ko.computed(function(){
 			var intensity = self.laserIntensity();
 			var feedrate = self.laserSpeed();
@@ -248,7 +247,7 @@ $(function(){
 			} else {
 				self.slicing_in_progress(true);
 				self.workingArea.getCompositionSVG(self.fill_areas(), function(composition){
-					self.svg = composition;	
+					self.svg = composition;
 					var filename = self.gcodeFilename() + self.settingsString() + '.gco';
 					var gcodeFilename = self._sanitize(filename);
 
@@ -279,6 +278,10 @@ $(function(){
 						data.gcodeFilesToAppend = self.gcodeFilesToAppend;
 					}
 
+					var snapelement = snap.select("#userContent");
+					snapelement.bake(false, 5);
+					data.gcodedata = snapelement.toGcode(self.laserSpeed(),	self.laserIntensity(), self.pierceTime());
+
 					$.ajax({
 						url: API_BASEURL + "files/convert",
 						type: "POST",
@@ -286,7 +289,6 @@ $(function(){
 						contentType: "application/json; charset=UTF-8",
 						data: JSON.stringify(data)
 					});
-
 				});
 			}
 		};
@@ -303,7 +305,7 @@ $(function(){
 			self._configureFeedrateSlider();
 			self._configureImgSliders();
 		};
-		
+
 		self.onSlicingProgress = function(slicer, model_path, machinecode_path, progress){
 			self.slicing_progress(progress);
 		};
@@ -389,7 +391,7 @@ $(function(){
 		self._calcRealSpeed = function(sliderVal){
 			return Math.round(self.minSpeed() + sliderVal/100 * (self.maxSpeed() - self.minSpeed()));
 		};
-		
+
 		self._configureImgSliders = function() {
 			self.contrastSlider = $("#svgtogcode_contrast_slider").slider({
 				step: .1,
@@ -400,7 +402,7 @@ $(function(){
 			}).on("slide", function(ev){
 				self.imgContrast(ev.value);
 			});
-			
+
 			self.sharpeningSlider = $("#svgtogcode_sharpening_slider").slider({
 				step: 1,
 				min: 1,
@@ -419,9 +421,9 @@ $(function(){
 		});
 
 	}
-	
+
-    ADDITIONAL_VIEWMODELS.push([VectorConversionViewModel, 
+    ADDITIONAL_VIEWMODELS.push([VectorConversionViewModel,
-		["loginStateViewModel", "settingsViewModel", "printerStateViewModel", "workingAreaViewModel", "gcodeFilesViewModel"], 
+		["loginStateViewModel", "settingsViewModel", "printerStateViewModel", "workingAreaViewModel", "gcodeFilesViewModel"],
 		document.getElementById("dialog_vector_graphics_conversion")]);
-	
+
 });

src/octoprint/plugins/svgtogcode/static/js/drag_scale_rotate.js

@@ -1,8 +1,8 @@
 //    Drag, Scale & Rotate - a snapsvg.io plugin to free transform objects in an svg.
 //    Copyright (C) 2015  Teja Philipp <osd@tejaphilipp.de>
-//    
+//
 //    heavily inspired by http://svg.dabbles.info
-//    
+//
 //    This program is free software: you can redistribute it and/or modify
 //    it under the terms of the GNU Affero General Public License as
 //    published by the Free Software Foundation, either version 3 of the
@@ -19,10 +19,10 @@
 
 
 Snap.plugin(function (Snap, Element, Paper, global) {
-	
+
 	/**
-	 * 
+	 *
-	 * 
+	 *
 	 * @returns {undefined}
 	 */
 	Element.prototype.transformable = function () {
@@ -35,13 +35,13 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 		elem.click(function(){ elem.ftCreateHandles() });
 		return elem;
 
-		
+
 	};
-	
+
 	/**
-	 * Adds transparent fill if not present. 
+	 * Adds transparent fill if not present.
-	 * This is useful for dragging the element around. 
+	 * This is useful for dragging the element around.
-	 * 
+	 *
 	 * @returns {path}
 	 */
 	Element.prototype.add_fill = function(){
@@ -67,7 +67,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 
 });
 
-	
+
 /**
  * Free transform plugin heavily inspired by http://svg.dabbles.info
  */
@@ -79,13 +79,13 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 			handleFill: "red",
 			handleStrokeDashPreset: [5,5],
 			handleStrokeWidth: 2,
-			handleLength: 18,
+			handleLength: 10,
-			handleRadius: 16, 
+			handleRadius: 16,
 			unscale: 1,
 			handleStrokeDash: "5,5",
 		};
-		
+
-		Element.prototype.ftToggleHandles = function(){	
+		Element.prototype.ftToggleHandles = function(){
 			if(this.data('handlesGroup')){
 				this.ftRemoveHandles();
 			} else {
@@ -97,10 +97,10 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 			this.ftInit();
 			var freetransEl = this;
 			var bb = freetransEl.getBBox();
-			
+
 			var rotateDragger = this.paper.select('#userContent').circle(bb.cx + bb.width/2 + ftOption.handleLength * ftOption.unscale, bb.cy, ftOption.handleRadius * ftOption.unscale ).attr({ fill: ftOption.handleFill });
 			var translateDragger = this.paper.select('#userContent').circle(bb.cx, bb.cy, ftOption.handleRadius * ftOption.unscale).attr({ fill: ftOption.handleFill });
-			
+
 			var joinLine = freetransEl.ftDrawJoinLine( rotateDragger, ftOption.handleStrokeWidth * ftOption.unscale);
 			var handlesGroup = this.paper.select('#userContent').g( joinLine, rotateDragger, translateDragger );
 
@@ -109,19 +109,19 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 
 			freetransEl.data( "scaleFactor", calcDistance( bb.cx, bb.cy, rotateDragger.attr('cx'), rotateDragger.attr('cy') ) );
 
-			translateDragger.drag( 	
+			translateDragger.drag(
-				elementDragMove.bind( translateDragger, freetransEl ), 
+				elementDragMove.bind( translateDragger, freetransEl ),
 				elementDragStart.bind( translateDragger, freetransEl ),
-				elementDragEnd.bind( translateDragger, freetransEl ) 
+				elementDragEnd.bind( translateDragger, freetransEl )
 			);
 
 			freetransEl.unclick();
 			freetransEl.data("click", freetransEl.click( function() {  this.ftRemoveHandles() } ) );
 
-			rotateDragger.drag( 
+			rotateDragger.drag(
-				dragHandleRotateMove.bind( rotateDragger, freetransEl ), 
+				dragHandleRotateMove.bind( rotateDragger, freetransEl ),
 				dragHandleRotateStart.bind( rotateDragger, freetransEl  ),
-				dragHandleRotateEnd.bind( rotateDragger, freetransEl  ) 
+				dragHandleRotateEnd.bind( rotateDragger, freetransEl  )
 			);
 			freetransEl.ftStoreInitialTransformMatrix();
 			freetransEl.ftHighlightBB();
@@ -134,8 +134,8 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 			this.data("tx", 0);
 			this.data("ty", 0);
 			this.attr({class:'_freeTransformInProgress'});
-			
+
-			ftOption.unscale = 1 / this.paper.select('#scaleGroup').transform().localMatrix.a;
+			ftOption.unscale = 1 / this.paper.select('#scaleGroup').transform().globalMatrix.a;
 			this.data('unscale', ftOption.unscale);
 			ftOption.handleStrokeDash = ftOption.handleStrokeDashPreset.map(function(v){ return v*ftOption.unscale; }).join(',');
 			return this;
@@ -153,11 +153,11 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 			this.data('ocy', this.attr('cy') );
 			return this;
 		}
-		
+
 		Element.prototype.ftStoreInitialTransformMatrix = function() {
 			this.data('initialTransformMatrix', this.transform().localMatrix );
 			return this;
-		};	
+		};
 
 		Element.prototype.ftGetInitialTransformMatrix = function() {
 			return this.data('initialTransformMatrix');
@@ -191,10 +191,10 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 
 			return this;
 		};
-		
+
 		Element.prototype.ftUpdateTransform = function() {
 			//console.log("translate: ", this.data('tx'), this.data('ty'), 'rotate: ', this.data('angle'), 'scale: ', this.data('scale'));
-			var tstring = "t" + this.data("tx") + "," + this.data("ty") + this.ftGetInitialTransformMatrix().toTransformString() + "r" + this.data("angle") + 'S' + this.data("scale" );		
+			var tstring = "t" + this.data("tx") + "," + this.data("ty") + this.ftGetInitialTransformMatrix().toTransformString() + "r" + this.data("angle") + 'S' + this.data("scale" );
 			this.attr({ transform: tstring });
 			this.data("bbT") && this.ftHighlightBB(this.paper.select('#userContent'));
 			this.ftReportTransformation();
@@ -204,17 +204,17 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 		Element.prototype.ftHighlightBB = function() {
 			this.data("bbT") && this.data("bbT").remove();
 			this.data("bb") && this.data("bb").remove();
-			
+
 			// transformed bbox
 			this.data("bbT", this.paper.rect( rectObjFromBB( this.getBBox(1) ) )
 							.attr({ fill: "none", stroke: ftOption.handleFill, strokeWidth: ftOption.handleStrokeWidth, strokeDasharray: ftOption.handleStrokeDashPreset.join(',') })
-							.transform( this.transform().global.toString() ) );
+							.transform( this.transform().local.toString() ) );
 			// outer bbox
 			this.data("bb", this.paper.select('#userContent').rect( rectObjFromBB( this.getBBox() ) )
-							.attr({ fill: "none", stroke: 'gray', strokeWidth: ftOption.handleStrokeWidth, strokeDasharray: ftOption.handleStrokeDash }) );
+							.attr({ fill: "none", stroke: 'gray', strokeWidth: 0.6, strokeDasharray: [2,2] }) );
 			return this;
 		};
-		
+
 		Element.prototype.ftReportTransformation = function(){
 			if(this.data('ftCallbacks') && this.data('ftCallbacks').length > 0){
 				for (var idx = 0; idx < this.data('ftCallbacks').length; idx++) {
@@ -230,9 +230,9 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 				this.data('ftCallbacks').push(callback);
 			}
 		};
-		
+
 		Element.prototype.ftDisableRotate = function(){
-			this.data('block_rotation', true);	
+			this.data('block_rotation', true);
 		};
 	});
 
@@ -254,7 +254,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 		var dragHandle = this;
 		var unscale = mainEl.data('unscale');
 		var bb = mainEl.data('obb');
-		
+
 		var udx = dx*unscale;
 		var udy = dy*unscale;
 
@@ -287,22 +287,22 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 
 	function dragHandleRotateEnd( mainElement ) {
 	};
-	
+
 
 	function dragHandleRotateMove( mainEl, dx, dy, x, y, event ) {
 		var handle = this;
 		var mainBB = mainEl.getBBox();
 		var unscale = mainEl.data('unscale');
 		handle.attr({ cx: +handle.data('ocx') + dx*unscale, cy: +handle.data('ocy') + dy*unscale });
-		
+
 		if(!mainEl.data('block_rotation')){
 			var angle = Snap.angle( mainBB.cx, mainBB.cy, handle.attr('cx'), handle.attr('cy') ) - 180;
 			if(event.shiftKey){
-				angle = Math.round(angle/30) * 30;
+				angle = Math.round(angle/15) * 15;
-			} 
+			}
 			mainEl.data("angle", angle );
 		}
-		
+
 		var distance = calcDistance( mainBB.cx, mainBB.cy, handle.attr('cx'), handle.attr('cy') );
 		var scale = distance / mainEl.data("scaleFactor");
 		if(event.shiftKey){
@@ -311,7 +311,7 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 		mainEl.data("scale", scale );
 
 		mainEl.ftUpdateTransform();
-		mainEl.ftDrawJoinLine( handle );	
+		mainEl.ftDrawJoinLine( handle );
 	};
 
 	function calcDistance(x1,y1,x2,y2) {

src/octoprint/plugins/svgtogcode/static/js/svg2gcode.js

@@ -0,0 +1,154 @@
+Snap.plugin(function (Snap, Element, Paper, global) {
+  /**
+   * generates and returns the svg as gcode
+   *
+   * @param {integer} laserSpeed : value for laser speed
+   * @param {integer} laserIntensity : value for laser intensity
+   * @param {integer} pierceTime : value for pierce time
+   * @returns {list}
+   */
+  Element.prototype.toGcode = function (laserSpeed,	laserIntensity, pierceTime) {
+    var gCodeList = [];
+
+    gCodeList.push(";Generated with svg2gcode Version 0.1\n");
+    gCodeList.push("G21\n");
+    //gCodeList.push("G1F" + laserSpeed + "\n");
+
+    svgWidth  = this.paper.attr('viewBox').width;
+    svgHeight = this.paper.attr('viewBox').height;
+    feedrateSet = 0;
+
+    var elem = this.selectAll("path");
+    for (var i = 0; i < elem.length; i++) {
+      gCodeList.push(elem[i].pathStringToGCode(laserIntensity, laserSpeed, pierceTime));
+    }
+
+    // Always append a M5 command to be sure the Laser is OFF
+    gCodeList.push("\nM5");
+
+    return gCodeList;
+  }
+
+  Element.prototype.pathStringToGCode = function (laserIntensity, laserSpeed, pierceTime) {
+    if (this.type !== "path") {
+      return this;
+    }
+    var gcode = [];
+    var startP = [0, 0];
+    var lastP = [0, 0];
+    var lastXstr = "";
+    var lastYstr = "";
+    var xStr = "";
+    var yStr = "";
+    var laser = 0;
+    var arr = Snap.parsePathString(Snap.path.toAbsolute(this.realPath));
+    gcode.push(";NEW PATH STRING")
+    for (var i = 0; i < arr.length; i++) {
+      if (arr[i][0] == "M") {
+        xStr = Math.round(arr[i][1] * 100) / 100;
+        yStr = Math.round((svgHeight - arr[i][2]) * 100) / 100;
+        if (laser == 1) {
+          gcode.push("M3S0");
+        }
+        if (xStr != lastXstr && yStr != lastYstr) {
+          gcode.push("G0X" + xStr + "Y" + yStr);
+          lastXstr = xStr;
+          lastYstr = yStr;
+        } else if (xStr != lastXstr) {
+          gcode.push("G0X" + xStr);
+          lastXstr = xStr;
+        } else if (yStr != lastYstr) {
+          gcode.push("G0Y" + yStr);
+          lastYstr = yStr;
+        }
+        if (feedrateSet == 0) {
+          gcode.push("G1F" + laserSpeed);
+          feedrateSet = 1;
+        }
+        gcode.push("M3S" + laserIntensity);
+        laser = 1
+        if (pierceTime != 0) {
+          gcode.push("G4P" + pierceTime);
+        }
+        startP = [arr[i][1], (svgHeight - arr[i][2])];
+        lastP = startP;
+      } else if (arr[i][0] == "L") {
+        xStr = Math.round(arr[i][1] * 100) / 100;
+        yStr = Math.round((svgHeight - arr[i][2]) * 100) / 100;
+        if (xStr != lastXstr && yStr != lastYstr) {
+          gcode.push("G1X" + xStr + "Y" + yStr);
+          lastXstr = xStr;
+          lastYstr = yStr;
+        } else if (xStr != lastXstr) {
+          gcode.push("G1X" + xStr);
+          lastXstr = xStr;
+        } else if (yStr != lastYstr) {
+          gcode.push("G1Y" + yStr);
+          lastYstr = yStr;
+        }
+        lastP = [arr[i][1], (svgHeight - arr[i][2])];
+      } else if (arr[i][0] == "H") {
+        xStr = Math.round(arr[i][1] * 100) / 100;
+        gcode.push("G1X" + xStr);
+        lastXstr = xStr;
+        lastP = [arr[i][1], lastP[1]];
+      } else if (arr[i][0] == "V") {
+        yStr = Math.round((svgHeight - arr[i][1]) * 100) / 100;
+        gcode.push("G1Y" + yStr);
+        lastYstr = yStr;
+        lastP = [lastP[0], (svgHeight - arr[i][1])];
+      } else if (arr[i][0] == "C") {
+        var x0 = lastP[0];
+        var y0 = lastP[1];
+        var x1 = arr[i][1];
+        var y1 = (svgHeight - arr[i][2]);
+        var x2 = arr[i][3];
+        var y2 = (svgHeight - arr[i][4]);
+        var x3 = arr[i][5];
+        var y3 = (svgHeight - arr[i][6]);
+        var tmp = Snap.path.getTotalLength("M" + lastP[0] + "," + lastP[1] + "C" + x1 + "," + y1 + "," + x2 + "," + y2 + "," + x3 + "," + y3);
+        var range = Math.round(tmp) * 10;
+        for (var t = 1; t <= range; t++) {
+          obj = Snap.path.findDotsAtSegment(x0, y0, x1, y1, x2, y2, x3, y3, t / range)
+          xStr = Math.round(obj.x * 100) / 100;
+          yStr = Math.round(obj.y * 100) / 100;
+          if (xStr != lastXstr && yStr != lastYstr) {
+            gcode.push("G1X" + xStr + "Y" + yStr);
+            lastXstr = xStr;
+            lastYstr = yStr;
+          } else if (xStr != lastXstr) {
+            gcode.push("G1X" + xStr);
+            lastXstr = xStr;
+          } else if (yStr != lastYstr) {
+            gcode.push("G1Y" + yStr);
+            lastYstr = yStr;
+          }
+        }
+        lastP = [x3, y3];
+      } else if (arr[i][0] == "Q") {
+        // TODO implement Q path element
+        gcode.push("NOT_IMPLEMENTED");
+      } else if (arr[i][0] == "A") {
+        // TODO implement A path element
+        gcode.push("NOT_IMPLEMENTED");
+      } else if (arr[i][0] == "Z") {
+        xStr = Math.round(startP[0] * 100) / 100;
+        yStr = Math.round(startP[1] * 100) / 100;
+        if (xStr != lastXstr && yStr != lastYstr) {
+          gcode.push("G1X" + xStr + "Y" + yStr);
+          lastXstr = xStr;
+          lastYstr = yStr;
+        } else if (xStr != lastXstr) {
+          gcode.push("G1X" + xStr);
+          lastXstr = xStr;
+        } else if (yStr != lastYstr) {
+          gcode.push("G1Y" + yStr);
+          lastYstr = yStr;
+        }
+      }
+    }
+    gcode.push("M3S0\n")
+    //console.log(gcode.join("\n").length)
+    return gcode.join("\n");
+  }
+});

src/octoprint/plugins/svgtogcode/static/js/working_area.js

@@ -64,7 +64,8 @@ $(function(){
 		// matrix scales svg units to display_pixels
 		self.scaleMatrix = ko.computed(function(){
 			var m = new Snap.Matrix();
-			var factor = 25.4/self.svgDPI() * 1/self.px2mm_factor();
+			//var factor = 25.4/self.svgDPI() * 1/self.px2mm_factor();
+			var factor = 1;
 			if(!isNaN(factor)){
 				m.scale(factor);
 				return m;
@@ -238,8 +239,9 @@ $(function(){
 				}
 
 				// scale matrix
+				var scale = self.svgDPI()/25.4;
 				var mat = self.getDocumentViewBoxMatrix(doc_width, doc_height, doc_viewbox);
-				var scaleMatrixStr = new Snap.Matrix(mat[0][0],mat[0][1],mat[1][0],mat[1][1],mat[0][2],mat[1][2]).toTransformString();
+				var scaleMatrixStr = new Snap.Matrix(mat[0][0]/scale,mat[0][1],mat[1][0],mat[1][1]/scale,mat[0][2],mat[1][2]).toTransformString();
 				newSvgAttrs['transform'] = scaleMatrixStr;
 
 				var newSvg = snap.group(f.selectAll("svg>*"));
@@ -399,12 +401,12 @@ $(function(){
 				var wpx = this.width;
 				var hpx = this.height;
 
-				var dimPT = self.getUsefulDimensions(wpx, hpx);
+				var dimMM = self.getUsefulDimensions(wpx, hpx);
-				var wPT = dimPT[0];
+				var wMM = dimMM[0];
-				var hPT = dimPT[1];
+				var hMM = dimMM[1];
 
-				var y = self.mm2svgUnits(self.workingAreaHeightMM()) - hPT;
+				var y = self.workingAreaHeightMM() - hMM;
-				var newImg = snap.image(url, 0, y, wPT, hPT);
+				var newImg = snap.image(url, 0, y, wMM, hMM);
 				var id = self.getEntryId(file);
 				var previewId = self.generateUniqueId(id); // appends # if multiple times the same design is placed.
 				newImg.attr({id: previewId, filter: 'url(#grayscale_filter)', 'data-serveurl': url});
@@ -436,9 +438,7 @@ $(function(){
 			} else {
 				destHeightMM = destWidthMM / aspectRatio;
 			}
-			var destWidthPT = self.mm2svgUnits(destWidthMM);
+			return [destWidthMM, destHeightMM];
-			var destHeightPT = self.mm2svgUnits(destHeightMM);
-			return [destWidthPT, destHeightPT];
 		};
 
 		self.getDocumentDimensionsInPt = function(doc_width, doc_height, doc_viewbox){
@@ -579,18 +579,17 @@ $(function(){
 		self.draw_coord_grid = function(){
 			var grid = snap.select('#coordGrid');
 			if(grid.attr('fill') === 'none'){
-				var w = self.mm2svgUnits(self.workingAreaWidthMM());
+				var w = self.workingAreaWidthMM();
-				var h = self.mm2svgUnits(self.workingAreaHeightMM());
+				var h = self.workingAreaHeightMM();
 				var max_lines = 20;
 
 				var linedistMM = Math.floor(Math.max(self.workingAreaWidthMM(), self.workingAreaHeightMM()) / (max_lines * 10))*10;
-				var yPatternOffset = self.mm2svgUnits(self.workingAreaHeightMM() % linedistMM);
+				var yPatternOffset = self.workingAreaHeightMM() % linedistMM;
-				var linedist = self.mm2svgUnits(linedistMM);
+				var linedist = linedistMM;
 
-				var marker = snap.circle(linedist/2, linedist/2, 1).attr({
+				var marker = snap.circle(linedist/2, linedist/2, 0.3).attr({
 					fill: "#000000",
-					stroke: "none",
+					stroke: "none"
-					strokeWidth: 1
 				});
 
 				// dot pattern

src/octoprint/server/api/files.py

@@ -419,7 +419,7 @@ def gcodeFileCommand(filename, target):
 @restricted_access
 def gcodeConvertCommand():
 	target = FileDestinations.LOCAL;
-	
+
 	# valid file commands, dict mapping command name to mandatory parameters
 	valid_commands = {
 		"convert": []
@@ -427,14 +427,14 @@ def gcodeConvertCommand():
 	command, data, response = get_json_command_from_request(request, valid_commands)
 	if response is not None:
 		return response
-	
+
 	appendGcodeFiles = data['gcodeFilesToAppend']
 	del data['gcodeFilesToAppend']
-	
+
 #	def appendCallback(location, path, sources, **kwargs):
 #		if '_error' in kwargs:
 #			result = kwargs['_error']
-#			return make_response("Could not slice: {result}".format(result=result), 500)		
+#			return make_response("Could not slice: {result}".format(result=result), 500)
 #		else:
 #			output_path = fileManager.path_on_disk(location, path)
 #			# append additioal gcodes
@@ -461,18 +461,16 @@ def gcodeConvertCommand():
 #			#r = make_response(jsonify(result), 202)
 #			#r.headers["Location"] = location
 #			#return r
-		
 
-		
 	if command == "convert":
 		# TODO stripping non-ascii is a hack - svg contains lots of non-ascii in <text> tags. Fix this!
 		import re
-		svg = ''.join(i for i in data['svg'] if ord(i)<128) # strip non-ascii chars like € 
+		svg = ''.join(i for i in data['svg'] if ord(i)<128) # strip non-ascii chars like €
-		del data['svg']	
+		del data['svg']
-		
+
 		import os
 		name, _ = os.path.splitext(data['gcode'])
-		
+
 		filename = target + "/temp.svg"
 		class Wrapper(object):
 			def __init__(self, filename, content):
@@ -486,7 +484,7 @@ def gcodeConvertCommand():
 
 		fileObj = Wrapper(filename, svg)
 		fileManager.add_file(target, filename, fileObj, links=None, allow_overwrite=True)
-		
+
 		slicer = "svgtogcode";
 		slicer_instance = slicingManager.get_slicer(slicer)
 		if slicer_instance.get_slicer_properties()["same_device"] and (printer.is_printing() or printer.is_paused()):
@@ -500,7 +498,7 @@ def gcodeConvertCommand():
 			import os
 			name, _ = os.path.splitext(filename)
 			gcode_name = name + ".gco"
-			
+
 		# append number if file exists
 		name, ext = os.path.splitext(gcode_name)
 		i = 1;
@@ -518,7 +516,7 @@ def gcodeConvertCommand():
 			del data["profile"]
 		else:
 			profile = None
-##
+
 		if "printerProfile" in data.keys() and data["printerProfile"]:
 			printerProfile = data["printerProfile"]
 			del data["printerProfile"]
@@ -530,7 +528,7 @@ def gcodeConvertCommand():
 			del data["position"]
 		else:
 			position = None
-			
+
 		select_after_slicing = False
 		if "select" in data.keys() and data["select"] in valid_boolean_trues:
 			if not printer.is_operational():
@@ -548,34 +546,41 @@ def gcodeConvertCommand():
 		for key in override_keys:
 			overrides[key[len("profile."):]] = data[key]
 
-		def slicing_done(target, gcode_name, select_after_slicing, print_after_slicing, append_these_files):
+		if data.has_key('gcodedata'):
-			# append additioal gcodes
 			output_path = fileManager.path_on_disk(target, gcode_name)
-			with open(output_path,'ab') as wfd:
+			with open(output_path,'wb') as wfd:
-				for f in append_these_files:
+				for line in data['gcodedata']:
-					path = fileManager.path_on_disk(f['origin'], f['name'])
+					wfd.write(line)
-					wfd.write( "\n; "+ f['name'] + "\n")
+			eventManager.fire(Events.SLICING_DONE, {"stl": filename, "gcode": gcode_name, "gcode_location": target, "time": 1.0})
+		else:
+			def slicing_done(target, gcode_name, select_after_slicing, print_after_slicing, append_these_files):
+				# append additioal gcodes
+				output_path = fileManager.path_on_disk(target, gcode_name)
+				with open(output_path,'ab') as wfd:
+					for f in append_these_files:
+						path = fileManager.path_on_disk(f['origin'], f['name'])
+						wfd.write( "\n; "+ f['name'] + "\n")
 
-					with open(path,'rb') as fd:
+						with open(path,'rb') as fd:
-						shutil.copyfileobj(fd, wfd, 1024*1024*10)
+							shutil.copyfileobj(fd, wfd, 1024*1024*10)
 
-					wfd.write( "\nM05\n") # ensure that the laser is off.
+						wfd.write( "\nM05\n") # ensure that the laser is off.
 
-			if select_after_slicing or print_after_slicing:
+				if select_after_slicing or print_after_slicing:
-				sd = False
+					sd = False
-				filenameToSelect = fileManager.path_on_disk(target, gcode_name)
+					filenameToSelect = fileManager.path_on_disk(target, gcode_name)
-				printer.select_file(filenameToSelect, sd, True)
+					printer.select_file(filenameToSelect, sd, True)
 
-		try:
+			try:
-			fileManager.slice(slicer, target, filename, target, gcode_name, 
+				fileManager.slice(slicer, target, filename, target, gcode_name,
-							  profile=profile,
+								  profile=profile,
-			                  printer_profile_id=printerProfile,
+								  printer_profile_id=printerProfile,
-			                  position=position,
+								  position=position,
-							  overrides=overrides, 
+								  overrides=overrides,
-							  callback=slicing_done, 
+								  callback=slicing_done,
-							  callback_args=[target, gcode_name, select_after_slicing, print_after_slicing, appendGcodeFiles])
+								  callback_args=[target, gcode_name, select_after_slicing, print_after_slicing, appendGcodeFiles])
-		except octoprint.slicing.UnknownProfile:
+			except octoprint.slicing.UnknownProfile:
-			return make_response("Profile {profile} doesn't exist".format(**locals()), 400)
+				return make_response("Profile {profile} doesn't exist".format(**locals()), 400)
 
 		files = {}
 		location = url_for(".readGcodeFile", target=target, filename=gcode_name, _external=True)
@@ -593,7 +598,7 @@ def gcodeConvertCommand():
 		return r
 
 	return NO_CONTENT
-		
+
 
 @api.route("/files/<string:target>/<path:filename>", methods=["DELETE"])
 @restricted_access

src/octoprint/templates/mrbeam_index.jinja2

@@ -156,7 +156,7 @@
 												-->
 												{{ _('Approx. Total Job Time') }}: <strong data-bind="text: estimatedPrintTimeString"></strong><br>
 												<div data-bind="visible: isPrinting() || isPaused()">
-													
+
 													<div class="progress">
 														<div class="bar" id="job_progressBar" data-bind="style: { width: progressString() + '%' }">&nbsp;{{ _('Processed') }} :  <strong data-bind="text: byteString"></strong></div>
 													</div>
@@ -287,6 +287,9 @@
 											backgroundPosition: crosshairX()+'px'+' '+crosshairY()+'px',
 											width: workingAreaWidthPx()+'px',
 											height: workingAreaHeightPx()+'px'
+										},
+										attr: {
+										    viewBox: '0 0 '+workingAreaWidthMM()+' '+workingAreaHeightMM()
 										}
 									 ">
 									<filter id="grayscale_filter">
@@ -304,25 +307,23 @@
 										<text
 											xml:space="preserve"
 											data-bind="visible: working_area_empty"
-											style="font-size:64px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#DDDDDD;fill-opacity:1;stroke:none;font-family:DIN-BoldAlternate, Helvetica, Arial, Sans-serif;"
+											style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#DDDDDD;fill-opacity:1;stroke:none;font-family:DIN-BoldAlternate, Helvetica, Arial, Sans-serif;"
 											x="396.81018"
 											y="552.36218"
 											id="add_designs_hint"
 											>
 										<tspan
-											  id="tspan2987" x="368.571426" y="532.36218"
+											  id="tspan2987" x="60" y="60"
-											  style="text-anchor:middle;text-align:center">add designs via </tspan>
+											  style="text-anchor:left;text-align:center">add designs via </tspan>
 										<tspan
-											  x="500" y="592.36218" id="tspan2989"
+											  x="70" y="75" id="tspan2989"
-											  style="text-anchor:middle;text-align:center">the design library </tspan>
+											  style="text-anchor:left;text-align:center">the design library </tspan>
 										<tspan
-											  x="568.571426" y="652.36218" id="tspan2993"
+											  x="80" y="90" id="tspan2993"
-											  style="text-anchor:middle;text-align:center">or drag 'n' drop </tspan>
+											  style="text-anchor:left;text-align:center">or drag 'n' drop </tspan>
-										<tspan
+										</text>
-											  x="368.571426" y="712.36218" id="tspan2991"
+										<g id="placedGcodes" data-bind="visible: !state.isPrinting() && !state.isPaused()"></g>
-											  style="text-anchor:middle;text-align:center" /></text>
+										<g id="gCodePreview" data-bind="visible: state.isPrinting() || state.isPaused()"></g>
-										<g id="placedGcodes" data-bind="visible: !state.isPrinting() && !state.isPaused(), attr: { transform: scaleMatrixMMtoDisplay() }"></g>
-										<g id="gCodePreview" data-bind="visible: state.isPrinting() || state.isPaused(), attr: { transform: scaleMatrixMMtoDisplay() }"></g>
 										<rect data-bind="click: move_laser"
 											  id="coordGrid" x="0" y="0" width="0" height="0"
 											  stroke="none" fill="none"></rect>
@@ -516,7 +517,7 @@
 												<i class="icon-camera icon-white"></i>
 												<span>{{ _('Photo') }}</span>
 											</a>
-												
+
 										</div>
 										<div id="gcode_upload_progress" class="progress" style="width: 100%;">
 											<div class="bar" style="width: 0%"></div>