154 lines
4.6 KiB
HTML
154 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Carte de Trilatération</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
text-align: center;
|
|
}
|
|
#canvas {
|
|
border: 1px solid #333;
|
|
background-color: #f9f9f9;
|
|
}
|
|
#controls {
|
|
margin: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Carte de Trilatération</h1>
|
|
|
|
<p><strong>Dernier point :</strong>
|
|
{% if point %}
|
|
({{ "%.3f"|format(point[0]) }}, {{ "%.3f"|format(point[1]) }})
|
|
{% else %}
|
|
Aucun point
|
|
{% endif %}
|
|
</p>
|
|
|
|
<div id="controls">
|
|
<label for="gridSize">Taille du plan (L x L) :</label>
|
|
<input type="number" id="gridSize" value="10" min="5" max="50">
|
|
<button onclick="redraw()">Appliquer</button>
|
|
</div>
|
|
|
|
<canvas id="canvas" width="600" height="600"></canvas>
|
|
|
|
<script>
|
|
const originalPoint = {{ point|tojson }};
|
|
const anchors = {{ anchors|tojson }};
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
const width = canvas.width;
|
|
const height = canvas.height;
|
|
const scale = 50;
|
|
let gridSize = parseInt(document.getElementById("gridSize").value);
|
|
|
|
const espColors = {
|
|
"esp1": "green",
|
|
"esp2": "blue",
|
|
"esp3": "gold"
|
|
};
|
|
|
|
function toCanvasCoord(x, y) {
|
|
return [x * scale, height - y * scale];
|
|
}
|
|
|
|
function drawGrid() {
|
|
ctx.strokeStyle = "#ddd";
|
|
ctx.lineWidth = 1;
|
|
for (let i = 0; i <= gridSize; i++) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(i * scale, 0);
|
|
ctx.lineTo(i * scale, height);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, i * scale);
|
|
ctx.lineTo(width, i * scale);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
function drawAxes() {
|
|
ctx.strokeStyle = "#888";
|
|
ctx.lineWidth = 2;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, height);
|
|
ctx.lineTo(width, height);
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, 0);
|
|
ctx.lineTo(0, height);
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = "#000";
|
|
ctx.font = "10px sans-serif";
|
|
for (let i = 0; i <= gridSize; i++) {
|
|
ctx.fillText(i, i * scale + 2, height - 5);
|
|
ctx.fillText(i, 2, height - i * scale - 2);
|
|
}
|
|
}
|
|
|
|
function drawPoint(x, y, color, label) {
|
|
const [px, py] = toCanvasCoord(x, y);
|
|
ctx.fillStyle = color;
|
|
ctx.beginPath();
|
|
ctx.arc(px, py, 6, 0, 2 * Math.PI);
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
if (label) {
|
|
ctx.font = "12px sans-serif";
|
|
ctx.fillStyle = "black"; // ✅ ID toujours en noir
|
|
ctx.fillText(label, px + 8, py - 8);
|
|
}
|
|
}
|
|
|
|
function drawCircle(x, y, radius, color = 'rgba(0,0,255,0.1)') {
|
|
const [px, py] = toCanvasCoord(x, y);
|
|
ctx.beginPath();
|
|
ctx.arc(px, py, radius * scale, 0, 2 * Math.PI);
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
ctx.strokeStyle = color;
|
|
ctx.stroke();
|
|
}
|
|
|
|
function redraw() {
|
|
gridSize = parseInt(document.getElementById("gridSize").value);
|
|
ctx.clearRect(0, 0, width, height);
|
|
drawGrid();
|
|
drawAxes();
|
|
|
|
if (anchors) {
|
|
for (const [id, coords] of Object.entries(anchors)) {
|
|
const [x, y, r] = coords;
|
|
const baseColor = espColors[id] || 'gray';
|
|
const circleColor = baseColor === 'gold' ? 'rgba(255, 215, 0, 0.1)' :
|
|
baseColor === 'green' ? 'rgba(0, 128, 0, 0.1)' :
|
|
baseColor === 'blue' ? 'rgba(0, 0, 255, 0.1)' :
|
|
'rgba(128,128,128,0.1)';
|
|
|
|
if (r) drawCircle(x, y, r, circleColor);
|
|
drawPoint(x, y, baseColor, id); // ID en noir
|
|
}
|
|
}
|
|
|
|
if (originalPoint) {
|
|
const [x, y] = originalPoint;
|
|
drawCircle(x, y, 0.5, 'rgba(255,0,0,0.2)'); // Cercle d'incertitude
|
|
drawPoint(x, y, "red", "TARGET");
|
|
}
|
|
}
|
|
|
|
redraw();
|
|
</script>
|
|
</body>
|
|
</html>
|