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

all parameters for image engraving are now in the ui.

Browse source
This commit is contained in:
Teja 2015-08-07 16:28:32 +02:00
parent 8adf72a4be
commit 572425b52b
4 changed files with 152 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/octoprint/plugins/svgtogcode/static/css/svgtogcode.css
View file

@ -1,5 +1,8 @@
table th.settings_plugin_svgtogcode_profiles_key,table td.settings_plugin_svgtogcode_profiles_key{text-overflow:ellipsis;text-align:left;width:200px}table th.settings_plugin_svgtogcode_profiles_name,table td.settings_plugin_svgtogcode_profiles_name{text-overflow:ellipsis;text-align:left}table th.settings_plugin_svgtogcode_profiles_actions,table td.settings_plugin_svgtogcode_profiles_actions{text-align:center;width:100px}table th.settings_plugin_svgtogcode_profiles_actions a,table td.settings_plugin_svgtogcode_profiles_actions a{text-decoration:none;color:#000}table th.settings_plugin_svgtogcode_profiles_actions a.disabled,table td.settings_plugin_svgtogcode_profiles_actions a.disabled{color:#ccc;cursor:default}
.slider_manual_input {margin-left: 1.5em; width: 2.5em;}
.slider_manual_input {
margin-left: 1.5em;
width: 2.5em;
}
#gcode_reference .gcommand {
font-weight: bold;
@ -16,4 +19,15 @@ table th.settings_plugin_svgtogcode_profiles_key,table td.settings_plugin_svgtog
#gcode_reference ul li {
list-style: none;
margin-bottom: 1em;
}
.svgtogcode_grayscale {
background-image: linear-gradient(90deg, #FFFFFF, #000000);
width:130px;
display: inline-block;
}
.slider_manual_input.noleftspace{
margin-left: 0em;
}

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

@ -15,8 +15,14 @@ $(function(){
self.defaultSlicer = undefined;
self.defaultProfile = undefined;
// expert settings
self.showExpertSettings = ko.observable(false);
self.gcodeFilename = ko.observable();
self.pierceTime = ko.observable(0);
// vector settings
self.show_vector_parameters = ko.observable(true);
self.laserIntensity = ko.observable(undefined);
self.laserSpeed = ko.observable(undefined);
self.maxSpeed = ko.observable(3000);
@ -26,6 +32,16 @@ $(function(){
self.slicers = ko.observableArray();
self.profile = ko.observable();
self.profiles = ko.observableArray();
// image engraving stuff
self.show_image_parameters = ko.observable(false);
self.imgIntensityWhite = ko.observable(0);
self.imgIntensityBlack = ko.observable(1000);
self.imgFeedrateWhite = ko.observable(3000); // TODO use machineprofile maximum
self.imgFeedrateBlack = ko.observable(500);
self.imgDithering = ko.observable(false);
self.imgSharpening = ko.observable(1);
self.imgContrast = ko.observable(1);
self.maxSpeed.subscribe(function(val){
self._configureFeedrateSlider();
@ -44,6 +60,8 @@ $(function(){
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){
@ -246,6 +264,7 @@ $(function(){
self.files.conversion = self;
self._configureIntensitySlider();
self._configureFeedrateSlider();
// self._configureImgSliders();
};
self._configureIntensitySlider = function() {
@ -303,6 +322,25 @@ $(function(){
self._calcRealSpeed = function(sliderVal){
return Math.round(self.minSpeed() + sliderVal/100 * (self.maxSpeed() - self.minSpeed()));
};
self._configureImgSliders = function() {
self.intensitySlider = $("#svgtogcode_img_intensity_slider").slider({
//id: "svgtogcode_img_intensity_slider_impl",
//reversed: false,
//selection: "after",
// orientation: "horizontal",
// min: 0,
// max: 1000,
// step: 1,
value: [200,500],
// enabled: true,
//formatter: function(value) { return "" ; }
}).on("slideStop", function(ev){
//self.imgIntensity(ev.value);
//console.log(ev.value);
});
};
}

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

@ -631,6 +631,23 @@ $(function(){
}
};
self.getPlacedSvgs = function() {
var svgFiles = [];
ko.utils.arrayForEach(self.placedDesigns(), function(design) {
if(design.type === 'model'){
var extension = design.name.split('.').pop().toLowerCase();
if (extension === "svg") {
svgFiles.push(design);
}
}
});
return svgFiles;
};
self.getPlacedImages = function(){
return snap.selectAll("#userContent image");
};
self.getPlacedGcodes = ko.computed(function() {
var gcodeFiles = [];
ko.utils.arrayForEach(self.placedDesigns(), function(design) {

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

@ -4,27 +4,83 @@
<h3 data-bind="text: title"></h3>
</div>
<div class="modal-body">
<p>{{ _('Please select your laser intensity and speed:') }}</p>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">{{ _('Laser intensity') }} (1-1000)</label>
<div class="controls">
<div class="input-append">
<input id="svgtogcode_intensity_slider" type="text" data-bind="slicerValue: laserIntensity">
<input id="svgtogcode_intensity" class="slider_manual_input" type="text" data-bind="value: laserIntensity, valueUpdate: 'keyup'">
</div>
</div>
<div data-bind="visible: show_vector_parameters ">
<p>{{ _('Vector graphic parameters:') }}</p>
<div class="control-group">
<label class="control-label">{{ _('Laser intensity') }} (1-1000)</label>
<div class="controls">
<div class="input-append">
<input id="svgtogcode_intensity_slider" type="text" data-bind="slicerValue: laserIntensity">
<input id="svgtogcode_intensity" class="slider_manual_input" type="text" data-bind="value: laserIntensity, valueUpdate: 'keyup'">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Speed') }} (<span data-bind="text: minSpeed">20</span> - <span data-bind="text: maxSpeed">3000</span>)</label>
<div class="controls">
<div class="input-append">
<input id="svgtogcode_feedrate_slider" class="uninitialized" type="text" data-bind="value: laserSpeed">
<input id="svgtogcode_feedrate" class="slider_manual_input" type="text" data-bind="value: laserSpeed, valueUpdate: 'keyup'">
</div>
</div>
</div>
<div class="control-group" data-bind="visible: showExpertSettings ">
<label class="control-label">{{ _('Pierce Time (ms)') }} </label>
<div class="controls">
<div class="input-append">
<input type="text" data-bind="value: pierceTime">
</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">{{ _('Speed') }} (<span data-bind="text: minSpeed">20</span> - <span data-bind="text: maxSpeed">3000</span>)</label>
<div class="controls">
<div class="input-append">
<input id="svgtogcode_feedrate_slider" class="uninitialized" type="text" data-bind="value: laserSpeed">
<input id="svgtogcode_feedrate" class="slider_manual_input" type="text" data-bind="value: laserSpeed, valueUpdate: 'keyup'">
</div>
</div>
</div>
<div class="control-group">
<div data-bind="visible: show_image_parameters ">
<p>{{ _('Image engraving parameters:') }}</p>
<div class="control-group" >
<label class="control-label">{{ _('Laser intensity') }}</label>
<div class="controls">
<div class="input-append">
<input id="svgtogcode_img_intensity_white" class="slider_manual_input" type="text" data-bind="value: imgIntensityWhite, valueUpdate: 'keyup'">
<div class="svgtogcode_grayscale">&nbsp;</div>
<input id="svgtogcode_img_intensity_black" class="slider_manual_input noleftspace" type="text" data-bind="value: imgIntensityBlack, valueUpdate: 'keyup'">
</div>
</div>
<label class="control-label">{{ _('Engraving speed') }}</label>
<div class="controls">
<div class="input-append">
<input id="svgtogcode_img_feedrate_white" class="slider_manual_input" type="text" data-bind="value: imgFeedrateWhite, valueUpdate: 'keyup'">
<div class="svgtogcode_grayscale">&nbsp;</div>
<input id="svgtogcode_img_feedrate_black" class="slider_manual_input noleftspace" type="text" data-bind="value: imgFeedrateBlack, valueUpdate: 'keyup'">
</div>
</div>
</div>
<div class="control-group" data-bind="visible: showExpertSettings">
<label class="control-label">{{ _('Preprocessing') }}</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" data-bind="checked: imgDithering">{{ _('Dithering') }}
</label>
</div>
<div class="controls">
<label class="XXcontrol-label">
<input id="svgtogcode_img_sharpening" class="" size="2" type="text" data-bind="value: imgContrast">
{{ _('Contrast') }}</label>
</div>
<div class="controls">
<label class="XXcontrol-label">
<input id="svgtogcode_img_sharpening" class="" size="2" type="text" data-bind="value: imgSharpening">
{{ _('Sharpening') }}</label>
</div>
</div>
</div>
<div class="control-group" data-bind="visible: showExpertSettings ">
<label class="control-label">{{ _('GCode Filename') }}</label>
<div class="controls">
<div class="input-append">
@ -36,6 +92,12 @@
</form>
</div>
<div class="modal-footer">
<div class="pull-left">
<label class="checkbox">
<input type="checkbox" data-bind="checked: showExpertSettings">show advanced settings
</label>
</div>
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
<a href="#" class="btn btn-primary" data-bind="click: function() { if ($root.enableConvertButton()) { $root.convert() } }, enabled: enableConvertButton, css: {disabled: !$root.enableConvertButton()}">{{ _('Convert') }}</a>
</div>