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