layout tuning

index.html

@@ -12,13 +12,13 @@
       padding: 0px;
       margin:  0px;
       overflow: hidden;
-      background-color: #366092;
+      background-color: #000;
       position: relative;
     }
-    #video{position:absolute; top: 0px; left: 0px;}
-    #mirror{position:absolute; bottom: 0px; left: 0px;}
-    #photo{position:absolute; bottom: 0px; right: 0px;}
-    #slides{position:absolute; top: 0px; right: 0px;}
+    #video{display:none; position:absolute; top: 0px; left: 0px;}
+    #mirror{position:absolute; top:0px; bottom: 0px; left: 0px;}
+    #photo{display:none; position:absolute; bottom: 0px; right: 0px;}
+    #slides{position:absolute; top: 0px; bottom:0px; right: 0px;}
   </style>
 
   <video id=video></video>
@@ -123,13 +123,14 @@
 			if(detection && detection.box.height>150)
 			{
 				var box=detection.box;
-				var pad=0.2;
-        var w=box.width*(1+pad*2);
+				var pad_x=0.1, pad_y=0.4;
+        var w=box.width*(1+pad_x*2);
         var h=800./480.*w;
         var canvas=slides[slide_capture_index];
-				canvas.width=480; canvas.height=800; //box.width+2*pad_x; canvas.height=box.height+2*pad_y;
+				if(canvas.width!=480) {canvas.width=480; canvas.height=800;}
         var ctx2d = canvas.getContext('2d');
-        ctx2d.drawImage(canvas_photo, box.x-box.width*pad, box.y-box.height*pad,w,h,0,0,480,800);				
+				ctx2d.fillRect(0,0,480,800);
+        ctx2d.drawImage(canvas_photo, box.x-box.width*pad_x, box.y-box.height*pad_y,w,h,0,0,480,800);				
         
         if(state=='idle') switch_state('preroll');
 			}