git.plutz.net Git - serve0/blob - templates/stereoview.html.sh

   1 # Copyright 2018 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 cat <<EOF
  19   <canvas id="lv" width="400" height="480" style="width: 50%; margin: 0;">
  20   </canvas><canvas id="rv" width="400" height="480" style="width: 50%; margin: 0;"></canvas>
  21
  22   <video id="video" onclick="videoPlay();" style="position: absolute; top: 0;">
  23     <source src="$(urlsafe "$video")" type='video/mp4; codecs="avc1.4D401E, mp3"'>"
  24   </video>
  25
  26   <script type="text/javascript">
  27   var render = "${render}"
  28   var x, y = [], z = [], ox = 0, cnt = 0, ty, tz;
  29   var video, scale, lv, rv, debug;
  30   var w, h, scale;
  31
  32   function draw() {
  33     ty = 0; y.forEach( function(n, i){ ty += n;} ); ty /= 6;
  34     tz = 0; z.forEach( function(n, i){ tz += n;} ); tz /= 6;
  35     v = tz / 9.81 / 2;
  36     r = ty / 9.81 * -90;
  37     ox = ox + ty * 2;
  38
  39     if ( render = "180" ) {
  40       if      (ox > w / 8)   { ox = w / 8; }
  41       else if ( ox < -w / 8) { ox = -w / 8; }
  42       sy = ( v * h + h / 4) |0;
  43       lc.drawImage(video, (w / 8     + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
  44       rc.drawImage(video, (w / 8 * 5 + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
  45     } else {
  46       sx = (w / 8 * 3 + ox) % (w) |0;
  47       lc.drawImage(video, sx, (v * h + h / 8)     |0, w / 4 |0, h / 4, 0, 0, lv.width, h / 4 * scale);
  48       rc.drawImage(video, sx, (v * h + h / 8 * 5) |0, w / 4 |0, h / 4, 0, 0, rv.width, h / 4 * scale);
  49       if (sx < 0) {
  50         lc.drawImage(video, sx + w, (v * h + h / 8)     |0, w / 4 |0, h / 4, 0, 0, lv.width, h / 4 * scale);
  51         rc.drawImage(video, sx + w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 4, 0, 0, rv.width, h / 4 * scale);
  52       } else if ( sx + w / 4 > w) {
  53         lc.drawImage(video, sx - w, (v * h + h / 8)     |0, w / 4 |0, h / 4, 0, 0, lv.width, h / 4 * scale);
  54         rc.drawImage(video, sx - w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 4, 0, 0, rv.width, h / 4 * scale);
  55       }
  56     }
  57
  58     lv.setAttribute("style", "transform: rotate("+r+"deg);")
  59     rv.setAttribute("style", "transform: rotate("+r+"deg);")
  60
  61     requestAnimationFrame(draw);
  62   };
  63   function videoPlay(){
  64     w = video.videoWidth; h = video.videoHeight;
  65     scale = lv.width / (w / 4);
  66     video.play();
  67     video.setAttribute("style", "display: none;");
  68     draw();
  69   };
  70
  71   video = document.getElementById("video");
  72   lv = document.getElementById("lv");
  73   rv = document.getElementById("rv");
  74   debug = document.getElementById("debug");
  75
  76   lv.setAttribute("width", "" + lv.offsetWidth);
  77   rv.setAttribute("width", "" + rv.offsetWidth);
  78   lv.setAttribute("height", "" + lv.offsetHeight);
  79   rv.setAttribute("height", "" + rv.offsetHeight);
  80
  81   lc = lv.getContext("2d");
  82   rc = rv.getContext("2d");
  83
  84   window.addEventListener("devicemotion", function(event) {
  85     // x[cnt] = event.accelerationIncludingGravity.x;
  86     y[cnt] = event.accelerationIncludingGravity.y;
  87     z[cnt] = event.accelerationIncludingGravity.z;
  88     cnt = (cnt + 1) % 6;
  89   }, true);
  90
  91   </script>
  92 EOF
  93
  94 # vi:set filetype=html: