Adding classes according to flipX, flipY settings and flipping using css

octoprint/server.py

@@ -119,7 +119,9 @@ def index():
 		enableGCodeVisualizer=settings().get(["feature", "gCodeVisualizer"]),
 		enableSystemMenu=settings().get(["system"]) is not None and settings().get(["system", "actions"]) is not None and len(settings().get(["system", "actions"])) > 0,
 		enableAccessControl=userManager is not None,
-		enableSdSupport=settings().get(["feature", "sdSupport"])
+		enableSdSupport=settings().get(["feature", "sdSupport"]),
+		webcamFlipX=settings().get(["webcam", "flipX"]),
+		webcamFlipY=settings().get(["webcam", "flipY"])
 	)
 
 #~~ Printer control

octoprint/settings.py

@@ -35,7 +35,7 @@ default_settings = {
 		"snapshot": None,
 		"ffmpeg": None,
 		"bitrate": "5000k",
-		"watermark": True
+		"watermark": True,
 		"flipX": False,
 		"flipY": False
 	},

octoprint/static/css/octoprint.less

@@ -359,6 +359,18 @@ ul.dropdown-menu li a {
 #webcam_container {
   width: 100%;
 }
+#webcam_container.flipX {
+  -webkit-transform: scaleX(-1);
+  -moz-transform: scaleX(-1);
+}
+#webcam_container.flipY {
+  -webkit-transform: scaleY(-1);
+  -moz-transform: scaleY(-1);
+}
+#webcam_container.flipX.flipY {
+  -webkit-transform: scaleX(-1) scaleY(-1);
+  -moz-transform: scaleX(-1) scaleY(-1);
+}
 
 /** GCODE file manager */
 

octoprint/templates/index.jinja2

@@ -310,7 +310,7 @@
                         </div>
                         <div class="tab-pane" id="control">
                             {% if webcamStream %}
-                            <div id="webcam_container">
+                            <div id="webcam_container" class="{{ 'flipX' if webcamFlipX else '' }} {{ 'flipY' if webcamFlipY else '' }}">
                                 <img id="webcam_image" src="{{ webcamStream }}">
                             </div>
                             {% endif %}