Files
lidar_rendu/lidar_pipeline/web/map.html
Antoine Jacquin bae16923fc Corriger la revue finale : onglets non tronqués, fiche de dalle à jour, clics et lien fiables
Onglet Dalle libellé fixe (col·row dans le title), Affichage/Export PDF/
Génération raccourcis pour tenir dans le panneau ; fiche de dalle rechargée
après un run sans désélection et dès que /api/status révèle le bouton
Régénérer ; double-clic et réponses en retard ignorés sur la sélection ;
curseur d'intensité visible hors mode précision ; lien complet sans &I remis
à 1× ; applyCompareClip sort tôt hors mode Comparer ; docs/MAPS.md et
AGENTS.md à jour (modes Comparer, &I=, « Comment lire »).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-09-27 20:56:19 +02:00

151 lines
9.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<title>Carte LiDAR</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Crect width=%2716%27 height=%2716%27 rx=%273%27 fill=%27%230b0e13%27/%3E%3Cpath d=%27M2 11l4-5 3 4 2-2 3 3z%27 fill=%27%235aa9e6%27/%3E%3C/svg%3E">
<link rel="stylesheet" href="assets/vendor/leaflet/leaflet.css"/>
<link rel="stylesheet" href="assets/app.css?v=__ASSETS_V__"/>
</head>
<body>
<div id="map"></div>
<div id="compareBar" hidden title="Glisser pour déplacer la séparation"><span>⇆</span></div>
<aside id="panel" data-sheet="half" aria-label="Réglages de la carte">
<div id="sheetGrip" class="sheet-grip" title="Glisser pour agrandir ou réduire"><span></span></div>
<div class="panel-head">
<nav id="panelTabs" class="panel-tabs" role="tablist">
<button role="tab" data-tab="view" title="Affichage (1)"><span class="tab-ico">◧</span><span class="tab-lbl">Vue</span></button>
<button role="tab" data-tab="tile" title="Dalle (2)"><span class="tab-ico">▦</span><span class="tab-lbl" id="tileTabLbl">Dalle</span></button>
<button role="tab" data-tab="print" title="Export PDF (3)"><span class="tab-ico">⎙</span><span class="tab-lbl">PDF</span></button>
<button role="tab" data-tab="gen" title="Génération (4)" hidden><span class="tab-ico">+</span><span class="tab-lbl">Générer</span></button>
<button role="tab" data-tab="share" title="Partager (5)"><span class="tab-ico">⎘</span><span class="tab-lbl">Partager</span></button>
</nav>
<button id="panelCollapse" class="btn-icon" title="Replier le panneau">‹</button>
</div>
<div id="panelBody" class="panel-body">
<section id="tab-view" role="tabpanel" hidden>
<div class="base-row" id="baseRow">
<button class="eye on" id="baseToggle" title="Afficher / masquer le fond de carte"></button>
<span class="layer-name" id="baseName" title="Cliquer : fond clair / assombri">Fond OpenStreetMap</span>
<span class="pct" id="basePct"></span>
<div class="base-ctl">
<input type="range" id="baseOpacity" min="0" max="100" step="1" title="Opacité du fond">
</div>
</div>
<div class="view-row">
<span class="view-label">Affichage</span>
<span class="layer-name" id="mainName"></span>
<select id="mainSel" class="field" title="Couche d'affichage principal" hidden></select>
</div>
<div id="precBlock" hidden>
<div class="seg" id="modeSeg" role="group" aria-label="Relief, précision ou comparaison (touche P)">
<button type="button" data-mode="relief" title="Relief seul (touche P : mode suivant)">Relief</button>
<button type="button" data-mode="precision" title="Précision géométrique seule : densité de points sol">Précision</button>
<button type="button" data-mode="compare" title="Comparer deux couches de part et d'autre d'une barre glissante (touche P : mode suivant)">Comparer</button>
</div>
<div class="row" id="compareCtl" hidden>
<select id="compareLeft" class="field" title="Couche à gauche de la barre"></select>
<span class="hint">⇆</span>
<select id="compareRight" class="field" title="Couche à droite de la barre"></select>
</div>
<div class="prec-legend" id="precLegend" hidden>
<div class="prec-bar" id="precBar"></div>
<div class="prec-ticks"><span>≤ 0,35</span><span>4</span><span>≥ 45 pts/m²</span></div>
</div>
</div>
<div class="row" id="intensityRow">
<label for="reliefIntensity" class="hint">Intensité du relief</label>
<input type="range" id="reliefIntensity" min="0.5" max="2" step="0.1" value="1"
title="Contraste du relief (1 = rendu standard, le PDF garde le rendu standard)">
<span class="panel-stat" id="reliefIntensityVal">1×</span>
</div>
<div class="legend" id="legendBlock" title="Relief orienté : la teinte donne l'orientation de la pente, la clarté le relief local">
<canvas id="roseCanvas" width="96" height="96"></canvas>
<div class="rose-cap">Pente orientée vers…<br><span>clair = bosse · sombre = creux</span></div>
</div>
<details id="readingBlock" class="reading">
<summary>Comment lire la carte</summary>
<ul id="readingList"></ul>
</details>
</section>
<section id="tab-tile" role="tabpanel" hidden>
<p class="hint" id="tileHint">Cliquez une dalle sur la carte pour la sélectionner.</p>
<div id="tileCard" hidden>
<div class="row tile-head"><span class="sec-title" id="tileTitle">Dalle</span></div>
<div id="tileBody"></div>
</div>
</section>
<section id="tab-print" role="tabpanel" hidden>
<div class="panel-stat" id="printInfo"></div>
<div class="row"><select id="printPaper" class="field" title="Format papier">
<option value="A4" selected>A4</option><option value="A3">A3</option></select>
<select id="printOrient" class="field" title="Orientation">
<option value="paysage" selected>Paysage</option><option value="portrait">Portrait</option></select>
<select id="printScale" class="field" title="Échelle d'impression">
<option value="1000">1:1 000</option><option value="2000" selected>1:2 000</option>
<option value="5000">1:5 000</option><option value="10000">1:10 000</option></select></div>
<div class="row"><input id="printTitle" class="field" type="text" maxlength="120"
placeholder="Titre (optionnel)" title="Titre imprimé dans le cartouche"></div>
<p class="hint">Faites glisser la poignée ✥ pour placer le cadre jaune sur la zone à imprimer.</p>
<div class="row"><button id="printHere" class="btn"
title="Placer le cadre au centre de la vue">⌖ Centrer ici</button>
<button id="printFit" class="btn" title="Zoomer sur le cadre">⤢ Voir le cadre</button></div>
<div class="row"><button id="printGo" class="btn btn-primary">Exporter le PDF</button>
<span id="printMsg" class="print-msg"></span></div>
</section>
<section id="tab-gen" role="tabpanel" hidden>
<div class="row"><button id="btnZone" class="btn" title="Générer une nouvelle zone : dessiner un rectangle, téléchargement IGN + traitement">+ Zone</button>
<button id="btnComplete" class="btn" title="Compléter : traiter toutes les dalles déjà téléchargées qui manquent des couches choisies">⤒ Compléter</button></div>
<div class="panel-stat" id="genBadge"></div>
<div id="genMsg" class="meta">Dessinez une zone (+) ou complétez les dalles existantes (⤒).</div>
<div id="genOpts">
<div class="gen-row"><span class="gen-lbl">Couches</span>
<select id="genViz" class="field" multiple size="4" title="Laisser vide pour les couches du panneau"></select></div>
<label class="chk"><input type="checkbox" id="genRegen"> Régénérer les tuiles existantes</label>
<div class="meta">Sol : classification IGN · bords raccordés aux dalles voisines (bande 100 m)</div>
</div>
<div class="row" id="genActions">
<button id="genGo" class="btn btn-primary" title="Télécharge (géoplateforme IGN) puis traite les dalles sélectionnées">Générer</button>
<button id="genClear" title="Vider la sélection de dalles">Effacer la sélection</button>
</div>
<div id="genRun" hidden>
<div class="meta" id="genProgress"></div>
<pre id="genLog" class="gen-log"></pre>
<div class="row">
<button id="genStop" title="SIGTERM au pipeline (nettoyage propre), SIGKILL en repli">Arrêter</button>
<button id="genQueueClear" title="Retirer les demandes en attente (le run en cours continue)">Vider la file</button>
</div>
</div>
</section>
<section id="tab-share" role="tabpanel" hidden>
<div class="row"><button id="btnShare" class="btn btn-primary" title="Copier un lien vers cette vue">⎘ Copier le lien de la vue</button></div>
<h4 class="sec-title">Fond d'imagerie XYZ (JOSM, QGIS, iD…)</h4>
<div id="useBody"></div>
<h4 class="sec-title">Configuration par défaut</h4>
<div class="row"><button id="btnDefault" class="btn" title="Figer l'affichage courant (couche principale, mode, fond) comme configuration par défaut de tous les navigateurs">★ Définir par défaut</button>
<button id="btnReset" class="btn" title="Revenir à la configuration par défaut">↺ Réinitialiser</button></div>
</section>
</div>
</aside>
<nav id="tools">
<button id="zoomIn" title="Zoomer">+</button>
<button id="zoomOut" title="Dézoomer">−</button>
<button id="zoomFit" title="Recadrer sur les données">⤢</button>
<button id="gps" title="Centrer sur ma position">⌖</button>
<button id="btnTheme" class="btn-icon" title="Thème">◐</button>
</nav>
<div id="toast" class="toast" hidden></div>
<div id="tileload" class="tileload" hidden aria-live="polite">
<span class="tl-spin"></span>
<span id="tileloadText"></span>
<span class="tl-bar"><span id="tileloadBar"></span></span>
</div>
<script src="assets/vendor/leaflet/leaflet.js"></script>
<script src="assets/app.js?v=__ASSETS_V__"></script>
</body>
</html>