- lv.setAttribute( "style", "position: fixed; top: 0; left: 0 ; width: 50%; height: 100%; z-index: 100;");
- rv.setAttribute( "style", "position: fixed; top: 0; left: 50%; width: 50%; height: 100%; z-index: 100;");
- debug.setAttribute( "style", "position: fixed; top: 0; left: 0; z-index: 101; background: #000;");
-
- lv.setAttribute( "width", "" + lv.offsetWidth);
- rv.setAttribute( "width", "" + rv.offsetWidth);
- lv.setAttribute("height", "" + lv.offsetHeight);
- rv.setAttribute("height", "" + rv.offsetHeight);
-
- lc = lv.getContext("2d");
- rc = rv.getContext("2d");
-
- mpuevent = new EventSource("http://localhost:314");
- var x = [], y = [], z = [], cnt = -1, inertia = 6;
-
- mpuevent.addEventListener("bearing", function(e) {
- bearing = e.data.split(" ");
- yaw = -parseFloat(bearing[0]);
- }, false);
- mpuevent.addEventListener("motion", function(e) {
- motion = e.data.split(" ");
-
- cnt = (cnt + 1) % inertia;
- x[cnt] = parseFloat(motion[0]);
- y[cnt] = parseFloat(motion[1]);
- z[cnt] = parseFloat(motion[2]);
-
- // tx = 0; x.forEach( function(n, i){ tx += n; } ); tx /= inertia;
- ty = 0; y.forEach( function(n, i){ ty += n; } ); ty /= inertia;
- tz = 0; z.forEach( function(n, i){ tz += n; } ); tz /= inertia;
-
- pitch = Math.asin((tz / 9.81 > 1)?1:(tz/9.81)) / Math.PI * 180 + 22.5;
- roll = - Math.asin((ty / 9.81 > 1)?1:(ty/9.81)) / Math.PI * 180;
- // yaw = (yaw + ty) % 360;
- }, false );
+ requestAnimationFrame(draw);
+
+ gpinput();
+ };
+
+ function gpinput() {
+ let gp = navigator.getGamepads()[0];
+ let date = new Date();
+
+ debug.innerHTML += "<br/><br/>GamePad: " + gp.axes[0].toFixed(3) + " | " + gp.axes[1].toFixed(3)
+ for (cnt = 0; cnt < 16; cnt++) {
+ gp.buttons[cnt].pressed ? debug.textContent += " | B" + cnt + " 1" : debug.textContent += " | B" + cnt + " 0";
+ }
+
+ if ( gp && Date.now() < controlTimeout ) {
+ true;
+ } else if (gp.buttons[0].pressed && gp.buttons[5].pressed) {
+ this.layout = layout = "180";
+ 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) {
+ this.layout = layout = "360";
+ 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):{};
+ video.pause();
+ controlTimeout = Date.now() + 300;
+ } else if (gp.buttons[1].pressed) {
+ (debug.style.display == "block") ? debug.style.display = "none" : debug.style.display = "block";
+ controlTimeout = Date.now() + 300;
+ } else if (gp.buttons[5].pressed) {
+ video.paused ? video.play() : video.pause();
+ controlTimeout = Date.now() + 300;
+ } else if (gp.buttons[4].pressed) {
+ video.currentTime += 1 / 30;
+ controlTimeout = Date.now() + 300;
+ } else if (gp.buttons[3].pressed && gp.axes[0] < -.3) {
+ dist -= .5;
+ lv.style.left = "calc(100% - " + dist + "mm)";
+ rv.style.left = "" + dist + "mm";
+ date.setTime(date.getTime() + 3 * 365 * 86400 * 1000)
+ document.cookie = "StereoDist=" + dist + "; expires=" + date.toUTCString() + "; path=/";
+ controlTimeout = Date.now() + 300;
+ } else if (gp.buttons[3].pressed && gp.axes[0] > .3) {
+ dist += .5;
+ lv.style.left = "calc(100% - " + dist + "mm)";
+ rv.style.left = "" + dist + "mm";
+ date.setTime(date.getTime() + 3 * 365 * 86400 * 1000)
+ document.cookie = "StereoDist=" + dist + "; expires=" + date.toUTCString() + "; path=/";
+ controlTimeout = Date.now() + 300;
+ } else if (gp.buttons[3].pressed && gp.axes[1] < -.3) {
+ fov -= 10;
+ date.setTime(date.getTime() + 3 * 365 * 86400 * 1000)
+ document.cookie = "StereoFOV=" + fov + "; expires=" + date.toUTCString() + "; path=/";
+ controlTimeout = Date.now() + 300;
+ } else if (gp.buttons[3].pressed && gp.axes[1] > .3) {
+ fov += 10;
+ date.setTime(date.getTime() + 3 * 365 * 86400 * 1000)
+ document.cookie = "StereoFOV=" + fov + "; expires=" + date.toUTCString() + "; path=/";
+ controlTimeout = Date.now() + 300;
+ } else if (gp.buttons[2].pressed && gp.axes[0] < -.3) {
+ yaw -= pitch ? ( Math.cos(pitch * Math.PI / 180) % 360 ) : 1;
+ if ( yaw > 180) yaw -= 360;
+ if ( yaw < -180) yaw += 360;
+ controlTimeout = Date.now() + 30;
+ } else if (gp.buttons[2].pressed && gp.axes[0] > .3) {
+ yaw += pitch ? ( Math.cos(pitch * Math.PI / 180) % 360 ) : 1;
+ if ( yaw > 180) yaw -= 360;
+ if ( yaw < -180) yaw += 360;
+ controlTimeout = Date.now() + 30;
+ } else if (gp.buttons[2].pressed && gp.axes[1] < -.3) {
+ video.volume += .05;
+ controlTimeout = Date.now() + 300;
+ } else if (gp.buttons[2].pressed && gp.axes[1] > .3) {
+ video.volume -= .05;
+ controlTimeout = Date.now() + 300;
+ } else if ( gp.axes[0] > .3) {
+ video.currentTime += 10;
+ controlTimeout = Date.now() + 200;
+ } else if ( gp.axes[0] < -.3) {
+ video.currentTime -= 10;
+ controlTimeout = Date.now() + 200;
+ } else if ( gp.axes[1] > .3) {
+ video.currentTime -= 60;
+ controlTimeout = Date.now() + 300;
+ } else if ( gp.axes[1] < -.3) {
+ video.currentTime += 60;
+ controlTimeout = Date.now() + 300;
+ }
+ }