ar2350/Projekt-Visualisierung
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Infopanel angepasst

Browse Source
This commit is contained in:
ha2622
2026-06-08 22:31:16 +02:00
parent e35dccdc75
commit 4c34e04598
3 changed files with 94 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
main.js
+44 -3
View File
@@ -289,15 +289,18 @@ map.once('load', () => {
const pointCloudInfo = {
first: {
title: "1. Fläche unten",
text: "Dies ist die 1. Fläche (unten). Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen."
text: "Dies ist die 1. Fläche (unten). Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen.",
images: ["stand1_1.jpeg", "stand1_2.jpeg"]
},
second: {
title: "2. Felswand",
text: "Dies ist die 2. Felswand. Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen."
text: "Dies ist die 2. Felswand. Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen.",
images: ["stand2_1.jpeg"]
},
third: {
title: "3. Fläche oben mit Spuren",
text: "Dies ist die 3. Fläche (oben) mit Spuren. Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen."
text: "Dies ist die 3. Fläche (oben) mit Spuren. Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen.",
images: ["stand3_1.jpeg", "stand3_2.jpeg"]
},
};
@@ -307,18 +310,56 @@ const infoPanelText = document.getElementById("info-panel-text");
const openInfoPanel = document.getElementById("openInfoPanel");
const closeInfoPanel = document.getElementById("closeInfoPanel");
let currentImageIndex = 0;
function updateInfoPanel() {
const key = document.querySelector('select[name="pointcloud"]').value;
const info = pointCloudInfo[key];
currentImageIndex = 0;
if (info) {
infoPanelTitle.textContent = info.title;
infoPanelText.textContent = info.text;
updateImage(info);
} else {
infoPanelTitle.textContent = "Info";
infoPanelText.textContent = "Bitte wählen Sie eine Punktwolke aus.";
document.getElementById("info-panel-image").style.display = "none";
document.getElementById("info-image-nav").style.display = "none";
}
}
function updateImage(info) {
const img = document.getElementById("info-panel-image");
const nav = document.getElementById("info-image-nav");
const counter = document.getElementById("info-image-counter");
img.src = info.images[currentImageIndex];
img.style.display = "block";
if (info.images.length > 1) {
nav.style.display = "flex";
counter.textContent = `${currentImageIndex + 1} / ${info.images.length}`;
} else {
nav.style.display = "none";
}
}
document.getElementById("info-img-prev").addEventListener("click", () => {
const key = document.querySelector('select[name="pointcloud"]').value;
const info = pointCloudInfo[key];
if (!info) return;
currentImageIndex = (currentImageIndex - 1 + info.images.length) % info.images.length;
updateImage(info);
});
document.getElementById("info-img-next").addEventListener("click", () => {
const key = document.querySelector('select[name="pointcloud"]').value;
const info = pointCloudInfo[key];
if (!info) return;
currentImageIndex = (currentImageIndex + 1) % info.images.length;
updateImage(info);
});
openInfoPanel.addEventListener("click", () => {
infoPanel.classList.add("open");
openInfoPanel.style.display = "none";