code_public/lidar_rendu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajouter la légende « Comment lire » tirée de VIZ_LEGENDS

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Antoine Jacquin
2026-09-27 20:27:20 +02:00
parent 7b8060e893
commit c10e34f3b4
4 changed files with 48 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
lidar_pipeline/web/map.css
View File

@ -141,7 +141,10 @@ input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius
border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.prec-ticks { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted);
font-variant-numeric: tabular-nums; margin-top: 2px; }
.prec-cap { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.reading summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.reading ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); }
.reading li { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.reading li + li { margin-top: var(--sp-1); }
.eye { width: 24px; height: 24px; padding: 0; border: none; background: none; color: var(--muted);
display: flex; align-items: center; justify-content: center; }
.eye.on { color: var(--accent); }

5
lidar_pipeline/web/map.html
View File

@ -59,13 +59,16 @@
<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 class="prec-cap">Points sol par m² : sombre = relief interpolé, noir = aucun point</div>
</div>
</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>

32
lidar_pipeline/web/map.js
View File

@ -532,6 +532,25 @@ function renderPrecLegend() {
}
}
// « Comment lire » : phrases de VIZ_LEGENDS (champ reading), servies par
// /api/map/meta — même texte que la légende de la planche PDF.
function renderReading() {
const mode = effectiveMode();
const keys = mode === 'precision' ? [precisionKey()]
: mode === 'compare' ? [sideLayerKey(STATE.compare.left), sideLayerKey(STATE.compare.right)]
: [STATE.main];
const seen = new Set();
const items = [];
for (const k of keys) {
if (!k || seen.has(k)) continue;
seen.add(k);
const info = META.layers.find(l => l.key === k);
for (const s of (info && info.reading) || []) items.push('<li>' + esc(s) + '</li>');
}
el('readingList').innerHTML = items.join('');
el('readingBlock').hidden = !items.length;
}
function renderPanel() {
const labels = new Map(META.layers.map(l => [l.key, l]));
const mains = mainKeys(META);
@ -552,6 +571,7 @@ function renderPanel() {
el('reliefIntensity').value = STATE.intensity;
el('reliefIntensityVal').textContent = fmtIntensity(STATE.intensity);
el('intensityRow').hidden = effectiveMode() === 'precision';
renderReading();
if (!prec) return;
renderPrecLegend();
const mode = effectiveMode();
@ -1310,9 +1330,10 @@ function _sanitizedPanelLS() {
if (typeof s.tab === 'string') out.tab = s.tab;
if (typeof s.collapsed === 'boolean') out.collapsed = s.collapsed;
if (['closed', 'half', 'full'].includes(s.sheet)) out.sheet = s.sheet;
if (typeof s.reading === 'boolean') out.reading = s.reading;
return out;
}
const PANEL = Object.assign({ tab: 'view', collapsed: false, sheet: 'half' }, _sanitizedPanelLS());
const PANEL = Object.assign({ tab: 'view', collapsed: false, sheet: 'half', reading: false }, _sanitizedPanelLS());
// want = onglet choisi (mémorisé) ; tab = onglet affiché. Génération encore
// inconnue au démarrage (api/status) : Affichage en attendant, puis l'onglet
// choisi revient dès qu'il est proposé.
@ -1337,7 +1358,7 @@ function panelVisibleTab() {
return PANEL.tab;
}
function panelSave() { lsSet(PANEL_LS, { tab: PANEL.want, collapsed: PANEL.collapsed, sheet: PANEL.sheet }); }
function panelSave() { lsSet(PANEL_LS, { tab: PANEL.want, collapsed: PANEL.collapsed, sheet: PANEL.sheet, reading: PANEL.reading }); }
function panelRender() {
const tabs = panelTabs();
@ -1389,6 +1410,13 @@ function setSheet(state) {
el('panelTabs').querySelectorAll('button[data-tab]').forEach(b =>
b.addEventListener('click', () => openTab(b.dataset.tab)));
el('panelCollapse').addEventListener('click', () => setCollapsed(!PANEL.collapsed));
// État ouvert/fermé du « Comment lire » mémorisé à part (indépendant de
// l'onglet actif).
el('readingBlock').open = !!PANEL.reading;
el('readingBlock').addEventListener('toggle', () => {
PANEL.reading = el('readingBlock').open;
panelSave();
});
phoneQuery.addEventListener('change', panelRender);
window.addEventListener('resize', panelRender); // hauteur du volet en vh (rotation)