Skip to content

Commit

Permalink
UI customizer quickfixes
Browse files Browse the repository at this point in the history
  • Loading branch information
poulou committed Feb 2, 2022
1 parent 733d00a commit b988076
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 100 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
* [UI Customizer](https://plugins.octoprint.org/plugins/uicustomizer/)

:))
9 changes: 6 additions & 3 deletions octoprint_webcamextras/static/css/webcamextras.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
188 changes: 95 additions & 93 deletions octoprint_webcamextras/static/js/jquery-webcamextras.js
View file
Original file line number Diff line number Diff line change
@@ -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($('<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>'));
$("#webcam_container, #IUCWebcamContainer").append('<div class="webcam-extras"></div>');
$("#webcam_container .webcam-extras").append($('<button class="btn webcam-extras-floating-window"><i class="fas fa-window-restore fa-flip-horizontal"></i></button>'));
};

$("#webcam_container").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").find(".UICWebCamClick").length) $("#webcam_container").append('<div class="webcam-extras"></div>');
if (!$("#IUCWebcamContainer").find(".UICWebCamClick").length) $("#IUCWebcamContainer").append('<div class="webcam-extras"></div>');
$("#webcam_container .webcam-extras").append($('<button class="btn webcam-extras-floating-window"><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>'));
$("#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();
}
});
};
}

Expand Down
2 changes: 1 addition & 1 deletion setup.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit b988076

Please sign in to comment.