Merge branch 'stable-1.2.2' into camera_support

Conflicts:
	src/octoprint/templates/mrbeam_index.jinja2

src/octoprint/plugins/svgtogcode/static/js/working_area.js

@@ -44,6 +44,8 @@ $(function(){
 				}
 				var dim = [w,h];
 				return dim;
+			} else {
+				return [0,0];
 			}
 		});
 
@@ -97,7 +99,7 @@ $(function(){
 
 
 		self.trigger_resize = function(){
-			if(typeof(snap) !== 'undefined') self.abortFreeTransforms();
+			self.abortFreeTransforms();
 			self.availableHeight(document.documentElement.clientHeight - $('body>nav').outerHeight()  - $('footer>*').outerHeight() - 39); // magic number
 			self.availableWidth($('#workingarea div.span8').innerWidth());
 		};
@@ -613,12 +615,14 @@ $(function(){
 		};
 
 		self.abortFreeTransforms = function(){
+			if(typeof(snap) !== 'undefined'){
 				var tip = snap.selectAll('._freeTransformInProgress');
 				for (var i = 0; i < tip.length; i++) {
 					var el = tip[i];
 					el.ftRemoveHandles();
 				}
 				self.check_sizes_and_placements();
+			}
 		};
 
 		self.getCompositionSVG = function(fillAreas, callback){
@@ -828,6 +832,38 @@ $(function(){
 			$('#tmpSvg').remove();
 		};
 		
+		self.onTabChange = function (current, previous) {
+            if (current === "#workingarea") {
+
+				//self.trigger_resize();
+				//self.check_sizes_and_placements();
+				
+                if (self.webcamDisableTimeout !== undefined) {
+                    clearTimeout(self.webcamDisableTimeout);
+                }
+                var webcamImage = $("#webcam_image");
+                var currentSrc = webcamImage.attr("src");
+                if (currentSrc === undefined || currentSrc.trim() == "") {
+                    var newSrc = CONFIG_WEBCAM_STREAM;
+                    if (CONFIG_WEBCAM_STREAM.lastIndexOf("?") > -1) {
+                        newSrc += "&";
+                    } else {
+                        newSrc += "?";
+                    }
+                    newSrc += new Date().getTime();
+
+                    //self.updateRotatorWidth();
+                    webcamImage.attr("src", newSrc);
+                }
+            } else if (previous === "#workingArea") {
+                // only disable webcam stream if tab is out of focus for more than 5s, otherwise we might cause
+                // more load by the constant connection creation than by the actual webcam stream
+                self.webcamDisableTimeout = setTimeout(function () {
+                    $("#webcam_image").attr("src", "");
+                }, 5000);
+            }
+        };
+
 		self.onBeforeBinding = function(){
 			self.files.workingArea = self;
 		};
@@ -837,6 +873,6 @@ $(function(){
     // view model class, parameters for constructor, container to bind to
     ADDITIONAL_VIEWMODELS.push([WorkingAreaViewModel,
 		["loginStateViewModel", "settingsViewModel", "printerStateViewModel",  "gcodeFilesViewModel"],
-		[document.getElementById("area_preview"), document.getElementById("working_area_files")]]);
+		[document.getElementById("area_preview"), document.getElementById("working_area_files"), document.getElementById("webcam_container")]]);
 
 });

src/octoprint/templates/mrbeam_index.jinja2

@@ -20,7 +20,7 @@
 					</a>
 				</div>
 				<!-- Navbar -->
-				<ul class="nav nav-pills">
+				<ul class="nav nav-pills" id="tabs">
 					<li class="active"><a href="#workingarea" data-toggle="tab" id="wa_tab_btn">working area</a></li>
 					<li><a href="#designlib" data-toggle="tab">design library</a></li>
 					<li><a href="#focus" data-toggle="tab">focus</a></li>
@@ -282,6 +282,22 @@
 							<!--  end sidebar  -->
 
 							<div class="span8">
+                                <div style="position:relative">
+                                    {% if webcamStream %}
+                                        <div id="webcam_container" tabindex="0"
+                                             style="position:absolute; top:0;left:0"
+                                             data-bind="style: {
+                                                width: workingAreaWidthPx()+'px'
+                                            }">
+                                            <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() },
+                                                            style: {
+                                                                width: workingAreaWidthPx()+'px',
+                                                            }"/>
+                                            </div>
+                                        </div>
+                                    {% endif %}
                                     <svg id="area_preview" class="workingarea"
                                          data-bind="style: {
                                                 backgroundPosition: crosshairX()+'px'+' '+crosshairY()+'px',
@@ -329,7 +345,7 @@
                                             <g id="userContent" data-bind="visible: !state.isPrinting() && !state.isPaused()"></g>
                                         </g>
                                     </svg>
-
+                                </div>
 							</div>
 						</div>
 					</div>