fixed placement of video preview

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());
 		};
@@ -611,12 +613,14 @@ $(function(){
 		};
 
 		self.abortFreeTransforms = function(){
-			var tip = snap.selectAll('._freeTransformInProgress');
-			for (var i = 0; i < tip.length; i++) {
-				var el = tip[i];
-				el.ftRemoveHandles();
+			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.check_sizes_and_placements();
 		};
 
 		self.getCompositionSVG = function(callback){
@@ -816,7 +820,11 @@ $(function(){
 		};
 		
 		self.onTabChange = function (current, previous) {
-            if (current === "#workingArea") {
+            if (current === "#workingarea") {
+
+				//self.trigger_resize();
+				//self.check_sizes_and_placements();
+				
                 if (self.webcamDisableTimeout !== undefined) {
                     clearTimeout(self.webcamDisableTimeout);
                 }
@@ -831,7 +839,7 @@ $(function(){
                     }
                     newSrc += new Date().getTime();
 
-                    self.updateRotatorWidth();
+                    //self.updateRotatorWidth();
                     webcamImage.attr("src", newSrc);
                 }
             } else if (previous === "#workingArea") {
@@ -852,6 +860,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/server/views.py

@@ -245,8 +245,7 @@ def index():
 	#~~ prepare full set of template vars for rendering
 
 	render_kwargs = dict(
-		#webcamStream=settings().get(["webcam", "stream"]),
-		webcamStream=True,
+		webcamStream=settings().get(["webcam", "stream"]),
 		enableTemperatureGraph=settings().get(["feature", "temperatureGraph"]),
 		enableAccessControl=userManager is not None,
 		enableSdSupport=settings().get(["feature", "sdSupport"]),

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>
@@ -272,13 +272,16 @@
 							<div class="span8">
 								<div style="position:relative">
 									{% if webcamStream %}
-										<div id="webcam_container" tabindex="0" style="position:absolute; top:0;left:0">
+										<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',
-																height: workingAreaHeightPx()+'px'
 															}"/>
 											</div>
 										</div>