<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>ESP32 Radar</title>
<style>
    body {
        margin: 0;
        background: black;
        color: #00ff00;
        font-family: monospace;
        text-align: center;
        overflow: hidden;
    }
    h1 {
        margin: 10px 0;
    }
    canvas {
        display: block;
        margin: auto;
        background: black;
    }
</style>
</head>
<body>

<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 radarData = {};
let sweepAngle = null;

// raster / grid
function drawGrid() {
    ctx.strokeStyle = "#003300";
    ctx.lineWidth = 1;

    // bogen
    for (let r = radius / 4; r <= radius; r += radius / 4) {
        ctx.beginPath();
        ctx.arc(centerX, centerY, r, Math.PI, 0);
        ctx.stroke();
    }

    // hoeklijnen
    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();
    }
}

// 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";
    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();
}

// 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 radar data");
    }
}

// render-loop
function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawGrid();
    drawTargets();
    drawSweep();
    requestAnimationFrame(loop);
}

// elke 200 ms nieuwe data
setInterval(fetchData, 200);

fetchData();
loop();
</script>

</body>
</html>
