144 lines
3.0 KiB
PHP
144 lines
3.0 KiB
PHP
<!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>
|