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

Design komplett erneuert. Menü einklappbar. Koordinaten werden angezeigt

Browse Source
This commit is contained in:
ar2350
2026-05-19 19:59:33 +02:00
parent 4fb8dc2b62
commit 8a9be85446
4 changed files with 408 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+37 -14
View File
@@ -1,21 +1,37 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>LiDAR App</title> <title>LiDAR App</title>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" /> <link
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="./libs/potree/potree.css" /> <link rel="stylesheet" type="text/css" href="./libs/potree/potree.css" />
<link rel="stylesheet" type="text/css" href="./libs/jquery-ui/jquery-ui.min.css" /> <link
rel="stylesheet"
type="text/css"
href="./libs/jquery-ui/jquery-ui.min.css"
/>
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />
</head> <link rel="preconnect" href="https://fonts.googleapis.com" />
<body> <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header id="header"> <header id="header">
<span>3D-LiDAR Visualisierung</span> <span>3D-LiDAR Visualisierung</span>
</header> </header>
<h1 id="title">- Obernkirchener Sandstein -</h1>
<div id="coordinates" title="Koordinaten an Mausposition"></div>
<div id="openButtonOuter">
</div>
<div id="sideBarOuter">
<aside id="sidebar"> <aside id="sidebar">
<button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button>
<select name="basemap" id="basemap"> <select name="basemap" id="basemap">
<option value="" disabled selected>Hintergrundkarte</option> <option value="" disabled selected>Hintergrundkarte</option>
<option value="openfree_bright">OpenFreeMap hell</option> <option value="openfree_bright">OpenFreeMap hell</option>
@@ -31,9 +47,11 @@
<option value="second">2. Felswand</option> <option value="second">2. Felswand</option>
<option value="third">3. Fläche oben mit Spuren</option> <option value="third">3. Fläche oben mit Spuren</option>
</select> </select>
<p> <button id="disable">Punktwolke ausblenden</button>
<input type="checkbox">Punktwolke ausblenden <p id="pointSliderValue"></p>
</p> <input id="pointSlider" type="range" min="1000000" max="9000000" value="3000000">
<p id="pointSizeSliderValue"></p>
<input id="pointSizeSlider" type="range" min="0.1" max="5" value="1" step="0.1">
<div class="logos"> <div class="logos">
<a href="http://www.jade-hs.de"> <a href="http://www.jade-hs.de">
<img id="logoJadeHs" src="logoJadeHs.png" /> <img id="logoJadeHs" src="logoJadeHs.png" />
@@ -43,11 +61,16 @@
</a> </a>
</div> </div>
</aside> </aside>
</div>
<main id="main"> <main id="main">
<img id="location" src="standort.png"/> <div id="location-button">
<img id="location" title="Standort zurücksetzen" src="standort.png" />
</div>
<div id="map"></div> <div id="map"></div>
<div id="potree_render_area"></div> <div id="potree_render_area"></div>
<footer>
&#169 Arne Zitting u. Hauke Kahrs
</footer>
</main> </main>
<script src="./libs/jquery/jquery-3.1.1.min.js"></script> <script src="./libs/jquery/jquery-3.1.1.min.js"></script>
@@ -59,5 +82,5 @@
<script src="./libs/plasio/js/laslaz.js"></script> <script src="./libs/plasio/js/laslaz.js"></script>
<script type="module" src="/main.js"></script> <script type="module" src="/main.js"></script>
</body> </body>
</html> </html>
main.js
+67 -7
View File
@@ -25,6 +25,18 @@ map.addControl(
}) })
); );
// 2. Create an HTML element to display coordinates (e.g., <pre id="coordinates"></pre>)
const coordinatesDiv = document.getElementById('coordinates');
// 3. Listen for mouse movement
map.on('mousemove', (e) => {
// e.lngLat contains the longitude and latitude
const lng = e.lngLat.lng.toFixed(5);
const lat = e.lngLat.lat.toFixed(5);
coordinatesDiv.innerHTML = `Lon: ${lng}° | Lat: ${lat}°`;
});
const elRenderArea=document.getElementById("potree_render_area"); const elRenderArea=document.getElementById("potree_render_area");
@@ -278,13 +290,21 @@ function changeBaseMap(newMap){
} }
document.querySelector('input[type="checkbox"]').addEventListener('change', (event)=> const button = document.querySelector('#disable')
{
isVisible=!event.target.checked; button.addEventListener('click', () => {
if (currentPointCloud){
currentPointCloud.visible=isVisible; isVisible = !isVisible;
};
}) if(currentPointCloud){
currentPointCloud.visible = isVisible;
}
button.textContent = isVisible
? "Punktwolke ausblenden"
: "Punktwolke anzeigen";
});
// ausgewähltes Element im BaseMap DropDown Feld // ausgewähltes Element im BaseMap DropDown Feld
@@ -306,3 +326,43 @@ document.getElementById("location").addEventListener("click", () => {
map.flyTo({center, zoom: 17 }) map.flyTo({center, zoom: 17 })
}); });
var pointCountSlider = document.getElementById("pointSlider");
var pointCountOutput = document.getElementById("pointSliderValue");
pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(pointCountSlider.value).toLocaleString();
pointCountSlider.oninput = function() {
pointCountOutput.innerHTML = "Dargestellte Punkte: " + Number(this.value).toLocaleString('de-DE');;
}
var pointSizeSlider = document.getElementById("pointSizeSlider");
var pointSizeOutput = document.getElementById("pointSizeSliderValue");
pointSizeOutput.innerHTML = "Punktgröße (mm): " + Number(pointSizeSlider.value).toLocaleString();
pointSizeSlider.oninput = function() {
pointSizeOutput.innerHTML = "Punktgröße (mm): " + Number(this.value).toLocaleString('de-DE');;
}
const closeButton = document.getElementById("closeSideBarButton");
const sidebar = document.getElementById("sidebar");
const openOuter = document.getElementById("openButtonOuter");
if (closeButton) {
closeButton.addEventListener("click", () => {
const rect = closeButton.getBoundingClientRect();
sidebar.style.display = "none";
openOuter.innerHTML = "<button class='sideBarButtons' id='openSideBarButton' title='Menü ausklappen'>>></button>";
const openButton = document.getElementById("openSideBarButton");
openButton.style.top = `${rect.top + window.scrollY -2}px`;
if (openButton) {
openButton.addEventListener("click", () => {
sidebar.style.display = "flex";
openOuter.innerHTML = "";
});
}
});
}
standort.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB

style.css
+261 -47
View File
@@ -4,73 +4,117 @@ html, body {
} }
body {
margin: 0; body{
height: 100vh; margin:0;
display: grid; overflow:hidden;
grid-template-rows: 80px 1fr; font-family: 'Inter', sans-serif;
grid-template-columns: 250px 1fr; background: var(--bg);
grid-template-areas: color: var(--text);
"header header"
"sidebar main";
font-family: 'Trebuchet MS';
} }
#main{
#header { width:100vw;
color: white; height:100vh;
grid-area: header; position:relative;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 28px;
font-weight: bold;
background: rgb(42, 119, 252);
} }
#header{
.logos { position:absolute;
position: absolute; top:20px;
bottom: 20px; left:50%;
display: flex; transform:translateX(-50%);
gap: 10px; z-index:30;
padding:14px 28px;
border-radius: 20px;
background:
linear-gradient(
135deg,
rgba(200, 200, 200, 0.221) 10%,
rgba(79, 79, 79, 0.756) 60%,
rgba(47, 47, 47, 0.864) 100%
),
rgba(24,24,27,0.78);
backdrop-filter: blur(16px);
color:white;
font-size:24px;
font-weight:600;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.536);
} }
.logos img { .logos{
width: 100px; margin-top:50px;
height: auto; margin-left: 12px;
opacity:0.8;
} }
.logos img{
width:80px;
margin-right: 10px;
}
#location { .logos img:hover{
position: absolute; transform:translateY(-1px);
right: 0%; box-shadow: 0 6px 18px rgba(0,0,0,0.12);
top: 14vh; }
width: 2.5vw;
height: auto; #location-button{
margin: 0.45%; position:absolute;
z-index: 10; z-index: 30;
top:110px;
right:10px;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
background:white;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
#location{
width:20px;
height:20px;
object-fit:contain;
margin-left: 1px;
margin-top: 1px;
cursor: pointer; cursor: pointer;
} }
#location:hover{
#sidebar { transform:scale(1.05);
grid-area: sidebar; background:rgb(233, 232, 232);
padding: 20px;
background: #eeeeee;
display: flex;
flex-direction: column;
gap: 15px;
} }
#location-button:hover{
background:rgb(233, 232, 232);
}
#sidebar {
position: absolute;
top: 50%;
transform:translateY(-50%);
left: 20px;
width: 200px;
padding: 22px;
background: rgba(255, 255, 255, 0.58);
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: flex;
flex-direction: column;
gap:10px;
}
#main { #main {
grid-area: main; grid-area: main;
position: relative; position: relative;
} }
#map { #map {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -89,3 +133,173 @@ body {
#potree_render_area canvas { #potree_render_area canvas {
background: transparent !important; background: transparent !important;
} }
select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width:100%;
padding:14px 16px;
border:none;
border-radius:14px;
background:rgba(255,255,255,0.92);
font-size:15px;
font-weight:500;
color:#0f172a;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
cursor:pointer;
transition:0.2s;
}
#disable{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
width:100%;
padding:14px 16px;
border:none;
border-radius:14px;
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);
font-size:15px;
font-weight:500;
color:#ffffff;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
cursor:pointer;
transition:0.2s;
margin-top: 8px;
margin-bottom: 6px;
}
select:hover{
transform:translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
select:focus{
outline:none;
box-shadow:0 0 0 4px rgba(37,99,235,0.15), 0 8px 24px rgba(0,0,0,0.12);
}
#disable:hover{
transform:translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
*{
transition:
background 0.2s,
transform 0.01s,
opacity 0.2s;
}
footer{
z-index: 30;
position: absolute;
bottom: 8px;
left: 10px;
font-size: small;
}
#pointSliderValue, #pointSizeSliderValue{
font-size:80%;
margin-bottom: 0px;
}
#pointSlider, #pointSizeSlider{
width: 100%;
}
input[type="range"]{
-webkit-appearance: none;
width: 100%;
height: 6px;
background: #d1dbd1;
border-radius: 999px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
width:16px;
height:16px;
border-radius:50%;
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);
cursor:pointer;
}
#title{
z-index: 30;
position: absolute;
top: 75px;
left: 50%;
transform:translateX(-50%);
font-size: small;
color: #ffffff;
text-shadow: 1px 1.5px #00000059;
}
#coordinates{
z-index: 30;
position: absolute;
bottom: 20px;
left: 50%;
transform:translateX(-50%);
font-size: smaller;
color: #000000cf;
border: 1px solid rgba(0, 0, 0, 0.547);
padding:8px;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.751);
backdrop-filter: blur(10px);
}
.sideBarButtons{
font-family:monospace;
border:none;
border-radius:10px;
background:
linear-gradient(
135deg,
rgba(200, 200, 200, 0.221) 10%,
rgba(79, 79, 79, 0.756) 60%,
rgba(47, 47, 47, 0.864) 100%
),
rgba(24,24,27,0.78);
font-size:15px;
color:#ffffff;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
cursor:pointer;
transition:0.2s;
z-index: 30;
}
#closeSideBarButton{
align-self: flex-end;
right: 0%;
padding:5px 15px;
}
#openSideBarButton{
position: absolute;
left: 5px;
padding:5px 15px;
}