From: Paul Hänsch Date: Sun, 31 Dec 2023 04:13:40 +0000 (+0100) Subject: enable switch between stereo half width / full width X-Git-Url: http://git.plutz.net/?a=commitdiff_plain;ds=sidebyside;h=439484bf0c51725af2880f0b4b43cea0de659f0b;p=serve0 enable switch between stereo half width / full width --- diff --git a/stereoview.js b/stereoview.js index aadb68b..0d46a66 100644 --- 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):{};