1 /* Copyright 2018 Paul Hänsch
3 This file is part of Serve0
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.
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.
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/>.
20 var x, y = [], z = [], ox = 0, cnt = 0, ty, tz;
21 var scale, lv, rv, debug;
25 ty = 0; y.forEach( function(n, i){ ty += n;} ); ty /= 6;
26 tz = 0; z.forEach( function(n, i){ tz += n;} ); tz /= 6;
31 if ( layout == "180" ) {
32 if (ox > w / 8) { ox = w / 8; } else if (ox < w / -8) { ox = w / -8; }
33 sy = ( v * h + h / 4) |0;
34 lc.drawImage(video, (w / 8 + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
35 rc.drawImage(video, (w / 8 * 5 + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
37 sx = (w / 8 * 3 + ox) % (w) |0;
38 lc.drawImage(video, sx, (v * h + h / 8) |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
39 rc.drawImage(video, sx, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
41 lc.drawImage(video, sx + w, (v * h + h / 8) |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
42 rc.drawImage(video, sx + w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
43 } else if ( sx + w / 4 > w) {
44 lc.drawImage(video, sx - w, (v * h + h / 8) |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
45 rc.drawImage(video, sx - w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
49 lv.style.transform = "rotate(" + r + "deg)"
50 rv.style.transform = "rotate(" + r + "deg)"
52 requestAnimationFrame(draw);
55 function stereoview(layout, video) {
56 this.layout = layout; this.video = video;
57 document.body.appendChild( lv = document.createElement("canvas") );
58 document.body.appendChild( rv = document.createElement("canvas") );
59 // debug = document.getElementById("debug");
61 lv.setAttribute( "style", "position: fixed; top: 0; left: 0 ; width: 50%; height: 100%; z-index: 100;");
62 rv.setAttribute( "style", "position: fixed; top: 0; left: 50%; width: 50%; height: 100%; z-index: 100;");
64 lv.setAttribute( "width", "" + lv.offsetWidth);
65 rv.setAttribute( "width", "" + rv.offsetWidth);
66 lv.setAttribute("height", "" + lv.offsetHeight);
67 rv.setAttribute("height", "" + rv.offsetHeight);
69 lc = lv.getContext("2d");
70 rc = rv.getContext("2d");
72 window.addEventListener("devicemotion", function(event) {
73 // x[cnt] = event.accelerationIncludingGravity.x;
74 y[cnt] = event.accelerationIncludingGravity.y;
75 z[cnt] = event.accelerationIncludingGravity.z;
79 w = video.videoWidth; h = video.videoHeight;
80 scale = lv.width / (w / 4);
82 // video.setAttribute("style", "display: none;");