151 lines
3.3 KiB
HTML
Executable file
151 lines
3.3 KiB
HTML
Executable file
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>{{.title}}</title>
|
|
<style type="text/css">
|
|
@import 'https://fonts.googleapis.com/css?family=Roboto';
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
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;
|
|
|
|
}
|
|
#left {
|
|
/*min-width:40%;*/
|
|
width:100%;
|
|
height:100%;
|
|
float:left;
|
|
}
|
|
#right {
|
|
float:right;
|
|
width:42%;
|
|
overflow:hidden;
|
|
height:600px;
|
|
margin-top:auto;
|
|
margin-bottom:auto;
|
|
padding-top:7%;
|
|
padding-right:4%;
|
|
text-align:center;
|
|
}
|
|
#image {
|
|
vertical-align: middle;
|
|
margin-top: 0;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
h1 {
|
|
font-size: 60px;
|
|
}
|
|
#infotext {
|
|
font-size: 30px;
|
|
}
|
|
#othertext {
|
|
font-size: 26px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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="" />
|
|
</center>
|
|
</div>
|
|
</div>
|
|
<div id="right">
|
|
<div id="infos">
|
|
<center><h1>HTL Ball 2017</h1></center>
|
|
<br /><br />
|
|
<div id="infotext">
|
|
Snapchat: HTLBall17
|
|
</div>
|
|
<div id="othertext">
|
|
Lorem ipsum dolor sit...<br />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="clear:both"></div>
|
|
|
|
<script type="text/javascript">
|
|
var queue = [];
|
|
|
|
var exampleSocket = new WebSocket("ws://Marvins-MacBook-Pro.local:8000/ws");
|
|
exampleSocket.onopen = function (event) {
|
|
console.log("WS: Connection open");
|
|
};
|
|
exampleSocket.onmessage = function (event) {
|
|
console.log("WS: Received message");
|
|
IT = JSON.parse(event.data);
|
|
if (IT["State"] === 1) {
|
|
queue.push(IT);
|
|
}
|
|
console.log(event.data);
|
|
}
|
|
|
|
function displayNewSnap() {
|
|
var item = queue.shift();
|
|
if (item) {
|
|
document.getElementById("snapwall_image").src = item["Path"];
|
|
}
|
|
}
|
|
|
|
setInterval(function() {
|
|
displayNewSnap();
|
|
}, 7000); // 7 seconds
|
|
|
|
/* TODO: 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;
|
|
}
|
|
}
|
|
}
|
|
xmlhttp.open("GET","image.txt",true);
|
|
xmlhttp.send();
|
|
}
|
|
|
|
setInterval(function() {
|
|
HTTPGetRequest();
|
|
}, 7000); // 7 seconds
|
|
*/
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|