pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui support for filled areas.

Browse source
This commit is contained in:
Teja 2015-10-18 14:40:34 +02:00
parent 4763a17da6
commit 4a12294f1d
4 changed files with 103 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
src/octoprint/plugins/svgtogcode/static/js/convert.js
View file

@ -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 = '<svg height="0" version="1.1" width="0" xmlns="http://www.w3.org/2000/svg"><defs/></svg>';
}
if(self.gcodeFilesToAppend !== undefined){
data.gcodeFilesToAppend = self.gcodeFilesToAppend;
}
if(self.svg !== undefined){
data.svg = self.svg;
} else {
data.svg = '<svg height="0" version="1.1" width="0" xmlns="http://www.w3.org/2000/svg"><defs/></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)
});
}
};

19
src/octoprint/plugins/svgtogcode/static/js/render_fills.js
View file

@ -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');

27
src/octoprint/plugins/svgtogcode/static/js/working_area.js
View file

@ -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);

6
src/octoprint/plugins/svgtogcode/templates/svgtogcode.jinja2
View file

@ -38,6 +38,12 @@
The effect in general is dependent from the material and its color and surface.
</div>
</div>
<label class="control-label">{{ _('Filled areas') }}</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: fill_areas">{{ _('Engrave Infills') }}
</label>
</div>
</div>
<div class="control-group" data-bind="visible: showExpertSettings ">