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:04:53 +01:00
parent 47e991f017
commit b37c7fde82
1 changed files with 118 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
radar/index.php
View File

@@ -1,23 +1,126 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="nl">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>ESP32 Radar</title> <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> </head>
<body> <body>
<h1>Ultrasone afstand</h1>
<div id="afstand">Laden...</div>
<script> <h1>RADAR</h1>
function updateAfstand() { <canvas id="radar" width="600" height="300"></canvas>
fetch('afstand.txt') // leest de laatste waarde
.then(response => response.text()) <script>
.then(data => { const canvas = document.getElementById("radar");
document.getElementById('afstand').innerText = data + " cm"; 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(); // lijnen
</script> 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> </body>
</html> </html>