From 4225a63b58a3cbf1d20363f7b6d7aa628e071a06 Mon Sep 17 00:00:00 2001 From: poulou0 Date: Thu, 20 Jul 2023 15:46:22 +0200 Subject: [PATCH] clean-up, integration dashboard + multicam --- README.md | 5 ++- .../static/css/webcamextras.css | 36 +++++++--------- .../static/js/jquery-webcamextras.js | 43 ++++++++----------- setup.py | 2 +- 4 files changed, 37 insertions(+), 49 deletions(-) diff --git a/README.md b/README.md index 693f522..1de15c1 100644 --- 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 index cbeb140..41cc143 100644 --- 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 index e3cb6cf..49afceb 100644 --- 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($('
' + '
')); - if (!$(webcam_container_selector).find(".UICWebCamClick").length) $(webcam_container_selector).append('
'); - if (!$("#IUCWebcamContainer").find(".UICWebCamClick").length) $("#IUCWebcamContainer").append('
'); - $(webcam_container_selector + " .webcam-extras").append($('')); + $(webcam_container_selector).append('
'); + $(webcam_container_selector).find(".webcam-extras").append($('')); $(".webcam-extras").append($('')); - $(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 index c735258..9e25cbe 100644 --- 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