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

Added frontend polling loop and traffic light images.

This commit is contained in:
Chris Davoren 2023-10-20 19:36:12 +10:00
parent d09611137d
commit 325c976c59
9 changed files with 122 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
trafficlightfrontend/static/trafficlightfrontend/amber-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 KiB

BIN
trafficlightfrontend/static/trafficlightfrontend/amber.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 305 KiB

BIN
trafficlightfrontend/static/trafficlightfrontend/green-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 276 KiB

BIN
trafficlightfrontend/static/trafficlightfrontend/green.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 KiB

BIN
trafficlightfrontend/static/trafficlightfrontend/red-right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 286 KiB

BIN
trafficlightfrontend/static/trafficlightfrontend/red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 KiB

112
trafficlightfrontend/templates/trafficlightfrontend/index.html Normal file
View File

@ -0,0 +1,112 @@
<!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>

3
trafficlightfrontend/urls.py
View File

@ -3,5 +3,6 @@ from django.urls import path
from . import views from . import views
urlpatterns = [ urlpatterns = [
path("", views.index, name="index") path("", views.index, name="index"),
path("status/", views.status, name="status"),
] ]

11
trafficlightfrontend/views.py
View File

@ -1,6 +1,11 @@
from django.http import HttpResponse
from django.shortcuts import render from django.shortcuts import render
from django.http import JsonResponse
from simulation import SimulationThread
# Create your views here.
def index(request): def index(request):
return HttpResponse("Basic test response.") return render(request, "trafficlightfrontend/index.html")
def status(request):
return JsonResponse(SimulationThread.get_instance().get_snapshot())