From: paul <paul@plutz.net>
Date: Thu, 17 May 2018 10:10:32 +0000 (+0000)
Subject: layout for stereoview
X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=77d8d8341f42adc7dedd221ba409482186e43a68;p=serve0

layout for stereoview

svn path=/trunk/; revision=200
---

diff --git a/static/common.css b/static/common.css
index 312176c..eb2e7a9 100644
--- a/static/common.css
+++ b/static/common.css
@@ -481,3 +481,16 @@ span.progress > span {
   background-color: #333;
   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/templates/stereoview.html.sh b/templates/stereoview.html.sh
index 4aa623f..6fbbebd 100755
--- a/templates/stereoview.html.sh
+++ b/templates/stereoview.html.sh
@@ -16,10 +16,9 @@
 # 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>
 
@@ -43,14 +42,14 @@ cat <<EOF
       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);
       }
     }