2017-01-18 18:47:55 +00:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2017-01-19 01:00:09 +00:00
|
|
|
<title>{{.title}}</title>
|
2017-01-18 18:47:55 +00:00
|
|
|
<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;
|
2017-08-18 06:58:20 +00:00
|
|
|
background: url('/static/img/bg.png') 100% 0 no-repeat fixed;
|
|
|
|
|
/* background-color: #000; */
|
|
|
|
|
/* background-size: 20% auto; */
|
|
|
|
|
/* background-position: 1em center; */
|
2017-05-13 00:04:43 +00:00
|
|
|
cursor: none;
|
2017-01-18 18:47:55 +00:00
|
|
|
}
|
|
|
|
|
#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;
|
2017-05-13 00:04:43 +00:00
|
|
|
width: 100%;
|
2017-01-18 18:47:55 +00:00
|
|
|
overflow: hidden;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2017-05-13 00:04:43 +00:00
|
|
|
#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;
|
|
|
|
|
}
|
2017-01-18 18:47:55 +00:00
|
|
|
h1 {
|
|
|
|
|
font-size: 60px;
|
|
|
|
|
}
|
|
|
|
|
#infotext {
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
}
|
|
|
|
|
#othertext {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="left">
|
|
|
|
|
<div id="image">
|
|
|
|
|
<center>
|
2017-05-13 00:04:43 +00:00
|
|
|
<video id="snapwall_video" src="" style="display: none;" autoplay loop muted></video>
|
|
|
|
|
<img id="snapwall_image" src="" alt="" />
|
2017-01-18 18:47:55 +00:00
|
|
|
</center>
|
|
|
|
|
</div>
|
2017-05-12 12:04:18 +00:00
|
|
|
</div>
|
2017-01-18 18:47:55 +00:00
|
|
|
<div id="right">
|
|
|
|
|
<div id="infos">
|
2017-08-18 08:13:45 +00:00
|
|
|
<div id="infotext">
|
|
|
|
|
Snapchat: aninite2017<br />
|
|
|
|
|
Twitter: #aninite2017<br />
|
|
|
|
|
Instagram: #aninite2017
|
|
|
|
|
</div>
|
2017-05-13 00:04:43 +00:00
|
|
|
<!--
|
2017-05-12 12:04:18 +00:00
|
|
|
<center><h1>HTL Ball 2017</h1></center>
|
2017-01-18 18:47:55 +00:00
|
|
|
<br /><br />
|
|
|
|
|
<div id="infotext">
|
2017-05-12 12:04:18 +00:00
|
|
|
Snapchat: HTLBall17
|
2017-01-18 18:47:55 +00:00
|
|
|
</div>
|
|
|
|
|
<div id="othertext">
|
2017-05-12 12:04:18 +00:00
|
|
|
Lorem ipsum dolor sit...<br />
|
2017-01-18 18:47:55 +00:00
|
|
|
</div>
|
2017-05-13 00:04:43 +00:00
|
|
|
-->
|
2017-01-18 18:47:55 +00:00
|
|
|
</div>
|
2017-05-12 12:04:18 +00:00
|
|
|
</div>
|
2017-01-18 18:47:55 +00:00
|
|
|
<div style="clear:both"></div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
2017-05-12 12:04:36 +00:00
|
|
|
var queue = [];
|
2017-05-13 00:04:43 +00:00
|
|
|
var archive = [];
|
2017-05-12 12:04:36 +00:00
|
|
|
|
2017-05-13 00:34:15 +00:00
|
|
|
function connectWebSocket(url) {
|
|
|
|
|
var webSocket = new WebSocket(url);
|
2017-05-13 00:14:20 +00:00
|
|
|
|
2017-05-13 00:34:15 +00:00
|
|
|
webSocket.onopen = function(event) {
|
|
|
|
|
console.log("WebSocket: Connected");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
webSocket.onmessage = function(event) {
|
|
|
|
|
console.log("WebSocket: Received Message");
|
2017-08-18 06:48:41 +00:00
|
|
|
console.log(event.data);
|
2017-05-13 00:34:15 +00:00
|
|
|
handleMessage(event.data);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
webSocket.onclose = function(event) {
|
|
|
|
|
console.log("WebSocket: Closed");
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
connectWebSocket(url);
|
|
|
|
|
}, 5000);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
webSocket.onerror = function(event) {
|
|
|
|
|
console.warn("WebSocket: Error, closing socket");
|
|
|
|
|
ws.close();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleMessage(message) {
|
|
|
|
|
var item = null;
|
|
|
|
|
try {
|
|
|
|
|
item = JSON.parse(message);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.warn("MessageHandler: Failed Message JSON parsing");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if (item["State"] === 1) {
|
|
|
|
|
addItem(item);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addItem(item) {
|
2017-08-18 06:48:41 +00:00
|
|
|
var exists = 0;
|
|
|
|
|
for (var i in queue) {
|
|
|
|
|
if (queue.hasOwnProperty(i)) {
|
|
|
|
|
if (queue[i]["ID"] === item["ID"]) {
|
|
|
|
|
exists = 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (exists === 0) {
|
|
|
|
|
queue.push(item);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
exists = 0;
|
|
|
|
|
for (var i in archive) {
|
|
|
|
|
if (archive.hasOwnProperty(i)) {
|
|
|
|
|
if (archive[i]["ID"] === item["ID"]) {
|
|
|
|
|
exists = 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (exists === 0) {
|
|
|
|
|
archive.push(item);
|
|
|
|
|
if (archive.length > 5) {
|
|
|
|
|
archive.shift();
|
|
|
|
|
}
|
2017-05-12 12:04:36 +00:00
|
|
|
}
|
2017-01-18 18:47:55 +00:00
|
|
|
}
|
2017-05-12 12:04:36 +00:00
|
|
|
|
|
|
|
|
function displayNewSnap() {
|
|
|
|
|
var item = queue.shift();
|
|
|
|
|
if (item) {
|
2017-05-13 00:04:43 +00:00
|
|
|
setDisplayItem(item);
|
|
|
|
|
return true;
|
2017-05-12 12:04:36 +00:00
|
|
|
}
|
2017-05-13 00:04:43 +00:00
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function displayArchiveSnap() {
|
|
|
|
|
var item = archive.shift();
|
|
|
|
|
if (item) {
|
|
|
|
|
setDisplayItem(item);
|
|
|
|
|
}
|
|
|
|
|
archive.push(item);
|
2017-05-12 12:04:36 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setInterval(function() {
|
2017-05-13 00:04:43 +00:00
|
|
|
var is_new = displayNewSnap();
|
|
|
|
|
/* FIXME */
|
|
|
|
|
if (!is_new) {
|
|
|
|
|
console.log("No new snaps, displaying archive snap");
|
|
|
|
|
displayArchiveSnap();
|
|
|
|
|
}
|
2017-05-12 12:04:36 +00:00
|
|
|
}, 7000); // 7 seconds
|
|
|
|
|
|
2017-05-13 00:04:43 +00:00
|
|
|
/* Load initial approved images to be able to show
|
2017-05-12 12:04:36 +00:00
|
|
|
* something, even when reloading
|
2017-05-13 00:04:43 +00:00
|
|
|
*/
|
|
|
|
|
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]);
|
|
|
|
|
}
|
2017-01-18 18:47:55 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-05-13 00:04:43 +00:00
|
|
|
xmlhttp.open("GET","listSnaps",true);
|
|
|
|
|
xmlhttp.send();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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 = ""
|
|
|
|
|
}
|
|
|
|
|
}
|
2017-01-18 18:47:55 +00:00
|
|
|
|
2017-05-13 00:34:15 +00:00
|
|
|
// Construct websocket url
|
|
|
|
|
var loc = window.location;
|
|
|
|
|
var ws_url = ((loc.protocol === "https:") ? "wss://" : "ws://") + loc.host + "/ws";
|
|
|
|
|
|
2017-05-13 00:04:43 +00:00
|
|
|
loadInitialSnaplist();
|
2017-05-13 00:34:15 +00:00
|
|
|
connectWebSocket(ws_url);
|
2017-01-18 18:47:55 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
