layout for stereoview

[serve0] / templates / stereoview.html.sh

diff --git a/templates/stereoview.html.sh b/templates/stereoview.html.sh
index c618ef64247f93b52c60f98ac5ea4a576d4ec979..6fbbebd65c6422bb0c51d28c8adfbfd7585e5c40 100755 (executable)
--- a/templates/stereoview.html.sh
+++ b/templates/stereoview.html.sh
@@ -16,15 +16,14 @@
 # along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
 
 cat <<EOF
-  <canvas id="lv" width="400" height="480" style="width: 50%; margin: 0;">
-  </canvas><canvas id="rv" width="400" height="480" style="width: 50%; margin: 0;"></canvas>
+  <canvas id="lv" width="400" height="480"></canvas><canvas id="rv" width="400" height="480"></canvas>
 
-  <video id="video" onclick="videoPlay();" style="position: absolute; top: 0;">
+  <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 render = "${render}";
   var x, y = [], z = [], ox = 0, cnt = 0, ty, tz;
   var video, scale, lv, rv, debug;
   var w, h, scale;
@@ -36,22 +35,21 @@ cat <<EOF
     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; }
+    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 / 4, 0, 0, lv.width, h / 4 * scale);
-      rc.drawImage(video, sx, (v * h + h / 8 * 5) |0, w / 4 |0, h / 4, 0, 0, rv.width, h / 4 * scale);
+      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 / 4, 0, 0, lv.width, h / 4 * scale);
-        rc.drawImage(video, sx + w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 4, 0, 0, rv.width, h / 4 * scale);
+        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 / 4, 0, 0, lv.width, h / 4 * scale);
-        rc.drawImage(video, sx - w, (v * h + h / 8 * 5) |0, w / 4 |0, h / 4, 0, 0, rv.width, h / 4 * scale);
+        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);
       }
     }