From 733d00a048f00da32037a0ccfbed6d0fe729ea88 Mon Sep 17 00:00:00 2001 From: poulou Date: Tue, 1 Feb 2022 11:11:48 +0100 Subject: [PATCH] UI customizer integration --- README.md | 7 +++- .../static/css/webcamextras.css | 18 +++++--- octoprint_webcamextras/static/css/zoom-in.cur | Bin 0 -> 326 bytes .../static/css/zoom-out.cur | Bin 0 -> 326 bytes .../static/js/jquery-webcamextras.js | 39 ++++++++++-------- setup.py | 2 +- 6 files changed, 40 insertions(+), 26 deletions(-) create mode 100644 octoprint_webcamextras/static/css/zoom-in.cur create mode 100644 octoprint_webcamextras/static/css/zoom-out.cur diff --git a/README.md b/README.md index 4809a32..aa0ea80 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # OctoPrint-WebcamExtras -Fun & useful extra buttons in the Control tab webcam view +Fun & useful extra buttons in the webcam view ## Setup @@ -10,3 +10,8 @@ or manually using this URL: https://github.com/poulou0/OctoPrint-WebcamExtras/archive/refs/heads/main.zip :)) + +## Compatible with: +* Default theme +* [Themefy](https://plugins.octoprint.org/plugins/themeify/) +* [UI Customizer](https://plugins.octoprint.org/plugins/uicustomizer/) (disable the 'Float/Fullscreen webcam icon') \ No newline at end of file diff --git a/octoprint_webcamextras/static/css/webcamextras.css b/octoprint_webcamextras/static/css/webcamextras.css index 62f3382..498d8e7 100644 --- a/octoprint_webcamextras/static/css/webcamextras.css +++ b/octoprint_webcamextras/static/css/webcamextras.css @@ -1,4 +1,5 @@ -#webcam_container { +#webcam_container, +#IUCWebcamContainer { user-select: none; overflow: hidden; } @@ -20,10 +21,12 @@ top: 5px; opacity: 0; } +#IUCWebcamContainer .webcam-extras { right: 20px; top: 15px; } .webcam-extras .btn { margin: 2px; } -#webcam_container:hover .webcam-extras { opacity: 1; } +#webcam_container:hover .webcam-extras, +#IUCWebcamContainer:hover .webcam-extras { opacity: 1; } body > #webcam_container { position: fixed; @@ -42,7 +45,10 @@ body > #webcam_container:active { body > #webcam_container .keycontrol_overlay { display: none !important; } -#webcam_rotator { cursor: -webkit-zoom-in; cursor: zoom-in; } -#webcam_rotator.zoomed-in { cursor: -webkit-zoom-out; cursor: zoom-out; } -#webcam_rotator #webcam_image { transition: all 250ms; } -body > #webcam_container #webcam_image{ transform: none !important; } +/* https://github.com/jhuckaby/Effect-Games/tree/master/htdocs/images/cursors */ +#webcam_rotator, +#IUCWebcamContainerInner { cursor: url(zoom-in.cur), auto; } +#webcam_rotator.zoomed-in, +#IUCWebcamContainerInner.zoomed-in { cursor: url(zoom-out.cur), auto; } +#webcam_rotator img, +#IUCWebcamContainerInner img { transition: all 250ms; } diff --git a/octoprint_webcamextras/static/css/zoom-in.cur b/octoprint_webcamextras/static/css/zoom-in.cur new file mode 100644 index 0000000000000000000000000000000000000000..2d37dbf077c3a4120b1ab0522fcfd6d8e4610578 GIT binary patch literal 326 zcmZQzU}9ioP*7lCU;{z}Mg|5k1_lNVAO;FCH~=vt5P|`ef^ZPz|Ns9H94fN-fo9ns zU|_HW;>rgM3<(Jk3}S=CKyn~8AOLg&W#BJR`wt-g2*i*7|Nn6O|NjI0|Nl40Lofr7 Ojf`R92ke1rfm#64b9?Xr literal 0 HcmV?d00001 diff --git a/octoprint_webcamextras/static/css/zoom-out.cur b/octoprint_webcamextras/static/css/zoom-out.cur new file mode 100644 index 0000000000000000000000000000000000000000..08ef22c9113f30bc95bbad6e93dd7641dc608557 GIT binary patch literal 326 zcmb`Bu?>JA6hsdTTRU4RE!{vzVG|vV&NWP2Ksy_A9wNbB@8`k&%l`zRfPu9@sp #webcam_container")[0] || $("#control #webcam_container")[0]; - var req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen; - req.call(elem); + var elem = $(e.currentTarget).parents("#webcam_container").get(0); + if (!elem) elem = $(e.currentTarget).parents("#IUCWebcamContainer").get(0); + var req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen; + req.call(elem); } else { if (document.exitFullscreen) { document.exitFullscreen(); @@ -16,17 +17,19 @@ $(function() { $("#webcam_container").before($('
' + '
')); - $("#webcam_container").append('
'); - $(".webcam-extras").append($('')); + $("#webcam_container, #IUCWebcamContainer").append('
'); + $("#webcam_container .webcam-extras").append($('')); $(".webcam-extras").append($('')); - $("#webcam_rotator").on("click", function(e) { - if(!$("#webcam_rotator").hasClass("zoomed-in")) { + $("#webcam_rotator, #IUCWebcamContainerInner").on("click", function(e) { + var img_wrapper = $(this); + var img = img_wrapper.find("img"); + if(!img_wrapper.hasClass("zoomed-in")) { var zoomHandler = function(e) { function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /*get the x and y positions of the image:*/ - a = document.getElementById("webcam_rotator").getBoundingClientRect(); + a = img_wrapper[0].getBoundingClientRect(); /*calculate the cursor's x and y coordinates, relative to the image:*/ x = e.pageX - a.left; y = e.pageY - a.top; @@ -36,25 +39,25 @@ $(function() { return {x : x, y : y}; } var pos = getCursorPos(e); - $("#webcam_image").css( + img.css( "transform", - "scale(3) translate(" + ($("#webcam_image").width()/3 - pos.x/1.5) + "px, " + ($("#webcam_image").height()/3 - pos.y / 1.5) + "px)" + "scale(3) translate(" + (img.width()/3 - pos.x/1.5) + "px, " + (img.height()/3 - pos.y / 1.5) + "px)" ); } zoomHandler(e); - $("#webcam_rotator").on("mousemove touchmove", zoomHandler); - $("#webcam_rotator").on("mouseout touchout", function(e) { - $("#webcam_image").css("transform", "none"); + img_wrapper.on("mousemove touchmove", zoomHandler); + img_wrapper.on("mouseout touchout", function(e) { + img.css("transform", "none"); }); } else { - $("#webcam_rotator").off("mousemove touchmove mouseout touchout"); - $("#webcam_image").css("transform", "none"); + img_wrapper.off("mousemove touchmove mouseout touchout"); + img.css("transform", "none"); } - $("#webcam_rotator").toggleClass("zoomed-in"); + img_wrapper.toggleClass("zoomed-in"); }); $('.webcam-extras-fullscreen').on("click", fullscreen_handler); - $('#webcam_container').on("dblclick", fullscreen_handler); + $('#webcam_rotator, #IUCWebcamContainerInner').on("dblclick", fullscreen_handler); $('.webcam-extras-floating-window, .webcam-extras-floating-window-placeholder .fa-stack').on("click", function() { var relative = $('#control #webcam_container'); var placeholder = $('.webcam-extras-floating-window-placeholder').show(); diff --git a/setup.py b/setup.py index b9bb337..e784a35 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.3" +plugin_version = "0.0.4" # The plugin's description. Can be overwritten within OctoPrint's internal data via __plugin_description__ in the plugin # module