Request issue #895: Rotate webcam image

src/octoprint/server/api/settings.py

@@ -53,7 +53,8 @@ def getSettings():
 			"ffmpegThreads": s.get(["webcam", "ffmpegThreads"]),
 			"watermark": s.getBoolean(["webcam", "watermark"]),
 			"flipH": s.getBoolean(["webcam", "flipH"]),
-			"flipV": s.getBoolean(["webcam", "flipV"])
+			"flipV": s.getBoolean(["webcam", "flipV"]),
+			"rotate90": s.getBoolean(["webcam", "rotate90"])
 		},
 		"feature": {
 			"gcodeViewer": s.getBoolean(["gcodeViewer", "enabled"]),
@@ -167,6 +168,7 @@ def setSettings():
 		if "watermark" in data["webcam"].keys(): s.setBoolean(["webcam", "watermark"], data["webcam"]["watermark"])
 		if "flipH" in data["webcam"].keys(): s.setBoolean(["webcam", "flipH"], data["webcam"]["flipH"])
 		if "flipV" in data["webcam"].keys(): s.setBoolean(["webcam", "flipV"], data["webcam"]["flipV"])
+		if "rotate90" in data["webcam"].keys(): s.setBoolean(["webcam", "rotate90"], data["webcam"]["rotate90"])
 
 	if "feature" in data.keys():
 		if "gcodeViewer" in data["feature"].keys(): s.setBoolean(["gcodeViewer", "enabled"], data["feature"]["gcodeViewer"])

src/octoprint/settings.py

@@ -113,6 +113,7 @@ def settings(init=False, basedir=None, configfile=None):
 		"watermark": True,
 		"flipH": False,
 		"flipV": False,
+		"rotate90" : False,
 		"timelapse": {
 			"type": "off",
 			"options": {},

src/octoprint/static/js/app/viewmodels/control.js

@@ -396,6 +396,25 @@ $(function() {
             self.requestData();
         };
 
+        self.updateRotatorWidth = function() {
+            var webcamImage = $("#webcam_image");
+            if (self.settings.webcam_rotate90()) {
+                if (webcamImage.width() > 0) {
+                    $("#webcam_rotator").css("height", webcamImage.width());
+                } else {
+                    webcamImage.off("load.rotator");
+                    webcamImage.on("load.rotator", function() {
+                        $("#webcam_rotator").css("height", webcamImage.width());
+                        webcamImage.off("load.rotator");
+                    });
+                }
+            } else {
+                $("#webcam_rotator").css("height", "");
+            }
+        }
+
+        self.onSettingsBeforeSave = self.updateRotatorWidth;
+
         self.onTabChange = function (current, previous) {
             if (current == "#control") {
                 if (self.webcamDisableTimeout != undefined) {
@@ -412,6 +431,7 @@ $(function() {
                     }
                     newSrc += new Date().getTime();
 
+                    self.updateRotatorWidth();
                     webcamImage.attr("src", newSrc);
                 }
             } else if (previous == "#control") {

src/octoprint/static/js/app/viewmodels/settings.js

@@ -70,6 +70,7 @@ $(function() {
         self.webcam_watermark = ko.observable(undefined);
         self.webcam_flipH = ko.observable(undefined);
         self.webcam_flipV = ko.observable(undefined);
+        self.webcam_rotate90 = ko.observable(undefined);
 
         self.feature_gcodeViewer = ko.observable(undefined);
         self.feature_temperatureGraph = ko.observable(undefined);
@@ -222,6 +223,7 @@ $(function() {
             self.webcam_watermark(response.webcam.watermark);
             self.webcam_flipH(response.webcam.flipH);
             self.webcam_flipV(response.webcam.flipV);
+            self.webcam_rotate90(response.webcam.rotate90);
 
             self.feature_gcodeViewer(response.feature.gcodeViewer);
             self.feature_temperatureGraph(response.feature.temperatureGraph);
@@ -298,7 +300,8 @@ $(function() {
                     "ffmpegThreads": self.webcam_ffmpegThreads(),
                     "watermark": self.webcam_watermark(),
                     "flipH": self.webcam_flipH(),
-                    "flipV": self.webcam_flipV()
+                    "flipV": self.webcam_flipV(),
+                    "rotate90": self.webcam_rotate90()
                 },
                 "feature": {
                     "gcodeViewer": self.feature_gcodeViewer(),

src/octoprint/static/less/octoprint.less

@@ -437,16 +437,23 @@ ul.dropdown-menu li a {
   .flipH {
     -webkit-transform: scaleX(-1);
     -moz-transform: scaleX(-1);
+    -ms-transform: scaleX(-1);
   }
 
   .flipV {
     -webkit-transform: scaleY(-1);
     -moz-transform: scaleY(-1);
+    -ms-transform: scaleY(-1);
   }
 
   .flipH.flipV {
     -webkit-transform: scaleX(-1) scaleY(-1);
     -moz-transform: scaleX(-1) scaleY(-1);
+    -ms-transform: scaleX(-1) scaleY(-1);
+  }
+
+  .rotate90 {
+    transform: rotate(-90deg);
   }
 
   .keycontrol_overlay {
@@ -948,4 +955,4 @@ textarea.block {
   height: 100%;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
-}
+}

src/octoprint/templates/dialogs/settings/webcam.jinja2

@@ -47,5 +47,10 @@
                 <input type="checkbox" data-bind="checked: webcam_flipV" id="settings-webcamFlipV"> {{ _('Flip webcam vertically') }}
             </label>
         </div>
+        <div class="controls">
+            <label class="checkbox">
+                <input type="checkbox" data-bind="checked: webcam_rotate90" id="settings-webcamRotate90"> {{ _('Rotate webcam 90 degrees counter clockwise') }}
+            </label>
+        </div>
     </div>
 </form>

src/octoprint/templates/tabs/control.jinja2

@@ -1,6 +1,8 @@
 {% if webcamStream %}
     <div id="webcam_container" tabindex="0" data-bind="event: { keydown: onKeyDown, mouseover: onMouseOver, mouseout: onMouseOut, focus: onFocus }">
-        <img id="webcam_image" data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() }">
+        <div id="webcam_rotator" data-bind="css: { rotate90: settings.webcam_rotate90() }">
+            <img id="webcam_image" data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() }">
+        </div>
         <div class="keycontrol_overlay" data-bind="visible: showKeycontrols">
             <div class="keycontrol_overlay_heading">{{ _("Keyboard controls active") }} <a href="#" data-bind="click: toggleKeycontrolHelp"><i data-bind="css: { 'icon-chevron-down': !keycontrolHelpActive(), 'icon-chevron-up': keycontrolHelpActive() }"></i></a></div>
             <div data-bind="visible: keycontrolHelpActive">

src/octoprint/timelapse.py

@@ -281,6 +281,8 @@ def _createMovie(self, success=True):
 		filters = []
 
 		# flip video if configured
+		if settings().getBoolean(["webcam", "rotate90"]):
+			filters.append('transpose=1')
 		if settings().getBoolean(["webcam", "flipH"]):
 			filters.append('hflip')
 		if settings().getBoolean(["webcam", "flipV"]):