diff --git a/radar/index.php b/radar/index.php
index 3a9888a..68e1428 100644
--- a/radar/index.php
+++ b/radar/index.php
@@ -5,21 +5,21 @@
ESP32 Radar
@@ -33,23 +33,24 @@ const ctx = canvas.getContext("2d");
const centerX = canvas.width / 2;
const centerY = canvas.height;
-const radius = canvas.height - 20;
+const radius = canvas.height - 20;
-let sweepAngle = 0;
let radarData = {};
+let sweepAngle = null;
+// raster / grid
function drawGrid() {
ctx.strokeStyle = "#003300";
ctx.lineWidth = 1;
- // cirkels
+ // bogen
for (let r = radius / 4; r <= radius; r += radius / 4) {
ctx.beginPath();
ctx.arc(centerX, centerY, r, Math.PI, 0);
ctx.stroke();
}
- // lijnen
+ // hoeklijnen
for (let a = 0; a <= 180; a += 30) {
const rad = a * Math.PI / 180;
ctx.beginPath();
@@ -62,7 +63,30 @@ function drawGrid() {
}
}
+// doelen tekenen
+function drawTargets() {
+ ctx.fillStyle = "#00ff00";
+
+ for (const hoek in radarData) {
+ const afstand = radarData[hoek].afstand;
+ if (afstand < 0) continue;
+
+ const rad = hoek * Math.PI / 180;
+ const r = (afstand / 200) * radius;
+
+ const x = centerX + r * Math.cos(rad - Math.PI);
+ const y = centerY + r * Math.sin(rad - Math.PI);
+
+ ctx.beginPath();
+ ctx.arc(x, y, 3, 0, Math.PI * 2);
+ ctx.fill();
+ }
+}
+
+// sweeplijn = echte servohoek
function drawSweep() {
+ if (sweepAngle === null) return;
+
const rad = sweepAngle * Math.PI / 180;
ctx.strokeStyle = "#00ff00";
@@ -74,39 +98,32 @@ function drawSweep() {
centerY + radius * Math.sin(rad - Math.PI)
);
ctx.stroke();
-
- sweepAngle++;
- if (sweepAngle > 180) sweepAngle = 0;
-}
-
-function drawTargets() {
- ctx.fillStyle = "#00ff00";
-
- for (const hoek in radarData) {
- const afstand = radarData[hoek].afstand;
- if (afstand < 0) continue;
-
- const rad = hoek * Math.PI / 180;
- const r = (afstand / 200) * radius;
-
- const x = centerX + r * Math.cos(rad - Math.PI);
- const y = centerY + r * Math.sin(rad - Math.PI);
-
- ctx.beginPath();
- ctx.arc(x, y, 3, 0, Math.PI * 2);
- ctx.fill();
- }
}
+// radar.json ophalen + laatste hoek bepalen
async function fetchData() {
try {
const res = await fetch("radar.json?_=" + Date.now());
radarData = await res.json();
+
+ let latestTime = 0;
+ let latestAngle = null;
+
+ for (const hoek in radarData) {
+ const t = radarData[hoek].tijd;
+ if (t > latestTime) {
+ latestTime = t;
+ latestAngle = parseInt(hoek);
+ }
+ }
+
+ sweepAngle = latestAngle;
} catch (e) {
- console.log("Geen data");
+ console.log("Geen radar data");
}
}
+// render-loop
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGrid();
@@ -115,7 +132,7 @@ function loop() {
requestAnimationFrame(loop);
}
-// elke 200ms nieuwe radar data ophalen
+// elke 200 ms nieuwe data
setInterval(fetchData, 200);
fetchData();