From 5719813c46206b2ebef7ce9c0cd6b70c01de6a89 Mon Sep 17 00:00:00 2001 From: Chris Davoren Date: Sat, 21 Oct 2023 15:52:26 +1000 Subject: [PATCH] Frontend refinements including extra data such as remaining time. --- simulation/simulation_thread.py | 6 ++- .../templates/trafficlightfrontend/index.html | 43 +++++++++++++------ 2 files changed, 33 insertions(+), 16 deletions(-) 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)