🐛 Fix Webcam w/ OctoPrint 1.3.3

Fix new webcam
BillyBlaze · May 21, 2017 · 6526a33 · 6526a33
1 parent 853c71d
commit 6526a33
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 31 deletions.
diff --git a/octoprint_touchui/static/css/touchui.css b/octoprint_touchui/static/css/touchui.css
diff --git a/octoprint_touchui/static/js/touchui.bundled.js b/octoprint_touchui/static/js/touchui.bundled.js
@@ -1136,10 +1136,13 @@ TouchUI.prototype.knockout.isLoading = function (viewModels) {
 		self.components.touchscreen.isLoading.call(self, viewModels);
 
 		// Reload dimensions of webcam with onload event
+		// Legacy code from 1.3.3
 		// Fixes bug #78
-		$("#webcam_image").on("load", function() {
-			viewModels.controlViewModel.updateRotatorWidth();
-		});
+		if(viewModels.controlViewModel && viewModels.controlViewModel.updateRotatorWidth) {
+			$("#webcam_image").on("load", function() {
+				viewModels.controlViewModel.updateRotatorWidth();
+			});
+		}
 
 		// Prevent user from double clicking in a short period on buttons
 		$(document).on("click", "button:not(#login_button, .box, .distance, .dropdown-toggle)", function(e) {
@@ -1211,9 +1214,12 @@ TouchUI.prototype.knockout.isReady = function (viewModels) {
 		});
 
 		// Remove drag files into website feature
+		$(document).off("drag");
 		$(document).off("dragover");
-		if(viewModels.gcodeFilesViewModel._enableDragNDrop) {
+		if(viewModels.gcodeFilesViewModel && viewModels.gcodeFilesViewModel._enableDragNDrop) {
+			viewModels.gcodeFilesViewModel._enableDragNDrop(false);
 			viewModels.gcodeFilesViewModel._enableDragNDrop = function() {};
+			viewModels.gcodeFilesViewModel._forceEndDragNDrop = function() {};
 		}
 
 		// Hide the dropdown after login
@@ -1472,18 +1478,18 @@ TouchUI.prototype.plugins.screenSquish = function(pluginManagerViewModel) {
 
 };
 
-TouchUI.prototype.plugins.tempsGraph = function() {
-
-	_.remove(OCTOPRINT_VIEWMODELS, function(obj) {
-		if (obj[0] && obj[0].name === "TempsgraphViewModel") {
-			console.info("TouchUI: TempsGraph is disabled while TouchUI is active.");
-			return true;
-		}
-
-		return false;
-	});
-
-}
+TouchUI.prototype.plugins.tempsGraph = function() {
+
+	_.remove(OCTOPRINT_VIEWMODELS, function(obj) {
+		if (obj[0] && obj[0].name === "TempsgraphViewModel") {
+			console.info("TouchUI: TempsGraph is disabled while TouchUI is active.");
+			return true;
+		}
+
+		return false;
+	});
+
+}
 
 TouchUI.prototype.scroll.beforeLoad = function() {
 

diff --git a/octoprint_touchui/static/less/touchui.bundled.less b/octoprint_touchui/static/less/touchui.bundled.less
@@ -2456,13 +2456,14 @@ min-height: 100%;
 background: @main-background;
 color: @text-color;
 position: relative;
-*:not(.fa) {
+* {
 font-family: 'Source Code Pro', monospace;
 .text-shadow(none) !important; 			.box-shadow(none) !important; 		}
 .no-pointer * {
 pointer-events: none !important;
 }
-[class^="icon-"], [class*=" icon-"] {
+[class^="icon-"], [class*=" icon-"],
+[class^="fa-"], [class*=" fa-"] {
 font-family: FontAwesome !important;
 }
 #navbar {
@@ -3042,12 +3043,18 @@ opacity: 0 !important;
 }
 #webcam {
 margin: (-@main-gutter + 1px) -@main-gutter 0;
-#webcam_rotator {
+#webcam_rotator,
+#webcam_rotator .webcam_fixed_ratio .webcam_fixed_ratio_inner {
 display: flex;
 align-content: center;
 align-items: center;
 justify-content: center;
 }
+#webcam_rotator .webcam_fixed_ratio	{
+padding: 0;
+height: 100%;
+width: 100%;
+}
 #webcam_image {
 display: block;
 width: 100%;
@@ -3057,7 +3064,8 @@ height: auto;
 padding: 35px;
 display: block;
 }
-.rotate90 {
+.rotate90,
+.webcam_rotated .webcam_fixed_ratio {
 transform: rotate(0deg) !important;
 height: auto;
 #webcam_image {
@@ -3074,8 +3082,12 @@ transform: rotate(-90deg) scaleY(-1) scaleX(-1) !important;
 }
 }
 }
+.webcam_rotated .webcam_fixed_ratio {
+padding: 0;
+}
 @supports (object-fit: contain) {
-#webcam_rotator {
+#webcam_rotator,
+#webcam_rotator .webcam_fixed_ratio .webcam_fixed_ratio_inner {
 height: ~"calc(100vh - 69px)";
 }
 #webcam_image {

diff --git a/source/js/knockout/isLoading.js b/source/js/knockout/isLoading.js
@@ -5,10 +5,13 @@ TouchUI.prototype.knockout.isLoading = function (viewModels) {
 		self.components.touchscreen.isLoading.call(self, viewModels);
 
 		// Reload dimensions of webcam with onload event
+		// Legacy code from 1.3.3
 		// Fixes bug #78
-		$("#webcam_image").on("load", function() {
-			viewModels.controlViewModel.updateRotatorWidth();
-		});
+		if(viewModels.controlViewModel && viewModels.controlViewModel.updateRotatorWidth) {
+			$("#webcam_image").on("load", function() {
+				viewModels.controlViewModel.updateRotatorWidth();
+			});
+		}
 
 		// Prevent user from double clicking in a short period on buttons
 		$(document).on("click", "button:not(#login_button, .box, .distance, .dropdown-toggle)", function(e) {

diff --git a/source/js/knockout/isReady.js b/source/js/knockout/isReady.js
@@ -21,9 +21,12 @@ TouchUI.prototype.knockout.isReady = function (viewModels) {
 		});
 
 		// Remove drag files into website feature
+		$(document).off("drag");
 		$(document).off("dragover");
-		if(viewModels.gcodeFilesViewModel._enableDragNDrop) {
+		if(viewModels.gcodeFilesViewModel && viewModels.gcodeFilesViewModel._enableDragNDrop) {
+			viewModels.gcodeFilesViewModel._enableDragNDrop(false);
 			viewModels.gcodeFilesViewModel._enableDragNDrop = function() {};
+			viewModels.gcodeFilesViewModel._forceEndDragNDrop = function() {};
 		}
 
 		// Hide the dropdown after login

diff --git a/source/less/tabs/webcam.less b/source/less/tabs/webcam.less
@@ -1,13 +1,20 @@
 #webcam {
 	margin: (-@main-gutter + 1px) -@main-gutter 0;
 
-	#webcam_rotator {
+	#webcam_rotator,
+	#webcam_rotator .webcam_fixed_ratio .webcam_fixed_ratio_inner {
 		display: flex;
 		align-content: center;
 		align-items: center;
 		justify-content: center;
 	}
 
+	#webcam_rotator .webcam_fixed_ratio	{
+		padding: 0;
+		height: 100%;
+		width: 100%;
+	}
+
 	#webcam_image {
 		display: block;
 		width: 100%;
@@ -19,7 +26,8 @@
 		display: block;
 	}
 
-	.rotate90 {
+	.rotate90,
+	.webcam_rotated .webcam_fixed_ratio {
 		transform: rotate(0deg) !important;
 		height: auto;
 
@@ -38,9 +46,13 @@
 			}
 		}
 	}
+	.webcam_rotated .webcam_fixed_ratio {
+		padding: 0;
+	}
 
 	@supports (object-fit: contain) {
-		#webcam_rotator {
+		#webcam_rotator,
+		#webcam_rotator .webcam_fixed_ratio .webcam_fixed_ratio_inner {
 			height: ~"calc(100vh - 69px)";
 		}
 

diff --git a/source/less/touchui.less b/source/less/touchui.less
@@ -25,7 +25,7 @@
 		color: @text-color;
 		position: relative;
 
-		*:not(.fa) {
+		* {
 			font-family: 'Source Code Pro', monospace;
 			.text-shadow(none) !important; /* This should increase performance */
 			.box-shadow(none) !important; /* This should increase performance */
@@ -35,7 +35,8 @@
 			pointer-events: none !important;
 		}
 
-		[class^="icon-"], [class*=" icon-"] {
+		[class^="icon-"], [class*=" icon-"],
+		[class^="fa-"], [class*=" fa-"] {
 			font-family: FontAwesome !important;
 		}