🎨 Support better aspect ratios #3

🐛 Support rotation and flipping of webcam #2
BillyBlaze · Apr 16, 2017 · d9bd9d8 · d9bd9d8
1 parent 9c84ee7
commit d9bd9d8
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 8 deletions.
diff --git a/octoprint_fullscreen/static/css/fullscreen.css b/octoprint_fullscreen/static/css/fullscreen.css
@@ -1,10 +1,73 @@
-img.fullscreen {
+.fullscreen {
 	position: absolute;
 	top: 0;
 	left: 0;
 	width: 100%;
+	height: 100%;
+	background: black;
+	z-index: 99;
+
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	-ms-flex-direction: row;
+	flex-direction: row;
+	-webkit-flex-wrap: nowrap;
+	-ms-flex-wrap: nowrap;
+	flex-wrap: nowrap;
+	-webkit-justify-content: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	-webkit-align-content: center;
+	-ms-flex-line-pack: center;
+	align-content: center;
+	-webkit-align-items: center;
+	-ms-flex-align: center;
 }
-img.fullscreen + #fullscreen-bar {
+.fullscreen img {
+	width: 100%;
+	height: auto;
+	object-fit: contain;
+	display: block;
+	max-height: 100%;
+	max-width: 100%;
+}
+_:-ms-lang(x), _:-webkit-full-screen, .fullscreen img {
+	width: auto;
+	height: 100%;
+}
+.fullscreen.rotate90 {
+	-webkit-transform: none;
+	transform: none;
+}
+.fullscreen.rotate90 img {
+	-webkit-transform: rotate(-90deg);
+	transform: rotate(-90deg);
+	width: 100vh;
+}
+.fullscreen.rotate90 img.flipH {
+	-webkit-transform: rotate(-90deg) scaleX(-1);
+	-moz-transform: rotate(-90deg) scaleX(-1);
+	-ms-transform: rotate(-90deg) scaleX(-1);
+	transform: rotate(-90deg) scaleX(-1);
+	width: 100vh;
+}
+.fullscreen.rotate90 img.flipV {
+	-webkit-transform: rotate(-90deg) scaleY(-1);
+	-moz-transform: rotate(-90deg) scaleY(-1);
+	-ms-transform: rotate(-90deg) scaleY(-1);
+	transform: rotate(-90deg) scaleY(-1);
+	width: 100vh;
+}
+.fullscreen.rotate90 img.flipV.flipH {
+	-webkit-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+	-moz-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+	-ms-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+	transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+	width: 100vh;
+}
+.fullscreen + #fullscreen-bar {
 	display: block;
 }
 #fullscreen-bar {

diff --git a/octoprint_fullscreen/static/js/fullscreen.js b/octoprint_fullscreen/static/js/fullscreen.js
@@ -10,6 +10,7 @@ $(function() {
 		var self = this;
 		var $webcam = $('#webcam_image');
 		var $container = $('#webcam_rotator');
+		var $fullscreenContainer = $("#webcam_container");
 		var $info = $('#fullscreen-bar');
 		var $body = $('body');
 
@@ -19,15 +20,15 @@ $(function() {
 
 		self.printer.isFullscreen = ko.observable(false);
 		self.printer.fullscreen = function() {
-			$container.toggleFullScreen();
+			$fullscreenContainer.toggleFullScreen();
 		}
 
 		$webcam.on("dblclick", function() {
 			$body.toggleClass('inlineFullscreen');
-			$webcam.toggleClass("inline fullscreen");
+			$container.toggleClass("inline fullscreen");
 
 			if(self.printer.isFullscreen()) {
-				$container.toggleFullScreen();
+				$fullscreenContainer.toggleFullScreen();
 			}
 		});
 
@@ -39,7 +40,7 @@ $(function() {
 			}
 		});
 
-		$info.insertAfter($webcam);
+		$info.insertAfter($container);
 		$("#job_pause").clone().appendTo(".user-buttons");
 
 		ko.applyBindings(self.printer, document.getElementById("fullscreen-cancel"))
@@ -52,7 +53,7 @@ $(function() {
 	]);
 });
 
-function formatBarTemperature(toolName, actual, target) {
+function formatBarTemperatureFullscreen(toolName, actual, target) {
 	var output = toolName + ": " + _.sprintf("%.1f&deg;C", actual);
 
 	if (target) {

diff --git a/octoprint_fullscreen/templates/fullscreen.jinja2 b/octoprint_fullscreen/templates/fullscreen.jinja2
@@ -30,5 +30,5 @@
 </div>
 
 <script type="text/html" id="tempTemplate">
-    <span data-bind="html: formatBarTemperature(name(), actual(), target())"></span>
+    <span data-bind="html: formatBarTemperatureFullscreen(name(), actual(), target())"></span>
 </script>