]> git.plutz.net Git - serve0/blob - stereoview.js
aadb68b2f7bd14752b0ee838ee4b35bde70f8231
[serve0] / stereoview.js
1 /*  Copyright 2018, 2023 Paul Hänsch
2    
3     This file is part of Serve0
4     
5     Serve0 is free software: you can redistribute it and/or modify
6     it under the terms of the GNU Affero General Public License as published by
7     the Free Software Foundation, either version 3 of the License, or
8     (at your option) any later version.
9     
10     Serve0 is distributed in the hope that it will be useful,
11     but WITHOUT ANY WARRANTY; without even the implied warranty of
12     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13     GNU Affero General Public License for more details.
14     
15     You should have received a copy of the GNU Affero General Public License
16     along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
17 */
18
19 var contLeft  = document.createElement("div");
20 var contRight = document.createElement("div");
21 var lv = document.createElement("canvas");
22 var rv = document.createElement("canvas");
23 var debug = document.createElement("p");
24
25  contLeft.setAttribute("style", "position: fixed; top: 0; left:  0; width: 50%; height: 100%; overflow: hidden; z-index: 100; background-color: #000;");
26 contRight.setAttribute("style", "position: fixed; top: 0; right: 0; width: 50%; height: 100%; overflow: hidden; z-index: 100; background-color: #000;");
27        lv.setAttribute("style", "position: absolute; top: 50%; left: calc(100% - 32mm); max-width: unset; max-height: unset;");
28        rv.setAttribute("style", "position: absolute; top: 50%; left:             32mm;  max-width: unset; max-height: unset;");
29     debug.setAttribute("style", "display: none; position: fixed; top: 0; left: 0; z-index: 101; background: #000;");
30
31
32 function stereoview(layout, video) {
33   this.layout = layout; this.video = video;
34
35   let w = video.videoWidth; h = video.videoHeight;
36   let render, controlTimeout = 0;
37   let pitch = 0, roll = 0, yaw = 0;
38   let scale, fov = 90, dist = 32;
39
40   document.body.appendChild(contLeft ).appendChild( lv );
41   document.body.appendChild(contRight).appendChild( rv );
42   document.body.appendChild( debug );
43
44   if ( layout == "180") {
45     lv.width = rv.width = w / 2; lv.height = rv.height = h;
46   } else {
47     lv.width = rv.width = w; lv.height = rv.height = h / 2;
48   }
49
50   lc = lv.getContext("2d"); rc = rv.getContext("2d");
51
52   function draw() {
53     if ( layout == "180" ) {
54       scale = contLeft.offsetHeight / h * 2 * fov / 90;
55       lc.drawImage(video,      0, 0);
56       rc.drawImage(video, -w / 2, 0);
57       lv.style.transform = rv.style.transform = 
58         "translate(" + (yaw / 180 * -w / 4 * scale - w / 4) + "px, " +
59                        (pitch / 90 * -h / 2 * scale - h / 2) + "px)" +
60         "rotate(" + roll + "deg) " + "scale(" + (scale / 2) + ", " + scale + ")";
61     } else {
62       scale = contLeft.offsetHeight / h * 4 * fov / 90;
63       lc.drawImage(video, yaw / 180 * -w / 2, 0);
64       lc.drawImage(video, yaw / 180 * -w / 2 + ((yaw>0) ? w : -w), 0);
65       rc.drawImage(video, yaw / 180 * -w / 2, -h/2);
66       rc.drawImage(video, yaw / 180 * -w / 2 + ((yaw>0) ? w : -w), -h/2);
67       lv.style.transform = rv.style.transform = 
68         "translate(" + (- w / 2) + "px, " + (pitch /  90 * -h / 2 * (scale / 2) - h / 4) + "px) " +
69         "rotate(" + roll + "deg) " + "scale(" + (scale / 2) + ", " + scale + ")";
70     }
71
72     // debug.textContent = "" + video.currentTime + " " + controlTimeout + " " + tx + " " + ty + " " + tz;
73     debug.textContent = "Pitch: " + pitch.toFixed(2) + " | Yaw: " + yaw.toFixed(2) + " | Roll: " + roll.toFixed(2) +
74                         " | FOV: " + fov + " | Eye Distance: " + (2 * dist) + "mm";
75   
76     requestAnimationFrame(draw);
77
78     gpinput();
79   };
80
81   function gpinput() {
82     let gp = navigator.getGamepads()[0];
83     let date = new Date();
84
85     debug.innerHTML += "<br/><br/>GamePad: " + gp.axes[0].toFixed(3) + " | " + gp.axes[1].toFixed(3)
86     for (cnt = 0; cnt < 16; cnt++) {
87       gp.buttons[cnt].pressed ? debug.textContent += " | B" + cnt + " 1" : debug.textContent += " | B" + cnt + " 0";
88     }
89
90     if ( gp && Date.now() < controlTimeout ) {
91       true;
92     } else if (gp.buttons[0].pressed && gp.buttons[5].pressed) {
93       this.layout = layout = "180";
94       document.body.appendChild(contLeft ).appendChild( lv );
95       document.body.appendChild(contRight).appendChild( rv );
96       lv.width = rv.width = w / 2; lv.height = rv.height = h;
97       video.play();
98       controlTimeout = Date.now() + 600;
99     } else if (gp.buttons[0].pressed && gp.buttons[4].pressed) {
100       this.layout = layout = "360";
101       document.body.appendChild(contLeft ).appendChild( lv );
102       document.body.appendChild(contRight).appendChild( rv );
103       lv.width = rv.width = w; lv.height = rv.height = h / 2;
104       video.play();
105       controlTimeout = Date.now() + 600;
106     } else if (gp.buttons[0].pressed) {
107       ( contLeft.parentElement)? contLeft.parentElement.removeChild(contLeft ):{};
108       (contRight.parentElement)?contRight.parentElement.removeChild(contRight):{};
109       video.pause();
110       controlTimeout = Date.now() + 300;
111     } else if (gp.buttons[1].pressed) {
112       (debug.style.display == "block") ? debug.style.display = "none" : debug.style.display = "block";
113       controlTimeout = Date.now() + 300;
114     } else if (gp.buttons[5].pressed) {
115       video.paused ? video.play() : video.pause();
116       controlTimeout = Date.now() + 300;
117     } else if (gp.buttons[4].pressed) {
118       video.currentTime += 1 / 30;
119       controlTimeout = Date.now() + 300;
120     } else if (gp.buttons[3].pressed && gp.axes[0] < -.3) {
121       dist -= .5;
122       lv.style.left = "calc(100% - " + dist + "mm)";
123       rv.style.left = ""             + dist + "mm";
124       date.setTime(date.getTime() + 3 * 365 * 86400 * 1000)
125       document.cookie = "StereoDist=" + dist + "; expires=" + date.toUTCString() + "; path=/";
126       controlTimeout = Date.now() + 300;
127     } else if (gp.buttons[3].pressed && gp.axes[0] >  .3) {
128       dist += .5;
129       lv.style.left = "calc(100% - " + dist + "mm)";
130       rv.style.left = ""             + dist + "mm";
131       date.setTime(date.getTime() + 3 * 365 * 86400 * 1000)
132       document.cookie = "StereoDist=" + dist + "; expires=" + date.toUTCString() + "; path=/";
133       controlTimeout = Date.now() + 300;
134     } else if (gp.buttons[3].pressed && gp.axes[1] < -.3) {
135       fov -= 10;
136       date.setTime(date.getTime() + 3 * 365 * 86400 * 1000)
137       document.cookie = "StereoFOV=" + fov + "; expires=" + date.toUTCString() + "; path=/";
138       controlTimeout = Date.now() + 300;
139     } else if (gp.buttons[3].pressed && gp.axes[1] >  .3) {
140       fov += 10;
141       date.setTime(date.getTime() + 3 * 365 * 86400 * 1000)
142       document.cookie = "StereoFOV=" + fov + "; expires=" + date.toUTCString() + "; path=/";
143       controlTimeout = Date.now() + 300;
144     } else if (gp.buttons[2].pressed && gp.axes[0] < -.3) {
145       yaw -= pitch ? ( Math.cos(pitch * Math.PI / 180) % 360 ) : 1;
146       if ( yaw >  180) yaw -= 360;
147       if ( yaw < -180) yaw += 360;
148       controlTimeout = Date.now() + 30;
149     } else if (gp.buttons[2].pressed && gp.axes[0] >  .3) {
150       yaw += pitch ? ( Math.cos(pitch * Math.PI / 180) % 360 ) : 1;
151       if ( yaw >  180) yaw -= 360;
152       if ( yaw < -180) yaw += 360;
153       controlTimeout = Date.now() + 30;
154     } else if (gp.buttons[2].pressed && gp.axes[1] < -.3) {
155       video.volume += .05;
156       controlTimeout = Date.now() + 300;
157     } else if (gp.buttons[2].pressed && gp.axes[1] >  .3) {
158       video.volume -= .05;
159       controlTimeout = Date.now() + 300;
160     } else if ( gp.axes[0] >  .3) {
161       video.currentTime += 10;
162       controlTimeout = Date.now() + 200;
163     } else if ( gp.axes[0] < -.3) { 
164       video.currentTime -= 10;
165       controlTimeout = Date.now() + 200;
166     } else if ( gp.axes[1] >  .3) {
167       video.currentTime -= 60;
168       controlTimeout = Date.now() + 300;
169     } else if ( gp.axes[1] < -.3) {
170       video.currentTime += 60;
171       controlTimeout = Date.now() + 300;
172     }
173   }
174   
175   // mpuevent = new EventSource("http://localhost:314");
176   // var x = [], y = [], z = [], cnt = -1, inertia = 6;
177
178   // mpuevent.addEventListener("bearing", function(e) {
179   //   bearing = e.data.split(" ");
180   //   yaw = -parseFloat(bearing[0]);
181   // }, false);
182   // mpuevent.addEventListener("motion", function(e) {
183   //   motion = e.data.split(" ");
184
185   //   cnt = (cnt + 1) % inertia;
186   //   x[cnt] = parseFloat(motion[0]);
187   //   y[cnt] = parseFloat(motion[1]);
188   //   z[cnt] = parseFloat(motion[2]);
189
190   //   // tx = 0; x.forEach( function(n, i){ tx += n; } ); tx /= inertia;
191   //   ty = 0; y.forEach( function(n, i){ ty += n; } ); ty /= inertia;
192   //   tz = 0; z.forEach( function(n, i){ tz += n; } ); tz /= inertia;
193
194   //   pitch =   Math.asin((tz / 9.81 > 1)?1:(tz/9.81)) / Math.PI * 180 + 22.5;
195   //   roll  = - Math.asin((ty / 9.81 > 1)?1:(ty/9.81)) / Math.PI * 180;
196   //   // yaw   = (yaw + ty) % 360;
197   // }, false );
198
199   window.addEventListener("devicemotion", (function() {
200     let x = [], y = [], z = [], cnt = -1, inertia = 6;
201     return event => {
202       cnt = (cnt + 1) % inertia;
203
204       x[cnt] = event.accelerationIncludingGravity.x;
205       y[cnt] = event.accelerationIncludingGravity.y;
206       z[cnt] = event.accelerationIncludingGravity.z;
207
208       tx = 0; x.forEach( function(n, i){ tx += n; } ); tx /= inertia;
209       ty = 0; y.forEach( function(n, i){ ty += n; } ); ty /= inertia;
210       tz = 0; z.forEach( function(n, i){ tz += n; } ); tz /= inertia;
211
212       pitch =   Math.asin((tz / 9.81 > 1)?1:(tz/9.81)) / Math.PI * 180;
213       roll  = - Math.asin((ty / 9.81 > 1)?1:(ty/9.81)) / Math.PI * 180;
214       yaw   = pitch ? ( yaw
215               - event.rotationRate.alpha / 1000 * event.interval * Math.cos(pitch * Math.PI / 180)
216               - event.rotationRate.gamma / 1000 * event.interval * Math.sin(pitch * Math.PI / 180)
217             ) % 360 : yaw;
218       if ( yaw >  180) yaw -= 360;
219       if ( yaw < -180) yaw += 360;
220
221       // pitch = (pitch + event.rotationRate.beta  / 1000 * event.interval) % 360;
222       // roll  = (roll  + event.rotationRate.gamma / 1000 * event.interval) % 360;
223       // yaw   = (yaw + ty) % 360;
224     };
225   })());
226
227   window.addEventListener("click", function(event) {
228     ( contLeft.parentElement)? contLeft.parentElement.removeChild(contLeft ):{};
229     (contRight.parentElement)?contRight.parentElement.removeChild(contRight):{};
230     // video.style.display = "block";
231     video.pause();
232   }, true);
233
234   dist = dist ? dist : parseInt(document.getElementById("StereoDist").getAttribute("value"));
235   fov  =  fov ?  fov : parseInt(document.getElementById("StereoFOV" ).getAttribute("value"));
236
237   video.play();
238   // video.style.display = "none";
239   draw();
240 };