explanatory preview for contrast, sharpening and dithering

src/octoprint/plugins/svgtogcode/static/css/svgtogcode.css

@@ -28,7 +28,7 @@ table th.settings_plugin_svgtogcode_profiles_key,table td.settings_plugin_svgtog
 }
 
 .slider_manual_input.noleftspace{
-	margin-left: 0em; 
+	margin-left: 0; 
 }
 
 svg text {
@@ -39,3 +39,29 @@ svg text {
 	pointer-events: none;
 	
 }
+
+.img_slider{
+	margin-bottom: 24px;
+}
+
+.img_preprocessing_preview {
+    background-size: 150px;
+	display: inline-block;
+	width: 150px;
+	height: 150px;
+}
+
+.img_preprocessing_preview.after {
+    position:relative;
+}
+.img_preprocessing_preview.after>div {
+	position: absolute;
+	top:0;
+	left:0;
+}
+
+.img_preprocessing_preview.after .contrast, 
+.img_preprocessing_preview.after .sharpened, 
+.img_preprocessing_preview.after .sharpened_contrast {
+	opacity: 0;
+}

src/octoprint/plugins/svgtogcode/static/js/convert.js

@@ -43,6 +43,21 @@ $(function(){
 		self.imgSharpening = ko.observable(1);
 		self.imgContrast = ko.observable(1);
 		
+		// preprocessing preview
+		self.sharpenedPreview = ko.computed(function(){
+			if(self.imgDithering()) return 0;
+			else {
+				return (self.imgSharpening() - 1) - (self.imgContrast() - 1)/2;
+			}
+		}, self);
+		self.contrastPreview = ko.computed(function(){
+			if(self.imgDithering()) return 0;
+			else {
+				return (self.imgContrast() - 1) - (self.imgSharpening() - 1)/2;
+			}
+		}, self);
+		
+
 		self.maxSpeed.subscribe(function(val){
 			self._configureFeedrateSlider();
 		});
@@ -271,7 +286,7 @@ $(function(){
 			self.files.conversion = self;
 			self._configureIntensitySlider();
 			self._configureFeedrateSlider();
-//			self._configureImgSliders();
+			self._configureImgSliders();
 		};
 
 		self._configureIntensitySlider = function() {
@@ -331,24 +346,30 @@ $(function(){
 		};
 		
 		self._configureImgSliders = function() {
-			self.intensitySlider = $("#svgtogcode_img_intensity_slider").slider({
+			self.contrastSlider = $("#svgtogcode_contrast_slider").slider({
-				//id: "svgtogcode_img_intensity_slider_impl",
+				step: .1,
-				//reversed: false,
+				min: 1,
-				//selection: "after",
+				max: 2,
-//				orientation: "horizontal",
+				value: 1,
-//				min: 0,
+				tooltip: 'hide',
-//				max: 1000,
+			}).on("slide", function(ev){
-//				step: 1,
+				self.imgContrast(ev.value);
-				value: [200,500],
+			});
-//				enabled: true,
+			
-				//formatter: function(value) { return "" ; }
+			self.sharpeningSlider = $("#svgtogcode_sharpening_slider").slider({
-			}).on("slideStop", function(ev){
+				step: .1,
-				//self.imgIntensity(ev.value);
+				min: 1,
-				//console.log(ev.value);
+				max: 2,
+				value: 1,
+				class: 'img_slider',
+				tooltip: 'hide',
+			}).on("slide", function(ev){
+				self.imgSharpening(ev.value);
 			});
 
 		};
 
+
 	}
 	
     ADDITIONAL_VIEWMODELS.push([VectorConversionViewModel, 

src/octoprint/plugins/svgtogcode/static/js/drag_scale_rotate.js

@@ -231,10 +231,14 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 				this.data('ftCallbacks').push(callback);
 			}
 		};
+		
+		Element.prototype.ftDisableRotate = function(){
+			this.data('block_rotation', true);	
+		};
 	});
 
 	function rectObjFromBB ( bb ) {
-		return { x: bb.x, y: bb.y, width: bb.width, height: bb.height } 
+		return { x: bb.x, y: bb.y, width: bb.width, height: bb.height };
 	}
 
 	function elementDragStart( mainEl, x, y, ev ) {
@@ -292,11 +296,13 @@ Snap.plugin(function (Snap, Element, Paper, global) {
 		var unscale = mainEl.data('unscale');
 		handle.attr({ cx: +handle.data('ocx') + dx*unscale, cy: +handle.data('ocy') + dy*unscale });
 		
+		if(!mainEl.data('block_rotation')){
 			var angle = Snap.angle( mainBB.cx, mainBB.cy, handle.attr('cx'), handle.attr('cy') ) - 180;
 			if(event.shiftKey){
 				angle = Math.round(angle/30) * 30;
 			} 
 			mainEl.data("angle", angle );
+		}
 		
 		var distance = calcDistance( mainBB.cx, mainBB.cy, handle.attr('cx'), handle.attr('cy') );
 		var scale = distance / mainEl.data("scaleFactor");

src/octoprint/plugins/svgtogcode/static/js/working_area.js

@@ -406,6 +406,7 @@ $(function(){
 				newImg.attr({id: previewId, filter: 'url(#grayscale_filter)'});
 				snap.select("#userContent").append(newImg);
 				newImg.transformable();
+				newImg.ftDisableRotate();
 				newImg.ftRegisterCallback(self.svgTransformUpdate);
 				file.id = previewId;
 				file.previewId = previewId;

src/octoprint/plugins/svgtogcode/templates/svgtogcode.jinja2

@@ -58,28 +58,41 @@
 					</div>
 				</div>
 				<div class="control-group" data-bind="visible: showExpertSettings">
-					<label class="control-label">{{ _('Preprocessing') }}</label>
+					<p >{{ _('Image Preprocessing') }}</p>
+					<div class="controls">
+						<div class="img_preprocessing_preview before" style="background-image:url(/plugin/svgtogcode/static/img/kitty_grayscale.png);" >before</div>
+						<div class="img_preprocessing_preview after" style="background-image:url(/plugin/svgtogcode/static/img/kitty_grayscale.png);" >after
+							<div class="img_preprocessing_preview contrast" style="background-image:url(/plugin/svgtogcode/static/img/kitty_contrast.png);" data-bind="style: { opacity: contrastPreview }" ></div>
+							<div class="img_preprocessing_preview sharpened" style="background-image:url(/plugin/svgtogcode/static/img/kitty_sharpened.png);" data-bind="style: { opacity: sharpenedPreview }" ></div>
+							<div class="img_preprocessing_preview dithered" style="background-image:url(/plugin/svgtogcode/static/img/kitty_dithered_150.png);" data-bind="visible: imgDithering"></div>
+						
+						</div>
+					</div>
+					
+					<div data-bind="disable:imgDithering ">
+						<label class="control-label">{{ _('Contrast') }}</label>
+						<div class="controls img_slider">
+							<input id="svgtogcode_contrast_slider" type="text" data-bind="value: imgContrast" >
+						</div>
+						<div style="clear:both"></div>	
+
+						<label class="control-label">{{ _('Sharpening') }}</label>
+						<div class="controls img_slider">
+							<input id="svgtogcode_sharpening_slider" class="uninitialized" type="text" data-bind="value: imgSharpening">
+						</div>
+						<div style="clear:both"></div>
+					</div>
+						
+					<label class="control-label">{{ _('Dithering') }}</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>
 
+			<p>{{ _('Store GCode after conversion:') }}</p>
             <div class="control-group" data-bind="visible: showExpertSettings ">
                 <label class="control-label">{{ _('GCode Filename') }}</label>
                 <div class="controls">