Show webcam in separate tab
This commit is contained in:
malnvenshorn
parent
ff752b34c4
commit
eadd760a30
@ -8,15 +8,9 @@ __copyright__ = "Copyright (C) 2017 Sven Lohrmann - Released under terms of the
|
||||
import octoprint.plugin
|
||||
|
||||
|
||||
class WebcamTabPlugin(octoprint.plugin.SettingsPlugin,
|
||||
octoprint.plugin.AssetPlugin,
|
||||
class WebcamTabPlugin(octoprint.plugin.AssetPlugin,
|
||||
octoprint.plugin.TemplatePlugin):
|
||||
|
||||
# SettingsPlugin mixin
|
||||
|
||||
def get_settings_defaults(self):
|
||||
return dict()
|
||||
|
||||
# AssetPlugin mixin
|
||||
|
||||
def get_assets(self):
|
||||
@ -24,6 +18,13 @@ class WebcamTabPlugin(octoprint.plugin.SettingsPlugin,
|
||||
js=["js/webcamtab.js"]
|
||||
)
|
||||
|
||||
# TemplatePlugin
|
||||
|
||||
def get_template_configs(self):
|
||||
return [
|
||||
dict(type="tab", name="Webcam")
|
||||
]
|
||||
|
||||
# Softwareupdate hook
|
||||
|
||||
def get_update_information(self):
|
||||
|
||||
@ -8,21 +8,64 @@ $(function() {
|
||||
function WebcamTabViewModel(parameters) {
|
||||
var self = this;
|
||||
|
||||
// assign the injected parameters, e.g.:
|
||||
// self.loginStateViewModel = parameters[0];
|
||||
// self.settingsViewModel = parameters[1];
|
||||
self.control = parameters[0];
|
||||
|
||||
// TODO: Implement your plugin's view model here.
|
||||
self.control.onTabChange = function (current, previous) {
|
||||
// replaced #control with #tab_plugin_webcamtab
|
||||
if (current == "#tab_plugin_webcamtab") {
|
||||
self.control._enableWebcam();
|
||||
} else if (previous == "#tab_plugin_webcamtab") {
|
||||
self.control._disableWebcam();
|
||||
}
|
||||
};
|
||||
|
||||
self.control._enableWebcam = function() {
|
||||
// replaced #control with #tab_plugin_webcamtab
|
||||
if (OctoPrint.coreui.selectedTab != "#tab_plugin_webcamtab" || !OctoPrint.coreui.browserTabVisible) {
|
||||
return;
|
||||
}
|
||||
|
||||
// view model class, parameters for constructor, container to bind to
|
||||
OCTOPRINT_VIEWMODELS.push([
|
||||
WebcamTabViewModel,
|
||||
if (self.control.webcamDisableTimeout != undefined) {
|
||||
clearTimeout(self.control.webcamDisableTimeout);
|
||||
}
|
||||
var webcamImage = $("#webcam_image");
|
||||
var currentSrc = webcamImage.attr("src");
|
||||
|
||||
// e.g. loginStateViewModel, settingsViewModel, ...
|
||||
[ /* "loginStateViewModel", "settingsViewModel" */ ],
|
||||
// safari bug doesn't release the mjpeg stream, so we just set it up the once
|
||||
if (self.control._isSafari() && currentSrc != undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
// e.g. #settings_plugin_webcamtab, #tab_plugin_webcamtab, ...
|
||||
[ /* ... */ ]
|
||||
]);
|
||||
var newSrc = self.control.settings.webcam_streamUrl();
|
||||
if (currentSrc != newSrc) {
|
||||
if (newSrc.lastIndexOf("?") > -1) {
|
||||
newSrc += "&";
|
||||
} else {
|
||||
newSrc += "?";
|
||||
}
|
||||
newSrc += new Date().getTime();
|
||||
|
||||
self.control.webcamLoaded(false);
|
||||
self.control.webcamError(false);
|
||||
webcamImage.attr("src", newSrc);
|
||||
}
|
||||
};
|
||||
|
||||
self.onStartup = function() {
|
||||
var container = $("#control #webcam_container");
|
||||
if (container.length) {
|
||||
var hint = container.next();
|
||||
if (hint.attr("data-bind") === "visible: keycontrolPossible") {
|
||||
hint.remove();
|
||||
}
|
||||
container.remove();
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
OCTOPRINT_VIEWMODELS.push({
|
||||
construct: WebcamTabViewModel,
|
||||
dependencies: ["controlViewModel"],
|
||||
elements: ["#tab_plugin_webcamtab"]
|
||||
});
|
||||
});
|
||||
|
||||
36
octoprint_webcamtab/templates/webcamtab_tab.jinja2
Normal file
36
octoprint_webcamtab/templates/webcamtab_tab.jinja2
Normal file
@ -0,0 +1,36 @@
|
||||
<div id="webcam_container" tabindex="0" data-bind="event: { keydown: control.onKeyDown, mouseover: control.onMouseOver, mouseout: control.onMouseOut, focus: control.onFocus }">
|
||||
<div class="nowebcam" data-bind="visible: !control.webcamLoaded()">
|
||||
<div class="text webcam_loading" data-bind="visible: !control.webcamLoaded() && !control.webcamError()">
|
||||
<p><strong>{{ _('Webcam stream loading...') }}</strong></p>
|
||||
</div>
|
||||
<div class="text webcam_error" data-bind="visible: !control.webcamLoaded() && control.webcamError()">
|
||||
<p><strong>{{ _('Webcam stream not loaded') }}</strong></p>
|
||||
<p><small>{{ _('It might not be correctly configured. You can change the URL of the stream under "Settings" > "Webcam & Timelapse" > "Stream URL". If you don\'t have a webcam just set the URL to an empty value.') }}</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="webcam_rotator" data-bind="css: { webcam_rotated: control.settings.webcam_rotate90(), webcam_unrotated: !control.settings.webcam_rotate90() }">
|
||||
<div class="webcam_fixed_ratio" data-bind="css: control.webcamRatioClass">
|
||||
<div class="webcam_fixed_ratio_inner">
|
||||
<img id="webcam_image" data-bind="css: { flipH: control.settings.webcam_flipH(), flipV: control.settings.webcam_flipV() }, event: { load: control.onWebcamLoaded, error: control.onWebcamErrored }, visible: !control.webcamError()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="keycontrol_overlay" data-bind="visible: control.showKeycontrols">
|
||||
<div class="keycontrol_overlay_heading">{{ _("Keyboard controls active") }} <a href="#" data-bind="click: control.toggleKeycontrolHelp"><i data-bind="css: { 'icon-chevron-down': !control.keycontrolHelpActive(), 'icon-chevron-up': control.keycontrolHelpActive() }"></i></a></div>
|
||||
<div data-bind="visible: control.keycontrolHelpActive">
|
||||
<div class="keycontrol_overlay_column">
|
||||
<kbd>→</kbd> / <kbd>←</kbd>: {{ _("X Axis") }} +/-<br>
|
||||
<kbd>↑</kbd> / <kbd>↓</kbd>: {{ _("Y Axis") }} +/-<br>
|
||||
<kbd>W</kbd>, <kbd>{{ _("Page↑") }}</kbd> / <kbd>S</kbd>, <kbd>{{ _("Page↓") }}</kbd>: {{ _("Z Axis") }} +/-
|
||||
</div>
|
||||
<div class="keycontrol_overlay_column">
|
||||
<kbd>Home</kbd>: {{ _("Home X/Y") }}<br>
|
||||
<kbd>End</kbd>: {{ _("Home Z") }}<br>
|
||||
<kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>, <kbd>4</kbd>: {{ _("Stepsize") }} 0.1, 1, 10, 100mm
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-bind="visible: control.keycontrolPossible">
|
||||
<small class="muted">{{ _("Hint: If you move your mouse over the picture, you enter keyboard control mode.") }}</small>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user