movement of the laser via mouseclick works
This commit is contained in:
Teja
parent
223227b5b8
commit
358677f42c
4 changed files with 207 additions and 82 deletions
|
|
@ -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;
|
||||
// };
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -126,8 +126,57 @@
|
|||
<div class="tab-pane active" id="workingarea">
|
||||
<div class="container-fluid">
|
||||
<div class="row-fluid">
|
||||
<div class="span3">
|
||||
|
||||
<div class="span4 accordion">
|
||||
<div class="accordion-group" data-bind="visible: loginState.isUser" id="connection_accordion">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" href="#connection"><i class="icon-signal"></i> {{ _('Connection') }}</a>
|
||||
</div>
|
||||
<div class="accordion-body collapse in" id="connection">
|
||||
<div class="accordion-inner">
|
||||
<label for="connection_ports" data-bind="css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()">{{ _('Serial Port') }}</label>
|
||||
<select id="connection_ports" data-bind="options: portOptions, optionsCaption: 'AUTO', value: selectedPort, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"></select>
|
||||
<label for="connection_baudrates" data-bind="css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()">{{ _('Baudrate') }}</label>
|
||||
<select id="connection_baudrates" data-bind="options: baudrateOptions, optionsCaption: 'AUTO', value: selectedBaudrate, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"></select>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" id="connection_save" data-bind="checked: saveSettings, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"> {{ _('Save connection settings') }}
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" id="connection_autoconnect" data-bind="checked: settings.serial_autoconnect, css: {disabled: !isErrorOrClosed()}, enable: isErrorOrClosed() && loginState.isUser()"> {{ _('Auto-connect on server startup') }}
|
||||
</label>
|
||||
<button class="btn btn-block" id="printer_connect" data-bind="click: connect, text: buttonText(), enable: loginState.isUser()">{{ _('Connect') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-group" id="state_accordion">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" href="#state"><i class="icon-info-sign"></i> {{ _('State') }}</a>
|
||||
</div>
|
||||
<div class="accordion-body collapse in" id="state">
|
||||
<div class="accordion-inner">
|
||||
{{ _('Machine State') }}: <strong data-bind="text: stateString"></strong><br>
|
||||
{{ _('File') }}: <strong data-bind="text: filename"></strong> <strong data-bind="visible: sd">(SD)</strong><br>
|
||||
<!-- {{ _('Timelapse') }}: <strong data-bind="text: timelapseString"></strong><br>-->
|
||||
<!-- ko foreach: filament -->
|
||||
<!--<span data-bind="text: 'Filament (' + name() + '): '"></span><strong data-bind="text: formatFilament(data())"></strong><br>-->
|
||||
<!-- /ko -->
|
||||
{{ _('Approx. Total Job Time') }}: <strong data-bind="text: estimatedPrintTimeString"></strong><br>
|
||||
<!-- {{ _('Print Time') }}: <strong data-bind="text: printTimeString"></strong><br>
|
||||
{{ _('Print Time Left') }}: <strong data-bind="text: printTimeLeftString"></strong><br>-->
|
||||
{{ _('Processed') }}: <strong data-bind="text: byteString"></strong><br>
|
||||
|
||||
<div class="progress">
|
||||
<div class="bar" id="job_progressBar" data-bind="style: { width: progressString() + '%' }"></div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid print-control" style="display: none;" data-bind="visible: loginState.isUser">
|
||||
<button class="btn btn-primary span4" data-bind="click: print, enable: isOperational() && isReady() && !isPrinting() && loginState.isUser(), css: {'btn-danger': isPaused()}, attr: {title: titlePrintButton}" id="job_print"><i class="icon-white" data-bind="css: {'icon-fire': !isPaused(), 'icon-undo': isPaused()}"></i> <span data-bind="text: (isPaused() ? '{{ _('Restart') }}' : '{{ _('Laser') }}')">{{ _('Laser') }}</span></button>
|
||||
<button class="btn span4" id="job_pause" data-bind="click: pause, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser(), css: {active: isPaused()}, attr: {title: titlePauseButton}"><i data-bind="css: {'icon-pause': !isPaused(), 'icon-play': isPaused()}"></i> <span data-bind="visible: !isPaused()">{{ _('Pause') }}</span><span data-bind="visible: isPaused()">{{ _('Resume') }}</span></button>
|
||||
<button class="btn span4" id="job_cancel" data-bind="click: cancel, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser()" title="{{ _('Cancels the job') }}"><i class="icon-stop"></i> {{ _('Cancel') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="state_accordion"></div>
|
||||
<div data-bind="visible: loginState.isUser" id="connection_accordion"></div>
|
||||
|
|
@ -218,16 +267,76 @@
|
|||
|
||||
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="workingarea" data-bind="click: move_laser">
|
||||
<div class="span8">
|
||||
<div id="area_preview" class="workingarea" data-bind="click: move_laser">
|
||||
<div class="laserpos" data-bind="text: laserPos">x,y</div>
|
||||
<button class="laser_btn" data-bind="click: laser_start">Laser</button>
|
||||
<div class="row-fluid print-control" style="display: none;" data-bind="visible: loginState.isUser">
|
||||
<button class="btn btn-primary span4" data-bind="click: print, enable: isOperational() && isReady() && !isPrinting() && loginState.isUser(), css: {'btn-danger': isPaused()}, attr: {title: titlePrintButton}" id="job_print"><i class="icon-white" data-bind="css: {'icon-fire': !isPaused(), 'icon-undo': isPaused()}"></i> <span data-bind="text: (isPaused() ? '{{ _('Restart') }}' : '{{ _('Laser') }}')">{{ _('Laser') }}</span></button>
|
||||
<button class="btn span4" id="job_pause" data-bind="click: pause, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser(), css: {active: isPaused()}, attr: {title: titlePauseButton}"><i data-bind="css: {'icon-pause': !isPaused(), 'icon-play': isPaused()}"></i> <span data-bind="visible: !isPaused()">{{ _('Pause') }}</span><span data-bind="visible: isPaused()">{{ _('Resume') }}</span></button>
|
||||
<button class="btn span4" id="job_cancel" data-bind="click: cancel, enable: isOperational() && (isPrinting() || isPaused()) && loginState.isUser()" title="{{ _('Cancels the job') }}"><i class="icon-stop"></i> {{ _('Cancel') }}</button>
|
||||
</div>
|
||||
<div class="" id="control">
|
||||
|
||||
<div class="jog-panel" style="display: none;" data-bind="visible: loginState.isUser">
|
||||
<!-- XY jogging control panel -->
|
||||
<div class="jog-panel">
|
||||
|
||||
<div>
|
||||
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',1) }"><i class="icon-arrow-up"></i></button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',-1) }"><i class="icon-arrow-left"></i></button>
|
||||
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['x', 'y']) }"><i class="icon-home"></i></button>
|
||||
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('x',1) }"><i class="icon-arrow-right"></i></button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('y',-1) }"><i class="icon-arrow-down"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Z jogging control panel -->
|
||||
<div class="jog-panel" id="control_zaxis">
|
||||
<div>
|
||||
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',1) }"><i class="icon-arrow-up"></i></button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendHomeCommand(['z']) }"><i class="icon-home"></i></button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn box" data-bind="enable: isOperational() && !isPrinting() && loginState.isUser(), click: function() { $root.sendJogCommand('z',-1) }"><i class="icon-arrow-down"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Jog distance -->
|
||||
<div class="distance">
|
||||
<div class="btn-group" data-toggle="buttons-radio" id="jog_distance">
|
||||
<button type="button" class="btn distance" data-distance="0.1" data-bind="enable: loginState.isUser()">0.1</button>
|
||||
<button type="button" class="btn distance" data-distance="1" data-bind="enable: loginState.isUser()">1</button>
|
||||
<button type="button" class="btn distance active" data-distance="10" data-bind="enable: loginState.isUser()">10</button>
|
||||
<button type="button" class="btn distance" data-distance="100" data-bind="enable: loginState.isUser()">100</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="" id="term">
|
||||
<pre id="terminal-output" class="pre-scrollable"></pre>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" id="terminal-autoscroll" data-bind="checked: autoscrollEnabled"> {{ _('Autoscroll') }}
|
||||
</label>
|
||||
<div data-bind="foreach: filters">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" data-bind="attr: { value: regex }, checked: $parent.activeFilters"> <span data-bind="text: name"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="input-append" style="display: none;" data-bind="visible: loginState.isUser">
|
||||
<input type="text" id="terminal-command" data-bind="value: command, event: { keyup: function(d,e) { return handleKeyUp(e); }, keydown: function(d,e) { return handleKeyDown(e); } }, enable: isOperational() && loginState.isUser()">
|
||||
<button class="btn" type="button" id="terminal-send" data-bind="click: sendCommand, enable: isOperational() && loginState.isUser()">{{ _('Send') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -277,10 +386,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!------->
|
||||
|
||||
<!------>
|
||||
|
|
@ -314,7 +422,8 @@
|
|||
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/modernizr.custom.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/underscore-min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/underscore.string.min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/knockout.js') }}"></script>
|
||||
<!--<script type="text/javascript" src="{{ url_for('static', filename='js/lib/knockout.js') }}"></script>-->
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/knockout-2.2.1.debug.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/knockout.mapping-latest.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/babel.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/avltree.js') }}"></script>
|
||||
|
|
|
|||
|
|
@ -1563,3 +1563,8 @@ input.search-query,
|
|||
display: block;
|
||||
}
|
||||
|
||||
.jog-panel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue