diff --git a/README.md b/README.md
index aa0ea80..1ad723f 100644
--- a/README.md
+++ b/README.md
@@ -9,9 +9,9 @@ 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
+* [UI Customizer](https://plugins.octoprint.org/plugins/uicustomizer/)
+
+:))
\ No newline at end of file
diff --git a/octoprint_webcamextras/static/css/webcamextras.css b/octoprint_webcamextras/static/css/webcamextras.css
index 498d8e7..804005d 100644
--- a/octoprint_webcamextras/static/css/webcamextras.css
+++ b/octoprint_webcamextras/static/css/webcamextras.css
@@ -47,8 +47,11 @@ body > #webcam_container .keycontrol_overlay { display: none !important; }
/* https://github.com/jhuckaby/Effect-Games/tree/master/htdocs/images/cursors */
#webcam_rotator,
-#IUCWebcamContainerInner { cursor: url(zoom-in.cur), auto; }
+#IUCWebcamContainerInner,
+#UICWebCamFull img { cursor: url(zoom-in.cur), auto; }
#webcam_rotator.zoomed-in,
-#IUCWebcamContainerInner.zoomed-in { cursor: url(zoom-out.cur), auto; }
+#IUCWebcamContainerInner.zoomed-in,
+#UICWebCamFull.zoomed-in img { cursor: url(zoom-out.cur), auto; }
#webcam_rotator img,
-#IUCWebcamContainerInner img { transition: all 250ms; }
+#IUCWebcamContainerInner img,
+#UICWebCamFull img { transition: all 250ms; }
diff --git a/octoprint_webcamextras/static/js/jquery-webcamextras.js b/octoprint_webcamextras/static/js/jquery-webcamextras.js
index 2a40bd7..ec98c00 100644
--- a/octoprint_webcamextras/static/js/jquery-webcamextras.js
+++ b/octoprint_webcamextras/static/js/jquery-webcamextras.js
@@ -1,108 +1,110 @@
-$(function() {
+$(function () {
function WebcamExtrasViewModel(parameters) {
- this.onStartupComplete = function() {
+ this.onStartupComplete = function () {
- var fullscreen_handler = function(e) {
+ var fullscreen_handler = function (e) {
if (!document.fullscreenElement) {
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);
+ 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();
}
}
- };
-
- $("#webcam_container").before($(''));
- $("#webcam_container, #IUCWebcamContainer").append('');
- $("#webcam_container .webcam-extras").append($(''));
+ };
+
+ $("#webcam_container").before($(''));
+ if (!$("#webcam_container").find(".UICWebCamClick").length) $("#webcam_container").append('');
+ if (!$("#IUCWebcamContainer").find(".UICWebCamClick").length) $("#IUCWebcamContainer").append('');
+ $("#webcam_container .webcam-extras").append($(''));
$(".webcam-extras").append($(''));
- $("#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 = 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;
- /*consider any page scrolling:*/
- x = x - window.pageXOffset;
- y = y - window.pageYOffset;
- return {x : x, y : y};
- }
- var pos = getCursorPos(e);
- img.css(
- "transform",
- "scale(3) translate(" + (img.width()/3 - pos.x/1.5) + "px, " + (img.height()/3 - pos.y / 1.5) + "px)"
- );
- }
- zoomHandler(e);
-
- img_wrapper.on("mousemove touchmove", zoomHandler);
- img_wrapper.on("mouseout touchout", function(e) {
- img.css("transform", "none");
- });
- } else {
- img_wrapper.off("mousemove touchmove mouseout touchout");
- img.css("transform", "none");
- }
- img_wrapper.toggleClass("zoomed-in");
- });
- $('.webcam-extras-fullscreen').on("click", 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();
- if (!$('body > #webcam_container').length) {
- if (document.fullscreenElement) document.exitFullscreen();
- relative.hide().clone(true, true).appendTo('body')
- .fadeIn()
- .on('mousedown', function(e){
- //https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui
- var dr = $(this).addClass("drag");
- height = dr.outerHeight();
- width = dr.outerWidth();
- max_left = dr.parent().offset().left + dr.parent().width() - dr.width();
- max_top = dr.parent().offset().top + dr.parent().height() - dr.height();
- min_left = dr.parent().offset().left;
- min_top = dr.parent().offset().top;
+ $(document).on("click", "#webcam_rotator, #IUCWebcamContainerInner, #UICWebCamFull", 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 = 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;
+ /*consider any page scrolling:*/
+ x = x - window.pageXOffset;
+ y = y - window.pageYOffset;
+ return { x: x, y: y };
+ }
+ var pos = getCursorPos(e);
+ img.css(
+ "transform",
+ "scale(3) translate(" + (img.width() / 3 - pos.x / 1.5) + "px, " + (img.height() / 3 - pos.y / 1.5) + "px)"
+ );
+ }
+ zoomHandler(e);
+
+ img_wrapper.on("mousemove touchmove", zoomHandler);
+ img_wrapper.on("mouseout touchout", function (e) {
+ img.css("transform", "none");
+ });
+ } else {
+ img_wrapper.off("mousemove touchmove mouseout touchout");
+ img.css("transform", "none");
+ }
+ img_wrapper.toggleClass("zoomed-in");
+ });
+ $('.webcam-extras-fullscreen').on("click", fullscreen_handler);
+ if (!$("#webcam_container").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');
+ var placeholder = $('.webcam-extras-floating-window-placeholder').show();
+ if (!$('body > #webcam_container').length) {
+ if (document.fullscreenElement) document.exitFullscreen();
+ relative.hide().clone(true, true).appendTo('body')
+ .fadeIn()
+ .on('mousedown', function (e) {
+ //https://www.sanwebe.com/2014/10/draggable-element-with-jquery-no-jquery-ui
+ var dr = $(this).addClass("drag");
+ height = dr.outerHeight();
+ width = dr.outerWidth();
+ max_left = dr.parent().offset().left + dr.parent().width() - dr.width();
+ max_top = dr.parent().offset().top + dr.parent().height() - dr.height();
+ min_left = dr.parent().offset().left;
+ min_top = dr.parent().offset().top;
- ypos = dr.offset().top + height - e.pageY,
- xpos = dr.offset().left + width - e.pageX;
- $(window).on('mousemove', function(e){
- var itop = e.pageY + ypos - height;
- var ileft = e.pageX + xpos - width;
-
- if(dr.hasClass("drag")){
- if(itop <= min_top ) { itop = min_top; }
- if(ileft <= min_left ) { ileft = min_left; }
- if(itop >= max_top ) { itop = max_top; }
- if(ileft >= max_left ) { ileft = max_left; }
- dr.offset({ top: itop,left: ileft});
- }
- }).on('mouseup', function(e){
- dr.removeClass("drag");
- });
+ ypos = dr.offset().top + height - e.pageY,
+ xpos = dr.offset().left + width - e.pageX;
+ $(window).on('mousemove', function (e) {
+ var itop = e.pageY + ypos - height;
+ var ileft = e.pageX + xpos - width;
+
+ if (dr.hasClass("drag")) {
+ if (itop <= min_top) { itop = min_top; }
+ if (ileft <= min_left) { ileft = min_left; }
+ if (itop >= max_top) { itop = max_top; }
+ if (ileft >= max_left) { ileft = max_left; }
+ dr.offset({ top: itop, left: ileft });
+ }
+ }).on('mouseup', function (e) {
+ dr.removeClass("drag");
+ });
});
- //.draggable({ containment: "window" })
- //.resizable({aspectRatio: 16 / 9, handles: "n, e, s, w", minHeight: 150, maxHeight: $( window ).height() - 100});
- relative.next().css('opacity', 0);
- placeholder.show();
- } else {
- $('body > #webcam_container').remove();
-
- relative.fadeIn().next().css('opacity', 1);
- placeholder.hide();
- }
- });
+ //.draggable({ containment: "window" })
+ //.resizable({aspectRatio: 16 / 9, handles: "n, e, s, w", minHeight: 150, maxHeight: $( window ).height() - 100});
+ relative.next().css('opacity', 0);
+ placeholder.show();
+ } else {
+ $('body > #webcam_container').remove();
+
+ relative.fadeIn().next().css('opacity', 1);
+ placeholder.hide();
+ }
+ });
};
}
diff --git a/setup.py b/setup.py
index e784a35..108c7fe 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.4"
+plugin_version = "0.0.5"
# The plugin's description. Can be overwritten within OctoPrint's internal data via __plugin_description__ in the plugin
# module