prepare: add index module, update pipeline, tests, Dockerfile, and run.sh
This commit is contained in:
Antoine Jacquin
632
lidar_pipeline/index.py
Normal file
632
lidar_pipeline/index.py
Normal file
@ -0,0 +1,632 @@
|
||||
"""Carte globale interactive des tuiles LiDAR traitées.
|
||||
|
||||
Génère une page HTML unique (output/index.html) présentant toutes les tuiles
|
||||
1×1 km traitées, positionnées sur une grille Lambert 93, avec zoom/pan natifs
|
||||
et sélecteur de visualisation. Permet de choisir rapidement la tuile à examiner.
|
||||
|
||||
Sortie:
|
||||
- output/index.html : page interactive auto-suffisante
|
||||
- output/index_thumbs/*.jpg : vignettes JPEG (~256px) par tuile/visualisation
|
||||
|
||||
Intégration:
|
||||
- Appelé automatiquement à la fin de process_all() dans pipeline.py
|
||||
- Régénération solo via --rebuild-index dans cli.py
|
||||
"""
|
||||
|
||||
import json
|
||||
import logging
|
||||
import re
|
||||
from pathlib import Path
|
||||
|
||||
logger = logging.getLogger("lidar")
|
||||
|
||||
|
||||
# Noms d'affichage (français) pour le sélecteur de visualisation.
|
||||
# Clé = mot-clé dans le nom de fichier de sortie (post-basename).
|
||||
VIZ_LABELS = {
|
||||
'hillshade_multi': 'Hillshade multidirectionnel',
|
||||
'slope': 'Pente',
|
||||
'aspect': 'Aspect',
|
||||
'mslrm': 'MSRM (relief multi-échelle)',
|
||||
'sailore': 'SAILORE (LRM adaptatif)',
|
||||
'positive_openness': 'Openness positive',
|
||||
'negative_openness': 'Openness négative',
|
||||
'svf': 'Sky-View Factor',
|
||||
'aniso_open': 'Openness anisotropique',
|
||||
'roughness': 'Rugosité',
|
||||
'wavelet': 'Ondelette',
|
||||
'flow_acc': 'Accumulation d\'écoulement',
|
||||
'solar': 'Éclairage solaire',
|
||||
'anomaly': 'Carte d\'anomalies',
|
||||
'ortho': 'Orthophoto IGN',
|
||||
'topo': 'Carte topographique IGN',
|
||||
}
|
||||
|
||||
# Visualisation par défaut pour la vignette (si disponible).
|
||||
DEFAULT_VIZ = 'hillshade_multi'
|
||||
|
||||
# Ordre préféré pour le choix de la vignette de repli.
|
||||
_VIZ_FALLBACK_ORDER = [
|
||||
'hillshade_multi', 'svf', 'slope', 'mslrm', 'positive_openness',
|
||||
'negative_openness', 'aspect', 'sailore', 'aniso_open', 'roughness',
|
||||
'wavelet', 'flow_acc', 'solar', 'anomaly', 'ortho', 'topo',
|
||||
]
|
||||
|
||||
# Regex pour parser les coordonnées tuile dans le basename LHD.
|
||||
# LHD_FXX_{COL}_{ROW}_PTS_LAMB93_IGN69 (COL/ROW en km, Lambert 93)
|
||||
_RE_LHD_COORDS = re.compile(r'^LHD_FXX_(\d+)_(\d+)_PTS_LAMB93')
|
||||
|
||||
|
||||
def parse_basename_coords(name):
|
||||
"""Extrait les coordonnées tuile (col, row en km) depuis un basename.
|
||||
|
||||
Args:
|
||||
name: basename potentiel (ex: 'LHD_FXX_1000_6881_PTS_LAMB93_IGN69')
|
||||
ou nom de dossier avec suffixe résolution ('..._r0p2').
|
||||
|
||||
Returns:
|
||||
(col_km, row_km) ou None si le nom ne correspond pas au pattern LHD.
|
||||
"""
|
||||
m = _RE_LHD_COORDS.match(name)
|
||||
if not m:
|
||||
return None
|
||||
return int(m.group(1)), int(m.group(2))
|
||||
|
||||
|
||||
def _strip_res_suffix(dirname):
|
||||
"""Sépare le basename de base et la résolution d'un nom de dossier de viz.
|
||||
|
||||
'LHD_FXX_1000_6881_PTS_LAMB93_IGN69' → (basename, 0.5)
|
||||
'LHD_FXX_1000_6881_PTS_LAMB93_IGN69_r0p2' → (basename, 0.2)
|
||||
|
||||
Returns:
|
||||
(basename_without_suffix, resolution_float) ou (dirname, 0.5) si pas de suffixe.
|
||||
"""
|
||||
m = re.match(r'^(.+?)_r(\d+p\d+)$', dirname)
|
||||
if m:
|
||||
res_str = m.group(2).replace('p', '.')
|
||||
try:
|
||||
return m.group(1), float(res_str)
|
||||
except ValueError:
|
||||
pass
|
||||
return dirname, 0.5
|
||||
|
||||
|
||||
def scan_tiles(vis_dir):
|
||||
"""Scanne le dossier des visualisations pour inventorier les tuiles traitées.
|
||||
|
||||
Args:
|
||||
vis_dir: Path vers output/visualisations/
|
||||
|
||||
Returns:
|
||||
Liste de dictionnaires:
|
||||
{basename, col, row, resolution, dir_path,
|
||||
viz: {viz_key: {filename, ext}}, dir_name}
|
||||
Triée par (resolution, row, col).
|
||||
"""
|
||||
vis_dir = Path(vis_dir)
|
||||
if not vis_dir.is_dir():
|
||||
return []
|
||||
|
||||
tiles = []
|
||||
for entry in sorted(vis_dir.iterdir()):
|
||||
if not entry.is_dir():
|
||||
continue
|
||||
coords = parse_basename_coords(entry.name)
|
||||
if coords is None:
|
||||
continue
|
||||
col, row = coords
|
||||
basename, resolution = _strip_res_suffix(entry.name)
|
||||
|
||||
# Liste les fichiers image de visualisation dans le dossier.
|
||||
viz = {}
|
||||
for f in sorted(entry.iterdir()):
|
||||
if not f.is_file():
|
||||
continue
|
||||
# Détection extension AVIF/WebP
|
||||
ext = None
|
||||
low = f.name.lower()
|
||||
for e in ('.avif', '.webp'):
|
||||
if low.endswith(e):
|
||||
ext = e.lstrip('.')
|
||||
break
|
||||
if ext is None:
|
||||
continue
|
||||
# viz_key = nom sans le préfixe basename_ ni l'extension
|
||||
stem = f.name[:-len('.' + ext)]
|
||||
prefix = basename + '_'
|
||||
if not stem.startswith(prefix):
|
||||
continue
|
||||
viz_key = stem[len(prefix):]
|
||||
viz[viz_key] = {'filename': f.name, 'ext': ext}
|
||||
|
||||
if not viz:
|
||||
# Dossier vide ou sans image valide → ignoré
|
||||
continue
|
||||
|
||||
tiles.append({
|
||||
'basename': basename,
|
||||
'col': col,
|
||||
'row': row,
|
||||
'resolution': resolution,
|
||||
'dir_name': entry.name,
|
||||
'dir_path': str(entry),
|
||||
'viz': viz,
|
||||
})
|
||||
|
||||
tiles.sort(key=lambda t: (t['resolution'], -t['row'], t['col']))
|
||||
return tiles
|
||||
|
||||
|
||||
def compute_bbox(tiles):
|
||||
"""Calcule la bounding box (en km) couverte par les tuiles.
|
||||
|
||||
Returns:
|
||||
Dict {min_col, max_col, min_row, max_row} ou None si aucune tuile.
|
||||
"""
|
||||
if not tiles:
|
||||
return None
|
||||
cols = [t['col'] for t in tiles]
|
||||
rows = [t['row'] for t in tiles]
|
||||
return {
|
||||
'min_col': min(cols),
|
||||
'max_col': max(cols),
|
||||
'min_row': min(rows),
|
||||
'max_row': max(rows),
|
||||
}
|
||||
|
||||
|
||||
def generate_thumbnail(src_path, thumb_path, max_size=256):
|
||||
"""Génère une vignette JPEG depuis une image AVIF/WebP existante.
|
||||
|
||||
Args:
|
||||
src_path: chemin de l'image source (AVIF/WebP).
|
||||
thumb_path: chemin de sortie JPEG.
|
||||
max_size: taille maximale (côté le plus grand) en pixels.
|
||||
|
||||
Returns:
|
||||
True si OK, False si échec.
|
||||
"""
|
||||
try:
|
||||
from PIL import Image as PILImage
|
||||
except ImportError:
|
||||
logger.warning("PIL indisponible — impossible de générer les vignettes")
|
||||
return False
|
||||
|
||||
try:
|
||||
img = PILImage.open(str(src_path))
|
||||
img = img.convert('RGB')
|
||||
w, h = img.size
|
||||
scale = min(1.0, max_size / max(w, h))
|
||||
if scale < 1.0:
|
||||
new_size = (max(1, int(w * scale)), max(1, int(h * scale)))
|
||||
try:
|
||||
resample = PILImage.Resampling.LANCZOS
|
||||
except AttributeError:
|
||||
resample = getattr(PILImage, 'LANCZOS', 1)
|
||||
img = img.resize(new_size, resample)
|
||||
Path(thumb_path).parent.mkdir(parents=True, exist_ok=True)
|
||||
img.save(str(thumb_path), format='JPEG', quality=80)
|
||||
return True
|
||||
except Exception as e:
|
||||
logger.debug(f"Vignette ignorée {src_path}: {e}")
|
||||
return False
|
||||
|
||||
|
||||
def _pick_display_viz(viz_keys):
|
||||
"""Choisit la visualisation par défaut pour une tuile.
|
||||
|
||||
Privilégie hillshade_multi, sinon la première disponible selon l'ordre de repli.
|
||||
"""
|
||||
for v in _VIZ_FALLBACK_ORDER:
|
||||
if v in viz_keys:
|
||||
return v
|
||||
return sorted(viz_keys)[0]
|
||||
|
||||
|
||||
def build_index(output_dir, output_format='avif'):
|
||||
"""Génère la carte interactive HTML des tuiles traitées.
|
||||
|
||||
Scanne output_dir/visualisations/, génère les vignettes JPEG, puis écrit
|
||||
output_dir/index.html (auto-suffisant) + output_dir/index_thumbs/.
|
||||
|
||||
Args:
|
||||
output_dir: dossier de sortie racine (contient visualisations/).
|
||||
output_format: format des images ('avif' ou 'webp') — pour info.
|
||||
|
||||
Returns:
|
||||
Path vers index.html si succès, None si échec ou aucune tuile.
|
||||
"""
|
||||
output_dir = Path(output_dir)
|
||||
vis_dir = output_dir / 'visualisations'
|
||||
tiles = scan_tiles(vis_dir)
|
||||
|
||||
if not tiles:
|
||||
logger.info("Aucune tuile traitée trouvée — index global non généré")
|
||||
return None
|
||||
|
||||
bbox = compute_bbox(tiles)
|
||||
assert bbox is not None # garanti par le test tiles non vide ci-dessus
|
||||
thumb_dir = output_dir / 'index_thumbs'
|
||||
thumb_dir.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
# Collecte toutes les visualisations disponibles (pour le sélecteur).
|
||||
all_viz_keys = set()
|
||||
for t in tiles:
|
||||
all_viz_keys.update(t['viz'].keys())
|
||||
|
||||
# Génère les vignettes et construit les données pour le HTML.
|
||||
tile_records = []
|
||||
thumbs_generated = 0
|
||||
thumbs_failed = 0
|
||||
for t in tiles:
|
||||
viz_thumbs = {}
|
||||
for viz_key, info in t['viz'].items():
|
||||
src = Path(t['dir_path']) / info['filename']
|
||||
thumb_name = f"{t['dir_name']}_{viz_key}.jpg"
|
||||
thumb_path = thumb_dir / thumb_name
|
||||
# Régénère seulement si manquante
|
||||
if not thumb_path.exists():
|
||||
if generate_thumbnail(src, thumb_path):
|
||||
thumbs_generated += 1
|
||||
else:
|
||||
thumbs_failed += 1
|
||||
continue
|
||||
else:
|
||||
thumbs_generated += 1
|
||||
viz_thumbs[viz_key] = {
|
||||
'thumb': f"index_thumbs/{thumb_name}",
|
||||
'full': f"visualisations/{t['dir_name']}/{info['filename']}",
|
||||
}
|
||||
|
||||
if not viz_thumbs:
|
||||
continue
|
||||
|
||||
display_viz = _pick_display_viz(viz_thumbs.keys())
|
||||
tile_records.append({
|
||||
'col': t['col'],
|
||||
'row': t['row'],
|
||||
'name': t['basename'],
|
||||
'dir_name': t['dir_name'],
|
||||
'resolution': t['resolution'],
|
||||
'display_viz': display_viz,
|
||||
'viz': viz_thumbs,
|
||||
})
|
||||
|
||||
if not tile_records:
|
||||
logger.warning("Aucune vignette générée — index global abandonné")
|
||||
return None
|
||||
|
||||
# HTML avec données intégrées.
|
||||
html = _render_html(tile_records, bbox, all_viz_keys, output_format)
|
||||
html_path = output_dir / 'index.html'
|
||||
html_path.write_text(html, encoding='utf-8')
|
||||
|
||||
logger.info(f"Index global généré : {html_path}")
|
||||
logger.info(f" {len(tile_records)} tuile(s) • {thumbs_generated} vignette(s) générée(s)"
|
||||
+ (f" • {thumbs_failed} échec(s)" if thumbs_failed else ""))
|
||||
logger.info(f" Grille : {bbox['min_col']}-{bbox['max_col']} km E × "
|
||||
f"{bbox['min_row']}-{bbox['max_row']} km N")
|
||||
|
||||
return html_path
|
||||
|
||||
|
||||
def _render_html(tile_records, bbox, all_viz_keys, output_format):
|
||||
"""Construit le HTML complet avec CSS et JS natifs (zoom/pan)."""
|
||||
# Ordre des viz dans le sélecteur (selon ordre préféré puis alpha).
|
||||
ordered_viz = [v for v in _VIZ_FALLBACK_ORDER if v in all_viz_keys]
|
||||
for v in sorted(all_viz_keys):
|
||||
if v not in ordered_viz:
|
||||
ordered_viz.append(v)
|
||||
|
||||
data_json = json.dumps({
|
||||
'tiles': tile_records,
|
||||
'bbox': bbox,
|
||||
'vizList': ordered_viz,
|
||||
}, ensure_ascii=False)
|
||||
|
||||
options_html = '\n'.join(
|
||||
f' <option value="{v}"{" selected" if v == DEFAULT_VIZ else ""}>'
|
||||
f'{VIZ_LABELS.get(v, v)}</option>'
|
||||
for v in ordered_viz
|
||||
)
|
||||
|
||||
n_tiles = len(tile_records)
|
||||
grid_w = bbox['max_col'] - bbox['min_col'] + 1
|
||||
grid_h = bbox['max_row'] - bbox['min_row'] + 1
|
||||
|
||||
return _HTML_TEMPLATE.format(
|
||||
data_json=data_json,
|
||||
options_html=options_html,
|
||||
n_tiles=n_tiles,
|
||||
grid_w=grid_w,
|
||||
grid_h=grid_h,
|
||||
output_format=output_format.upper(),
|
||||
)
|
||||
|
||||
|
||||
_HTML_TEMPLATE = """<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Carte globale des tuiles LiDAR</title>
|
||||
<style>
|
||||
* {{ box-sizing: border-box; margin: 0; padding: 0; }}
|
||||
html, body {{ height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #1a1a2e; color: #e0e0e0; overflow: hidden; }}
|
||||
|
||||
#topbar {{
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
|
||||
padding: 10px 16px; background: #16213e; border-bottom: 1px solid #0f3460;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
|
||||
}}
|
||||
#topbar h1 {{ font-size: 16px; font-weight: 600; color: #e94560; white-space: nowrap; }}
|
||||
#topbar .stat {{ font-size: 13px; color: #a0a0c0; white-space: nowrap; }}
|
||||
#topbar label {{ font-size: 13px; color: #a0a0c0; }}
|
||||
#topbar select {{
|
||||
background: #0f3460; color: #e0e0e0; border: 1px solid #1a4a7a;
|
||||
padding: 5px 8px; border-radius: 4px; font-size: 13px; cursor: pointer;
|
||||
}}
|
||||
#topbar select:hover {{ border-color: #e94560; }}
|
||||
.spacer {{ flex: 1; }}
|
||||
|
||||
.controls {{ display: flex; gap: 6px; }}
|
||||
.controls button {{
|
||||
background: #0f3460; color: #e0e0e0; border: 1px solid #1a4a7a;
|
||||
width: 34px; height: 34px; border-radius: 4px; font-size: 18px;
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
transition: background 0.15s;
|
||||
}}
|
||||
.controls button:hover {{ background: #1a4a7a; border-color: #e94560; }}
|
||||
.controls button:active {{ background: #e94560; }}
|
||||
|
||||
#viewport {{
|
||||
position: absolute; top: 56px; left: 0; right: 0; bottom: 0;
|
||||
overflow: hidden; cursor: grab; background: #0d0d1a;
|
||||
}}
|
||||
#viewport.dragging {{ cursor: grabbing; }}
|
||||
|
||||
#grid {{
|
||||
position: absolute; transform-origin: 0 0;
|
||||
/* Dimensions fixées en JS selon le nombre de cellules */
|
||||
}}
|
||||
|
||||
.cell {{
|
||||
position: absolute; border: 1px solid #2a2a4a; background: #111122;
|
||||
overflow: hidden; display: block; text-decoration: none;
|
||||
}}
|
||||
.cell.has-tile {{ border-color: #0f3460; }}
|
||||
.cell.has-tile:hover {{ border-color: #e94560; box-shadow: 0 0 12px rgba(233,69,96,0.5); z-index: 10; }}
|
||||
.cell img {{ width: 100%; height: 100%; object-fit: cover; display: block; }}
|
||||
.cell .label {{
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
background: rgba(0,0,0,0.65); color: #e0e0e0; font-size: 9px;
|
||||
padding: 2px 4px; text-align: center; white-space: nowrap; overflow: hidden;
|
||||
text-overflow: ellipsis; opacity: 0; transition: opacity 0.15s;
|
||||
}}
|
||||
.cell:hover .label {{ opacity: 1; }}
|
||||
.cell.empty {{ display: flex; align-items: center; justify-content: center; opacity: 0.3; }}
|
||||
.cell.empty .coords {{ font-size: 10px; color: #444466; }}
|
||||
|
||||
#zoomIndicator {{
|
||||
position: fixed; bottom: 12px; left: 12px; z-index: 100;
|
||||
background: rgba(22,33,62,0.9); padding: 6px 12px; border-radius: 4px;
|
||||
font-size: 12px; color: #a0a0c0; border: 1px solid #0f3460;
|
||||
}}
|
||||
|
||||
#hint {{
|
||||
position: fixed; bottom: 12px; right: 12px; z-index: 100;
|
||||
background: rgba(22,33,62,0.9); padding: 8px 12px; border-radius: 4px;
|
||||
font-size: 11px; color: #808090; border: 1px solid #0f3460; max-width: 280px;
|
||||
}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="topbar">
|
||||
<h1>Carte globale LiDAR</h1>
|
||||
<span class="stat" id="statTiles">{n_tiles} tuile(s) • {grid_w}×{grid_h} km</span>
|
||||
<label>Visualisation :</label>
|
||||
<select id="vizSelect">
|
||||
{options_html}
|
||||
</select>
|
||||
<div class="spacer"></div>
|
||||
<div class="controls">
|
||||
<button id="zoomOut" title="Dézoomer">−</button>
|
||||
<button id="zoomReset" title="Réinitialiser la vue" style="font-size:14px">⤢</button>
|
||||
<button id="zoomIn" title="Zoomer">+</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="viewport">
|
||||
<div id="grid"></div>
|
||||
</div>
|
||||
|
||||
<div id="zoomIndicator">Zoom : 100%</div>
|
||||
<div id="hint">
|
||||
Molette : zoom • Clic-glisser : déplacer<br>
|
||||
Double-clic : zoom rapide • Clic tuile : ouvrir l'image
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const DATA = {data_json};
|
||||
const CELL_PX = 200; // taille d'une cellule 1×1 km (en px, à zoom 1)
|
||||
const GAP_PX = 2;
|
||||
|
||||
const bbox = DATA.bbox;
|
||||
const gridCols = bbox.max_col - bbox.min_col + 1;
|
||||
const gridRows = bbox.max_row - bbox.min_row + 1;
|
||||
|
||||
const grid = document.getElementById('grid');
|
||||
const viewport = document.getElementById('viewport');
|
||||
const zoomInd = document.getElementById('zoomIndicator');
|
||||
const vizSelect = document.getElementById('vizSelect');
|
||||
|
||||
grid.style.width = (gridCols * CELL_PX) + 'px';
|
||||
grid.style.height = (gridRows * CELL_PX) + 'px';
|
||||
|
||||
// Index des tuiles par (col,row)
|
||||
const tileMap = {{}};
|
||||
for (const t of DATA.tiles) {{
|
||||
tileMap[t.col + ',' + t.row] = t;
|
||||
}}
|
||||
|
||||
// --- Construction de la grille (toutes les cellules, y compris vides) ---
|
||||
function colToX(col) {{ return (col - bbox.min_col) * CELL_PX; }}
|
||||
function rowToY(row) {{ return (bbox.max_row - row) * CELL_PX; }} // Y inversé (Nord en haut)
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (let r = bbox.max_row; r >= bbox.min_row; r--) {{
|
||||
for (let c = bbox.min_col; c <= bbox.max_col; c++) {{
|
||||
const key = c + ',' + r;
|
||||
const tile = tileMap[key];
|
||||
const cell = document.createElement('a');
|
||||
cell.className = 'cell' + (tile ? ' has-tile' : ' empty');
|
||||
cell.style.left = colToX(c) + 'px';
|
||||
cell.style.top = rowToY(r) + 'px';
|
||||
cell.style.width = (CELL_PX - GAP_PX) + 'px';
|
||||
cell.style.height = (CELL_PX - GAP_PX) + 'px';
|
||||
|
||||
if (tile) {{
|
||||
cell.target = '_blank';
|
||||
cell.title = tile.name;
|
||||
const img = document.createElement('img');
|
||||
img.loading = 'lazy';
|
||||
cell.appendChild(img);
|
||||
const label = document.createElement('div');
|
||||
label.className = 'label';
|
||||
label.textContent = tile.name;
|
||||
cell.appendChild(label);
|
||||
}} else {{
|
||||
const coords = document.createElement('div');
|
||||
coords.className = 'coords';
|
||||
coords.textContent = c + '\\n' + r;
|
||||
coords.style.whiteSpace = 'pre';
|
||||
cell.appendChild(coords);
|
||||
}}
|
||||
fragment.appendChild(cell);
|
||||
}}
|
||||
}}
|
||||
grid.appendChild(fragment);
|
||||
|
||||
// --- Gestion de la visualisation affichée ---
|
||||
function applyViz(vizKey) {{
|
||||
const cells = grid.querySelectorAll('.cell.has-tile');
|
||||
cells.forEach(cell => {{
|
||||
// Retrouve la tuile via la position
|
||||
const left = parseFloat(cell.style.left);
|
||||
const top = parseFloat(cell.style.top);
|
||||
const col = bbox.min_col + Math.round(left / CELL_PX);
|
||||
const row = bbox.max_row - Math.round(top / CELL_PX);
|
||||
const tile = tileMap[col + ',' + row];
|
||||
if (!tile) return;
|
||||
const img = cell.querySelector('img');
|
||||
// Viz demandée, sinon display_viz, sinon première dispo
|
||||
let chosen = vizKey;
|
||||
if (!tile.viz[chosen]) chosen = tile.display_viz;
|
||||
if (!tile.viz[chosen]) chosen = Object.keys(tile.viz)[0];
|
||||
const v = tile.viz[chosen];
|
||||
if (img) {{
|
||||
img.src = v.thumb;
|
||||
}}
|
||||
cell.href = v.full;
|
||||
}});
|
||||
}}
|
||||
applyViz(vizSelect.value);
|
||||
vizSelect.addEventListener('change', () => applyViz(vizSelect.value));
|
||||
|
||||
// --- Zoom / Pan ---
|
||||
let zoom = 1, panX = 0, panY = 0;
|
||||
let isDragging = false, dragStartX = 0, dragStartY = 0, startPanX = 0, startPanY = 0;
|
||||
|
||||
function applyTransform() {{
|
||||
grid.style.transform = `translate(${{panX}}px, ${{panY}}px) scale(${{zoom}})`;
|
||||
zoomInd.textContent = 'Zoom : ' + Math.round(zoom * 100) + '%';
|
||||
}}
|
||||
|
||||
function clampPan() {{
|
||||
const vpW = viewport.clientWidth;
|
||||
const vpH = viewport.clientHeight;
|
||||
const gw = gridCols * CELL_PX * zoom;
|
||||
const gh = gridRows * CELL_PX * zoom;
|
||||
// Permet un léger débordement pour ne pas bloquer le déplacement
|
||||
panX = Math.min(vpW * 0.5, Math.max(vpW - gw - vpW * 0.5, panX));
|
||||
panY = Math.min(vpH * 0.5, Math.max(vpH - gh - vpH * 0.5, panY));
|
||||
// Si la grille est plus petite que le viewport, centre
|
||||
if (gw < vpW) panX = (vpW - gw) / 2;
|
||||
if (gh < vpH) panY = (vpH - gh) / 2;
|
||||
}}
|
||||
|
||||
function resetView() {{
|
||||
zoom = 1;
|
||||
panX = (viewport.clientWidth - gridCols * CELL_PX) / 2;
|
||||
panY = (viewport.clientHeight - gridRows * CELL_PX) / 2;
|
||||
applyTransform();
|
||||
}}
|
||||
|
||||
function zoomAt(factor, cx, cy) {{
|
||||
const newZoom = Math.max(0.2, Math.min(20, zoom * factor));
|
||||
const realFactor = newZoom / zoom;
|
||||
// Garde le point (cx,cy) fixe dans la grille
|
||||
panX = cx - (cx - panX) * realFactor;
|
||||
panY = cy - (cy - panY) * realFactor;
|
||||
zoom = newZoom;
|
||||
clampPan();
|
||||
applyTransform();
|
||||
}}
|
||||
|
||||
viewport.addEventListener('wheel', (e) => {{
|
||||
e.preventDefault();
|
||||
const rect = viewport.getBoundingClientRect();
|
||||
const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
|
||||
zoomAt(factor, e.clientX - rect.left, e.clientY - rect.top);
|
||||
}}, {{ passive: false }});
|
||||
|
||||
viewport.addEventListener('mousedown', (e) => {{
|
||||
if (e.target.closest('a.has-tile')) return; // ne déplace pas si clic sur tuile
|
||||
isDragging = true;
|
||||
viewport.classList.add('dragging');
|
||||
dragStartX = e.clientX;
|
||||
dragStartY = e.clientY;
|
||||
startPanX = panX;
|
||||
startPanY = panY;
|
||||
}});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {{
|
||||
if (!isDragging) return;
|
||||
panX = startPanX + (e.clientX - dragStartX);
|
||||
panY = startPanY + (e.clientY - dragStartY);
|
||||
clampPan();
|
||||
applyTransform();
|
||||
}});
|
||||
|
||||
window.addEventListener('mouseup', () => {{
|
||||
isDragging = false;
|
||||
viewport.classList.remove('dragging');
|
||||
}});
|
||||
|
||||
viewport.addEventListener('dblclick', (e) => {{
|
||||
if (e.target.closest('a.has-tile')) return;
|
||||
const rect = viewport.getBoundingClientRect();
|
||||
zoomAt(2, e.clientX - rect.left, e.clientY - rect.top);
|
||||
}});
|
||||
|
||||
document.getElementById('zoomIn').addEventListener('click', () => {{
|
||||
zoomAt(1.3, viewport.clientWidth / 2, viewport.clientHeight / 2);
|
||||
}});
|
||||
document.getElementById('zoomOut').addEventListener('click', () => {{
|
||||
zoomAt(1 / 1.3, viewport.clientWidth / 2, viewport.clientHeight / 2);
|
||||
}});
|
||||
document.getElementById('zoomReset').addEventListener('click', resetView);
|
||||
|
||||
// Recalcule au redimensionnement de la fenêtre
|
||||
window.addEventListener('resize', () => {{ clampPan(); applyTransform(); }});
|
||||
|
||||
// Vue initiale centrée
|
||||
resetView();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
"""
|
||||
Reference in New Issue
Block a user