integrated stereoview in regular viewser

svn path=/trunk/; revision=201

diff --git a/static/common.css b/static/common.css
index eb2e7a92cdcf957273840f54d608ce7758a1d0c5..c73b25fb038be91e24ac0caecef9c76c1c82b425 100644 (file)
--- a/static/common.css
+++ b/static/common.css
@@ -482,15 +482,3 @@ span.progress > span {
   min-width: 2em;
 }
 
-body.stereoview canvas {
-  position: fixed;
-  top: 0;
-  width: 50%;
-  margin: 0; padding: 0;
-}
-body.stereoview canvas#lv { left: 0; }
-body.stereoview canvas#rv { right: 0; }
-body.stereoview video {
-  position: fixed;
-  top: 0;
-}

diff --git a/static/stereoview.js b/static/stereoview.js
new file mode 100755 (executable)
index 0000000..b2eac9a
--- /dev/null
+++ b/static/stereoview.js
@@ -0,0 +1,84 @@
+/*  Copyright 2018 Paul Hänsch
+   
+    This file is part of Serve0
+    
+    Serve0 is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+    
+    Serve0 is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+    
+    You should have received a copy of the GNU Affero General Public License
+    along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
+*/
+
+var render, video;
+var x, y = [], z = [], ox = 0, cnt = 0, ty, tz;
+var scale, lv, rv, debug;
+var w, h, scale;
+
+function draw() {
+  ty = 0; y.forEach( function(n, i){ ty += n;} ); ty /= 6;
+  tz = 0; z.forEach( function(n, i){ tz += n;} ); tz /= 6;
+  v = tz / 9.81 / 2;
+  r = ty / 9.81 * -90;
+  ox = ox + ty * 2;
+
+  if ( layout == "180" ) {
+    if      (ox > w / 8)   { ox = w / 8; } else if (ox < w / -8) { ox = w / -8; }
+    sy = ( v * h + h / 4) |0;
+    lc.drawImage(video, (w / 8     + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
+    rc.drawImage(video, (w / 8 * 5 + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
+  } else {
+    sx = (w / 8 * 3 + ox) % (w) |0;
+    lc.drawImage(video, sx, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
+    rc.drawImage(video, sx, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
+    if (sx < 0) {
+      lc.drawImage(video, sx + w, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
+      rc.drawImage(video, sx + w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
+    } else if ( sx + w / 4 > w) {
+      lc.drawImage(video, sx - w, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
+      rc.drawImage(video, sx - w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
+    }
+  }
+
+  lv.style.transform = "rotate(" + r + "deg)"
+  rv.style.transform = "rotate(" + r + "deg)"
+
+  requestAnimationFrame(draw);
+};
+
+function stereoview(layout, video) {
+  this.layout = layout; this.video = video;
+  document.body.appendChild( lv = document.createElement("canvas") );
+  document.body.appendChild( rv = document.createElement("canvas") );
+  // debug = document.getElementById("debug");
+  
+  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;");
+
+  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");
+  
+  window.addEventListener("devicemotion", function(event) {
+    // x[cnt] = event.accelerationIncludingGravity.x;
+    y[cnt] = event.accelerationIncludingGravity.y;
+    z[cnt] = event.accelerationIncludingGravity.z;
+    cnt = (cnt + 1) % 6;
+  }, true);
+
+  w = video.videoWidth; h = video.videoHeight;
+  scale = lv.width / (w / 4); 
+  video.play();
+  // video.setAttribute("style", "display: none;");
+  draw();
+};

diff --git a/templates/stereoview.html.sh b/templates/stereoview.html.sh
deleted file mode 100755 (executable)
index 6fbbebd..0000000
--- a/templates/stereoview.html.sh
+++ /dev/null
@@ -1,92 +0,0 @@
-# Copyright 2018 Paul Hänsch
-#
-# This file is part of Serve0
-# 
-# Serve0 is free software: you can redistribute it and/or modify
-# it under the terms of the GNU Affero General Public License as published by
-# the Free Software Foundation, either version 3 of the License, or
-# (at your option) any later version.
-# 
-# Serve0 is distributed in the hope that it will be useful,
-# but WITHOUT ANY WARRANTY; without even the implied warranty of
-# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-# GNU Affero General Public License for more details.
-# 
-# You should have received a copy of the GNU Affero General Public License
-# along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
-
-cat <<EOF
-  <canvas id="lv" width="400" height="480"></canvas><canvas id="rv" width="400" height="480"></canvas>
-
-  <video id="video" onclick="videoPlay();">
-    <source src="$(urlsafe "$video")" type='video/mp4; codecs="avc1.4D401E, mp3"'>"
-  </video>
-
-  <script type="text/javascript">
-  var render = "${render}";
-  var x, y = [], z = [], ox = 0, cnt = 0, ty, tz;
-  var video, scale, lv, rv, debug;
-  var w, h, scale;
-
-  function draw() {
-    ty = 0; y.forEach( function(n, i){ ty += n;} ); ty /= 6;
-    tz = 0; z.forEach( function(n, i){ tz += n;} ); tz /= 6;
-    v = tz / 9.81 / 2;
-    r = ty / 9.81 * -90;
-    ox = ox + ty * 2;
-
-    if ( render == "180" ) {
-      if      (ox > w / 8)   { ox = w / 8; } else if (ox < w / -8) { ox = w / -8; }
-      sy = ( v * h + h / 4) |0;
-      lc.drawImage(video, (w / 8     + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
-      rc.drawImage(video, (w / 8 * 5 + ox) % (w/2) |0, sy, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
-    } else {
-      sx = (w / 8 * 3 + ox) % (w) |0;
-      lc.drawImage(video, sx, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
-      rc.drawImage(video, sx, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
-      if (sx < 0) {
-        lc.drawImage(video, sx + w, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
-        rc.drawImage(video, sx + w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
-      } else if ( sx + w / 4 > w) {
-        lc.drawImage(video, sx - w, (v * h + h / 8)     |0, w / 4 |0, h / 2, 0, 0, lv.width, h / 2 * scale);
-        rc.drawImage(video, sx - w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 2, 0, 0, rv.width, h / 2 * scale);
-      }
-    }
-
-    lv.setAttribute("style", "transform: rotate("+r+"deg);")
-    rv.setAttribute("style", "transform: rotate("+r+"deg);")
-
-    requestAnimationFrame(draw);
-  };
-  function videoPlay(){
-    w = video.videoWidth; h = video.videoHeight;
-    scale = lv.width / (w / 4); 
-    video.play();
-    video.setAttribute("style", "display: none;");
-    draw();
-  };
-
-  video = document.getElementById("video");
-  lv = document.getElementById("lv");
-  rv = document.getElementById("rv");
-  debug = document.getElementById("debug");
-
-  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");
-
-  window.addEventListener("devicemotion", function(event) {
-    // x[cnt] = event.accelerationIncludingGravity.x;
-    y[cnt] = event.accelerationIncludingGravity.y;
-    z[cnt] = event.accelerationIncludingGravity.z;
-    cnt = (cnt + 1) % 6;
-  }, true);
-
-  </script>
-EOF
-
-# vi:set filetype=html:

diff --git a/templates/view.html.sh b/templates/view.html.sh
index 14624213ffdd37bffd080b4fda6d96494974f513..6c8a2e0aec965534908f63afaed53e8241ea0f62 100755 (executable)
--- a/templates/view.html.sh
+++ b/templates/view.html.sh
@@ -47,9 +47,9 @@ cat <<EOF
   <h1>$(htmlsafe "$info")</h1>
 
   <a href="$(urlsafe "$video")">Download</a>
-  <a href="/?p=stereoview&amp;r=180&amp;i=$(urlsafe "$info")">View 180º Steroscopic</a>
-  <a href="/?p=stereoview&amp;r=360&amp;i=$(urlsafe "$info")">View 360º Steroscopic</a>
-  <video autoplay controls>
+  <a href="javascript:stereoview(180, document.getElementById('mainvideo'));">View 180º Steroscopic</a>
+  <a href="javascript:stereoview(360, document.getElementById('mainvideo'));">View 360º Steroscopic</a>
+  <video id="mainvideo" autoplay controls>
     <source src="$(urlsafe "$video")" type='video/mp4; codecs="avc1.4D401E, mp3"'>"
   </video>
 
@@ -61,6 +61,8 @@ cat <<EOF
   ${description:+<span class="info description">$(printf %s "$description" |_wiki)</span>}
 </div>
 
+<script type="text/javascript" src="?static=stereoview.js"></script>
+
 <form class="panel switchable bottom" id="tagger" action="?action=meta&${page_this}" method="post" accept-charset="UTF-8">
   <input type="hidden" name="referrer" value="$(attribsafe "${REQUEST_URI}")">
   <input type="hidden" name="length" value="$length">