135 lines
4.8 KiB
HTML
135 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Crop — {{ pc_id }}</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
|
</head>
|
|
<body class="bg-base-200 min-h-screen">
|
|
<!-- Navbar -->
|
|
<div class="navbar bg-base-100 shadow-md px-6 mb-2">
|
|
<div class="flex-1">
|
|
<span class="text-xl font-bold tracking-tight">☁️ PointCloud Viewer</span>
|
|
</div>
|
|
<div class="flex-none gap-4 items-center">
|
|
<div
|
|
id="health-indicator"
|
|
hx-get="/health-check"
|
|
hx-trigger="load"
|
|
hx-swap="innerHTML"
|
|
class="text-sm text-base-content/50"
|
|
>vérification…</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div role="tablist" class="tabs tabs-boxed mb-6 w-fit ml-4">
|
|
<a
|
|
role="tab"
|
|
class="tab {% if active_tab == 'upload' %}tab-active{% endif %}"
|
|
hx-get="/"
|
|
hx-target="#main-content"
|
|
hx-push-url="/"
|
|
>📤 Upload</a>
|
|
<a
|
|
role="tab"
|
|
class="tab {% if active_tab == 'admin' %}tab-active{% endif %}"
|
|
hx-get="/viewer/list"
|
|
hx-target="#main-content"
|
|
hx-push-url="/viewer"
|
|
>🗂️ Admin</a>
|
|
</div>
|
|
|
|
<div id="main-content" class="container mx-auto px-4 mt-6 max-w-7xl pb-10">
|
|
<div class="w-full max-w-4xl mx-auto space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-2xl font-bold">📐 Crop du Nuage de Points</h2>
|
|
<a href="/viewer/list" class="btn btn-ghost btn-sm">← Retour</a>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow">
|
|
<div class="card-body">
|
|
<div class="space-y-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="badge badge-info">Nuage : {{ pc_id }}</span>
|
|
<span class="text-sm text-base-content/60">
|
|
Sélectionnez une zone dans le viewer pour cropper le nuage
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<a href="/viewer/{{ pc_id }}" class="btn btn-primary" hx-get="/viewer/{{ pc_id }}" hx-target="#viewer-container">
|
|
👁️ Ouvrir Viewer
|
|
</a>
|
|
<a href="{{ embed_url }}" target="_blank" class="btn btn-ghost btn-sm">
|
|
↗ Plein écran
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewer-container" class="w-full rounded-lg border border-base-300">
|
|
<iframe
|
|
src="{{ embed_url }}"
|
|
class="w-full"
|
|
style="height: 680px;"
|
|
allowfullscreen
|
|
></iframe>
|
|
</div>
|
|
|
|
<div class="card bg-base-100 shadow">
|
|
<div class="card-body">
|
|
<h3 class="font-semibold">📦 Coordonnées de la Box 3D</h3>
|
|
<div class="grid grid-cols-3 gap-2 text-sm">
|
|
<div>
|
|
<label class="text-base-content/60">Min X</label>
|
|
<input type="number" step="0.001" id="minX" class="input input-bordered input-sm w-full" />
|
|
</div>
|
|
<div>
|
|
<label class="text-base-content/60">Min Y</label>
|
|
<input type="number" step="0.001" id="minY" class="input input-bordered input-sm w-full" />
|
|
</div>
|
|
<div>
|
|
<label class="text-base-content/60">Min Z</label>
|
|
<input type="number" step="0.001" id="minZ" class="input input-bordered input-sm w-full" />
|
|
</div>
|
|
<div>
|
|
<label class="text-base-content/60">Max X</label>
|
|
<input type="number" step="0.001" id="maxX" class="input input-bordered input-sm w-full" />
|
|
</div>
|
|
<div>
|
|
<label class="text-base-content/60">Max Y</label>
|
|
<input type="number" step="0.001" id="maxY" class="input input-bordered input-sm w-full" />
|
|
</div>
|
|
<div>
|
|
<label class="text-base-content/60">Max Z</label>
|
|
<input type="number" step="0.001" id="maxZ" class="input input-bordered input-sm w-full" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-2 mt-4">
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
hx-post="/crop/{{ pc_id }}"
|
|
hx-target="#crop-result"
|
|
hx-swap="innerHTML"
|
|
>
|
|
✂️ Cropper
|
|
</button>
|
|
<span class="text-sm text-base-content/60">
|
|
Le traitement peut prendre plusieurs minutes selon la taille du nuage
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="crop-result" class="w-full"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|