diff --git a/index.html b/index.html index fc97a82..95e0bbf 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,7 @@ Groß +
diff --git a/info.png b/info.png new file mode 100644 index 0000000..972c944 Binary files /dev/null and b/info.png differ diff --git a/main.js b/main.js index 4d8c1e3..325b6b2 100644 --- a/main.js +++ b/main.js @@ -54,6 +54,9 @@ let currentPointCloud = null; let isVisible = true; function loadPointCloud(path) { + viewer.scene.view.yaw = 0; +viewer.scene.view.pitch = 0; + if (currentPointCloud) { const index = viewer.scene.pointclouds.indexOf(currentPointCloud); if (index !== -1) viewer.scene.pointclouds.splice(index, 1); @@ -94,6 +97,8 @@ function loadPointCloud(path) { let isSyncing = false; function syncCamera() { + + if (!currentPointCloud || isSyncing) return; isSyncing = true; @@ -127,6 +132,7 @@ function syncCamera() { // 3. Potree-Kamera absolut starr setzen viewer.scene.view.position.copy(cameraPosition); viewer.scene.view.lookAt(target); + viewer.setFOV(transform.fov); // 4. Potree rendern @@ -193,7 +199,16 @@ function changeBaseMap(newMap) { document.querySelector('#disable').addEventListener('click', function() { isVisible = !isVisible; if (currentPointCloud) currentPointCloud.visible = isVisible; - this.textContent = isVisible ? "Punktwolke ausblenden" : "Punktwolke anzeigen"; + if(isVisible){ + this.textContent = "Punktwolke ausblenden"; + this.classList.add("active-state"); + this.classList.remove("inactive-state"); + } else{ + this.textContent = "Punktwolke anzeigen"; + this.classList.add("inactive-state"); + this.classList.remove("active-state"); + } + }); document.querySelector('select[name="basemap"]').addEventListener('change', (e) => changeBaseMap(e.target.value)); @@ -362,7 +377,7 @@ document.getElementById("info-img-next").addEventListener("click", () => { openInfoPanel.addEventListener("click", () => { infoPanel.classList.add("open"); - openInfoPanel.style.display = "none"; + //openInfoPanel.style.display = "none"; }); closeInfoPanel.addEventListener("click", () => { diff --git a/style.css b/style.css index 67e1687..da18068 100644 --- a/style.css +++ b/style.css @@ -177,6 +177,8 @@ select{ padding:10px 16px; border:none; border-radius:14px; + font-size:14px; + font-weight:500; background: linear-gradient( 135deg, @@ -185,9 +187,7 @@ select{ rgba(6, 45, 135, 0.92) 100% ), rgba(6, 45, 135, 0.92); - font-size:14px; - font-weight:500; - color:#ffffff; + color: white; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278); cursor:pointer; transition:0.2s; @@ -195,6 +195,24 @@ select{ margin-bottom: 10px; } + +#disable.active-state { + background: + linear-gradient( + 135deg, + rgba(18, 77, 216, 0.92) 10%, + rgba(13, 61, 175, 0.92) 60%, + rgba(6, 45, 135, 0.92) 100% + ), + rgba(6, 45, 135, 0.92); + color: white; +} + +#disable.inactive-state { + background: rgba(255,255,255,0.92); + color: #0f172a; +} + select:hover{ transform:translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); @@ -389,11 +407,11 @@ position: absolute; } #openInfoPanel { + margin-top: 12px; border: none; border-radius: 14px; width: auto; - height: 48px; - padding: 0 20px; + padding: 10px 16px; font-size: 17px; font-weight: 500; cursor: pointer;