diff --git a/src/octoprint/plugins/svgtogcode/static/js/convert.js b/src/octoprint/plugins/svgtogcode/static/js/convert.js index 407b8c52..bca87be0 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/convert.js +++ b/src/octoprint/plugins/svgtogcode/static/js/convert.js @@ -35,10 +35,15 @@ $(function(){ self.laserSpeed = ko.observable(undefined); self.maxSpeed = ko.observable(3000); 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.show_image_parameters = ko.observable(false); + self.images_placed = ko.observable(false); + self.show_image_parameters = ko.computed(function(){ + return self.images_placed() || self.fill_areas(); + }); self.imgIntensityWhite = ko.observable(0); self.imgIntensityBlack = ko.observable(500); self.imgFeedrateWhite = ko.observable(1500); @@ -76,32 +81,31 @@ $(function(){ // shows conversion dialog and extracts svg first self.show_conversion_dialog = function() { - 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); + self.gcodeFilesToAppend = self.workingArea.getPlacedGcodes(); + self.show_vector_parameters(self.workingArea.getPlacedSvgs().length > 0); + self.show_fill_areas_checkbox(self.workingArea.hasFilledVectors()) + self.images_placed(self.workingArea.getPlacedImages().length > 0); + //self.show_image_parameters(self.workingArea.getPlacedImages().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); - } - - 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.show_vector_parameters() || self.show_image_parameters()){ + 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){ @@ -235,43 +239,47 @@ $(function(){ if(self.gcodeFilesToAppend.length === 1 && self.svg === undefined){ self.files.startGcodeWithSafetyWarning(self.gcodeFilesToAppend[0]); } else { - var filename = self.gcodeFilename() + self.settingsString() + '.gco'; - var gcodeFilename = self._sanitize(filename); + self.workingArea.getCompositionSVG(self.fill_areas(), function(composition){ + self.svg = composition; + var filename = self.gcodeFilename() + self.settingsString() + '.gco'; + var gcodeFilename = self._sanitize(filename); - var data = { - command: "convert", - "profile.speed": self.laserSpeed(), - "profile.intensity": self.laserIntensity(), - "profile.pierce_time": self.pierceTime(), - "profile.intensity_black" : self.imgIntensityBlack(), - "profile.intensity_white" : self.imgIntensityWhite(), - "profile.feedrate_black" : self.imgFeedrateBlack(), - "profile.feedrate_white" : self.imgFeedrateWhite(), - "profile.img_contrast" : self.imgContrast(), - "profile.img_sharpening" : self.imgSharpening(), - "profile.img_dithering" : self.imgDithering(), - "profile.beam_diameter" : self.beamDiameter(), - slicer: "svgtogcode", - gcode: gcodeFilename - }; + var data = { + command: "convert", + "profile.speed": self.laserSpeed(), + "profile.intensity": self.laserIntensity(), + "profile.fill_areas": self.fill_areas(), + "profile.pierce_time": self.pierceTime(), + "profile.intensity_black" : self.imgIntensityBlack(), + "profile.intensity_white" : self.imgIntensityWhite(), + "profile.feedrate_black" : self.imgFeedrateBlack(), + "profile.feedrate_white" : self.imgFeedrateWhite(), + "profile.img_contrast" : self.imgContrast(), + "profile.img_sharpening" : self.imgSharpening(), + "profile.img_dithering" : self.imgDithering(), + "profile.beam_diameter" : self.beamDiameter(), + slicer: "svgtogcode", + gcode: gcodeFilename + }; - if(self.svg !== undefined){ - data.svg = self.svg; - } else { - data.svg = ''; - } - if(self.gcodeFilesToAppend !== undefined){ - data.gcodeFilesToAppend = self.gcodeFilesToAppend; - } + if(self.svg !== undefined){ + data.svg = self.svg; + } else { + data.svg = ''; + } + if(self.gcodeFilesToAppend !== undefined){ + data.gcodeFilesToAppend = self.gcodeFilesToAppend; + } + + $.ajax({ + url: API_BASEURL + "files/convert", + type: "POST", + dataType: "json", + contentType: "application/json; charset=UTF-8", + data: JSON.stringify(data) + }); - $.ajax({ - url: API_BASEURL + "files/convert", - type: "POST", - dataType: "json", - contentType: "application/json; charset=UTF-8", - data: JSON.stringify(data) }); - } }; diff --git a/src/octoprint/plugins/svgtogcode/static/js/render_fills.js b/src/octoprint/plugins/svgtogcode/static/js/render_fills.js index 60cc0d4e..60b55bd6 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/render_fills.js +++ b/src/octoprint/plugins/svgtogcode/static/js/render_fills.js @@ -29,7 +29,7 @@ Snap.plugin(function (Snap, Element, Paper, global) { * @returns {path} */ - Element.prototype.removeUnfilled = function(){ + Element.prototype.removeUnfilled = function(fillPaths){ var elem = this; var selection = []; var children = elem.children(); @@ -46,14 +46,18 @@ Snap.plugin(function (Snap, Element, Paper, global) { if(goRecursive) { for (var i = 0; i < children.length; i++) { var child = children[i]; - selection = selection.concat(child.removeUnfilled()); + selection = selection.concat(child.removeUnfilled(fillPaths)); } } } else { - if(elem.is_filled()){ + if(elem.type === 'image'){ selection.push(elem); } else { - elem.remove(); + if(fillPaths && elem.is_filled()){ + selection.push(elem); + } else { + elem.remove(); + } } } return selection; @@ -70,16 +74,11 @@ Snap.plugin(function (Snap, Element, Paper, global) { elem.type !== "line" && elem.type !== "polygon" && elem.type !== "polyline" && - elem.type !== "path" && - elem.type !== "image"){ + elem.type !== "path" ){ return false; } - if(elem.type === 'image'){ - return true; - } - var fill = elem.attr('fill'); var opacity = elem.attr('fill-opacity'); diff --git a/src/octoprint/plugins/svgtogcode/static/js/working_area.js b/src/octoprint/plugins/svgtogcode/static/js/working_area.js index afe8a0ae..07657575 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/working_area.js +++ b/src/octoprint/plugins/svgtogcode/static/js/working_area.js @@ -619,7 +619,7 @@ $(function(){ self.check_sizes_and_placements(); }; - self.getCompositionSVG = function(callback){ + self.getCompositionSVG = function(fillAreas, callback){ self.abortFreeTransforms(); var wMM = self.workingAreaWidthMM(); var hMM = self.workingAreaHeightMM(); @@ -631,8 +631,8 @@ $(function(){ var userContent = snap.select("#userContent").clone(); compSvg.append(userContent); - self.renderInfill(compSvg, wMM, hMM, 10, function(){ - callback( self._wrapInSvgAndScale(compSvg)); + self.renderInfill(compSvg, fillAreas, wMM, hMM, 10, function(svgWithRenderedInfill){ + callback( self._wrapInSvgAndScale(svgWithRenderedInfill)); $('#compSvg').remove(); }); }; @@ -680,6 +680,19 @@ $(function(){ return gcodeFiles; }, self); + self.hasFilledVectors = function(){ + var el = snap.selectAll('#userContent *'); + for (var i = 0; i < el.length; i++) { + var e = el[i]; + var fill = e.attr('fill'); + var op = e.attr('fill-opacity'); + if(fill !== 'none' && op > 0){ + return true; + } + + } + return false; + }; self.draw_gcode = function(points, intensity, target){ var stroke_color = intensity === 0 ? '#BBBBBB' : '#FF0000'; @@ -770,7 +783,7 @@ $(function(){ } // render the infill and inject it as an image into the svg - self.renderInfill = function (svg, wMM, hMM, pxPerMM, callback) { + self.renderInfill = function (svg, fillAreas, wMM, hMM, pxPerMM, callback) { var wPT = wMM * 90 / 25.4; var hPT = hMM * 90 / 25.4; var tmpSvg = Snap(wPT, hPT).attr('id', 'tmpSvg'); @@ -778,16 +791,19 @@ $(function(){ var userContent = svg.clone(); tmpSvg.append(userContent); self._embedAllImages(tmpSvg, function(){ - var fillings = userContent.removeUnfilled(); + var fillings = userContent.removeUnfilled(fillAreas); for (var i = 0; i < fillings.length; i++) { var item = fillings[i]; + if (item.type === 'image') { + // remove filter effects on images for proper rendering var style = item.attr('style'); if (style !== null) { var strippedFilters = style.replace(/filter.+?;/, ''); item.attr('style', strippedFilters); } } else { + // remove stroke from other elements //item.attr('fill', '#ff0000'); item.attr('stroke', 'none'); } @@ -795,6 +811,7 @@ $(function(){ var cb = function(result) { if(fillings.length > 0){ + // replace all images with the fill rendering svg.selectAll('image').remove(); var waBB = snap.select('#coordGrid').getBBox(); var fillImage = snap.image(result, 0, 0, waBB.w, waBB.h); diff --git a/src/octoprint/plugins/svgtogcode/templates/svgtogcode.jinja2 b/src/octoprint/plugins/svgtogcode/templates/svgtogcode.jinja2 index ee46cc96..7e95341e 100644 --- a/src/octoprint/plugins/svgtogcode/templates/svgtogcode.jinja2 +++ b/src/octoprint/plugins/svgtogcode/templates/svgtogcode.jinja2 @@ -38,6 +38,12 @@ The effect in general is dependent from the material and its color and surface. + +
+ +