working area dynamically enlarged as much as possible

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

@@ -17,10 +17,12 @@ function WorkingAreaViewModel(loginStateViewModel, settingsViewModel, printerSta
     self.isReady = ko.observable(undefined);
     self.isLoading = ko.observable(undefined);
 	
+	self.px2mm_factor = 1;
+	
 
 	self.move_laser = function(el){
-		var x = event.offsetX;
-		var y = event.toElement.offsetHeight - event.offsetY;
+		var x = self.px2mm(event.offsetX);
+		var y = self.px2mm(event.toElement.offsetHeight - event.offsetY);
 		var command = "G0 X"+x+" Y"+y;
 		$.ajax({
 			url: API_BASEURL + "printer/command",
@@ -31,20 +33,55 @@ function WorkingAreaViewModel(loginStateViewModel, settingsViewModel, printerSta
 		});
 	};
 	
+	
+	
 	self.crosshairX = function(){
 		var pos = self.state.currentPos(); 
-		return pos !== undefined ? (pos.x  - 15) : -100; // subtract width/2;
+		return pos !== undefined ? (self.mm2px(pos.x)  - 15) : -100; // subtract width/2;
 		
 	};
 	self.crosshairY = function(){
 		var h = document.getElementById('area_preview').clientHeight;
 		var pos = self.state.currentPos();
-		return pos !== undefined ? (h - pos.y  - 15) : -100; // subtract height/2;
+		return pos !== undefined ? (h - self.mm2px(pos.y)  - 15) : -100; // subtract height/2;
 	};
 
 	
-
-
+	self.workingAreaWidth = function(){
+		return self.getDivDimensions()[0];
+	};
+	
+	self.workingAreaHeight = function(){
+		return self.getDivDimensions()[1];
+	};
+	
+	self.getDivDimensions = function(){
+		var maxH = document.documentElement.clientHeight - $('body>nav').height() - $('footer>*').outerHeight();
+		var maxW = $('#workingarea div.span8').innerWidth();
+		
+		// y/x = 297/216 respectively 594/432
+		var hwRatio = self.settings.printer_bedDimensionY() / self.settings.printer_bedDimensionX();
+		var w = 0;
+		var h = 0;
+		if( maxH/maxW > hwRatio) { 
+			w = maxW;
+			h = maxW * hwRatio;
+		} else {
+			w = maxH / hwRatio;
+			h = maxH;
+		}
+		var dim = [w,h];
+		self.px2mm_factor = self.settings.printer_bedDimensionX() / dim[0];
+		return dim;
+	};
+	
+	self.px2mm = function(val){
+		return val * self.px2mm_factor;
+	};
+	
+	self.mm2px = function(val){
+		return val / self.px2mm_factor;
+	};
 }
 
 

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

@@ -322,7 +322,13 @@ var UI_API_KEY = "{{ uiApiKey }}";
 
 										</div>
 										<div class="span8">
-											<div id="area_preview" class="workingarea"  data-bind="click: move_laser, style: {backgroundPosition: crosshairX()+'px'+' '+crosshairY()+'px'}">
+											<div id="area_preview" class="workingarea" 
+												 data-bind="click: move_laser, 
+													style: {
+														backgroundPosition: crosshairX()+'px'+' '+crosshairY()+'px',
+														width: workingAreaWidth()+'px',
+														height: workingAreaHeight()+'px'
+													}">
 											</div>
 										</div>
 									</div>

src/octoprint/static/css/mrbeam.css

@@ -1529,8 +1529,8 @@ input.search-query,
 
 .workingarea {
 	border:1px solid black;
-	height:297px;
-	width:210px; 
+	height:80vh;
+	width:auto; 
 	position:relative;
 }
 

src/octoprint/static/js/app/viewmodels/control.js

@@ -110,12 +110,9 @@ function ControlViewModel(loginStateViewModel, settingsViewModel, printerStateVi
 	
 	self.laserPos = ko.computed(function(){
 		var pos = self.printerState.currentPos();
-		console.log(pos)
 		if(!pos){
-			console.log("foo");
 			return "(?, ?)";
 		} else {
-			console.log("bar")
 			return "("+ pos.x + ", "+ pos.y + ")";
 		}
 	}, this);