enable switch between stereo half width / full width

diff --git a/stereoview.js b/stereoview.js
index aadb68b2f7bd14752b0ee838ee4b35bde70f8231..0d46a668cde72876cb24e2fb4e559c7b6296325a 100644 (file)
--- a/stereoview.js
+++ b/stereoview.js
@@ -35,7 +35,7 @@ function stereoview(layout, video) {
   let w = video.videoWidth; h = video.videoHeight;
   let render, controlTimeout = 0;
   let pitch = 0, roll = 0, yaw = 0;
-  let scale, fov = 90, dist = 32;
+  let scale, vsf = 1, fov = 90, dist = 32;
 
   document.body.appendChild(contLeft ).appendChild( lv );
   document.body.appendChild(contRight).appendChild( rv );
@@ -43,30 +43,32 @@ function stereoview(layout, video) {
 
   if ( layout == "180") {
     lv.width = rv.width = w / 2; lv.height = rv.height = h;
+    scale = contLeft.offsetHeight / h * 2 * fov / 90;
   } else {
     lv.width = rv.width = w; lv.height = rv.height = h / 2;
+    scale = contLeft.offsetHeight / h * 4 * fov / 90;
   }
 
   lc = lv.getContext("2d"); rc = rv.getContext("2d");
 
   function draw() {
     if ( layout == "180" ) {
-      scale = contLeft.offsetHeight / h * 2 * fov / 90;
+      // scale = contLeft.offsetHeight / h * 2 * fov / 90;
       lc.drawImage(video,      0, 0);
       rc.drawImage(video, -w / 2, 0);
       lv.style.transform = rv.style.transform = 
-        "translate(" + (yaw / 180 * -w / 4 * scale - w / 4) + "px, " +
+        "translate(" + (yaw / 180 * -w / 2 - w / 4) + "px, " +
                        (pitch / 90 * -h / 2 * scale - h / 2) + "px)" +
-        "rotate(" + roll + "deg) " + "scale(" + (scale / 2) + ", " + scale + ")";
+        "rotate(" + roll + "deg) " + "scale(" + (scale / vsf) + ", " + scale + ")";
     } else {
-      scale = contLeft.offsetHeight / h * 4 * fov / 90;
+      // scale = contLeft.offsetHeight / h * 4 * fov / 90;
       lc.drawImage(video, yaw / 180 * -w / 2, 0);
       lc.drawImage(video, yaw / 180 * -w / 2 + ((yaw>0) ? w : -w), 0);
       rc.drawImage(video, yaw / 180 * -w / 2, -h/2);
       rc.drawImage(video, yaw / 180 * -w / 2 + ((yaw>0) ? w : -w), -h/2);
       lv.style.transform = rv.style.transform = 
         "translate(" + (- w / 2) + "px, " + (pitch /  90 * -h / 2 * (scale / 2) - h / 4) + "px) " +
-        "rotate(" + roll + "deg) " + "scale(" + (scale / 2) + ", " + scale + ")";
+        "rotate(" + roll + "deg) " + "scale(" + (scale / vsf) + ", " + scale + ")";
     }
 
     // debug.textContent = "" + video.currentTime + " " + controlTimeout + " " + tx + " " + ty + " " + tz;
@@ -94,6 +96,7 @@ function stereoview(layout, video) {
       document.body.appendChild(contLeft ).appendChild( lv );
       document.body.appendChild(contRight).appendChild( rv );
       lv.width = rv.width = w / 2; lv.height = rv.height = h;
+      scale = contLeft.offsetHeight / h * 2 * fov / 90;
       video.play();
       controlTimeout = Date.now() + 600;
     } else if (gp.buttons[0].pressed && gp.buttons[4].pressed) {
@@ -101,8 +104,12 @@ function stereoview(layout, video) {
       document.body.appendChild(contLeft ).appendChild( lv );
       document.body.appendChild(contRight).appendChild( rv );
       lv.width = rv.width = w; lv.height = rv.height = h / 2;
+      scale = contLeft.offsetHeight / h * 4 * fov / 90;
       video.play();
       controlTimeout = Date.now() + 600;
+    } else if (gp.buttons[3].pressed && gp.buttons[4].pressed) {
+      vsf = (vsf == 1) ? 2 : 1;
+      controlTimeout = Date.now() + 300;
     } else if (gp.buttons[0].pressed) {
       ( contLeft.parentElement)? contLeft.parentElement.removeChild(contLeft ):{};
       (contRight.parentElement)?contRight.parentElement.removeChild(contRight):{};