q3k
/
OctoPrint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved webcam view to Control tab

master
Gina Häußge 2013-04-07 22:15:04 +02:00
parent edea3789b2
commit 3174559072
3 changed files with 357 additions and 376 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
octoprint/static/css/octoprint.less
View File

@ -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 {

59
octoprint/static/js/ui.js
View File

@ -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,11 +1461,11 @@ $(function() {
connectionViewModel, connectionViewModel,
printerStateViewModel, printerStateViewModel,
temperatureViewModel, temperatureViewModel,
controlsViewModel, controlViewModel,
speedViewModel, speedViewModel,
terminalViewModel, terminalViewModel,
gcodeFilesViewModel, gcodeFilesViewModel,
webcamViewModel, timelapseViewModel,
gcodeViewModel gcodeViewModel
); );
@ -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

30
octoprint/templates/index.html
View File

@ -161,27 +161,10 @@
</div> </div>
</div> </div>
<div class="span8"> <div class="span8 tabbable">
{% 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">
<ul class="nav nav-tabs" id="tabs"> <ul class="nav nav-tabs" id="tabs">
<li class="active"><a href="#temp" data-toggle="tab">Temperature</a></li> <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 %} {% 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="#speed" data-toggle="tab">Speed</a></li>-->
<li><a href="#term" data-toggle="tab">Terminal</a></li> <li><a href="#term" data-toggle="tab">Terminal</a></li>
@ -256,7 +239,13 @@
</div> </div>
</div> </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"> <div class="jog-panel">
<!-- XY jogging control panel --> <!-- XY jogging control panel -->
<div class="jog-panel"> <div class="jog-panel">
@ -533,7 +522,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="footer"> <div class="footer">
<ul> <ul>
<li><a href="https://github.com/foosel/OctoPrint/"><i class="icon-download"></i> Sourcecode</a></li> <li><a href="https://github.com/foosel/OctoPrint/"><i class="icon-download"></i> Sourcecode</a></li>