diff --git a/src/octoprint/plugins/svgtogcode/static/js/working_area.js b/src/octoprint/plugins/svgtogcode/static/js/working_area.js index 32c12343..a6a4ffe1 100644 --- a/src/octoprint/plugins/svgtogcode/static/js/working_area.js +++ b/src/octoprint/plugins/svgtogcode/static/js/working_area.js @@ -1,8 +1,9 @@ -function WorkingAreaViewModel(loginStateViewModel, settingsViewModel) { +function WorkingAreaViewModel(loginStateViewModel, settingsViewModel, printerStateViewModel) { var self = this; self.loginState = loginStateViewModel; self.settings = settingsViewModel; + self.state = printerStateViewModel; self.log = []; @@ -23,6 +24,7 @@ function WorkingAreaViewModel(loginStateViewModel, settingsViewModel) { }, this); self.move_laser = function(el){ + console.log(event); var x = event.offsetX; var y = event.toElement.offsetHeight - event.offsetY; console.log(x, y); @@ -36,63 +38,68 @@ function WorkingAreaViewModel(loginStateViewModel, settingsViewModel) { }); } - laser_start = function(e){ + self.laser_start = function(e){ console.log("start lasering...", e); return false; }; + + self.titlePrintButton = self.state.titlePrintButton; + self.titlePauseButton = self.state.titlePauseButton; + self.pause = self.state.pause; + self.cancel = self.state.cancel; - self.enable_focus = function(){ - $root.sendCustomCommand({type:'command',command:'M3S5'}) - } - self.disable_focus = function(){ - $root.sendCustomCommand({type:'command',command:'M5'}) - } - - self.getLaserPos = function(){ - console.log("foo") - x = self.x === undefined ? '?' : self.x; - y = self.y === undefined ? '?' : self.y; - return "x"+ x + ", y"+ y; - } - - self.sendCommand = function() { - var command = self.command(); - if (!command) { - return; - } - - - }; - - self.handleKeyDown = function(event) { - var keyCode = event.keyCode; - - if (keyCode == 38 || keyCode == 40) { - if (keyCode == 38 && self.cmdHistory.length > 0 && self.cmdHistoryIdx > 0) { - console.log("keycode 38") - } else if (keyCode == 40 && self.cmdHistoryIdx < self.cmdHistory.length - 1) { - console.log("keycode 40") - } - - // prevent the cursor from being moved to the beginning of the input field (this is actually the reason - // why we do the arrow key handling in the keydown event handler, keyup would be too late already to - // prevent this from happening, causing a jumpy cursor) - return false; - } - - // do not prevent default action - return true; - }; - - self.handleKeyUp = function(event) { - if (event.keyCode == 13) { - self.sendCommand(); - } - - // do not prevent default action - return true; - }; +// self.enable_focus = function(){ +// $root.sendCustomCommand({type:'command',command:'M3S5'}) +// } +// self.disable_focus = function(){ +// $root.sendCustomCommand({type:'command',command:'M5'}) +// } +// +// self.getLaserPos = function(){ +// console.log("foo") +// x = self.x === undefined ? '?' : self.x; +// y = self.y === undefined ? '?' : self.y; +// return "x"+ x + ", y"+ y; +// } +// +// self.sendCommand = function() { +// var command = self.command(); +// if (!command) { +// return; +// } +// +// +// }; +// +// self.handleKeyDown = function(event) { +// var keyCode = event.keyCode; +// +// if (keyCode == 38 || keyCode == 40) { +// if (keyCode == 38 && self.cmdHistory.length > 0 && self.cmdHistoryIdx > 0) { +// console.log("keycode 38") +// } else if (keyCode == 40 && self.cmdHistoryIdx < self.cmdHistory.length - 1) { +// console.log("keycode 40") +// } +// +// // prevent the cursor from being moved to the beginning of the input field (this is actually the reason +// // why we do the arrow key handling in the keydown event handler, keyup would be too late already to +// // prevent this from happening, causing a jumpy cursor) +// return false; +// } +// +// // do not prevent default action +// return true; +// }; +// +// self.handleKeyUp = function(event) { +// if (event.keyCode == 13) { +// self.sendCommand(); +// } +// +// // do not prevent default action +// return true; +// }; } diff --git a/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 b/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 index aecb9c5a..65ded5b0 100644 --- a/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 +++ b/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 @@ -126,8 +126,57 @@
-
- +
+
+
+ {{ _('Connection') }} +
+
+
+ + + + + + + +
+
+
+
+
+ {{ _('State') }} +
+
+
+ {{ _('Machine State') }}:
+ {{ _('File') }}:  (SD)
+ + + + + {{ _('Approx. Total Job Time') }}:
+ + {{ _('Processed') }}:
+ +
+
+
+ + +
+
+
+
@@ -218,16 +267,76 @@
-
-
+
+
x,y
- +
+ + + +
+
+ +
+ 

+									
+									

+										
+									

+
+									
+								

+								
 							

 						

 					

@@ -277,10 +386,9 @@
 					

 				

 			

+
+
 		

-
-   
-
 		
 		
 		
@@ -314,7 +422,8 @@
         
         
         
-        
+        
+        
         
         
         
diff --git a/src/octoprint/static/css/mrbeam.css b/src/octoprint/static/css/mrbeam.css
index 9f5e122f..1f552e85 100644
--- a/src/octoprint/static/css/mrbeam.css
+++ b/src/octoprint/static/css/mrbeam.css
@@ -1563,3 +1563,8 @@ input.search-query,
 	display: block;
 }
 
+.jog-panel {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+}
\ No newline at end of file
diff --git a/src/octoprint/static/js/app/main.js b/src/octoprint/static/js/app/main.js
index fa5f7107..b58d862c 100644
--- a/src/octoprint/static/js/app/main.js
+++ b/src/octoprint/static/js/app/main.js
@@ -82,7 +82,8 @@ $(function() {
         var gcodeViewModel = new GcodeViewModel(loginStateViewModel, settingsViewModel);
         var navigationViewModel = new NavigationViewModel(loginStateViewModel, appearanceViewModel, settingsViewModel, usersViewModel);
         var logViewModel = new LogViewModel(loginStateViewModel);
-		var workingAreaViewModel = new WorkingAreaViewModel(loginStateViewModel, settingsViewModel);
+		var workingAreaViewModel = new WorkingAreaViewModel(loginStateViewModel, settingsViewModel, printerStateViewModel);
+
 
         var viewModelMap = {
             loginStateViewModel: loginStateViewModel,
@@ -390,35 +391,38 @@ $(function() {
                 })
             }
         };
+			console.log("wavm", workingAreaViewModel);
 
         settingsViewModel.requestData(function() {
+			console.log("settingsViewModel.requestData");
             ko.applyBindings(settingsViewModel, document.getElementById("settings_dialog"));
 
             ko.applyBindings(connectionViewModel, document.getElementById("connection_accordion"));
             ko.applyBindings(printerStateViewModel, document.getElementById("state_accordion"));
             ko.applyBindings(gcodeFilesViewModel, document.getElementById("files_accordion"));
-            ko.applyBindings(temperatureViewModel, document.getElementById("temp"));
+            //ko.applyBindings(temperatureViewModel, document.getElementById("temp"));
             ko.applyBindings(controlViewModel, document.getElementById("control"));
             ko.applyBindings(terminalViewModel, document.getElementById("term"));
-            var gcode = document.getElementById("gcode");
-            if (gcode) {
-                gcodeViewModel.initialize();
-                ko.applyBindings(gcodeViewModel, gcode);
-            }
-            //ko.applyBindings(settingsViewModel, document.getElementById("settings_dialog"));
-            ko.applyBindings(navigationViewModel, document.getElementById("navbar"));
-            ko.applyBindings(appearanceViewModel, document.getElementsByTagName("head")[0]);
-            ko.applyBindings(printerStateViewModel, document.getElementById("drop_overlay"));
-            ko.applyBindings(logViewModel, document.getElementById("logs"));
+//            var gcode = document.getElementById("gcode");
+//            if (gcode) {
+//                gcodeViewModel.initialize();
+//                ko.applyBindings(gcodeViewModel, gcode);
+//            }
+            ko.applyBindings(settingsViewModel, document.getElementById("settings_dialog"));
+//            ko.applyBindings(navigationViewModel, document.getElementById("navbar"));
+//            ko.applyBindings(appearanceViewModel, document.getElementsByTagName("head")[0]);
+//            ko.applyBindings(printerStateViewModel, document.getElementById("drop_overlay"));
+//            ko.applyBindings(logViewModel, document.getElementById("logs"));
 
-            var timelapseElement = document.getElementById("timelapse");
-            if (timelapseElement) {
-                ko.applyBindings(timelapseViewModel, timelapseElement);
-            }
-
-            ko.applyBindings(slicingViewModel, document.getElementById("slicing_configuration_dialog"));
-            ko.applyBindings(vectorConversionViewModel, document.getElementById("dialog_vector_graphics_conversion"));
-			ko.applyBindings(workingAreaViewModel, document.getElementById("working_area"));
+//            var timelapseElement = document.getElementById("timelapse");
+//            if (timelapseElement) {
+//                ko.applyBindings(timelapseViewModel, timelapseElement);
+//            }
+//
+//            ko.applyBindings(slicingViewModel, document.getElementById("slicing_configuration_dialog"));
+//            ko.applyBindings(vectorConversionViewModel, document.getElementById("dialog_vector_graphics_conversion"));
+//			console.log("settingsViewModel.requestData wavm", document.getElementById("working_area"));
+			ko.applyBindings(workingAreaViewModel, document.getElementById("area_preview"));
 
             // apply bindings and signal startup
             _.each(additionalViewModels, function(additionalViewModel) {