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

Update radar/index.php

Browse Source
This commit is contained in:
Ben de Roo
2026-01-03 17:09:27 +01:00
parent b37c7fde82
commit 4995a26296
1 changed files with 51 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
radar/index.php
View File

@@ -5,21 +5,21 @@
<title>ESP32 Radar</title> <title>ESP32 Radar</title>
<style> <style>
body { body {
margin: 0;
background: black; background: black;
color: #00ff00; color: #00ff00;
font-family: monospace; font-family: monospace;
text-align: center; text-align: center;
margin: 0;
overflow: hidden; overflow: hidden;
} }
canvas {
background: black;
display: block;
margin: auto;
}
h1 { h1 {
margin: 10px 0; margin: 10px 0;
} }
canvas {
display: block;
margin: auto;
background: black;
}
</style> </style>
</head> </head>
<body> <body>
@@ -33,23 +33,24 @@ const ctx = canvas.getContext("2d");
const centerX = canvas.width / 2; const centerX = canvas.width / 2;
const centerY = canvas.height; const centerY = canvas.height;
const radius = canvas.height - 20; const radius = canvas.height - 20;
let sweepAngle = 0;
let radarData = {}; let radarData = {};
let sweepAngle = null;
// raster / grid
function drawGrid() { function drawGrid() {
ctx.strokeStyle = "#003300"; ctx.strokeStyle = "#003300";
ctx.lineWidth = 1; ctx.lineWidth = 1;
// cirkels // bogen
for (let r = radius / 4; r <= radius; r += radius / 4) { for (let r = radius / 4; r <= radius; r += radius / 4) {
ctx.beginPath(); ctx.beginPath();
ctx.arc(centerX, centerY, r, Math.PI, 0); ctx.arc(centerX, centerY, r, Math.PI, 0);
ctx.stroke(); ctx.stroke();
} }
// lijnen // hoeklijnen
for (let a = 0; a <= 180; a += 30) { for (let a = 0; a <= 180; a += 30) {
const rad = a * Math.PI / 180; const rad = a * Math.PI / 180;
ctx.beginPath(); 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() { function drawSweep() {
if (sweepAngle === null) return;
const rad = sweepAngle * Math.PI / 180; const rad = sweepAngle * Math.PI / 180;
ctx.strokeStyle = "#00ff00"; ctx.strokeStyle = "#00ff00";
@@ -74,39 +98,32 @@ function drawSweep() {
centerY + radius * Math.sin(rad - Math.PI) centerY + radius * Math.sin(rad - Math.PI)
); );
ctx.stroke(); 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() { async function fetchData() {
try { try {
const res = await fetch("radar.json?_=" + Date.now()); const res = await fetch("radar.json?_=" + Date.now());
radarData = await res.json(); 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) { } catch (e) {
console.log("Geen data"); console.log("Geen radar data");
} }
} }
// render-loop
function loop() { function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGrid(); drawGrid();
@@ -115,7 +132,7 @@ function loop() {
requestAnimationFrame(loop); requestAnimationFrame(loop);
} }
// elke 200ms nieuwe radar data ophalen // elke 200 ms nieuwe data
setInterval(fetchData, 200); setInterval(fetchData, 200);
fetchData(); fetchData();