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/>.
19 <canvas id="lv" width="400" height="480"></canvas><canvas id="rv" width="400" height="480"></canvas>
21 <video id="video" onclick="videoPlay();">
22 <source src="$(urlsafe "$video")" type='video/mp4; codecs="avc1.4D401E, mp3"'>"
25 <script type="text/javascript">
26 var render = "${render}";
27 var x, y = [], z = [], ox = 0, cnt = 0, ty, tz;
28 var video, scale, lv, rv, debug;
32 ty = 0; y.forEach( function(n, i){ ty += n;} ); ty /= 6;
33 tz = 0; z.forEach( function(n, i){ tz += n;} ); tz /= 6;
38 if ( render == "180" ) {
39 if (ox > w / 8) { ox = w / 8; } else if (ox < w / -8) { ox = w / -8; }
40 sy = ( v * h + h / 4) |0;
41 lc.drawImage(video, (w / 8 + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
42 rc.drawImage(video, (w / 8 * 5 + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
44 sx = (w / 8 * 3 + ox) % (w) |0;
45 lc.drawImage(video, sx, (v * h + h / 8) |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
46 rc.drawImage(video, sx, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
48 lc.drawImage(video, sx + w, (v * h + h / 8) |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
49 rc.drawImage(video, sx + w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
50 } else if ( sx + w / 4 > w) {
51 lc.drawImage(video, sx - w, (v * h + h / 8) |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
52 rc.drawImage(video, sx - w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
56 lv.setAttribute("style", "transform: rotate("+r+"deg);")
57 rv.setAttribute("style", "transform: rotate("+r+"deg);")
59 requestAnimationFrame(draw);
62 w = video.videoWidth; h = video.videoHeight;
63 scale = lv.width / (w / 4);
65 video.setAttribute("style", "display: none;");
69 video = document.getElementById("video");
70 lv = document.getElementById("lv");
71 rv = document.getElementById("rv");
72 debug = document.getElementById("debug");
74 lv.setAttribute("width", "" + lv.offsetWidth);
75 rv.setAttribute("width", "" + rv.offsetWidth);
76 lv.setAttribute("height", "" + lv.offsetHeight);
77 rv.setAttribute("height", "" + rv.offsetHeight);
79 lc = lv.getContext("2d");
80 rc = rv.getContext("2d");
82 window.addEventListener("devicemotion", function(event) {
83 // x[cnt] = event.accelerationIncludingGravity.x;
84 y[cnt] = event.accelerationIncludingGravity.y;
85 z[cnt] = event.accelerationIncludingGravity.z;
92 # vi:set filetype=html: