Moved webcam view to Control tab
parent
edea3789b2
commit
3174559072
|
@ -181,6 +181,16 @@ table {
|
||||||
&.timelapse_files_action {
|
&.timelapse_files_action {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 45px;
|
width: 45px;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
color: #ccc;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -274,9 +284,9 @@ ul.dropdown-menu li a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Controls */
|
/** Control tab */
|
||||||
|
|
||||||
#controls {
|
#control {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.jog-panel {
|
.jog-panel {
|
||||||
|
|
|
@ -376,7 +376,7 @@ function TemperatureViewModel(settingsViewModel) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function ControlsViewModel() {
|
function ControlViewModel() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
self.isErrorOrClosed = ko.observable(undefined);
|
self.isErrorOrClosed = ko.observable(undefined);
|
||||||
|
@ -788,7 +788,7 @@ function GcodeFilesViewModel() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function WebcamViewModel() {
|
function TimelapseViewModel() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
self.timelapseType = ko.observable(undefined);
|
self.timelapseType = ko.observable(undefined);
|
||||||
|
@ -847,7 +847,6 @@ function WebcamViewModel() {
|
||||||
dataType: "json",
|
dataType: "json",
|
||||||
success: self.fromResponse
|
success: self.fromResponse
|
||||||
});
|
});
|
||||||
$("#webcam_image").attr("src", CONFIG_WEBCAM_STREAM + "?" + new Date().getTime());
|
|
||||||
}
|
}
|
||||||
|
|
||||||
self.fromResponse = function(response) {
|
self.fromResponse = function(response) {
|
||||||
|
@ -1131,24 +1130,25 @@ function NavigationViewModel(appearanceViewModel, settingsViewModel) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function DataUpdater(connectionViewModel, printerStateViewModel, temperatureViewModel, controlsViewModel, speedViewModel, terminalViewModel, gcodeFilesViewModel, webcamViewModel, gcodeViewModel) {
|
function DataUpdater(connectionViewModel, printerStateViewModel, temperatureViewModel, controlViewModel, speedViewModel, terminalViewModel, gcodeFilesViewModel, timelapseViewModel, gcodeViewModel) {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
self.connectionViewModel = connectionViewModel;
|
self.connectionViewModel = connectionViewModel;
|
||||||
self.printerStateViewModel = printerStateViewModel;
|
self.printerStateViewModel = printerStateViewModel;
|
||||||
self.temperatureViewModel = temperatureViewModel;
|
self.temperatureViewModel = temperatureViewModel;
|
||||||
self.controlsViewModel = controlsViewModel;
|
self.controlViewModel = controlViewModel;
|
||||||
self.terminalViewModel = terminalViewModel;
|
self.terminalViewModel = terminalViewModel;
|
||||||
self.speedViewModel = speedViewModel;
|
self.speedViewModel = speedViewModel;
|
||||||
self.gcodeFilesViewModel = gcodeFilesViewModel;
|
self.gcodeFilesViewModel = gcodeFilesViewModel;
|
||||||
self.webcamViewModel = webcamViewModel;
|
self.timelapseViewModel = timelapseViewModel;
|
||||||
self.gcodeViewModel = gcodeViewModel;
|
self.gcodeViewModel = gcodeViewModel;
|
||||||
|
|
||||||
self._socket = io.connect();
|
self._socket = io.connect();
|
||||||
self._socket.on("connect", function() {
|
self._socket.on("connect", function() {
|
||||||
if ($("#offline_overlay").is(":visible")) {
|
if ($("#offline_overlay").is(":visible")) {
|
||||||
$("#offline_overlay").hide();
|
$("#offline_overlay").hide();
|
||||||
self.webcamViewModel.requestData();
|
self.timelapseViewModel.requestData();
|
||||||
|
$("#webcam_image").attr("src", CONFIG_WEBCAM_STREAM + "?" + new Date().getTime());
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
self._socket.on("disconnect", function() {
|
self._socket.on("disconnect", function() {
|
||||||
|
@ -1170,9 +1170,9 @@ function DataUpdater(connectionViewModel, printerStateViewModel, temperatureView
|
||||||
self.connectionViewModel.fromHistoryData(data);
|
self.connectionViewModel.fromHistoryData(data);
|
||||||
self.printerStateViewModel.fromHistoryData(data);
|
self.printerStateViewModel.fromHistoryData(data);
|
||||||
self.temperatureViewModel.fromHistoryData(data);
|
self.temperatureViewModel.fromHistoryData(data);
|
||||||
self.controlsViewModel.fromHistoryData(data);
|
self.controlViewModel.fromHistoryData(data);
|
||||||
self.terminalViewModel.fromHistoryData(data);
|
self.terminalViewModel.fromHistoryData(data);
|
||||||
self.webcamViewModel.fromHistoryData(data);
|
self.timelapseViewModel.fromHistoryData(data);
|
||||||
self.gcodeViewModel.fromHistoryData(data);
|
self.gcodeViewModel.fromHistoryData(data);
|
||||||
self.gcodeFilesViewModel.fromCurrentData(data);
|
self.gcodeFilesViewModel.fromCurrentData(data);
|
||||||
})
|
})
|
||||||
|
@ -1180,9 +1180,9 @@ function DataUpdater(connectionViewModel, printerStateViewModel, temperatureView
|
||||||
self.connectionViewModel.fromCurrentData(data);
|
self.connectionViewModel.fromCurrentData(data);
|
||||||
self.printerStateViewModel.fromCurrentData(data);
|
self.printerStateViewModel.fromCurrentData(data);
|
||||||
self.temperatureViewModel.fromCurrentData(data);
|
self.temperatureViewModel.fromCurrentData(data);
|
||||||
self.controlsViewModel.fromCurrentData(data);
|
self.controlViewModel.fromCurrentData(data);
|
||||||
self.terminalViewModel.fromCurrentData(data);
|
self.terminalViewModel.fromCurrentData(data);
|
||||||
self.webcamViewModel.fromCurrentData(data);
|
self.timelapseViewModel.fromCurrentData(data);
|
||||||
self.gcodeViewModel.fromCurrentData(data);
|
self.gcodeViewModel.fromCurrentData(data);
|
||||||
self.gcodeFilesViewModel.fromCurrentData(data);
|
self.gcodeFilesViewModel.fromCurrentData(data);
|
||||||
})
|
})
|
||||||
|
@ -1449,11 +1449,11 @@ $(function() {
|
||||||
var settingsViewModel = new SettingsViewModel();
|
var settingsViewModel = new SettingsViewModel();
|
||||||
var appearanceViewModel = new AppearanceViewModel(settingsViewModel);
|
var appearanceViewModel = new AppearanceViewModel(settingsViewModel);
|
||||||
var temperatureViewModel = new TemperatureViewModel(settingsViewModel);
|
var temperatureViewModel = new TemperatureViewModel(settingsViewModel);
|
||||||
var controlsViewModel = new ControlsViewModel();
|
var controlViewModel = new ControlViewModel();
|
||||||
var speedViewModel = new SpeedViewModel();
|
var speedViewModel = new SpeedViewModel();
|
||||||
var terminalViewModel = new TerminalViewModel();
|
var terminalViewModel = new TerminalViewModel();
|
||||||
var gcodeFilesViewModel = new GcodeFilesViewModel();
|
var gcodeFilesViewModel = new GcodeFilesViewModel();
|
||||||
var webcamViewModel = new WebcamViewModel();
|
var timelapseViewModel = new TimelapseViewModel();
|
||||||
var gcodeViewModel = new GcodeViewModel();
|
var gcodeViewModel = new GcodeViewModel();
|
||||||
var navigationViewModel = new NavigationViewModel(appearanceViewModel, settingsViewModel);
|
var navigationViewModel = new NavigationViewModel(appearanceViewModel, settingsViewModel);
|
||||||
|
|
||||||
|
@ -1461,19 +1461,19 @@ $(function() {
|
||||||
connectionViewModel,
|
connectionViewModel,
|
||||||
printerStateViewModel,
|
printerStateViewModel,
|
||||||
temperatureViewModel,
|
temperatureViewModel,
|
||||||
controlsViewModel,
|
controlViewModel,
|
||||||
speedViewModel,
|
speedViewModel,
|
||||||
terminalViewModel,
|
terminalViewModel,
|
||||||
gcodeFilesViewModel,
|
gcodeFilesViewModel,
|
||||||
webcamViewModel,
|
timelapseViewModel,
|
||||||
gcodeViewModel
|
gcodeViewModel
|
||||||
);
|
);
|
||||||
|
|
||||||
//work around a stupid iOS6 bug where ajax requests get cached and only work once, as described at http://stackoverflow.com/questions/12506897/is-safari-on-ios-6-caching-ajax-results
|
//work around a stupid iOS6 bug where ajax requests get cached and only work once, as described at http://stackoverflow.com/questions/12506897/is-safari-on-ios-6-caching-ajax-results
|
||||||
$.ajaxSetup({
|
$.ajaxSetup({
|
||||||
type: 'POST',
|
type: 'POST',
|
||||||
headers: { "cache-control": "no-cache" }
|
headers: { "cache-control": "no-cache" }
|
||||||
});
|
});
|
||||||
|
|
||||||
//~~ Show settings - to ensure centered
|
//~~ Show settings - to ensure centered
|
||||||
$('#navbar_show_settings').click(function() {
|
$('#navbar_show_settings').click(function() {
|
||||||
|
@ -1606,23 +1606,6 @@ $(function() {
|
||||||
//~~ Offline overlay
|
//~~ Offline overlay
|
||||||
$("#offline_overlay_reconnect").click(function() {dataUpdater.reconnect()});
|
$("#offline_overlay_reconnect").click(function() {dataUpdater.reconnect()});
|
||||||
|
|
||||||
//~~ Alert
|
|
||||||
|
|
||||||
/*
|
|
||||||
function displayAlert(text, timeout, type) {
|
|
||||||
var placeholder = $("#alert_placeholder");
|
|
||||||
|
|
||||||
var alertType = "";
|
|
||||||
if (type == "success" || type == "error" || type == "info") {
|
|
||||||
alertType = " alert-" + type;
|
|
||||||
}
|
|
||||||
|
|
||||||
placeholder.append($("<div id='activeAlert' class='alert " + alertType + " fade in' data-alert='alert'><p>" + text + "</p></div>"));
|
|
||||||
placeholder.fadeIn();
|
|
||||||
$("#activeAlert").delay(timeout).fadeOut("slow", function() {$(this).remove(); $("#alert_placeholder").hide();});
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
//~~ knockout.js bindings
|
//~~ knockout.js bindings
|
||||||
|
|
||||||
ko.bindingHandlers.popover = {
|
ko.bindingHandlers.popover = {
|
||||||
|
@ -1647,7 +1630,7 @@ $(function() {
|
||||||
ko.applyBindings(gcodeFilesViewModel, document.getElementById("files"));
|
ko.applyBindings(gcodeFilesViewModel, document.getElementById("files"));
|
||||||
ko.applyBindings(gcodeFilesViewModel, document.getElementById("files-heading"));
|
ko.applyBindings(gcodeFilesViewModel, document.getElementById("files-heading"));
|
||||||
ko.applyBindings(temperatureViewModel, document.getElementById("temp"));
|
ko.applyBindings(temperatureViewModel, document.getElementById("temp"));
|
||||||
ko.applyBindings(controlsViewModel, document.getElementById("controls"));
|
ko.applyBindings(controlViewModel, document.getElementById("control"));
|
||||||
ko.applyBindings(terminalViewModel, document.getElementById("term"));
|
ko.applyBindings(terminalViewModel, document.getElementById("term"));
|
||||||
ko.applyBindings(speedViewModel, document.getElementById("speed"));
|
ko.applyBindings(speedViewModel, document.getElementById("speed"));
|
||||||
ko.applyBindings(gcodeViewModel, document.getElementById("gcode"));
|
ko.applyBindings(gcodeViewModel, document.getElementById("gcode"));
|
||||||
|
@ -1655,9 +1638,9 @@ $(function() {
|
||||||
ko.applyBindings(navigationViewModel, document.getElementById("navbar"));
|
ko.applyBindings(navigationViewModel, document.getElementById("navbar"));
|
||||||
ko.applyBindings(appearanceViewModel, document.getElementsByTagName("head")[0]);
|
ko.applyBindings(appearanceViewModel, document.getElementsByTagName("head")[0]);
|
||||||
|
|
||||||
var webcamElement = document.getElementById("webcam");
|
var timelapseElement = document.getElementById("timelapse");
|
||||||
if (webcamElement) {
|
if (timelapseElement) {
|
||||||
ko.applyBindings(webcamViewModel, document.getElementById("webcam"));
|
ko.applyBindings(timelapseViewModel, document.getElementById("timelapse"));
|
||||||
}
|
}
|
||||||
var gCodeVisualizerElement = document.getElementById("gcode");
|
var gCodeVisualizerElement = document.getElementById("gcode");
|
||||||
if(gCodeVisualizerElement){
|
if(gCodeVisualizerElement){
|
||||||
|
@ -1666,9 +1649,9 @@ $(function() {
|
||||||
//~~ startup commands
|
//~~ startup commands
|
||||||
|
|
||||||
connectionViewModel.requestData();
|
connectionViewModel.requestData();
|
||||||
controlsViewModel.requestData();
|
controlViewModel.requestData();
|
||||||
gcodeFilesViewModel.requestData();
|
gcodeFilesViewModel.requestData();
|
||||||
webcamViewModel.requestData();
|
timelapseViewModel.requestData();
|
||||||
settingsViewModel.requestData();
|
settingsViewModel.requestData();
|
||||||
|
|
||||||
//~~ UI stuff
|
//~~ UI stuff
|
||||||
|
|
|
@ -161,376 +161,364 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="span8">
|
<div class="span8 tabbable">
|
||||||
{% if webcamStream %}
|
<ul class="nav nav-tabs" id="tabs">
|
||||||
<div class="accordion">
|
<li class="active"><a href="#temp" data-toggle="tab">Temperature</a></li>
|
||||||
<div class="accordion-group">
|
<li><a href="#control" data-toggle="tab">Control</a></li>
|
||||||
<div class="accordion-heading">
|
{% if enableGCodeVisualizer %}<li><a href="#gcode" data-toggle="tab">GCode Viewer</a></li>{% endif %}
|
||||||
<a class="accordion-toggle" data-toggle="collapse" href="#webcam"><i class="icon-eye-open"></i> Webcam</a>
|
<!--<li><a href="#speed" data-toggle="tab">Speed</a></li>-->
|
||||||
|
<li><a href="#term" data-toggle="tab">Terminal</a></li>
|
||||||
|
{% if enableTimelapse %}<li><a href="#timelapse" data-toggle="tab">Timelapse</a></li>{% endif %}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="tab-content">
|
||||||
|
<div class="tab-pane active" id="temp">
|
||||||
|
<div class="row" style="padding-left: 20px">
|
||||||
|
<div id="temperature-graph"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-body collapse" id="webcam">
|
<div class="row-fluid" style="margin-bottom: 20px">
|
||||||
<div class="accordion-inner">
|
<div class="form-horizontal span6">
|
||||||
<div id="webcam_container">
|
<h1>Temperature</h1>
|
||||||
<img id="webcam_image" src="{{ webcamStream }}">
|
|
||||||
|
<label>Current: <strong data-bind="html: tempString"></strong></label>
|
||||||
|
|
||||||
|
<label>Target: <strong data-bind="html: targetTempString"></strong></label>
|
||||||
|
|
||||||
|
<label for="temp_newTemp">New Target</label>
|
||||||
|
<div class="input-append">
|
||||||
|
<input type="text" id="temp_newTemp" data-bind="attr: {placeholder: targetTemp}" class="tempInput">
|
||||||
|
<span class="add-on">°C</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="submit" class="btn" id="temp_newTemp_set">Set</button>
|
||||||
|
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<!-- ko foreach: temperature_profiles -->
|
||||||
|
<li>
|
||||||
|
<a href="#" data-bind="click: $parent.setTempFromProfile, text: 'Set ' + name + ' (' + extruder + '°C)'"></a>
|
||||||
|
</li>
|
||||||
|
<!-- /ko -->
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li>
|
||||||
|
<a href="#" data-bind="click: function() { $root.setTemp(0); }">Off</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-horizontal span6">
|
||||||
|
<h1>Bed Temperature</h1>
|
||||||
|
|
||||||
|
<label>Current: <strong data-bind="html: bedTempString"></strong></label>
|
||||||
|
|
||||||
|
<label>Target: <strong data-bind="html: bedTargetTempString"></strong></label>
|
||||||
|
|
||||||
|
<label for="temp_newBedTemp">New Target</label>
|
||||||
|
<div class="input-append">
|
||||||
|
<input type="text" id="temp_newBedTemp" data-bind="attr: {placeholder: bedTargetTemp}" class="tempInput">
|
||||||
|
<span class="add-on">°C</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button type="submit" class="btn" id="temp_newBedTemp_set">Set</button>
|
||||||
|
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<!-- ko foreach: temperature_profiles -->
|
||||||
|
<li>
|
||||||
|
<a href="#" data-bind="click: $parent.setBedTempFromProfile, text: 'Set ' + name + ' (' + bed + '°C)'"></a>
|
||||||
|
</li>
|
||||||
|
<!-- /ko -->
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li>
|
||||||
|
<a href="#" data-bind="click: function(){ $root.setBedTemp(0); }">Off</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="tab-pane" id="control">
|
||||||
{% endif %}
|
{% if webcamStream %}
|
||||||
<div class="tabbable">
|
<div id="webcam_container">
|
||||||
<ul class="nav nav-tabs" id="tabs">
|
<img id="webcam_image" src="{{ webcamStream }}">
|
||||||
<li class="active"><a href="#temp" data-toggle="tab">Temperature</a></li>
|
|
||||||
<li><a href="#controls" data-toggle="tab">Controls</a></li>
|
|
||||||
{% if enableGCodeVisualizer %}<li><a href="#gcode" data-toggle="tab">GCode Viewer</a></li>{% endif %}
|
|
||||||
<!--<li><a href="#speed" data-toggle="tab">Speed</a></li>-->
|
|
||||||
<li><a href="#term" data-toggle="tab">Terminal</a></li>
|
|
||||||
{% if enableTimelapse %}<li><a href="#timelapse" data-toggle="tab">Timelapse</a></li>{% endif %}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div class="tab-content">
|
|
||||||
<div class="tab-pane active" id="temp">
|
|
||||||
<div class="row" style="padding-left: 20px">
|
|
||||||
<div id="temperature-graph"></div>
|
|
||||||
</div>
|
|
||||||
<div class="row-fluid" style="margin-bottom: 20px">
|
|
||||||
<div class="form-horizontal span6">
|
|
||||||
<h1>Temperature</h1>
|
|
||||||
|
|
||||||
<label>Current: <strong data-bind="html: tempString"></strong></label>
|
|
||||||
|
|
||||||
<label>Target: <strong data-bind="html: targetTempString"></strong></label>
|
|
||||||
|
|
||||||
<label for="temp_newTemp">New Target</label>
|
|
||||||
<div class="input-append">
|
|
||||||
<input type="text" id="temp_newTemp" data-bind="attr: {placeholder: targetTemp}" class="tempInput">
|
|
||||||
<span class="add-on">°C</span>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="submit" class="btn" id="temp_newTemp_set">Set</button>
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
|
||||||
<span class="caret"></span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<!-- ko foreach: temperature_profiles -->
|
|
||||||
<li>
|
|
||||||
<a href="#" data-bind="click: $parent.setTempFromProfile, text: 'Set ' + name + ' (' + extruder + '°C)'"></a>
|
|
||||||
</li>
|
|
||||||
<!-- /ko -->
|
|
||||||
<li class="divider"></li>
|
|
||||||
<li>
|
|
||||||
<a href="#" data-bind="click: function() { $root.setTemp(0); }">Off</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-horizontal span6">
|
|
||||||
<h1>Bed Temperature</h1>
|
|
||||||
|
|
||||||
<label>Current: <strong data-bind="html: bedTempString"></strong></label>
|
|
||||||
|
|
||||||
<label>Target: <strong data-bind="html: bedTargetTempString"></strong></label>
|
|
||||||
|
|
||||||
<label for="temp_newBedTemp">New Target</label>
|
|
||||||
<div class="input-append">
|
|
||||||
<input type="text" id="temp_newBedTemp" data-bind="attr: {placeholder: bedTargetTemp}" class="tempInput">
|
|
||||||
<span class="add-on">°C</span>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group">
|
|
||||||
<button type="submit" class="btn" id="temp_newBedTemp_set">Set</button>
|
|
||||||
<button class="btn dropdown-toggle" data-toggle="dropdown">
|
|
||||||
<span class="caret"></span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<!-- ko foreach: temperature_profiles -->
|
|
||||||
<li>
|
|
||||||
<a href="#" data-bind="click: $parent.setBedTempFromProfile, text: 'Set ' + name + ' (' + bed + '°C)'"></a>
|
|
||||||
</li>
|
|
||||||
<!-- /ko -->
|
|
||||||
<li class="divider"></li>
|
|
||||||
<li>
|
|
||||||
<a href="#" data-bind="click: function(){ $root.setBedTemp(0); }">Off</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-pane" id="controls">
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="jog-panel">
|
||||||
|
<!-- XY jogging control panel -->
|
||||||
<div class="jog-panel">
|
<div class="jog-panel">
|
||||||
<!-- XY jogging control panel -->
|
<h1>X/Y</h1>
|
||||||
<div class="jog-panel">
|
|
||||||
<h1>X/Y</h1>
|
|
||||||
<div>
|
|
||||||
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), 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(), click: function() { $root.sendJogCommand('x',-1) }"><i class="icon-arrow-left"></i></button>
|
|
||||||
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand('XY') }"><i class="icon-home"></i></button>
|
|
||||||
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x',1) }"><i class="icon-arrow-right"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y',-1) }"><i class="icon-arrow-down"></i></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Z jogging control panel -->
|
|
||||||
<div class="jog-panel">
|
|
||||||
<h1>Z</h1>
|
|
||||||
<div>
|
|
||||||
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z',1) }"><i class="icon-arrow-up"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand('Z') }"><i class="icon-home"></i></button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), 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" data-distance="0.1">0.1</button>
|
|
||||||
<button type="button" class="btn" data-distance="1">1</button>
|
|
||||||
<button type="button" class="btn active" data-distance="10">10</button>
|
|
||||||
<button type="button" class="btn" data-distance="100">100</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Extrusion control panel -->
|
|
||||||
<div class="jog-panel">
|
|
||||||
<h1>E</h1>
|
|
||||||
<div>
|
<div>
|
||||||
<div class="input-append control-box">
|
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y',1) }"><i class="icon-arrow-up"></i></button>
|
||||||
<input type="text" class="input-mini text-right" data-bind="value: extrusionAmount, enable: isOperational() && !isPrinting(), attr: {placeholder: 5}">
|
|
||||||
<span class="add-on">mm</span>
|
|
||||||
</div>
|
|
||||||
<button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendExtrudeCommand() }">Extrude</button>
|
|
||||||
<button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendRetractCommand() }">Retract</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<!-- General control panel -->
|
|
||||||
<div class="jog-panel">
|
|
||||||
<h1>General</h1>
|
|
||||||
<div>
|
<div>
|
||||||
<button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendCustomCommand({type:'command',command:'M18'}) }"><i class="icon-off"></i> Motors off</button>
|
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x',-1) }"><i class="icon-arrow-left"></i></button>
|
||||||
<button class="btn control-box" data-bind="enable: isOperational(), click: function() { $root.sendCustomCommand({type:'command',command:'M106'}) }">Fans on</button>
|
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand('XY') }"><i class="icon-home"></i></button>
|
||||||
<button class="btn control-box" data-bind="enable: isOperational(), click: function() { $root.sendCustomCommand({type:'command',command:'M106 S0'}) }">Fans off</button>
|
<button class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x',1) }"><i class="icon-arrow-right"></i></button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y',-1) }"><i class="icon-arrow-down"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Z jogging control panel -->
|
||||||
<!-- Container for custom controls -->
|
<div class="jog-panel">
|
||||||
<div style="clear: both;" data-bind="template: { name: $root.displayMode, foreach: controls }"></div>
|
<h1>Z</h1>
|
||||||
|
<div>
|
||||||
<!-- Templates for custom controls -->
|
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z',1) }"><i class="icon-arrow-up"></i></button>
|
||||||
<script type="text/html" id="customControls_sectionTemplate">
|
|
||||||
<h1 data-bind="text: name"></h1>
|
|
||||||
|
|
||||||
<div data-bind="template: { name: $root.displayMode, foreach: children }"></div>
|
|
||||||
</script>
|
|
||||||
<script type="text/html" id="customControls_commandTemplate">
|
|
||||||
<form class="form-inline">
|
|
||||||
<button class="btn" data-bind="text: name, enable: $root.isOperational(), click: function() { $root.sendCustomCommand($data) }"></button>
|
|
||||||
</form>
|
|
||||||
</script>
|
|
||||||
<script type="text/html" id="customControls_parametricCommandTemplate">
|
|
||||||
<form class="form-inline">
|
|
||||||
<!-- ko foreach: input -->
|
|
||||||
<label data-bind="text: name"></label>
|
|
||||||
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: value">
|
|
||||||
<!-- /ko -->
|
|
||||||
<button class="btn" data-bind="text: name, enable: $root.isOperational(), click: function() { $root.sendCustomCommand($data) }"></button>
|
|
||||||
</form>
|
|
||||||
</script>
|
|
||||||
<script type="text/html" id="customControls_emptyTemplate"><div></div></script>
|
|
||||||
<!-- End of templates for custom controls -->
|
|
||||||
</div>
|
|
||||||
<div class="tab-pane" id="speed">
|
|
||||||
<div class="form-horizontal" style="margin-bottom: 20px">
|
|
||||||
<label for="speed_outerWall">Outer Wall</label>
|
|
||||||
<div class="input-append">
|
|
||||||
<input type="text" id="speed_outerWall" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: outerWall}">
|
|
||||||
<span class="add-on">%</span>
|
|
||||||
<button type="submit" class="btn" id="speed_outerWall_set" data-bind="enable: isOperational()">Set</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
<label for="speed_innerWall">Inner Wall</label>
|
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendHomeCommand('Z') }"><i class="icon-home"></i></button>
|
||||||
<div class="input-append">
|
|
||||||
<input type="text" id="speed_innerWall" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: innerWall}">
|
|
||||||
<span class="add-on">%</span>
|
|
||||||
<button type="submit" class="btn" id="speed_innerWall_set" data-bind="enable: isOperational()">Set</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
<label for="speed_fill">Fill</label>
|
<button class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('z',-1) }"><i class="icon-arrow-down"></i></button>
|
||||||
<div class="input-append">
|
|
||||||
<input type="text" id="speed_fill" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: fill}">
|
|
||||||
<span class="add-on">%</span>
|
|
||||||
<button type="submit" class="btn" id="speed_fill_set" data-bind="enable: isOperational()">Set</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<label for="speed_support">Support</label>
|
<!-- Jog distance -->
|
||||||
<div class="input-append">
|
<div class="distance">
|
||||||
<input type="text" id="speed_support" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: support}">
|
<div class="btn-group" data-toggle="buttons-radio" id="jog_distance">
|
||||||
<span class="add-on">%</span>
|
<button type="button" class="btn" data-distance="0.1">0.1</button>
|
||||||
<button type="submit" class="btn" id="speed_support_set" data-bind="enable: isOperational()">Set</button>
|
<button type="button" class="btn" data-distance="1">1</button>
|
||||||
|
<button type="button" class="btn active" data-distance="10">10</button>
|
||||||
|
<button type="button" class="btn" data-distance="100">100</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-pane" id="gcode">
|
<!-- Extrusion control panel -->
|
||||||
<canvas id="canvas" width="572" height="588"></canvas>
|
<div class="jog-panel">
|
||||||
<div id="slider-vertical"></div>
|
<h1>E</h1>
|
||||||
<div id="slider-horizontal"></div>
|
<div>
|
||||||
|
<div class="input-append control-box">
|
||||||
|
<input type="text" class="input-mini text-right" data-bind="value: extrusionAmount, enable: isOperational() && !isPrinting(), attr: {placeholder: 5}">
|
||||||
|
<span class="add-on">mm</span>
|
||||||
|
</div>
|
||||||
|
<button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendExtrudeCommand() }">Extrude</button>
|
||||||
|
<button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendRetractCommand() }">Retract</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- General control panel -->
|
||||||
|
<div class="jog-panel">
|
||||||
|
<h1>General</h1>
|
||||||
|
<div>
|
||||||
|
<button class="btn control-box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendCustomCommand({type:'command',command:'M18'}) }"><i class="icon-off"></i> Motors off</button>
|
||||||
|
<button class="btn control-box" data-bind="enable: isOperational(), click: function() { $root.sendCustomCommand({type:'command',command:'M106'}) }">Fans on</button>
|
||||||
|
<button class="btn control-box" data-bind="enable: isOperational(), click: function() { $root.sendCustomCommand({type:'command',command:'M106 S0'}) }">Fans off</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="gcode_accordion" class="accordion" style="margin-top: 20px">
|
<!-- Container for custom controls -->
|
||||||
<div class="accordion-group">
|
<div style="clear: both;" data-bind="template: { name: $root.displayMode, foreach: controls }"></div>
|
||||||
<div class="accordion-heading">
|
|
||||||
<a class="accordion-toggle" data-toggle="collapse" href="#progressAccordionTab">
|
<!-- Templates for custom controls -->
|
||||||
Progress indicators
|
<script type="text/html" id="customControls_sectionTemplate">
|
||||||
</a>
|
<h1 data-bind="text: name"></h1>
|
||||||
</div>
|
|
||||||
<div id="progressAccordionTab" class="accordion-body collapse in">
|
<div data-bind="template: { name: $root.displayMode, foreach: children }"></div>
|
||||||
<div class="accordion-inner">
|
</script>
|
||||||
<div id="progressBlock">
|
<script type="text/html" id="customControls_commandTemplate">
|
||||||
<div class="progress" >
|
<form class="form-inline">
|
||||||
<div id="loadProgress" class="bar" style="width: 0%;"></div>
|
<button class="btn" data-bind="text: name, enable: $root.isOperational(), click: function() { $root.sendCustomCommand($data) }"></button>
|
||||||
</div>
|
</form>
|
||||||
<div class="progress" >
|
</script>
|
||||||
<div id="analyzeProgress" class="bar" style="width: 0%;"></div>
|
<script type="text/html" id="customControls_parametricCommandTemplate">
|
||||||
</div>
|
<form class="form-inline">
|
||||||
|
<!-- ko foreach: input -->
|
||||||
|
<label data-bind="text: name"></label>
|
||||||
|
<input type="text" class="input-small" data-bind="attr: {placeholder: name}, value: value">
|
||||||
|
<!-- /ko -->
|
||||||
|
<button class="btn" data-bind="text: name, enable: $root.isOperational(), click: function() { $root.sendCustomCommand($data) }"></button>
|
||||||
|
</form>
|
||||||
|
</script>
|
||||||
|
<script type="text/html" id="customControls_emptyTemplate"><div></div></script>
|
||||||
|
<!-- End of templates for custom controls -->
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane" id="speed">
|
||||||
|
<div class="form-horizontal" style="margin-bottom: 20px">
|
||||||
|
<label for="speed_outerWall">Outer Wall</label>
|
||||||
|
<div class="input-append">
|
||||||
|
<input type="text" id="speed_outerWall" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: outerWall}">
|
||||||
|
<span class="add-on">%</span>
|
||||||
|
<button type="submit" class="btn" id="speed_outerWall_set" data-bind="enable: isOperational()">Set</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label for="speed_innerWall">Inner Wall</label>
|
||||||
|
<div class="input-append">
|
||||||
|
<input type="text" id="speed_innerWall" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: innerWall}">
|
||||||
|
<span class="add-on">%</span>
|
||||||
|
<button type="submit" class="btn" id="speed_innerWall_set" data-bind="enable: isOperational()">Set</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label for="speed_fill">Fill</label>
|
||||||
|
<div class="input-append">
|
||||||
|
<input type="text" id="speed_fill" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: fill}">
|
||||||
|
<span class="add-on">%</span>
|
||||||
|
<button type="submit" class="btn" id="speed_fill_set" data-bind="enable: isOperational()">Set</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label for="speed_support">Support</label>
|
||||||
|
<div class="input-append">
|
||||||
|
<input type="text" id="speed_support" class="input-mini" data-bind="enable: isOperational(), attr: {placeholder: support}">
|
||||||
|
<span class="add-on">%</span>
|
||||||
|
<button type="submit" class="btn" id="speed_support_set" data-bind="enable: isOperational()">Set</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane" id="gcode">
|
||||||
|
<canvas id="canvas" width="572" height="588"></canvas>
|
||||||
|
<div id="slider-vertical"></div>
|
||||||
|
<div id="slider-horizontal"></div>
|
||||||
|
|
||||||
|
<div id="gcode_accordion" class="accordion" style="margin-top: 20px">
|
||||||
|
<div class="accordion-group">
|
||||||
|
<div class="accordion-heading">
|
||||||
|
<a class="accordion-toggle" data-toggle="collapse" href="#progressAccordionTab">
|
||||||
|
Progress indicators
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div id="progressAccordionTab" class="accordion-body collapse in">
|
||||||
|
<div class="accordion-inner">
|
||||||
|
<div id="progressBlock">
|
||||||
|
<div class="progress" >
|
||||||
|
<div id="loadProgress" class="bar" style="width: 0%;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="progress" >
|
||||||
|
<div id="analyzeProgress" class="bar" style="width: 0%;"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-group">
|
</div>
|
||||||
<div class="accordion-heading">
|
<div class="accordion-group">
|
||||||
<a class="accordion-toggle" data-toggle="collapse" href="#infoAccordionTab">
|
<div class="accordion-heading">
|
||||||
Model info
|
<a class="accordion-toggle" data-toggle="collapse" href="#infoAccordionTab">
|
||||||
</a>
|
Model info
|
||||||
</div>
|
</a>
|
||||||
<div id="infoAccordionTab" class="accordion-body collapse in">
|
</div>
|
||||||
<div class="accordion-inner">
|
<div id="infoAccordionTab" class="accordion-body collapse in">
|
||||||
<p id="list"></p>
|
<div class="accordion-inner">
|
||||||
</div>
|
<p id="list"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-group">
|
</div>
|
||||||
<div class="accordion-heading">
|
<div class="accordion-group">
|
||||||
<a class="accordion-toggle" data-toggle="collapse" href="#layerAccordionTab">
|
<div class="accordion-heading">
|
||||||
Layer Info
|
<a class="accordion-toggle" data-toggle="collapse" href="#layerAccordionTab">
|
||||||
</a>
|
Layer Info
|
||||||
</div>
|
</a>
|
||||||
<div id="layerAccordionTab" class="accordion-body collapse in">
|
</div>
|
||||||
<div class="accordion-inner">
|
<div id="layerAccordionTab" class="accordion-body collapse in">
|
||||||
<p id="layerInfo"></p>
|
<div class="accordion-inner">
|
||||||
</div>
|
<p id="layerInfo"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="accordion-group">
|
</div>
|
||||||
<div class="accordion-heading">
|
<div class="accordion-group">
|
||||||
<a class="accordion-toggle" data-toggle="collapse" href="#options2DAccordionTab">
|
<div class="accordion-heading">
|
||||||
2D Render options
|
<a class="accordion-toggle" data-toggle="collapse" href="#options2DAccordionTab">
|
||||||
</a>
|
2D Render options
|
||||||
</div>
|
</a>
|
||||||
<div id="options2DAccordionTab" class="accordion-body collapse in">
|
</div>
|
||||||
<div class="accordion-inner">
|
<div id="options2DAccordionTab" class="accordion-body collapse in">
|
||||||
<input type="checkbox" id="showMovesCheckbox" value="1" onclick="GCODE.ui.processOptions()" checked>Show non-extrusion moves</input><br>
|
<div class="accordion-inner">
|
||||||
<input type="checkbox" id="showRetractsCheckbox" value="2" onclick="GCODE.ui.processOptions()" checked>Show retracts and restarts</input><br>
|
<input type="checkbox" id="showMovesCheckbox" value="1" onclick="GCODE.ui.processOptions()" checked>Show non-extrusion moves</input><br>
|
||||||
<input type="checkbox" id="moveModelCheckbox" value="3" onclick="GCODE.ui.processOptions()" checked>Move model to the center of the grid</input><br>
|
<input type="checkbox" id="showRetractsCheckbox" value="2" onclick="GCODE.ui.processOptions()" checked>Show retracts and restarts</input><br>
|
||||||
<input type="checkbox" id="differentiateColorsCheckbox" value="7" onclick="GCODE.ui.processOptions()" checked>Show different speeds with different colors</input><br>
|
<input type="checkbox" id="moveModelCheckbox" value="3" onclick="GCODE.ui.processOptions()" checked>Move model to the center of the grid</input><br>
|
||||||
<input type="checkbox" id="thickExtrusionCheckbox" value="8" onclick="GCODE.ui.processOptions()">Emulate extrusion width</input><br>
|
<input type="checkbox" id="differentiateColorsCheckbox" value="7" onclick="GCODE.ui.processOptions()" checked>Show different speeds with different colors</input><br>
|
||||||
Width modifier: <input type="text" value="2" id="widthModifier" onchange="GCODE.ui.processOptions()"/><br>
|
<input type="checkbox" id="thickExtrusionCheckbox" value="8" onclick="GCODE.ui.processOptions()">Emulate extrusion width</input><br>
|
||||||
<input type="checkbox" id="showNextLayer" value="9" onclick="GCODE.ui.processOptions()" >Show +1 layer</input><br>
|
Width modifier: <input type="text" value="2" id="widthModifier" onchange="GCODE.ui.processOptions()"/><br>
|
||||||
</div>
|
<input type="checkbox" id="showNextLayer" value="9" onclick="GCODE.ui.processOptions()" >Show +1 layer</input><br>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="accordion-group">
|
<div class="accordion-group">
|
||||||
<div class="accordion-heading">
|
<div class="accordion-heading">
|
||||||
<a class="accordion-toggle" data-toggle="collapse" href="#analyzeOptionsAccordioinTab">
|
<a class="accordion-toggle" data-toggle="collapse" href="#analyzeOptionsAccordioinTab">
|
||||||
GCode analyzer options
|
GCode analyzer options
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="analyzeOptionsAccordioinTab" class="accordion-body collapse in">
|
<div id="analyzeOptionsAccordioinTab" class="accordion-body collapse in">
|
||||||
<div class="accordion-inner">
|
<div class="accordion-inner">
|
||||||
These require re-analyzing file:<br>
|
These require re-analyzing file:<br>
|
||||||
<input type="checkbox" id="sortLayersCheckbox" value="4" onclick="GCODE.ui.processOptions()" checked>Sort layers by Z</input><br>
|
<input type="checkbox" id="sortLayersCheckbox" value="4" onclick="GCODE.ui.processOptions()" checked>Sort layers by Z</input><br>
|
||||||
<input type="checkbox" id="purgeEmptyLayersCheckbox" value="5" onclick="GCODE.ui.processOptions()" checked>Hide empty layers</input><br>
|
<input type="checkbox" id="purgeEmptyLayersCheckbox" value="5" onclick="GCODE.ui.processOptions()" checked>Hide empty layers</input><br>
|
||||||
<input type="checkbox" id="showGCodeCheckbox" value="6" onclick="GCODE.ui.processOptions()" checked>Show GCode in GCode tab (memory intensive!)</input><br>
|
<input type="checkbox" id="showGCodeCheckbox" value="6" onclick="GCODE.ui.processOptions()" checked>Show GCode in GCode tab (memory intensive!)</input><br>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-pane" 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 class="input-append">
|
|
||||||
<input type="text" id="terminal-command">
|
|
||||||
<button class="btn" type="button" id="terminal-send">Send</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% if enableTimelapse %}
|
|
||||||
<div class="tab-pane" id="timelapse">
|
|
||||||
<h1>Timelapse Configuration</h1>
|
|
||||||
|
|
||||||
<label for="webcam_timelapse_mode">Timelapse Mode</label>
|
|
||||||
<select id="webcam_timelapse_mode" data-bind="value: timelapseType, enable: isOperational() && !isPrinting()">
|
|
||||||
<option value="off">Off</option>
|
|
||||||
<option value="zchange">On Z Change</option>
|
|
||||||
<option value="timed">Timed</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<div id="webcam_timelapse_timedsettings" data-bind="visible: intervalInputEnabled()">
|
|
||||||
<label for="webcam_timelapse_interval">Interval</label>
|
|
||||||
<div class="input-append">
|
|
||||||
<input type="text" class="input-mini" id="webcam_timelapse_interval" data-bind="value: timelapseTimedInterval, enable: isOperational() && !isPrinting()">
|
|
||||||
<span class="add-on">sec</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<button class="btn" data-bind="click: save, enable: isOperational() && !isPrinting()">Save Settings</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h1>Finished Timelapses</h1>
|
|
||||||
|
|
||||||
<div class="pull-right">
|
|
||||||
<small>Sort by: <a href="#" data-bind="click: function() { listHelper.changeSorting('name'); }">Name (ascending)</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('creation'); }">Creation date (descending)</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('size'); }">Size (descending)</a></small>
|
|
||||||
</div>
|
|
||||||
<table class="table table-striped table-hover table-condensed table-hover" id="timelapse_files">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="timelapse_files_name">Name</th>
|
|
||||||
<th class="timelapse_files_size">Size</th>
|
|
||||||
<th class="timelapse_files_action">Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody data-bind="foreach: listHelper.paginatedItems">
|
|
||||||
<tr data-bind="attr: {title: name}">
|
|
||||||
<td class="timelapse_files_name" data-bind="text: name"></td>
|
|
||||||
<td class="timelapse_files_size" data-bind="text: size"></td>
|
|
||||||
<td class="timelapse_files_action"><a href="#" class="icon-trash" data-bind="click: $parent.removeFile"></a> | <a href="#" class="icon-download" data-bind="attr: {href: url}"></a></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<div class="pagination pagination-mini pagination-centered">
|
|
||||||
<ul>
|
|
||||||
<li data-bind="css: {disabled: listHelper.currentPage() === 0}"><a href="#" data-bind="click: listHelper.prevPage">«</a></li>
|
|
||||||
</ul>
|
|
||||||
<ul data-bind="foreach: listHelper.pages">
|
|
||||||
<li data-bind="css: { active: $data.number === $root.listHelper.currentPage(), disabled: $data.number === -1 }"><a href="#" data-bind="text: $data.text, click: function() { $root.listHelper.changePage($data.number); }"></a></li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li data-bind="css: {disabled: listHelper.currentPage() === listHelper.lastPage()}"><a href="#" data-bind="click: listHelper.nextPage">»</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tab-pane" 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 class="input-append">
|
||||||
|
<input type="text" id="terminal-command">
|
||||||
|
<button class="btn" type="button" id="terminal-send">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% if enableTimelapse %}
|
||||||
|
<div class="tab-pane" id="timelapse">
|
||||||
|
<h1>Timelapse Configuration</h1>
|
||||||
|
|
||||||
|
<label for="webcam_timelapse_mode">Timelapse Mode</label>
|
||||||
|
<select id="webcam_timelapse_mode" data-bind="value: timelapseType, enable: isOperational() && !isPrinting()">
|
||||||
|
<option value="off">Off</option>
|
||||||
|
<option value="zchange">On Z Change</option>
|
||||||
|
<option value="timed">Timed</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div id="webcam_timelapse_timedsettings" data-bind="visible: intervalInputEnabled()">
|
||||||
|
<label for="webcam_timelapse_interval">Interval</label>
|
||||||
|
<div class="input-append">
|
||||||
|
<input type="text" class="input-mini" id="webcam_timelapse_interval" data-bind="value: timelapseTimedInterval, enable: isOperational() && !isPrinting()">
|
||||||
|
<span class="add-on">sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button class="btn" data-bind="click: save, enable: isOperational() && !isPrinting()">Save Settings</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1>Finished Timelapses</h1>
|
||||||
|
|
||||||
|
<div class="pull-right">
|
||||||
|
<small>Sort by: <a href="#" data-bind="click: function() { listHelper.changeSorting('name'); }">Name (ascending)</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('creation'); }">Creation date (descending)</a> | <a href="#" data-bind="click: function() { listHelper.changeSorting('size'); }">Size (descending)</a></small>
|
||||||
|
</div>
|
||||||
|
<table class="table table-striped table-hover table-condensed table-hover" id="timelapse_files">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="timelapse_files_name">Name</th>
|
||||||
|
<th class="timelapse_files_size">Size</th>
|
||||||
|
<th class="timelapse_files_action">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody data-bind="foreach: listHelper.paginatedItems">
|
||||||
|
<tr data-bind="attr: {title: name}">
|
||||||
|
<td class="timelapse_files_name" data-bind="text: name"></td>
|
||||||
|
<td class="timelapse_files_size" data-bind="text: size"></td>
|
||||||
|
<td class="timelapse_files_action"><a href="#" class="icon-trash" data-bind="click: $parent.removeFile"></a> | <a href="#" class="icon-download" data-bind="attr: {href: url}"></a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div class="pagination pagination-mini pagination-centered">
|
||||||
|
<ul>
|
||||||
|
<li data-bind="css: {disabled: listHelper.currentPage() === 0}"><a href="#" data-bind="click: listHelper.prevPage">«</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul data-bind="foreach: listHelper.pages">
|
||||||
|
<li data-bind="css: { active: $data.number === $root.listHelper.currentPage(), disabled: $data.number === -1 }"><a href="#" data-bind="text: $data.text, click: function() { $root.listHelper.changePage($data.number); }"></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li data-bind="css: {disabled: listHelper.currentPage() === listHelper.lastPage()}"><a href="#" data-bind="click: listHelper.nextPage">»</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue