Moved webcam view to Control tab
parent
edea3789b2
commit
3174559072
|
@ -181,6 +181,16 @@ table {
|
|||
&.timelapse_files_action {
|
||||
text-align: center;
|
||||
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;
|
||||
|
||||
.jog-panel {
|
||||
|
|
|
@ -376,7 +376,7 @@ function TemperatureViewModel(settingsViewModel) {
|
|||
}
|
||||
}
|
||||
|
||||
function ControlsViewModel() {
|
||||
function ControlViewModel() {
|
||||
var self = this;
|
||||
|
||||
self.isErrorOrClosed = ko.observable(undefined);
|
||||
|
@ -788,7 +788,7 @@ function GcodeFilesViewModel() {
|
|||
|
||||
}
|
||||
|
||||
function WebcamViewModel() {
|
||||
function TimelapseViewModel() {
|
||||
var self = this;
|
||||
|
||||
self.timelapseType = ko.observable(undefined);
|
||||
|
@ -847,7 +847,6 @@ function WebcamViewModel() {
|
|||
dataType: "json",
|
||||
success: self.fromResponse
|
||||
});
|
||||
$("#webcam_image").attr("src", CONFIG_WEBCAM_STREAM + "?" + new Date().getTime());
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
self.connectionViewModel = connectionViewModel;
|
||||
self.printerStateViewModel = printerStateViewModel;
|
||||
self.temperatureViewModel = temperatureViewModel;
|
||||
self.controlsViewModel = controlsViewModel;
|
||||
self.controlViewModel = controlViewModel;
|
||||
self.terminalViewModel = terminalViewModel;
|
||||
self.speedViewModel = speedViewModel;
|
||||
self.gcodeFilesViewModel = gcodeFilesViewModel;
|
||||
self.webcamViewModel = webcamViewModel;
|
||||
self.timelapseViewModel = timelapseViewModel;
|
||||
self.gcodeViewModel = gcodeViewModel;
|
||||
|
||||
self._socket = io.connect();
|
||||
self._socket.on("connect", function() {
|
||||
if ($("#offline_overlay").is(":visible")) {
|
||||
$("#offline_overlay").hide();
|
||||
self.webcamViewModel.requestData();
|
||||
self.timelapseViewModel.requestData();
|
||||
$("#webcam_image").attr("src", CONFIG_WEBCAM_STREAM + "?" + new Date().getTime());
|
||||
}
|
||||
})
|
||||
self._socket.on("disconnect", function() {
|
||||
|
@ -1170,9 +1170,9 @@ function DataUpdater(connectionViewModel, printerStateViewModel, temperatureView
|
|||
self.connectionViewModel.fromHistoryData(data);
|
||||
self.printerStateViewModel.fromHistoryData(data);
|
||||
self.temperatureViewModel.fromHistoryData(data);
|
||||
self.controlsViewModel.fromHistoryData(data);
|
||||
self.controlViewModel.fromHistoryData(data);
|
||||
self.terminalViewModel.fromHistoryData(data);
|
||||
self.webcamViewModel.fromHistoryData(data);
|
||||
self.timelapseViewModel.fromHistoryData(data);
|
||||
self.gcodeViewModel.fromHistoryData(data);
|
||||
self.gcodeFilesViewModel.fromCurrentData(data);
|
||||
})
|
||||
|
@ -1180,9 +1180,9 @@ function DataUpdater(connectionViewModel, printerStateViewModel, temperatureView
|
|||
self.connectionViewModel.fromCurrentData(data);
|
||||
self.printerStateViewModel.fromCurrentData(data);
|
||||
self.temperatureViewModel.fromCurrentData(data);
|
||||
self.controlsViewModel.fromCurrentData(data);
|
||||
self.controlViewModel.fromCurrentData(data);
|
||||
self.terminalViewModel.fromCurrentData(data);
|
||||
self.webcamViewModel.fromCurrentData(data);
|
||||
self.timelapseViewModel.fromCurrentData(data);
|
||||
self.gcodeViewModel.fromCurrentData(data);
|
||||
self.gcodeFilesViewModel.fromCurrentData(data);
|
||||
})
|
||||
|
@ -1449,11 +1449,11 @@ $(function() {
|
|||
var settingsViewModel = new SettingsViewModel();
|
||||
var appearanceViewModel = new AppearanceViewModel(settingsViewModel);
|
||||
var temperatureViewModel = new TemperatureViewModel(settingsViewModel);
|
||||
var controlsViewModel = new ControlsViewModel();
|
||||
var controlViewModel = new ControlViewModel();
|
||||
var speedViewModel = new SpeedViewModel();
|
||||
var terminalViewModel = new TerminalViewModel();
|
||||
var gcodeFilesViewModel = new GcodeFilesViewModel();
|
||||
var webcamViewModel = new WebcamViewModel();
|
||||
var timelapseViewModel = new TimelapseViewModel();
|
||||
var gcodeViewModel = new GcodeViewModel();
|
||||
var navigationViewModel = new NavigationViewModel(appearanceViewModel, settingsViewModel);
|
||||
|
||||
|
@ -1461,11 +1461,11 @@ $(function() {
|
|||
connectionViewModel,
|
||||
printerStateViewModel,
|
||||
temperatureViewModel,
|
||||
controlsViewModel,
|
||||
controlViewModel,
|
||||
speedViewModel,
|
||||
terminalViewModel,
|
||||
gcodeFilesViewModel,
|
||||
webcamViewModel,
|
||||
timelapseViewModel,
|
||||
gcodeViewModel
|
||||
);
|
||||
|
||||
|
@ -1606,23 +1606,6 @@ $(function() {
|
|||
//~~ Offline overlay
|
||||
$("#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
|
||||
|
||||
ko.bindingHandlers.popover = {
|
||||
|
@ -1647,7 +1630,7 @@ $(function() {
|
|||
ko.applyBindings(gcodeFilesViewModel, document.getElementById("files"));
|
||||
ko.applyBindings(gcodeFilesViewModel, document.getElementById("files-heading"));
|
||||
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(speedViewModel, document.getElementById("speed"));
|
||||
ko.applyBindings(gcodeViewModel, document.getElementById("gcode"));
|
||||
|
@ -1655,9 +1638,9 @@ $(function() {
|
|||
ko.applyBindings(navigationViewModel, document.getElementById("navbar"));
|
||||
ko.applyBindings(appearanceViewModel, document.getElementsByTagName("head")[0]);
|
||||
|
||||
var webcamElement = document.getElementById("webcam");
|
||||
if (webcamElement) {
|
||||
ko.applyBindings(webcamViewModel, document.getElementById("webcam"));
|
||||
var timelapseElement = document.getElementById("timelapse");
|
||||
if (timelapseElement) {
|
||||
ko.applyBindings(timelapseViewModel, document.getElementById("timelapse"));
|
||||
}
|
||||
var gCodeVisualizerElement = document.getElementById("gcode");
|
||||
if(gCodeVisualizerElement){
|
||||
|
@ -1666,9 +1649,9 @@ $(function() {
|
|||
//~~ startup commands
|
||||
|
||||
connectionViewModel.requestData();
|
||||
controlsViewModel.requestData();
|
||||
controlViewModel.requestData();
|
||||
gcodeFilesViewModel.requestData();
|
||||
webcamViewModel.requestData();
|
||||
timelapseViewModel.requestData();
|
||||
settingsViewModel.requestData();
|
||||
|
||||
//~~ UI stuff
|
||||
|
|
|
@ -161,27 +161,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="span8">
|
||||
{% if webcamStream %}
|
||||
<div class="accordion">
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle" data-toggle="collapse" href="#webcam"><i class="icon-eye-open"></i> Webcam</a>
|
||||
</div>
|
||||
<div class="accordion-body collapse" id="webcam">
|
||||
<div class="accordion-inner">
|
||||
<div id="webcam_container">
|
||||
<img id="webcam_image" src="{{ webcamStream }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="tabbable">
|
||||
<div class="span8 tabbable">
|
||||
<ul class="nav nav-tabs" id="tabs">
|
||||
<li class="active"><a href="#temp" data-toggle="tab">Temperature</a></li>
|
||||
<li><a href="#controls" data-toggle="tab">Controls</a></li>
|
||||
<li><a href="#control" data-toggle="tab">Control</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>
|
||||
|
@ -256,7 +239,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="controls">
|
||||
<div class="tab-pane" id="control">
|
||||
{% if webcamStream %}
|
||||
<div id="webcam_container">
|
||||
<img id="webcam_image" src="{{ webcamStream }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="jog-panel">
|
||||
<!-- XY jogging control panel -->
|
||||
<div class="jog-panel">
|
||||
|
@ -533,7 +522,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<ul>
|
||||
<li><a href="https://github.com/foosel/OctoPrint/"><i class="icon-download"></i> Sourcecode</a></li>
|
||||
|
|
Loading…
Reference in New Issue