Design komplett erneuert. Menü einklappbar. Koordinaten werden angezeigt

2026-05-19 19:59:33 +02:00
parent 4fb8dc2b62
commit 8a9be85446
4 changed files with 408 additions and 111 deletions
@@ -1,63 +1,86 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-  <meta charset="utf-8" />
-  <title>LiDAR App</title>
-  <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/jquery-ui/jquery-ui.min.css" />
-  <link rel="stylesheet" type="text/css" href="style.css" />
-</head>
-<body>
-  <header id="header">
-    <span>3D-LiDAR Visualisierung</span>
-    
-  </header>
-
-  <aside id="sidebar">
-   
-    <select name="basemap" id="basemap">
-      <option value="" disabled selected>Hintergrundkarte</option>
-      <option value="openfree_bright">OpenFreeMap hell</option>
-      <option value="openfree_dark">OpenFreeMap dunkel</option>
-      <option value="openfree_liberty">OpenFreeMap Liberty</option>
-      <option value="google_satellite">Satellit</option>
-      <option value="terrain">Terrain</option>
-      <option value="satellite_terrain">Terrain mit Satellitenbild</option>
-    </select>
-    <select name="pointcloud" id="pointcloud">
-      <option value="" disabled selected>Punktwolke auswählen</option>
-      <option value="first">1. Fläche unten</option>
-      <option value="second">2. Felswand</option>
-      <option value="third">3. Fläche oben mit Spuren</option>
-    </select>
-    <p>
-      <input type="checkbox">Punktwolke ausblenden
-    </p>
-    <div class="logos">
+  <head>
+    <meta charset="utf-8" />
+    <title>LiDAR App</title>
+    <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/jquery-ui/jquery-ui.min.css"
+    />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <header id="header">
+      <span>3D-LiDAR Visualisierung</span>
+    </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">
+      <button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button>
+      <select name="basemap" id="basemap">
+        <option value="" disabled selected>Hintergrundkarte</option>
+        <option value="openfree_bright">OpenFreeMap hell</option>
+        <option value="openfree_dark">OpenFreeMap dunkel</option>
+        <option value="openfree_liberty">OpenFreeMap Liberty</option>
+        <option value="google_satellite">Satellit</option>
+        <option value="terrain">Terrain</option>
+        <option value="satellite_terrain">Terrain mit Satellitenbild</option>
+      </select>
+      <select name="pointcloud" id="pointcloud">
+        <option value="" disabled selected>Punktwolke auswählen</option>
+        <option value="first">1. Fläche unten</option>
+        <option value="second">2. Felswand</option>
+        <option value="third">3. Fläche oben mit Spuren</option>
+      </select>
+      <button id="disable">Punktwolke ausblenden</button>
+      <p id="pointSliderValue"></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">
        <a href="http://www.jade-hs.de">
          <img id="logoJadeHs" src="logoJadeHs.png" />
        </a>
-      <a href="https://www.lbeg.niedersachsen.de/startseite/">
-        <img id="logoLbeg" src="logoLbeg.svg" />
-      </a>
-    </div>
-  </aside>
+        <a href="https://www.lbeg.niedersachsen.de/startseite/">
+          <img id="logoLbeg" src="logoLbeg.svg" />
+        </a>
+      </div>
+    </aside>
+</div>
+    <main id="main">
+      <div id="location-button">
+        <img id="location" title="Standort zurücksetzen" src="standort.png" />
+      </div>
+      <div id="map"></div>
+      <div id="potree_render_area"></div>
+      <footer>
+        &#169 Arne Zitting u. Hauke Kahrs
+      </footer>
+    </main>

-  <main id="main">
-    <img id="location" src="standort.png"/>
-    <div id="map"></div>
-    <div id="potree_render_area"></div>
-  </main>
+    <script src="./libs/jquery/jquery-3.1.1.min.js"></script>
+    <script src="./libs/other/BinaryHeap.js"></script>
+    <script src="./libs/tween/tween.min.js"></script>
+    <script src="./libs/d3/d3.js"></script>
+    <script src="./libs/proj4/proj4.js"></script>
+    <script src="./libs/potree/potree.js"></script>
+    <script src="./libs/plasio/js/laslaz.js"></script>

-  <script src="./libs/jquery/jquery-3.1.1.min.js"></script>
-  <script src="./libs/other/BinaryHeap.js"></script>
-  <script src="./libs/tween/tween.min.js"></script>
-  <script src="./libs/d3/d3.js"></script>
-  <script src="./libs/proj4/proj4.js"></script>
-  <script src="./libs/potree/potree.js"></script>
-  <script src="./libs/plasio/js/laslaz.js"></script>
-
-  <script type="module" src="/main.js"></script>
-</body>
-</html>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
@@ -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");

@@ -278,13 +290,21 @@ function changeBaseMap(newMap){
 }


-document.querySelector('input[type="checkbox"]').addEventListener('change', (event)=>
-{
-  isVisible=!event.target.checked;
-  if (currentPointCloud){
-    currentPointCloud.visible=isVisible;
-  };
-})
+const button = document.querySelector('#disable')
+
+button.addEventListener('click', () => {
+
+    isVisible = !isVisible;
+
+    if(currentPointCloud){
+        currentPointCloud.visible = isVisible;
+    }
+
+    button.textContent = isVisible
+        ? "Punktwolke ausblenden"
+        : "Punktwolke anzeigen";
+
+});


 // ausgewähltes Element im BaseMap DropDown Feld
@@ -306,3 +326,43 @@ document.getElementById("location").addEventListener("click", () => {
 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 = ""; 
+            });
+        }
+    });
+}
+
@@ -4,73 +4,117 @@ html, body {
 }


-body {
-  margin: 0;
-  height: 100vh;
-  display: grid;
-  grid-template-rows: 80px 1fr;
-  grid-template-columns: 250px 1fr;
-  grid-template-areas:
-    "header header"
-    "sidebar main";
-  font-family: 'Trebuchet MS';
+
+body{
+  margin:0;
+  overflow:hidden;
+  font-family: 'Inter', sans-serif;
+  background: var(--bg);
+  color: var(--text);
 }

-
-#header {
-  color: white;
-  grid-area: header;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  font-size: 28px;
-  font-weight: bold;
-  background: rgb(42, 119, 252);
+#main{
+  width:100vw;
+  height:100vh;
+  position:relative;
 }

-
-.logos {
-  position: absolute;
-  bottom: 20px;
-  display: flex;
-  gap: 10px;
+#header{
+  position:absolute;
+  top:20px;
+  left:50%;
+  transform:translateX(-50%);
+  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 {
-  width: 100px;
-  height: auto;
+.logos{
+  margin-top:50px;
+  margin-left: 12px;
+  opacity:0.8;
 }

+.logos img{
+  width:80px;
+  margin-right: 10px;
+}

-#location {
-  position: absolute;
-  right: 0%;
-  top: 14vh;
-  width: 2.5vw;
-  height: auto;
-  margin: 0.45%;
-  z-index: 10;
+.logos img:hover{
+  transform:translateY(-1px);
+  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
+}
+
+#location-button{
+  position:absolute;
+  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;
 }

-
-#sidebar {
-  grid-area: sidebar;
-  padding: 20px;
-  background: #eeeeee;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
+#location:hover{
+  transform:scale(1.05);
+  background:rgb(233, 232, 232);
 }


+#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 {
  grid-area: main;
  position: relative;
 }

-
 #map {
  width: 100%;
  height: 100%;
@@ -88,4 +132,174 @@ body {

 #potree_render_area canvas {
  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;
 }