Regrouper les réglages de la carte dans un panneau unique à onglets, volet en bas sur téléphone
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Antoine Jacquin
@ -11,53 +11,106 @@
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<div id="layercard" class="card">
|
||||
<div class="card-head">
|
||||
<button id="cardToggle" class="btn-icon" title="Replier / déplier">▾</button>
|
||||
<span class="card-title">Couches</span>
|
||||
<span id="stat" class="card-stat"></span>
|
||||
<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">Affichage</span></button>
|
||||
<button role="tab" data-tab="print" title="Export PDF (2)"><span class="tab-ico">⎙</span><span class="tab-lbl">Export PDF</span></button>
|
||||
<button role="tab" data-tab="gen" title="Génération (3)" hidden><span class="tab-ico">＋</span><span class="tab-lbl">Génération</span></button>
|
||||
<button role="tab" data-tab="share" title="Partager (4)"><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 class="card-body">
|
||||
<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 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>
|
||||
<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 les deux (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="both" title="Précision en produit sur le relief : les zones peu fiables s'assombrissent">Les deux</button>
|
||||
<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 class="prec-ctl" id="precCtl" hidden>
|
||||
<span>Opacité de la précision</span>
|
||||
<input type="range" id="precOpacity" min="0" max="100" step="1" title="Opacité de la précision sur le relief">
|
||||
<span class="pct" id="precPct"></span>
|
||||
<div id="precBlock" hidden>
|
||||
<div class="seg" id="modeSeg" role="group" aria-label="Relief, précision ou les deux (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="both" title="Précision en produit sur le relief : les zones peu fiables s'assombrissent">Les deux</button>
|
||||
</div>
|
||||
<div class="prec-ctl" id="precCtl" hidden>
|
||||
<span>Opacité de la précision</span>
|
||||
<input type="range" id="precOpacity" min="0" max="100" step="1" title="Opacité de la précision sur le relief">
|
||||
<span class="pct" id="precPct"></span>
|
||||
</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 class="prec-cap">Points sol par m² : sombre = relief interpolé, noir = aucun point</div>
|
||||
</div>
|
||||
</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 class="prec-cap">Points sol par m² : sombre = relief interpolé, noir = aucun point</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>
|
||||
</div>
|
||||
<div class="card-foot">
|
||||
<button id="btnShare" class="btn" title="Copier un lien vers cette vue">⎘ Partager la vue</button>
|
||||
<button id="btnUse" class="btn" title="Utiliser ces rendus comme fond d'imagerie (JOSM, QGIS, iD…)">⤓ Utiliser dans JOSM / QGIS</button>
|
||||
</div>
|
||||
<div class="card-foot">
|
||||
<button id="btnDefault" class="btn" title="Figer l'affichage courant (couche principale, mode, opacité de la précision, 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>
|
||||
<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="card-foot"><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="card-foot" 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="card-foot">
|
||||
<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, opacité de la précision, 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>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div id="tilecard" class="card" hidden>
|
||||
<div class="card-head">
|
||||
@ -67,83 +120,11 @@
|
||||
<div class="card-body" id="tileBody"></div>
|
||||
</div>
|
||||
|
||||
<div id="rose" class="card" hidden title="Relief orienté : la teinte donne l'orientation de la pente, la clarté le relief local">
|
||||
<canvas id="roseCanvas" width="132" height="132"></canvas>
|
||||
<div class="rose-cap">Pente orientée vers…<br><span>clair = bosse · sombre = creux</span></div>
|
||||
</div>
|
||||
|
||||
<div id="usecard" class="card" hidden>
|
||||
<div class="card-head">
|
||||
<span class="card-title">Fond d'imagerie XYZ</span>
|
||||
<button id="useClose" class="btn-icon" title="Fermer">×</button>
|
||||
</div>
|
||||
<div class="card-body" id="useBody"></div>
|
||||
</div>
|
||||
|
||||
<div id="printcard" class="card" hidden>
|
||||
<div class="card-head">
|
||||
<span class="card-title">Export PDF</span>
|
||||
<span id="printInfo" class="card-stat"></span>
|
||||
<button id="printClose" class="btn-icon" title="Fermer">×</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<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="card-foot"><button id="printGo" class="btn btn-primary">Exporter le PDF</button>
|
||||
<span id="printMsg" class="print-msg"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="gencard" class="card" hidden>
|
||||
<div class="card-head">
|
||||
<span class="card-title">Génération</span>
|
||||
<span id="genBadge" class="card-stat"></span>
|
||||
<button id="genClose" class="btn-icon" title="Fermer">×</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<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="card-foot" 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="card-foot">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav id="gentools">
|
||||
<button id="btnZone" title="Générer une nouvelle zone : dessiner un rectangle, téléchargement IGN + traitement" hidden>＋ Zone</button>
|
||||
<button id="btnComplete" title="Compléter : traiter toutes les dalles déjà téléchargées qui manquent des couches choisies" hidden>⤒ Compléter</button>
|
||||
</nav>
|
||||
<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="btnPrint" title="Exporter la zone en PDF (impression terrain)">⎙</button>
|
||||
<button id="btnTheme" class="btn-icon" title="Thème">◐</button>
|
||||
</nav>
|
||||
<div id="toast" class="toast" hidden></div>
|
||||
|
||||
Reference in New Issue
Block a user