From 022372c497e17ec45a4639917cc9c5140661436c Mon Sep 17 00:00:00 2001 From: Teja Date: Wed, 28 Jan 2015 16:32:00 +0100 Subject: [PATCH] grid over working area --- .../plugins/svgtogcode/static/js/convert.js | 9 +-- .../svgtogcode/static/js/working_area.js | 65 ++++++++++++++++++- .../templates/override_index.jinja2 | 8 ++- 3 files changed, 70 insertions(+), 12 deletions(-) diff --git a/src/octoprint/plugins/svgtogcode/static/js/convert.js b/src/octoprint/plugins/svgtogcode/static/js/convert.js index 5684ed6d..5ba683c2 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/convert.js +++ b/src/octoprint/plugins/svgtogcode/static/js/convert.js @@ -34,13 +34,8 @@ function VectorConversionViewModel(params) { // shows conversion dialog and extracts svg first self.show_conversion_dialog = function() { - var tmpsvg = snap.select("#scaleGroup").innerSVG(); // get working area - // TODO use lasercutterprofiles - var dpiFactor = 90/25.4; // convert mm to pix with 90dpi (inkscape default - TODO use 72 for illustrator svg and fetch from settings) - var w = dpiFactor * self.settings.printerProfiles.currentProfileData().volume.width; - var h = dpiFactor * self.settings.printerProfiles.currentProfileData().volume.depth; - - self.svg = ''+ tmpsvg +''; + self.svg = self.workingArea.getCompositionSVG(); + // TODO: js svg conversion self.title(gettext("Converting")); var gcodeFile = self.create_gcode_filename(self.workingArea.placedDesigns()); diff --git a/src/octoprint/plugins/svgtogcode/static/js/working_area.js b/src/octoprint/plugins/svgtogcode/static/js/working_area.js index de16cc9e..61f2baf0 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/working_area.js +++ b/src/octoprint/plugins/svgtogcode/static/js/working_area.js @@ -21,6 +21,7 @@ function WorkingAreaViewModel(params) { self.availableHeight = ko.observable(undefined); self.availableWidth = ko.observable(undefined); self.px2mm_factor = 1; // initial value + self.svgDPI = ko.observable(90); // TODO fetch from settings self.workingAreaWidthMM = ko.observable(undefined); self.workingAreaHeightMM = ko.observable(undefined); self.hwRatio = ko.computed(function(){ @@ -68,7 +69,7 @@ function WorkingAreaViewModel(params) { self.scaleMatrix = ko.computed(function(){ var m = new Snap.Matrix(); - m.scale(25.4/90 * 1/self.px2mm_factor()); + m.scale(25.4/self.svgDPI() * 1/self.px2mm_factor()); return m; }); @@ -112,6 +113,10 @@ function WorkingAreaViewModel(params) { return val / self.px2mm_factor(); }; + self.mm2svgUnits = function(val){ + return val * self.svgDPI()/25.4; + } + //self.getDivDimensions(); // init self.placeSVG = function(file) { @@ -135,7 +140,7 @@ function WorkingAreaViewModel(params) { var newSvg = f.select("g"); newSvg.attr(namespaces); var id = self.generateId(url); - snap.select("#scaleGroup").append(newSvg); + snap.select("#userContent").append(newSvg); newSvg.drag();// Making croc draggable. Go ahead drag it around! // Obviously drag could take event handlers too @@ -150,7 +155,52 @@ function WorkingAreaViewModel(params) { self.init = function(){ // init snap.svg snap = Snap('#area_preview'); + self.px2mm_factor.subscribe(function(newVal){ + if(!isNaN(newVal)) + self.draw_coord_grid(); + }); + }; + + self.draw_coord_grid = function(){ + if(!snap.select('#gridpattern')){ + var w = self.mm2svgUnits(self.workingAreaWidthMM()); + var h = self.mm2svgUnits(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 linedist = self.mm2svgUnits(linedistMM); + var p = snap.circle(linedist/2, linedist/2, 1).attr({ + fill: "#000000", + stroke: "none", + strokeWidth: 1 + }); + + // To create pattern, + // just specify dimensions in pattern method: + p = p.pattern(0, 0, linedist, linedist); + p.attr({ + x: linedist/2, + y: linedist/2 + yPatternOffset + }); + + var rect = snap.rect(0,0,w,h); + rect.attr({ + id: 'gridpattern', + fill: p, + stroke: "#000", + strokeWidth: 1 + }); + snap.select('#coordGrid').append(rect); + +// var x = 0; +// while(x < w){ +// +// snap. +// x += linedist; +// } + } }; self.generateId = function(url){ @@ -164,6 +214,17 @@ function WorkingAreaViewModel(params) { return id; }; + self.getCompositionSVG = function(){ + // TODO use lasercutterprofiles + var dpiFactor = self.svgDPI()/25.4; // convert mm to pix with 90dpi (inkscape default - TODO use 72 for illustrator svg and fetch from settings) + var w = dpiFactor * self.settings.printerProfiles.currentProfileData().volume.width; + var h = dpiFactor * self.settings.printerProfiles.currentProfileData().volume.depth; + + var tmpsvg = snap.select("#userContent").innerSVG(); // get working area + var svg = ''+ tmpsvg +''; + return svg; + }; + self.onStartup = function(){ self.files.workingArea = self; $(window).resize(function(){ diff --git a/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 b/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 index 7137c131..d7c119f8 100644 --- a/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 +++ b/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 @@ -296,10 +296,12 @@ backgroundPosition: crosshairX()+'px'+' '+crosshairY()+'px', width: workingAreaWidthPx()+'px', height: workingAreaHeightPx()+'px' - }, - attr: { transform: scaleMatrix() } + } "> - + + + +