davorian
/
trafficlights
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Frontend refinements including extra data such as remaining time.

This commit is contained in:
Chris Davoren 2023-10-21 15:52:26 +10:00
parent aacaf7de1a
commit 5719813c46
2 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
simulation/simulation_thread.py
View File

@ -93,10 +93,12 @@ class SimulationThread(threading.Thread):
return_data = { return_data = {
"current_period_name": self.periods[self.current_period_index]["name"], "current_period_name": self.periods[self.current_period_index]["name"],
"current_period_verbose_name": self.periods[self.current_period_index]["verbose-name"], "current_period_verbose_name": self.periods[self.current_period_index]["verbose-name"],
"current_state": self.periods[self.current_period_index]["states"][self.current_state_index], "current_period_index": self.current_period_index,
"current_state_index" : self.current_state_index,
"current_state_data": self.periods[self.current_period_index]["states"][self.current_state_index],
"next_changeover_time": self.next_changeover_time, "next_changeover_time": self.next_changeover_time,
"simulation_time": self.current_simulation_datetime.time(), "simulation_time": self.current_simulation_datetime.time(),
"time_remaining": self.next_changeover_time - time.time(), "time_remaining": (self.next_changeover_time - time.time()) * self.time_factor,
} }
self.mutex.release() self.mutex.release()
return return_data return return_data

43
trafficlightfrontend/templates/trafficlightfrontend/index.html
View File

@ -1,33 +1,46 @@
<!doctype html> <!doctype html>
<html> <html>
<title>Traffic Light Simmulation Frontend</title> <title>Traffic Light Simmulation Frontend</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:normal,bold,italic" />
<style> <style>
body {
font-family: 'Roboto Condensed';
}
.wrapper { .wrapper {
display: flex; display: flex;
max-width: 500px; max-width: 600px;
font-family: 'Roboto Condensed';
} }
.wrapper > div { .wrapper > div {
background: #AAAAAA;
margin: .1em; margin: .1em;
align-self: center;
flex: 1; flex: 1;
text-align: center;
} }
div.light { div.light {
background-size: 100px; background-size: 100px;
background-repeat: no-repeat; background-repeat: no-repeat;
min-height: 230px; min-height: 230px;
min-width: 100px; min-width: 100px;
width: 100px;
} }
div.north { div.north {
background-image: url(/static/trafficlightfrontend/red.png); background-image: url(/static/trafficlightfrontend/red.png);
} }
span#state-data {
color: #666666;
font-family: monospace;
}
</style> </style>
<body> <body>
<p>Traffic light demo:</p> <h1>Traffic light Simulation Demo</h1>
<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>Period: </strong><span id="period">Awaiting first update...</span></p>
<p><strong>Time: </strong><span id="time">Awaiting first update...</span></p> <p><strong>Simulation time: </strong><span id="time">Awaiting first update...</span></p>
<p><strong>Remaining state time: </strong><span id="time-remaining">Awaiting first update...</span> second(s)</p>
<p><strong>Current state index: </strong><span id="state-index">Awaiting first update...</span></p>
<p><strong>Current state data: </strong><span id="state-data">Awaiting first update...</span></p>
<hr />
<div class="wrapper"> <div class="wrapper">
<div></div>
<div></div> <div></div>
<div>NORTH</div> <div>NORTH</div>
<div id="north" class="light north"></div> <div id="north" class="light north"></div>
@ -45,7 +58,6 @@
<div>EAST</div> <div>EAST</div>
</div> </div>
<div class="wrapper"> <div class="wrapper">
<div></div>
<div></div> <div></div>
<div>SOUTH</div> <div>SOUTH</div>
<div id="south" class="light"></div> <div id="south" class="light"></div>
@ -66,7 +78,6 @@
req.onload = function() req.onload = function()
{ {
// console.dir(this);
if (this.status != 200) if (this.status != 200)
{ {
console.log("Failed update: status " + this.status) console.log("Failed update: status " + this.status)
@ -75,15 +86,19 @@
light_status = JSON.parse(this.responseText); light_status = JSON.parse(this.responseText);
let static_path_prefix = "/static/trafficlightfrontend/"; let static_path_prefix = "/static/trafficlightfrontend/";
document.getElementById("status").innerHTML = JSON.stringify(light_status.current_state);
document.getElementById("period").innerHTML = light_status.current_period_verbose_name; document.getElementById("period").innerHTML = light_status.current_period_verbose_name;
document.getElementById("time").innerHTML = light_status.simulation_time; document.getElementById("time").innerHTML = light_status.simulation_time;
// Important note: Due to marginal overshoot of scheduled timing, it is possible for time-remaining to be very slightly negative
// It is undesirable to present this on the frontend, and therefore zero is the lowest number displayed
document.getElementById("time-remaining").innerHTML = Math.max(0, Math.round(light_status.time_remaining * 1000) / 1000).toFixed(3);
document.getElementById("state-index").innerHTML = light_status.current_state_index;
document.getElementById("state-data").innerHTML = JSON.stringify(light_status.current_state_data);
document.getElementById("north").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.north + ".png)"; document.getElementById("north").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state_data.north + ".png)";
document.getElementById("north-right").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state["north-right"] + "-right.png)"; document.getElementById("north-right").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state_data["north-right"] + "-right.png)";
document.getElementById("west").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.west + ".png)"; document.getElementById("west").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state_data.west + ".png)";
document.getElementById("east").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.east + ".png)"; document.getElementById("east").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state_data.east + ".png)";
document.getElementById("south").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state.south + ".png)"; document.getElementById("south").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state_data.south + ".png)";
}; };
while (true) while (true)