Update radar/index.php

2026-01-03 17:04:53 +01:00
parent 47e991f017
commit b37c7fde82
1 changed files with 118 additions and 15 deletions
--- a/radar/index.php
+++ b/radar/index.php
@@ -1,23 +1,126 @@
 <!DOCTYPE html>
-<html>
+<html lang="nl">
 <head>
-  <meta charset="UTF-8">
-  <title>ESP32 Radar</title>
+<meta charset="UTF-8">
+<title>ESP32 Radar</title>
+<style>
+    body {
+        background: black;
+        color: #00ff00;
+        font-family: monospace;
+        text-align: center;
+        margin: 0;
+        overflow: hidden;
+    }
+    canvas {
+        background: black;
+        display: block;
+        margin: auto;
+    }
+    h1 {
+        margin: 10px 0;
+    }
+</style>
 </head>
 <body>
-  <h1>Ultrasone afstand</h1>
-  <div id="afstand">Laden...</div>

-  <script>
-    function updateAfstand() {
-      fetch('afstand.txt') // leest de laatste waarde
-        .then(response => response.text())
-        .then(data => {
-          document.getElementById('afstand').innerText = data + " cm";
-        });
+<h1>RADAR</h1>
+<canvas id="radar" width="600" height="300"></canvas>
+
+<script>
+const canvas = document.getElementById("radar");
+const ctx = canvas.getContext("2d");
+
+const centerX = canvas.width / 2;
+const centerY = canvas.height;
+const radius = canvas.height - 20;
+
+let sweepAngle = 0;
+let radarData = {};
+
+function drawGrid() {
+    ctx.strokeStyle = "#003300";
+    ctx.lineWidth = 1;
+
+    // cirkels
+    for (let r = radius / 4; r <= radius; r += radius / 4) {
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, r, Math.PI, 0);
+        ctx.stroke();
    }
-    setInterval(updateAfstand, 200); // elke seconde vernieuwen
-    updateAfstand();
-  </script>
+
+    // lijnen
+    for (let a = 0; a <= 180; a += 30) {
+        const rad = a * Math.PI / 180;
+        ctx.beginPath();
+        ctx.moveTo(centerX, centerY);
+        ctx.lineTo(
+            centerX + radius * Math.cos(rad - Math.PI),
+            centerY + radius * Math.sin(rad - Math.PI)
+        );
+        ctx.stroke();
+    }
+}
+
+function drawSweep() {
+    const rad = sweepAngle * Math.PI / 180;
+
+    ctx.strokeStyle = "#00ff00";
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(centerX, centerY);
+    ctx.lineTo(
+        centerX + radius * Math.cos(rad - Math.PI),
+        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();
+    }
+}
+
+async function fetchData() {
+    try {
+        const res = await fetch("radar.json?_=" + Date.now());
+        radarData = await res.json();
+    } catch (e) {
+        console.log("Geen data");
+    }
+}
+
+function loop() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawGrid();
+    drawTargets();
+    drawSweep();
+    requestAnimationFrame(loop);
+}
+
+// elke 200ms nieuwe radar data ophalen
+setInterval(fetchData, 200);
+
+fetchData();
+loop();
+</script>
+
 </body>
 </html>