<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Virtual Metro</title> <style type="text/css"> #mainsvg { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; } #topbar { position: absolute; left: 0; top: 0; z-index: 999; font-size: small; } body, html { color: #ccc; background-color: black; margin: 0; padding: 0; overflow: hidden; } a, a:active, a:visited { color: #99f; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/nunjucks/3.0.1/nunjucks.min.js"></script> <script> function getQueryVariable(variable, def) { var vars = window.location.search.substring(1).split("&"); for (var i = 0; i < vars.length; i++) { var bits = vars[i].split("="); if (decodeURIComponent(bits[0]) == variable) { return decodeURIComponent(bits[1]); } } return def; } var stop_id = parseInt(getQueryVariable("stop_id", 1099)); var plat_id = parseInt(getQueryVariable("plat_id", 1)); function start() { var svg = document.getElementById("mainsvg").getSVGDocument().querySelector("svg"); var template = svg.innerHTML; svg.innerHTML = nunjucks.renderString(template, {"dest": "Loading..."}); function tick() { var xhr = new XMLHttpRequest(); xhr.addEventListener("load", function() { var result = JSON.parse(xhr.responseText); svg.innerHTML = nunjucks.renderString(template, result); document.getElementById("stopinfo").innerText = stop_id + " (" + result.stop_name + ")"; }); xhr.open("GET", "latest?stop_id=" + stop_id + "&plat_id=" + plat_id); xhr.send(); } tick(); window.setInterval(tick, 30000); } function changePlatform() { var new_plat = parseInt(window.prompt("Enter new platform number:", plat_id)); window.location = "?stop_id=" + stop_id + "&plat_id=" + new_plat; return false; } </script> <div id="topbar">Stop <span id="stopinfo">?</span> [<a href="stations">change</a>] Platform <span id="platinfo">?</span> [<a href="#" onclick="return changePlatform();">change</a>]</div> <object id="mainsvg" data="static/template.svg" type="image/svg+xml" onload="start();"></object> <script> document.getElementById("stopinfo").innerText = stop_id; document.getElementById("platinfo").innerText = plat_id; </script> </body> </html>