From 8c6ba8890d3c671cd9b4904cc28ce9e1c2e29b4d Mon Sep 17 00:00:00 2001 From: Teja Date: Mon, 12 Oct 2015 15:42:39 +0200 Subject: [PATCH] wip --- run | 2 +- src/octoprint/plugins/svgtogcode/__init__.py | 2 +- .../svgtogcode/static/js/drag_scale_rotate.js | 9 +- .../svgtogcode/static/js/matrix_oven.js | 3 +- .../svgtogcode/static/js/render_fills.js | 147 ++++++++++++++++++ .../svgtogcode/static/js/working_area.js | 20 ++- 6 files changed, 164 insertions(+), 19 deletions(-) create mode 100644 src/octoprint/plugins/svgtogcode/static/js/render_fills.js diff --git a/run b/run index 86f1fdf8..36b965d1 100755 --- a/run +++ b/run @@ -19,7 +19,7 @@ I don't know anything about). sys.path.insert(0, os.path.join(basedir, "src")) #import sys -#sys.path.append('/home/teja/Downloads/pyvmmonitor/public_api') +#sys.path.append('/home/teja/opt/pyvmmonitor/public_api') #import pyvmmonitor #pyvmmonitor.connect() diff --git a/src/octoprint/plugins/svgtogcode/__init__.py b/src/octoprint/plugins/svgtogcode/__init__.py index 686d1ed3..123e8630 100644 --- a/src/octoprint/plugins/svgtogcode/__init__.py +++ b/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/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"], less=["less/svgtogcode.less"], css=["css/svgtogcode.css", "css/mrbeam.css"] ) diff --git a/src/octoprint/plugins/svgtogcode/static/js/drag_scale_rotate.js b/src/octoprint/plugins/svgtogcode/static/js/drag_scale_rotate.js index a23966b9..92e4f376 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/drag_scale_rotate.js +++ b/src/octoprint/plugins/svgtogcode/static/js/drag_scale_rotate.js @@ -1,9 +1,8 @@ -// Matrix Oven - a snapsvg.io plugin to apply & remove transformations from svg files. +// Drag, Scale & Rotate - a snapsvg.io plugin to free transform objects in an svg. // Copyright (C) 2015 Teja Philipp // -// based on work by https://gist.github.com/timo22345/9413158 -// and https://github.com/duopixel/Method-Draw/blob/master/editor/src/svgcanvas.js -// +// 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 @@ -22,7 +21,7 @@ Snap.plugin(function (Snap, Element, Paper, global) { /** - * bakes transformations of the element and all sub-elements into coordinates + * * * @returns {undefined} */ diff --git a/src/octoprint/plugins/svgtogcode/static/js/matrix_oven.js b/src/octoprint/plugins/svgtogcode/static/js/matrix_oven.js index ad485352..80548c50 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/matrix_oven.js +++ b/src/octoprint/plugins/svgtogcode/static/js/matrix_oven.js @@ -37,7 +37,8 @@ Snap.plugin(function (Snap, Element, Paper, global) { toCubics = false; if (typeof (dec) === 'undefined') dec = 5; - var children = elem.selectAll('*') + //var children = elem.selectAll('*') + var children = elem.children(); if (children.length > 0) { for (var i = 0; i < children.length; i++) { var child = children[i]; diff --git a/src/octoprint/plugins/svgtogcode/static/js/render_fills.js b/src/octoprint/plugins/svgtogcode/static/js/render_fills.js new file mode 100644 index 00000000..f45291ab --- /dev/null +++ b/src/octoprint/plugins/svgtogcode/static/js/render_fills.js @@ -0,0 +1,147 @@ +// render_fills - a snapsvg.io plugin to render fills of svg files into a bitmap. +// Copyright (C) 2015 Teja Philipp +// +// based on work by http://davidwalsh.name/convert-canvas-image +// and http://getcontext.net/read/svg-images-on-a-html5-canvas +// +// 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 +// License, or (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see . + + + +Snap.plugin(function (Snap, Element, Paper, global) { + + + + /** + * @param {elem} elem start point + * + * @returns {path} + */ + Element.prototype.selectFilled = function(){ + var elem = this; + var selection = []; + var children = elem.children(); + + + if (children.length > 0) { + var goRecursive = (elem.type !== "defs" && + elem.type !== "clipPath" && + elem.type !== "metadata" && + elem.type !== "rdf:rdf" && + elem.type !== "cc:work" && + elem.type !== "sodipodi:namedview"); + + if(goRecursive) { + for (var i = 0; i < children.length; i++) { + var child = children[i]; + selection = selection.concat(child.selectFilled()); + } + } + } else { + if(elem.is_filled()){ + selection.push(elem); + } + } + return selection; + }; + + Element.prototype.is_filled = function(){ + var elem = this; + + // TODO text support + if (elem.type !== "circle" && + elem.type !== "rect" && + elem.type !== "ellipse" && + elem.type !== "line" && + elem.type !== "polygon" && + elem.type !== "polyline" && + elem.type !== "path"){ + + return false; + } + + var fill = elem.attr('fill'); + var opacity = elem.attr('fill-opacity'); + + if(fill !== 'none'){ + if(opacity === null || opacity > 0){ + return true; + } + } + return false; + }; + +}); + +_renderSvgFills = function (wMM, hMM, resolution) { + $('#renderCanvas').remove(); + $('#fillSvg').remove(); + snap.selectAll('#fillRendering').remove(); + var wPT = wMM * 90/25.4; + var hPT = hMM * 90/25.4; + var fillSvg = Snap(wPT,hPT); + fillSvg.attr('id', 'fillSvg'); + + // get filled + var fillings = snap.select("#userContent").selectFilled(); + for (var i = 0; i < fillings.length; i++) { + var item = fillings[i]; + var clone = item.clone(); + clone.attr('fill', '#ff0000'); + clone.attr('stroke', 'none'); + fillSvg.append(clone); + } + var svgStr = fillSvg.outerSVG(); + + // render to canvas + var svgDataUri = 'data:image/svg+xml;base64,' + window.btoa(svgStr); + var source = new Image(); + source.src = svgDataUri; + + // get bitmap from canvas + // Set up our canvas on the page before doing anything. + var renderCanvas = document.createElement('canvas'); + renderCanvas.id = "renderCanvas"; +// renderCanvas.width = self.workingAreaWidthMM * 10; // 10 px/mm machine resolution. TODO: make configurable +// renderCanvas.height = self.workingAreaWidthMM * 10; + renderCanvas.width = wMM * resolution; + renderCanvas.height = hMM * resolution; + console.log("created rendercanvas with ", renderCanvas.width, renderCanvas.height); + var waBB = snap.select('#coordGrid').getBBox(); + document.getElementsByTagName('body')[0].appendChild(renderCanvas); + var renderCanvasContext = renderCanvas.getContext('2d'); + + // Render SVG image to the canvas once it loads. + source.onload = function () { + renderCanvasContext.drawImage(source, 0, 0); + + // place fill bitmap into svg + var fillBitmap = renderCanvas.toDataURL("image/png"); + var fillImage = snap.image(fillBitmap, 0, 0, waBB.w, waBB.h); + fillImage.attr('id', 'fillRendering'); + //fillImage.attr('preserveAspectRatio', 'true'); + + snap.select("#userContent").prepend(fillImage); +// renderCanvas.remove(); +// fillSvg.remove(); + }; +}; + + + + + + + + diff --git a/src/octoprint/plugins/svgtogcode/static/js/working_area.js b/src/octoprint/plugins/svgtogcode/static/js/working_area.js index 521012d6..d7d432dc 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/working_area.js +++ b/src/octoprint/plugins/svgtogcode/static/js/working_area.js @@ -393,12 +393,6 @@ $(function(){ }; - self.placePhoto = function (dataUrl) { - // upload - - // place - }; - self.placeIMG = function (file) { var url = self._getIMGserveUrl(file); var img = new Image(); @@ -632,16 +626,20 @@ $(function(){ self.getCompositionSVG = function(){ self.abortFreeTransforms(); var tmpsvg = snap.select("#userContent").innerSVG(); // get working area - if(tmpsvg !== ''){ + return self._wrapInSvgAndScale(tmpsvg); + }; + + self._wrapInSvgAndScale = function(content){ + if(content !== ''){ var dpiFactor = self.svgDPI()/25.4; // convert mm to pix 90dpi for inkscape, 72 for illustrator var w = dpiFactor * self.workingAreaWidthMM(); var h = dpiFactor * self.workingAreaHeightMM(); // TODO: look for better solution to solve this Firefox bug problem - tmpsvg = tmpsvg.replace("(\\\"","("); - tmpsvg = tmpsvg.replace("\\\")",")"); + content = content.replace("(\\\"","("); + content = content.replace("\\\")",")"); - var svg = ''+ tmpsvg +''; + var svg = ''+ content +''; return svg; } else { return; @@ -704,7 +702,7 @@ $(function(){ self.clear_gcode = function(){ snap.select('#gCodePreview').clear(); }; - + self.onStartup = function(){ self.state.workingArea = self; self.files.workingArea = self;