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(){
-			var tip = snap.selectAll('._freeTransformInProgress');
+			if(typeof(snap) !== 'undefined'){
-			for (var i = 0; i < tip.length; i++) {
+				var tip = snap.selectAll('._freeTransformInProgress');
-				var el = tip[i];
+				for (var i = 0; i < tip.length; i++) {
-				el.ftRemoveHandles();
+					var el = tip[i];
+					el.ftRemoveHandles();
+				}
+				self.check_sizes_and_placements();
 			}
-			self.check_sizes_and_placements();
 		};
 
 		self.getCompositionSVG = function(fillAreas, callback){
@@ -827,6 +831,38 @@ $(function(){
 		self._cleanup_render_mess = 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,54 +282,70 @@
 							<!--  end sidebar  -->
 
 							<div class="span8">
-								<svg id="area_preview" class="workingarea"
+                                <div style="position:relative">
-									 data-bind="style: {
+                                    {% if webcamStream %}
-											backgroundPosition: crosshairX()+'px'+' '+crosshairY()+'px',
+                                        <div id="webcam_container" tabindex="0"
-											width: workingAreaWidthPx()+'px',
+                                             style="position:absolute; top:0;left:0"
-											height: workingAreaHeightPx()+'px'
+                                             data-bind="style: {
-										}
+                                                width: workingAreaWidthPx()+'px'
-									 ">
+                                            }">
-									<filter id="grayscale_filter">
+                                            <div id="webcam_rotator" data-bind="css: { rotate90: settings.webcam_rotate90() }">
-										<feColorMatrix in="SourceGraphic" type="saturate" values="0"/>
+                                                <img id="webcam_image"
-									</filter>
+                                                    data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() },
-									<filter id="gcimage_preview">
+                                                            style: {
-										<feComponentTransfer>
+                                                                width: workingAreaWidthPx()+'px',
-											<feFuncR type="table" tableValues="1"></feFuncR>
+                                                            }"/>
-											<feFuncG type="table" tableValues="0.2 1"></feFuncG>
+                                            </div>
-											<feFuncB type="table" tableValues="0.2 1"></feFuncB>
+                                        </div>
-										</feComponentTransfer>
+                                    {% endif %}
-									</filter>
+                                    <svg id="area_preview" class="workingarea"
-									<g id="scaleGroup" data-bind="attr: { transform: scaleMatrix() }">
+                                         data-bind="style: {
-
+                                                backgroundPosition: crosshairX()+'px'+' '+crosshairY()+'px',
-										<text
+                                                width: workingAreaWidthPx()+'px',
-											xml:space="preserve"
+                                                height: workingAreaHeightPx()+'px'
-											data-bind="visible: working_area_empty"
+                                            }
-											style="font-size:64px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#DDDDDD;fill-opacity:1;stroke:none;font-family:DIN-BoldAlternate, Helvetica, Arial, Sans-serif;"
+                                         ">
-											x="396.81018"
+                                        <filter id="grayscale_filter">
-											y="552.36218"
+                                            <feColorMatrix in="SourceGraphic" type="saturate" values="0"/>
-											id="add_designs_hint"
+                                        </filter>
-											>
+                                        <filter id="gcimage_preview">
-										<tspan
+                                            <feComponentTransfer>
-											  id="tspan2987" x="368.571426" y="532.36218"
+                                                <feFuncR type="table" tableValues="1"></feFuncR>
-											  style="text-anchor:middle;text-align:center">add designs via </tspan>
+                                                <feFuncG type="table" tableValues="0.2 1"></feFuncG>
-										<tspan
+                                                <feFuncB type="table" tableValues="0.2 1"></feFuncB>
-											  x="500" y="592.36218" id="tspan2989"
+                                            </feComponentTransfer>
-											  style="text-anchor:middle;text-align:center">the design library </tspan>
+                                        </filter>
-										<tspan
+                                        <g id="scaleGroup" data-bind="attr: { transform: scaleMatrix() }">
-											  x="568.571426" y="652.36218" id="tspan2993"
-											  style="text-anchor:middle;text-align:center">or drag 'n' drop </tspan>
-										<tspan
-											  x="368.571426" y="712.36218" id="tspan2991"
-											  style="text-anchor:middle;text-align:center" /></text>
-										<g id="placedGcodes" data-bind="visible: !state.isPrinting() && !state.isPaused(), attr: { transform: scaleMatrixMMtoDisplay() }"></g>
-										<g id="gCodePreview" data-bind="visible: state.isPrinting() || state.isPaused(), attr: { transform: scaleMatrixMMtoDisplay() }"></g>
-										<rect data-bind="click: move_laser"
-											  id="coordGrid" x="0" y="0" width="0" height="0"
-											  stroke="none" fill="none"></rect>
-										<g id="userContent" data-bind="visible: !state.isPrinting() && !state.isPaused()"></g>
-									</g>
-								</svg>
 
+                                            <text
+                                                xml:space="preserve"
+                                                data-bind="visible: working_area_empty"
+                                                style="font-size:64px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#DDDDDD;fill-opacity:1;stroke:none;font-family:DIN-BoldAlternate, Helvetica, Arial, Sans-serif;"
+                                                x="396.81018"
+                                                y="552.36218"
+                                                id="add_designs_hint"
+                                                >
+                                            <tspan
+                                                  id="tspan2987" x="368.571426" y="532.36218"
+                                                  style="text-anchor:middle;text-align:center">add designs via </tspan>
+                                            <tspan
+                                                  x="500" y="592.36218" id="tspan2989"
+                                                  style="text-anchor:middle;text-align:center">the design library </tspan>
+                                            <tspan
+                                                  x="568.571426" y="652.36218" id="tspan2993"
+                                                  style="text-anchor:middle;text-align:center">or drag 'n' drop </tspan>
+                                            <tspan
+                                                  x="368.571426" y="712.36218" id="tspan2991"
+                                                  style="text-anchor:middle;text-align:center" /></text>
+                                            <g id="placedGcodes" data-bind="visible: !state.isPrinting() && !state.isPaused(), attr: { transform: scaleMatrixMMtoDisplay() }"></g>
+                                            <g id="gCodePreview" data-bind="visible: state.isPrinting() || state.isPaused(), attr: { transform: scaleMatrixMMtoDisplay() }"></g>
+                                            <rect data-bind="click: move_laser"
+                                                  id="coordGrid" x="0" y="0" width="0" height="0"
+                                                  stroke="none" fill="none"></rect>
+                                            <g id="userContent" data-bind="visible: !state.isPrinting() && !state.isPaused()"></g>
+                                        </g>
+                                    </svg>
+                                </div>
 							</div>
 						</div>
 					</div>