From: paul Date: Thu, 17 May 2018 16:01:26 +0000 (+0000) Subject: integrated stereoview in regular viewser X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=3fcb8652dc12ebccb83176bac1948a809322105d;p=serve0 integrated stereoview in regular viewser svn path=/trunk/; revision=201 --- diff --git a/static/common.css b/static/common.css index eb2e7a9..c73b25f 100644 --- 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 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 . +*/ + +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 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 . - -cat < - - - - -EOF - -# vi:set filetype=html: diff --git a/templates/view.html.sh b/templates/view.html.sh index 1462421..6c8a2e0 100755 --- a/templates/view.html.sh +++ b/templates/view.html.sh @@ -47,9 +47,9 @@ cat <$(htmlsafe "$info") Download - View 180º Steroscopic - View 360º Steroscopic -