Merge branch 'develop'

README.md

@@ -1,6 +1,6 @@
 # OctoPrint-WebcamTab
 
-This OctoPrint plugin relocates the webcam stream into a separate tab.
+This OctoPrint plugin moves the webcam stream from the controls into its own tab. Keyboard control is still possible and it is compatible with the [FullScreen Plugin](https://github.com/BillyBlaze/OctoPrint-FullScreen).
 
 ## Setup
 

octoprint_webcamtab/__init__.py

@@ -22,7 +22,7 @@ class WebcamTabPlugin(octoprint.plugin.AssetPlugin,
 
     def get_template_configs(self):
         return [
-            dict(type="tab", name="Webcam")
+            dict(type="tab", name="Webcam", template=None)
         ]
 
     # Softwareupdate hook

octoprint_webcamtab/static/js/webcamtab.js

@@ -51,14 +51,15 @@ $(function() {
             }
         };
 
-        self.onStartup = function() {
+        self.onAfterBinding = function() {
-            var container = $("#control #webcam_container");
+            var tab = $("#tab_plugin_webcamtab");
-            if (container.length) {
+            var webcam = $("#webcam_container");
-                var hint = container.next();
+            if (webcam) {
-                if (hint.attr("data-bind") === "visible: keycontrolPossible") {
+                var hint = webcam.next();
-                    hint.remove();
+                tab.append(webcam.detach());
+                if (hint && hint.attr("data-bind") === "visible: keycontrolPossible") {
+                    tab.append(hint.detach());
                 }
-                container.remove();
             }
         };
     };

octoprint_webcamtab/templates/webcamtab_tab.jinja2

@@ -1,36 +0,0 @@
-<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>&rarr;</kbd> / <kbd>&larr;</kbd>: {{ _("X Axis") }} +/-<br>
-                <kbd>&uarr;</kbd> / <kbd>&darr;</kbd>: {{ _("Y Axis") }} +/-<br>
-                <kbd>W</kbd>, <kbd>{{ _("Page&uarr;") }}</kbd> / <kbd>S</kbd>, <kbd>{{ _("Page&darr;") }}</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>

setup.py

@@ -6,7 +6,7 @@ from setuptools import setup
 plugin_identifier = "webcamtab"
 plugin_package = "octoprint_webcamtab"
 plugin_name = "OctoPrint-WebcamTab"
-plugin_version = "0.1.1"
+plugin_version = "0.1.2"
 plugin_description = """Show webcam stream in separate tab"""
 plugin_author = "Sven Lohrmann"
 plugin_author_email = "malnvenshorn@gmail.com"