197 lines
11 KiB
HTML
197 lines
11 KiB
HTML
{% load static i18n %}
|
||
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{ document.title }} - Visionneur BIM IFC | StreetUp</title>
|
||
|
||
<!-- Bootstrap Icons & Fonts -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<!-- Viewer CSS -->
|
||
<link rel="stylesheet" href="{% static 'bim/css/ifc_viewer.css' %}">
|
||
</head>
|
||
<body class="bim-viewer-body">
|
||
<div class="bim-wrapper">
|
||
<!-- Header Navbar -->
|
||
<header class="bim-header">
|
||
<div class="bim-header-brand">
|
||
<a href="{% url 'documents:detail' document.pk %}" class="bim-preset-btn" title="{% translate 'Retour au document' %}">
|
||
<i class="bi bi-arrow-left"></i>
|
||
</a>
|
||
<i class="bi bi-box-seam fs-5 text-primary"></i>
|
||
<h1 class="bim-header-title" title="{{ document.title }}">{{ document.title }}</h1>
|
||
<span class="bim-badge">IFC v{{ version.version_number }}</span>
|
||
</div>
|
||
|
||
<!-- Camera View Presets -->
|
||
<div class="bim-header-actions">
|
||
<button type="button" class="bim-preset-btn active" id="btn-view-iso" title="{% translate 'Vue Isométrique' %}">
|
||
<i class="bi bi-box"></i> {% translate "Iso" %}
|
||
</button>
|
||
<button type="button" class="bim-preset-btn" id="btn-view-top" title="{% translate 'Vue de Dessus' %}">
|
||
<i class="bi bi-square"></i> {% translate "Haut" %}
|
||
</button>
|
||
<button type="button" class="bim-preset-btn" id="btn-view-front" title="{% translate 'Vue de Face' %}">
|
||
<i class="bi bi-layout-sidebar-inset"></i> {% translate "Face" %}
|
||
</button>
|
||
<button type="button" class="bim-preset-btn" id="btn-view-right" title="{% translate 'Vue de Droite' %}">
|
||
<i class="bi bi-layout-sidebar"></i> {% translate "Droite" %}
|
||
</button>
|
||
<button type="button" class="bim-preset-btn" id="btn-view-fit" title="{% translate 'Recentrer la vue' %}">
|
||
<i class="bi bi-aspect-ratio"></i> {% translate "Recentrer" %}
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Workspace -->
|
||
<main class="bim-main">
|
||
<!-- Left Sidebar: Spatial Tree & Layers -->
|
||
<aside class="bim-sidebar bim-sidebar-left" id="sidebar-left">
|
||
<div class="bim-sidebar-header">
|
||
<span class="bim-sidebar-title">
|
||
<i class="bi bi-layers"></i> {% translate "Arborescence & Calques" %}
|
||
</span>
|
||
<button type="button" class="bim-preset-btn p-1" id="toggle-left-sidebar" title="Masquer">
|
||
<i class="bi bi-chevron-left"></i>
|
||
</button>
|
||
</div>
|
||
<div class="bim-sidebar-content">
|
||
<div class="mb-3">
|
||
<input type="text" id="tree-search-input" class="form-control form-control-sm bg-dark text-light border-secondary" placeholder="{% translate 'Filtrer un élément ou niveau...' %}" style="border-color: var(--bim-panel-border) !important; font-size: 0.825rem;">
|
||
</div>
|
||
<div id="spatial-tree-container">
|
||
<p class="text-muted small p-2">{% translate "Analyse de la structure IFC en cours..." %}</p>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 3D Canvas Container -->
|
||
<div class="bim-canvas-container">
|
||
<canvas id="bim-canvas"></canvas>
|
||
|
||
<!-- Floating Toolbar -->
|
||
<div class="bim-toolbar">
|
||
<button type="button" class="bim-tool-btn" id="tool-toggle-left" data-tooltip="{% translate 'Arborescence / Calques' %}">
|
||
<i class="bi bi-list-nested"></i>
|
||
</button>
|
||
<div class="bim-tool-divider"></div>
|
||
|
||
<button type="button" class="bim-tool-btn" id="tool-clipping" data-tooltip="{% translate 'Plan de coupe 3D' %}">
|
||
<i class="bi bi-scissors"></i>
|
||
</button>
|
||
<button type="button" class="bim-tool-btn" id="tool-ghosting" data-tooltip="{% translate 'Mode Transparence' %}">
|
||
<i class="bi bi-eye"></i>
|
||
</button>
|
||
<button type="button" class="bim-tool-btn" id="tool-wireframe" data-tooltip="{% translate 'Mode Filaire' %}">
|
||
<i class="bi bi-grid-3x3"></i>
|
||
</button>
|
||
<button type="button" class="bim-tool-btn" id="tool-measure" data-tooltip="{% translate 'Mesure de distance 3D' %}">
|
||
<i class="bi bi-rulers"></i>
|
||
</button>
|
||
|
||
<div class="bim-tool-divider"></div>
|
||
<button type="button" class="bim-tool-btn" id="tool-reset" data-tooltip="{% translate 'Réinitialiser la vue' %}">
|
||
<i class="bi bi-arrow-counterclockwise"></i>
|
||
</button>
|
||
<button type="button" class="bim-tool-btn" id="tool-toggle-right" data-tooltip='{% translate "Propriétés de l’objet" %}'>
|
||
<i class="bi bi-info-circle"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Measure Guidance Banner -->
|
||
<div class="bim-measure-banner hidden" id="measure-banner">
|
||
<i class="bi bi-rulers text-primary"></i>
|
||
<span id="measure-banner-text">{% translate "Mode Mesure : Cliquez sur un premier point 3D sur la maquette..." %}</span>
|
||
<button type="button" class="btn btn-sm btn-outline-danger ms-2 py-0 px-1" id="btn-clear-measures" title="{% translate 'Effacer toutes les mesures' %}">
|
||
<i class="bi bi-trash"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Section Clipping Controls Panel -->
|
||
<div class="bim-clipping-panel" id="clipping-panel">
|
||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
<strong class="small text-light"><i class="bi bi-scissors"></i> {% translate "Plans de coupe 3D" %}</strong>
|
||
<button type="button" class="btn-close btn-close-white btn-sm" id="close-clipping-panel"></button>
|
||
</div>
|
||
<div class="bim-slider-group">
|
||
<div class="bim-slider-label">
|
||
<span>{% translate "Coupe horizontale (Étage Z)" %}</span>
|
||
<span id="val-clip-z">100%</span>
|
||
</div>
|
||
<input type="range" min="0" max="100" value="100" class="bim-slider" id="slider-clip-z">
|
||
</div>
|
||
<div class="bim-slider-group">
|
||
<div class="bim-slider-label">
|
||
<span>{% translate "Coupe transversale (Axe X)" %}</span>
|
||
<span id="val-clip-x">100%</span>
|
||
</div>
|
||
<input type="range" min="0" max="100" value="100" class="bim-slider" id="slider-clip-x">
|
||
</div>
|
||
<div class="bim-slider-group">
|
||
<div class="bim-slider-label">
|
||
<span>{% translate "Coupe longitudinale (Axe Y)" %}</span>
|
||
<span id="val-clip-y">100%</span>
|
||
</div>
|
||
<input type="range" min="0" max="100" value="100" class="bim-slider" id="slider-clip-y">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading Overlay -->
|
||
<div class="bim-loader-overlay" id="bim-loader">
|
||
<div class="bim-spinner"></div>
|
||
<div class="bim-loader-title">{% translate "Chargement de la maquette BIM" %}</div>
|
||
<div class="bim-loader-progress-bar">
|
||
<div class="bim-loader-progress-fill" id="loader-progress"></div>
|
||
</div>
|
||
<div class="bim-loader-text" id="loader-status">{% translate "Téléchargement du fichier IFC..." %}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Sidebar: Property Inspector -->
|
||
<aside class="bim-sidebar bim-sidebar-right" id="sidebar-right">
|
||
<div class="bim-sidebar-header">
|
||
<span class="bim-sidebar-title">
|
||
<i class="bi bi-info-square"></i> {% translate "Propriétés de l'objet" %}
|
||
</span>
|
||
<button type="button" class="bim-preset-btn p-1" id="toggle-right-sidebar" title="Masquer">
|
||
<i class="bi bi-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
<div class="bim-sidebar-content" id="property-inspector-content">
|
||
<div class="text-center text-muted p-4">
|
||
<i class="bi bi-cursor fs-1 d-block mb-2 opacity-50"></i>
|
||
<p class="small mb-0">{% translate "Cliquez sur n'importe quel élément 3D de la maquette pour inspecter ses propriétés et jeux de données (PropertySets)." %}</p>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Vendor JavaScript Libraries (Three.js & Web-IFC) -->
|
||
<script src="{% static 'bim/vendor/three.min.js' %}"></script>
|
||
<script src="{% static 'bim/vendor/OrbitControls.js' %}"></script>
|
||
<script type="module">
|
||
import * as WebIFC from "{% static 'bim/vendor/web-ifc-api.js' %}";
|
||
window.WebIFC = WebIFC;
|
||
document.dispatchEvent(new Event('web-ifc-loaded'));
|
||
</script>
|
||
|
||
<!-- Viewer Configuration Context -->
|
||
<script>
|
||
window.BIM_CONFIG = {
|
||
docCode: "{{ doc_code }}",
|
||
downloadUrl: "{% url 'bim:download_ifc' doc_code %}",
|
||
infoUrl: "{% url 'bim:document_info' doc_code %}",
|
||
wasmPath: "{% static 'bim/vendor/' %}"
|
||
};
|
||
</script>
|
||
|
||
<!-- BIM Viewer Application Script -->
|
||
<script src="{% static 'bim/js/ifc_viewer.js' %}"></script>
|
||
</body>
|
||
</html>
|