From 70b97bbca9e2e390113d0511c33f5ec95137f965 Mon Sep 17 00:00:00 2001 From: Teja Date: Tue, 13 Oct 2015 15:57:51 +0200 Subject: [PATCH] first working version of infill --- .../plugins/svgtogcode/static/js/convert.js | 48 +++++------ .../svgtogcode/static/js/render_fills.js | 61 ++------------ .../svgtogcode/static/js/working_area.js | 82 +++++++++++++++++-- 3 files changed, 108 insertions(+), 83 deletions(-) diff --git a/src/octoprint/plugins/svgtogcode/static/js/convert.js b/src/octoprint/plugins/svgtogcode/static/js/convert.js index 34866713..407b8c52 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/convert.js +++ b/src/octoprint/plugins/svgtogcode/static/js/convert.js @@ -76,30 +76,32 @@ $(function(){ // shows conversion dialog and extracts svg first self.show_conversion_dialog = function() { - self.svg = self.workingArea.getCompositionSVG(); - self.gcodeFilesToAppend = self.workingArea.getPlacedGcodes(); - self.show_image_parameters(self.workingArea.getPlacedImages().length > 0); - self.show_vector_parameters(self.workingArea.getPlacedSvgs().length > 0); - - if(self.svg !== undefined){ - 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); - } + self.workingArea.getCompositionSVG(function(composition){ + self.svg = composition; + self.gcodeFilesToAppend = self.workingArea.getPlacedGcodes(); + self.show_image_parameters(self.workingArea.getPlacedImages().length > 0); + self.show_vector_parameters(self.workingArea.getPlacedSvgs().length > 0); - var gcodeFile = self.create_gcode_filename(self.workingArea.placedDesigns()); - self.gcodeFilename(gcodeFile); - - self.title(gettext("Converting")); - $("#dialog_vector_graphics_conversion").modal("show"); // calls self.convert() afterwards - } else { - // just gcodes were placed. Start lasering right away. - self.convert(); - } + if(self.svg !== undefined){ + 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); + } + + var gcodeFile = self.create_gcode_filename(self.workingArea.placedDesigns()); + self.gcodeFilename(gcodeFile); + + self.title(gettext("Converting")); + $("#dialog_vector_graphics_conversion").modal("show"); // calls self.convert() afterwards + } else { + // just gcodes were placed. Start lasering right away. + self.convert(); + } + }); }; self.create_gcode_filename = function(placedDesigns){ diff --git a/src/octoprint/plugins/svgtogcode/static/js/render_fills.js b/src/octoprint/plugins/svgtogcode/static/js/render_fills.js index f4ea0d9c..60cc0d4e 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/render_fills.js +++ b/src/octoprint/plugins/svgtogcode/static/js/render_fills.js @@ -1,4 +1,4 @@ -// render_fills - a snapsvg.io plugin to render fills of svg files into a bitmap. +// render_fills.js - a snapsvg.io plugin to render the infill of svg files into a bitmap. // Copyright (C) 2015 Teja Philipp // // based on work by http://davidwalsh.name/convert-canvas-image @@ -91,7 +91,7 @@ Snap.plugin(function (Snap, Element, Paper, global) { return false; }; - Element.prototype.embedImage = function(){ + Element.prototype.embedImage = function(callback){ var elem = this; if(elem.type !== 'image') return; @@ -107,7 +107,10 @@ Snap.plugin(function (Snap, Element, Paper, global) { var dataUrl = canvas.toDataURL('image/png'); elem.attr('href', dataUrl); canvas.remove(); - console.log('embedded img'); + if(typeof callback === 'function'){ + callback(elem.attr('id')); + console.log('embedded img'); + } }; image.src = url; @@ -152,58 +155,6 @@ Snap.plugin(function (Snap, Element, Paper, global) { }); -_renderInfill = function (wMM, hMM, pxPerMM, callback) { - // TODO abort transformations - $('#tmpSvg').remove(); - snap.selectAll('#fillRendering').remove(); - var wPT = wMM * 90/25.4; - var hPT = hMM * 90/25.4; - var tmpSvg = Snap(wPT,hPT); - tmpSvg.attr('id', 'tmpSvg'); - - // get filled - var userContent = snap.select("#userContent").clone(); - tmpSvg.append(userContent); - userContent.bake(); - var fillings = userContent.removeUnfilled(); - for (var i = 0; i < fillings.length; i++) { - var item = fillings[i]; - if(item.type === 'image'){ - var style = item.attr('style'); - if(style !== null){ - var strippedFilters = style.replace(/filter.+?;/, ''); - item.attr('style', strippedFilters); - } - // TODO embed Image callbacks!! - item.embedImage(); - } else { - item.attr('fill', '#ff0000'); - item.attr('stroke', 'none'); - } - } - - var cb; - if(typeof callback === 'function'){ - cb = callback; - } else { - cb = function(result){ - var waBB = snap.select('#coordGrid').getBBox(); - _check_fill(result, waBB.w, waBB.h); - $('#tmpSvg').remove(); - }; - } - - tmpSvg.renderPNG(wMM, hMM, pxPerMM, cb); -}; - - -_check_fill = function(imgDataUrl, w, h){ - var fillImage = snap.image(imgDataUrl, 0, 0, w, h); - fillImage.attr('id', 'fillRendering'); - - snap.select("#userContent").prepend(fillImage); - -}; diff --git a/src/octoprint/plugins/svgtogcode/static/js/working_area.js b/src/octoprint/plugins/svgtogcode/static/js/working_area.js index d7d432dc..0ac6031d 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/working_area.js +++ b/src/octoprint/plugins/svgtogcode/static/js/working_area.js @@ -623,10 +623,12 @@ $(function(){ self.check_sizes_and_placements(); }; - self.getCompositionSVG = function(){ + self.getCompositionSVG = function(callback){ self.abortFreeTransforms(); - var tmpsvg = snap.select("#userContent").innerSVG(); // get working area - return self._wrapInSvgAndScale(tmpsvg); + self.renderInfill(self.workingAreaWidthMM(), self.workingAreaHeightMM(), 10, function(){ + var tmpsvg = snap.select("#userContent").innerSVG(); // get working area + callback( self._wrapInSvgAndScale(tmpsvg)); + }); }; self._wrapInSvgAndScale = function(content){ @@ -685,8 +687,9 @@ $(function(){ self.draw_gcode_img_placeholder = function(x,y,w,h,url, target){ var i = snap.rect(x,y,w,h).attr({ - stroke: '#AA0000', - 'stroke-width': 1 + stroke: '#AAAAAA', + 'stroke-width': 1, + fill: 'none' }); snap.select(target).append(i); if(url !== ""){ @@ -735,6 +738,75 @@ $(function(){ } }); }; + + self._embedAllImages = function(svg, callback){ + + var allImages = svg.selectAll('image'); + var linkedImages = allImages.items.filter(function(i){ return !i.attr('href').startsWith('data:') }); + if(linkedImages.length > 0){ + var callbackCounter = linkedImages.length; + for (var i = 0; i < linkedImages.length; i++) { + var img = linkedImages[i]; + img.embedImage(function(){ + callbackCounter--; + if(callbackCounter === 0 && typeof callback === 'function'){ + callback(); + } + }); + } + } else { + // callback if nothing to embed + if(typeof callback === 'function'){ + callback(); + } + } + } + + self.renderInfill = function (wMM, hMM, pxPerMM, callback) { + self.abortFreeTransforms(); +// $('#tmpSvg').remove(); +// snap.selectAll('#fillRendering').remove(); + var wPT = wMM * 90 / 25.4; + var hPT = hMM * 90 / 25.4; + var tmpSvg = Snap(wPT, hPT); + tmpSvg.attr('id', 'tmpSvg'); + + // get filled + var userContent = snap.select("#userContent").clone(); + tmpSvg.append(userContent); + userContent.bake(); + self._embedAllImages(tmpSvg, function(){ + var fillings = userContent.removeUnfilled(); + for (var i = 0; i < fillings.length; i++) { + var item = fillings[i]; + if (item.type === 'image') { + var style = item.attr('style'); + if (style !== null) { + var strippedFilters = style.replace(/filter.+?;/, ''); + item.attr('style', strippedFilters); + } + } else { + item.attr('fill', '#ff0000'); + item.attr('stroke', 'none'); + } + } + + var cb = function (result) { + var waBB = snap.select('#coordGrid').getBBox(); + var fillImage = snap.image(result, 0, 0, waBB.w, waBB.h); + fillImage.attr('id', 'fillRendering'); + snap.select("#userContent").prepend(fillImage); + $('#tmpSvg').remove(); + if (typeof callback === 'function') { + callback(); + } + }; + + tmpSvg.renderPNG(wMM, hMM, pxPerMM, cb); + }); + }; + + self.onBeforeBinding = function(){ self.files.workingArea = self;