ben/ben.de-roo.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Delete radar/index.php

Browse Source
This commit is contained in:
Ben de Roo
2026-02-21 20:06:03 +01:00
parent 88af280673
commit b8134495e4
1 changed files with 0 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
radar/index.php
View File

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