diff --git a/simulation/simulation_thread.py b/simulation/simulation_thread.py
index 0945615..f70096a 100644
--- a/simulation/simulation_thread.py
+++ b/simulation/simulation_thread.py
@@ -93,10 +93,12 @@ class SimulationThread(threading.Thread):
return_data = {
"current_period_name": self.periods[self.current_period_index]["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,
"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()
return return_data
diff --git a/trafficlightfrontend/templates/trafficlightfrontend/index.html b/trafficlightfrontend/templates/trafficlightfrontend/index.html
index 10278e4..d4f41c0 100644
--- a/trafficlightfrontend/templates/trafficlightfrontend/index.html
+++ b/trafficlightfrontend/templates/trafficlightfrontend/index.html
@@ -1,33 +1,46 @@
Traffic Light Simmulation Frontend
+
- Traffic light demo:
- Status: Awaiting first update...
+ Traffic light Simulation Demo
Period: Awaiting first update...
- Time: Awaiting first update...
+ Simulation time: Awaiting first update...
+ Remaining state time: Awaiting first update... second(s)
+ Current state index: Awaiting first update...
+ Current state data: Awaiting first update...
+
-
NORTH
@@ -45,7 +58,6 @@
EAST
-
SOUTH
@@ -66,7 +78,6 @@
req.onload = function()
{
- // console.dir(this);
if (this.status != 200)
{
console.log("Failed update: status " + this.status)
@@ -75,15 +86,19 @@
light_status = JSON.parse(this.responseText);
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("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-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)";
+ 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_data["north-right"] + "-right.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_data.east + ".png)";
+ document.getElementById("south").style.backgroundImage = "url(" + static_path_prefix + light_status.current_state_data.south + ".png)";
};
while (true)