clean-up, integration dashboard + multicam

poulou0 · Jul 20, 2023 · 4225a63 · 4225a63
1 parent 7a6b558
commit 4225a63
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -11,10 +11,13 @@ or manually using this URL:
 
 ## Compatible with:
 * Default theme
-* [Themeify](https://plugins.octoprint.org/plugins/themeify/)
+* [Dashboard](https://plugins.octoprint.org/plugins/dashboard/)
 * [UI Customizer](https://plugins.octoprint.org/plugins/uicustomizer/) (uncheck "Float/Fullscreen webcam" on the settings)
+* [Themeify](https://plugins.octoprint.org/plugins/themeify/)
+* [MultiCam](https://plugins.octoprint.org/plugins/multicam/)
 
 :))
 
 ## Known issues
 * Rotated webcam
+* Multicam, camera menu on floating window
diff --git a/octoprint_webcamextras/static/css/webcamextras.css b/octoprint_webcamextras/static/css/webcamextras.css
@@ -1,6 +1,5 @@
-#webcam_container,
-#webcam_img_container,
-#IUCWebcamContainer {
+#webcam_plugins_container,
+#dashboard_webcam_container {
     user-select: none;
     overflow: hidden;
 }
@@ -22,17 +21,12 @@
     top: 5px;
     opacity: 0;
 }
-#IUCWebcamContainer .webcam-extras { right: 20px; top: 15px; }
-#IUCWebcamContainer .accordion-inner .webcam-extras { display: none; }
 
 .webcam-extras .btn { margin: 2px; }
 
-#webcam_container:hover .webcam-extras,
-#webcam_img_container:hover .webcam-extras,
-#IUCWebcamContainer:hover .webcam-extras { opacity: 1; }
+#webcam_plugins_container:hover .webcam-extras { opacity: 1; }
 
-body > #webcam_container,
-body > #webcam_img_container {
+body > #webcam_plugins_container {
     position: fixed;
     bottom: 10px;
     right: 10px;
@@ -43,24 +37,24 @@ body > #webcam_img_container {
     resize: both;
     border-radius: 5px;
 }
-body > #webcam_container:active,
-body > #webcam_img_container:active {
+body > #webcam_plugins_container:active {
     cursor: move;
 }
 
-body > #webcam_container .keycontrol_overlay,
-body > #webcam_img_container .keycontrol_overlay { display: none !important; }
+body > #webcam_plugins_container .keycontrol_overlay { display: none !important; }
 
 /* https://github.com/jhuckaby/Effect-Games/tree/master/htdocs/images/cursors */
 #webcam_rotator,
 .webcam_unrotated,
-#IUCWebcamContainerInner,
-#UICWebCamFull img { cursor: url(zoom-in.cur), auto; }
+#dashboard_webcam_toggle { cursor: url(zoom-in.cur), auto; }
 #webcam_rotator.zoomed-in,
 .webcam_unrotated.zoomed-in,
-#IUCWebcamContainerInner.zoomed-in,
-#UICWebCamFull.zoomed-in img { cursor: url(zoom-out.cur), auto; }
+#dashboard_webcam_toggle.zoomed-in { cursor: url(zoom-out.cur), auto; }
 #webcam_rotator img,
-.webcam_unrotated img,
-#IUCWebcamContainerInner img,
-#UICWebCamFull img { transition: all 250ms; max-width: 100vw; max-height: 100vh; }
+.webcam_unrotated img { transition: all 250ms; max-width: 100vw; max-height: 100vh; }
+
+/** THIRD PARTY INTEGRATIONS */
+/* UI Customizer, hide the floating window button on the column widget  */
+#IUCWebcamContainer .accordion-inner .webcam-extras .webcam-extras-floating-window-button { display: none; }
+/* MultiCam, move the camera selector to the left */
+#webcam_plugins_container .nav { right: auto; left: 5px; }
diff --git a/octoprint_webcamextras/static/js/jquery-webcamextras.js b/octoprint_webcamextras/static/js/jquery-webcamextras.js
@@ -1,13 +1,13 @@
 $(function () {
     if ($(".touchui").length) return;
-    var webcam_container_selector = $("#webcam_container").length === 0 ? "#webcam_img_container" : "#webcam_container";
+    var webcam_container_selector = "#webcam_plugins_container, #dashboard_webcam_container";
+    var webcam_container_selector_control_tab = "#webcam_plugins_container";
     function WebcamExtrasViewModel(parameters) {
         this.onStartupComplete = function () {
 
             var fullscreen_handler = function (e) {
                 if (!document.fullscreenElement) {
                     var elem = $(e.currentTarget).parents(webcam_container_selector).get(0);
-                    if (!elem) elem = $(e.currentTarget).parents("#IUCWebcamContainer").get(0);
                     var req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
                     req.call(elem);
                 } else {
@@ -19,11 +19,11 @@ $(function () {
 
             $(webcam_container_selector).before($('<div class="webcam-extras-floating-window-placeholder">' +
                 '<span class="fa-stack fa-4x"><i class="fas fa-expand fa-stack-2x"></i><i class="fas fa-window-restore fa-stack-1x"></i></span></div>'));
-            if (!$(webcam_container_selector).find(".UICWebCamClick").length) $(webcam_container_selector).append('<div class="webcam-extras"></div>');
-            if (!$("#IUCWebcamContainer").find(".UICWebCamClick").length) $("#IUCWebcamContainer").append('<div class="webcam-extras"></div>');
-            $(webcam_container_selector + " .webcam-extras").append($('<button class="btn webcam-extras-floating-window"><i class="fas fa-window-restore fa-flip-horizontal"></i></button>'));
+            $(webcam_container_selector).append('<div class="webcam-extras"></div>');
+            $(webcam_container_selector).find(".webcam-extras").append($('<button class="btn webcam-extras-floating-window-button"><i class="fas fa-window-restore fa-flip-horizontal"></i></button>'));
             $(".webcam-extras").append($('<button class="btn btn-primary webcam-extras-fullscreen"><i class="fas fa-expand"></i></button>'));
-            $(document).on("click", "#webcam_rotator, .webcam_unrotated, #IUCWebcamContainerInner, #UICWebCamFull", function (e) {
+
+            $(document).on("click", "#webcam_rotator, .webcam_unrotated, #dashboard_webcam_toggle", function (e) {
                 var img_wrapper = $(this);
                 var img = img_wrapper.find("img");
                 if (!img_wrapper.hasClass("zoomed-in")) {
@@ -60,16 +60,17 @@ $(function () {
                 }
                 img_wrapper.toggleClass("zoomed-in");
             });
-            $('.webcam-extras-fullscreen').on("click", fullscreen_handler);
-            if (!$(webcam_container_selector).find(".UICWebCamClick").length) $('#webcam_rotator').on("dblclick", fullscreen_handler);
-            if (!$("#IUCWebcamContainer").find(".UICWebCamClick").length) $('#IUCWebcamContainerInner').on("dblclick", fullscreen_handler);
-            $('.webcam-extras-floating-window, .webcam-extras-floating-window-placeholder .fa-stack').on("click", function () {
-                var relative = $('#control ' + webcam_container_selector);
+            $(document).on("dblclick", "#webcam_rotator, .webcam_unrotated, #dashboard_webcam_toggle", fullscreen_handler);
+
+            $(document).on("click", ".webcam-extras-fullscreen", fullscreen_handler);
+            $(document).on("click", ".webcam-extras-floating-window-button, .webcam-extras-floating-window-placeholder .fa-stack", function () {
+                var relative = $('#control ' + webcam_container_selector_control_tab);
                 var placeholder = $('.webcam-extras-floating-window-placeholder').show();
-                if (!$('body > ' + webcam_container_selector).length) {
+                if (!$('body > .webcam-extras-floating-window').length) {
                     if (document.fullscreenElement) document.exitFullscreen();
                     relative.hide().clone(true, true).appendTo('body')
                         .fadeIn()
+                        .addClass("webcam-extras-floating-window")
                         .on('mousedown', function (e) {
                             //https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui
                             var dr = $(this).addClass("drag");
@@ -102,7 +103,7 @@ $(function () {
                     relative.next().css('opacity', 0);
                     placeholder.show();
                 } else {
-                    $('body > ' + webcam_container_selector).remove();
+                    $('body > .webcam-extras-floating-window').remove();
 
                     relative.fadeIn().next().css('opacity', 1);
                     placeholder.hide();
@@ -111,17 +112,7 @@ $(function () {
         };
     }
 
-    if ($("#webcam_container").length !== 0) {
-        OCTOPRINT_VIEWMODELS.push([
-            WebcamExtrasViewModel,
-            ["controlViewModel"],
-            ["#webcam_container"]
-        ]);
-    } else {
-        OCTOPRINT_VIEWMODELS.push([
-            WebcamExtrasViewModel,
-            ["controlViewModel"],
-            ["#webcam_img_container"]
-        ]);
-    }
+    OCTOPRINT_VIEWMODELS.push([
+        WebcamExtrasViewModel,
+    ]);
 });
diff --git a/setup.py b/setup.py
@@ -14,7 +14,7 @@
 plugin_name = "OctoPrint-WebcamExtras"
 
 # The plugin's version. Can be overwritten within OctoPrint's internal data via __plugin_version__ in the plugin module
-plugin_version = "0.0.10"
+plugin_version = "0.0.11"
 
 # The plugin's description. Can be overwritten within OctoPrint's internal data via __plugin_description__ in the plugin
 # module