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
index.html
+9 -3
View File
@@ -95,10 +95,16 @@
<div id="info-panel">
<div id="info-panel-inner">
<button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button>
<h3 id="info-panel-title">Info</h3>
<p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p>
<button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button>
<h3 id="info-panel-title">Info</h3>
<img id="info-panel-image" src="" alt="Standortbild" style="display:none;" />
<div id="info-image-nav" style="display:none;">
<button id="info-img-prev">&#8592;</button>
<span id="info-image-counter"></span>
<button id="info-img-next">&#8594;</button>
</div>
<p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p>
</div>
</div>
<div id="info-button-outer">
<button id="openInfoPanel" title="Informationen zur Punktwolke">&#x24D8; Info</button>
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";
style.css
+41 -6
View File
@@ -417,18 +417,17 @@ position: absolute;
top: 48%;
right: 20px;
transform: translateY(-50%);
width: 210px;
padding: 22px;
padding-bottom: 10px;
padding-top: 10px;
width: 340px;
padding: 18px 22px;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
z-index: 20;
display: none;
flex-direction: column;
gap: 8px;
gap: 0;
}
#info-panel.open {
@@ -438,18 +437,54 @@ position: absolute;
#closeInfoPanel {
align-self: flex-start;
padding: 5px 15px;
margin-bottom: 14px;
}
#info-panel-title {
margin: 0;
margin: 0 0 14px 0;
font-size: 14px;
font-weight: 600;
color: #0f172a;
}
#info-panel-image {
width: 100%;
border-radius: 12px;
object-fit: cover;
max-height: 220px;
margin-bottom: 14px;
}
#info-image-nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 14px;
}
#info-panel-text {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: #1e293b;
}
#info-img-prev, #info-img-next {
border: none;
background: rgba(255,255,255,0.9);
border-radius: 8px;
padding: 4px 10px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
#info-img-prev:hover, #info-img-next:hover {
background: rgb(233,232,232);
}
#info-image-counter {
font-size: 12px;
color: #555;
}