113 lines
3.3 KiB
HTML
113 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<title>Traffic Light Simmulation Frontend</title>
|
|
<style>
|
|
.wrapper {
|
|
display: flex;
|
|
max-width: 500px;
|
|
}
|
|
.wrapper > div {
|
|
background: #AAAAAA;
|
|
margin: .1em;
|
|
flex: 1;
|
|
}
|
|
div.light {
|
|
background-size: 100px;
|
|
background-repeat: no-repeat;
|
|
min-height: 230px;
|
|
min-width: 100px;
|
|
}
|
|
div.north {
|
|
background-image: url(/static/trafficlightfrontend/red.png);
|
|
}
|
|
</style>
|
|
<body>
|
|
<p>Traffic light demo:</p>
|
|
<p><strong>Status: </strong><span id="status">Awaiting first update...</span></p>
|
|
<p><strong>Period: </strong><span id="period">Awaiting first update...</span></p>
|
|
<p><strong>Time: </strong><span id="time">Awaiting first update...</span></p>
|
|
<div class="wrapper">
|
|
<div></div>
|
|
<div></div>
|
|
<div>NORTH</div>
|
|
<div id="north" class="light north"></div>
|
|
<div id="north-right" class="light"></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="wrapper">
|
|
<div>WEST</div>
|
|
<div id="west" class="light"></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div id="east" class="light"></div>
|
|
<div>EAST</div>
|
|
</div>
|
|
<div class="wrapper">
|
|
<div></div>
|
|
<div></div>
|
|
<div>SOUTH</div>
|
|
<div id="south" class="light"></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
function sleep(ms)
|
|
{
|
|
return new Promise(resolve => setTimeout(resolve, ms))
|
|
}
|
|
|
|
async function ready()
|
|
{
|
|
const req = new XMLHttpRequest();
|
|
|
|
req.onload = function()
|
|
{
|
|
// console.dir(this);
|
|
if (this.status != 200)
|
|
{
|
|
console.log("Failed update: status " + this.status)
|
|
return;
|
|
}
|
|
light_status = JSON.parse(this.responseText);
|
|
// console.log(light_status);
|
|
// console.log(light_status.current_period);
|
|
|
|
let static_path_prefix = "/static/trafficlightfrontend/";
|
|
document.getElementById("status").innerHTML = JSON.stringify(light_status.current_state);
|
|
document.getElementById("period").innerHTML = light_status.current_period;
|
|
document.getElementById("time").innerHTML = light_status.simulation_time;
|
|
|
|
document.getElementById("north").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.north + ".png)";
|
|
document.getElementById("north-right").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state["north-right"] + "-right.png)";
|
|
document.getElementById("west").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.west + ".png)";
|
|
document.getElementById("east").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.east + ".png)";
|
|
document.getElementById("south").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.south + ".png)";
|
|
};
|
|
|
|
while (true)
|
|
{
|
|
await sleep(250);
|
|
console.log("Tick");
|
|
req.open("GET", "/frontend/status", false);
|
|
|
|
// Note try/catch for exceptions is the only way to account for net::ERR_CONNECTION_REFUSED - this is NOT dealt with by XMLHttpRequest event hooks.
|
|
// In the case of net::ERR_CONNECTION_REFUSED should throw DOMException with name "NetworkError".
|
|
try
|
|
{
|
|
req.send();
|
|
}
|
|
catch (err)
|
|
{
|
|
console.dir(err);
|
|
}
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", ready);
|
|
</script>
|
|
</html>
|