parent
bcbb789cdd
commit
7aed274e63
|
@ -13,13 +13,11 @@
|
||||||
font-family: Roboto, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
font-family: Roboto, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
background: url('/static/img/hirsch_big.png') 50% 0 no-repeat fixed;
|
||||||
background: url('/static/img/bg.gif') 50% 0 no-repeat fixed;
|
background-color: #000;
|
||||||
-webkit-background-size: cover;
|
background-size: 20% auto;
|
||||||
-moz-background-size: cover;
|
background-position: 1em center;
|
||||||
-o-background-size: cover;
|
cursor: none;
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
#left {
|
#left {
|
||||||
/*min-width:40%;*/
|
/*min-width:40%;*/
|
||||||
|
@ -41,10 +39,22 @@
|
||||||
#image {
|
#image {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
max-width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
#snapwall_image {
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: 50% 50%;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
#snapwall_video {
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: 50% 50%;
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
}
|
}
|
||||||
|
@ -60,12 +70,14 @@
|
||||||
<div id="left">
|
<div id="left">
|
||||||
<div id="image">
|
<div id="image">
|
||||||
<center>
|
<center>
|
||||||
<img style="max-height: 100%; background: green; display: inline-block; vertical-align: middle;" id="snapwall_image" src="" alt="" />
|
<video id="snapwall_video" src="" style="display: none;" autoplay loop muted></video>
|
||||||
|
<img id="snapwall_image" src="" alt="" />
|
||||||
</center>
|
</center>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="right">
|
<div id="right">
|
||||||
<div id="infos">
|
<div id="infos">
|
||||||
|
<!--
|
||||||
<center><h1>HTL Ball 2017</h1></center>
|
<center><h1>HTL Ball 2017</h1></center>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
<div id="infotext">
|
<div id="infotext">
|
||||||
|
@ -74,12 +86,14 @@
|
||||||
<div id="othertext">
|
<div id="othertext">
|
||||||
Lorem ipsum dolor sit...<br />
|
Lorem ipsum dolor sit...<br />
|
||||||
</div>
|
</div>
|
||||||
|
-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="clear:both"></div>
|
<div style="clear:both"></div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var queue = [];
|
var queue = [];
|
||||||
|
var archive = [];
|
||||||
|
|
||||||
var exampleSocket = new WebSocket("ws://Marvins-MacBook-Pro.local:8000/ws");
|
var exampleSocket = new WebSocket("ws://Marvins-MacBook-Pro.local:8000/ws");
|
||||||
exampleSocket.onopen = function (event) {
|
exampleSocket.onopen = function (event) {
|
||||||
|
@ -90,6 +104,10 @@ exampleSocket.onmessage = function (event) {
|
||||||
IT = JSON.parse(event.data);
|
IT = JSON.parse(event.data);
|
||||||
if (IT["State"] === 1) {
|
if (IT["State"] === 1) {
|
||||||
queue.push(IT);
|
queue.push(IT);
|
||||||
|
archive.push(IT);
|
||||||
|
if (archive.length > 5) {
|
||||||
|
archive.shift();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
console.log(event.data);
|
console.log(event.data);
|
||||||
}
|
}
|
||||||
|
@ -97,53 +115,68 @@ exampleSocket.onmessage = function (event) {
|
||||||
function displayNewSnap() {
|
function displayNewSnap() {
|
||||||
var item = queue.shift();
|
var item = queue.shift();
|
||||||
if (item) {
|
if (item) {
|
||||||
document.getElementById("snapwall_image").src = item["Path"];
|
setDisplayItem(item);
|
||||||
|
return true;
|
||||||
}
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function displayArchiveSnap() {
|
||||||
|
var item = archive.shift();
|
||||||
|
if (item) {
|
||||||
|
setDisplayItem(item);
|
||||||
|
}
|
||||||
|
archive.push(item);
|
||||||
}
|
}
|
||||||
|
|
||||||
setInterval(function() {
|
setInterval(function() {
|
||||||
displayNewSnap();
|
var is_new = displayNewSnap();
|
||||||
|
/* FIXME */
|
||||||
|
if (!is_new) {
|
||||||
|
console.log("No new snaps, displaying archive snap");
|
||||||
|
displayArchiveSnap();
|
||||||
|
}
|
||||||
}, 7000); // 7 seconds
|
}, 7000); // 7 seconds
|
||||||
|
|
||||||
/* TODO: Load initial approved images to be able to show
|
/* Load initial approved images to be able to show
|
||||||
* something, even when reloading
|
* something, even when reloading
|
||||||
*/
|
*/
|
||||||
|
function loadInitialSnaplist() {
|
||||||
</script>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
/*
|
|
||||||
var currentImage;
|
|
||||||
|
|
||||||
function HTTPGetRequest() {
|
|
||||||
if (!window.XMLHttpRequest) {
|
if (!window.XMLHttpRequest) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
xmlhttp = new XMLHttpRequest();
|
xmlhttp = new XMLHttpRequest();
|
||||||
xmlhttp.onreadystatechange = function() {
|
xmlhttp.onreadystatechange = function() {
|
||||||
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
|
||||||
var parts = xmlhttp.responseText.split(" ");
|
ITs = JSON.parse(xmlhttp.responseText);
|
||||||
if(parts[0] == "l") { // landscape pic
|
for (var item in ITs) {
|
||||||
document.getElementById("image").style.marginTop = '-140px';
|
if (ITs.hasOwnProperty(item)) {
|
||||||
document.getElementById("left").style.paddingLeft = '1%';
|
queue.push(ITs[item]);
|
||||||
document.getElementById("left").style.minWidth = '52%';
|
archive.push(ITs[item]);
|
||||||
} else if(parts[0] == "p") { // portrait pic
|
|
||||||
document.getElementById("image").style.marginTop = '0px';
|
|
||||||
}
|
|
||||||
if(parts[1] != currentImage) { // if new image different from current image
|
|
||||||
document.getElementById("snapwall_image").src = parts[1];
|
|
||||||
currentImage = xmlhttp.responseText;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
xmlhttp.open("GET","image.txt",true);
|
}
|
||||||
|
xmlhttp.open("GET","listSnaps",true);
|
||||||
xmlhttp.send();
|
xmlhttp.send();
|
||||||
}
|
}
|
||||||
|
|
||||||
setInterval(function() {
|
function setDisplayItem(item) {
|
||||||
HTTPGetRequest();
|
var v_el = document.getElementById("snapwall_video");
|
||||||
}, 7000); // 7 seconds
|
var i_el = document.getElementById("snapwall_image");
|
||||||
*/
|
if (item["IsVideo"]) {
|
||||||
|
v_el.src = item["Path"];
|
||||||
|
v_el.style.display = "block";
|
||||||
|
i_el.style.display = "none";
|
||||||
|
} else {
|
||||||
|
i_el.src = item["Path"];
|
||||||
|
i_el.style.display = "block";
|
||||||
|
v_el.style.display = "none";
|
||||||
|
v_el.src = ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadInitialSnaplist();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue