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

Compare commits

base: ar2350/Projekt-Visualisierung:d6a98a4f05ad68ce9e022bb214682890e75f06e1
Branches Tags
ar2350/Projekt-Visualisierung:main
..
compare: ar2350/Projekt-Visualisierung:main
Branches Tags
ar2350/Projekt-Visualisierung:main

2 Commits
d6a98a4f05 .. main

Author SHA1 Message Date
ar2350 da29cbeb7e Kommentiert 2026-07-02 22:02:57 +02:00
ar2350 267952ef71 Finaler build 2026-06-16 21:22:41 +02:00
5 changed files with 866 additions and 819 deletions
Expand all files Collapse all files
dist/info.json
Vendored
+3 -3
View File
@@ -2,16 +2,16 @@
"first": { "first": {
"title": "Fläche im unteren Bereich", "title": "Fläche im unteren Bereich",
"text": "Dieser Bereich des Steinbruchs zeigt eine natürliche Oberfläche aus Obernkirchener Sandstein. Zwischen einzelnen Sandsteinblöcken haben sich Sträucher und andere Pflanzen angesiedelt. Der Sandstein entstand vor etwa 140 Millionen Jahren in einer küstennahen Landschaft der Unterkreide.", "text": "Dieser Bereich des Steinbruchs zeigt eine natürliche Oberfläche aus Obernkirchener Sandstein. Zwischen einzelnen Sandsteinblöcken haben sich Sträucher und andere Pflanzen angesiedelt. Der Sandstein entstand vor etwa 140 Millionen Jahren in einer küstennahen Landschaft der Unterkreide.",
"images": ["stand1_1.jpeg", "stand1_2.jpeg"] "images": ["/stand1_1.jpeg", "/stand1_2.jpeg"]
}, },
"second": { "second": {
"title": "Abbauwand", "title": "Abbauwand",
"text": "An dieser Felswand wird der Obernkirchener Sandstein abgebaut. Das Gestein ist für seine hohe Festigkeit und Witterungsbeständigkeit bekannt und wird seit Jahrhunderten als Bau- und Werkstein genutzt. Es findet sich unter anderem an zahlreichen historischen Gebäuden in Deutschland.", "text": "An dieser Felswand wird der Obernkirchener Sandstein abgebaut. Das Gestein ist für seine hohe Festigkeit und Witterungsbeständigkeit bekannt und wird seit Jahrhunderten als Bau- und Werkstein genutzt. Es findet sich unter anderem an zahlreichen historischen Gebäuden in Deutschland.",
"images": ["stand2_1.jpeg"] "images": ["/stand2_1.jpeg"]
}, },
"third": { "third": {
"title": "Dinosaurier-Spuren", "title": "Dinosaurier-Spuren",
"text": "Auf dieser öffentlich zugänglichen Fläche sind fossile Fußspuren von Dinosauriern erhalten geblieben. Die Spuren entstanden vor rund 140 Millionen Jahren in feuchtem Sand und wurden später durch weitere Sedimentschichten konserviert. Sie gehören zu den bekanntesten Fossilienfunden im Obernkirchener Sandstein.", "text": "Auf dieser öffentlich zugänglichen Fläche sind fossile Fußspuren von Dinosauriern erhalten geblieben. Die Spuren entstanden vor rund 140 Millionen Jahren in feuchtem Sand und wurden später durch weitere Sedimentschichten konserviert. Sie gehören zu den bekanntesten Fossilienfunden im Obernkirchener Sandstein.",
"images": ["stand3_1.jpeg", "stand3_2.jpeg"] "images": ["/stand3_1.jpeg", "/stand3_2.jpeg"]
} }
} }
index.html
+74 -86
View File
@@ -3,22 +3,12 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>LiDAR App</title> <title>LiDAR App</title>
<link <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet"/>
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 <link rel="stylesheet" type="text/css" href="./libs/jquery-ui/jquery-ui.min.css"/>
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" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<header id="header"> <header id="header">
@@ -26,90 +16,88 @@
</header> </header>
<h1 id="title">- Obernkirchener Sandstein -</h1> <h1 id="title">- Obernkirchener Sandstein -</h1>
<div id="coordinates" title="Koordinaten an Mausposition"></div> <div id="coordinates" title="Koordinaten an Mausposition"></div>
<div id="openButtonOuter"> <div id="openButtonOuter"></div>
</div>
<div id="sideBarOuter"> <div id="sideBarOuter">
<aside id="sidebar"> <aside id="sidebar">
<button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button> <button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button>
<div class="selectWrapper"> <div class="selectWrapper">
<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">Hell</option> <option value="openfree_bright">Hell</option>
<option value="openfree_dark">Dunkel</option> <option value="openfree_dark">Dunkel</option>
<option value="openfree_liberty">Klassisch + Gebäude</option> <option value="openfree_liberty">Klassisch + Gebäude</option>
<option value="satellite">Satellit</option> <option value="satellite">Satellit</option>
<option value="terrain">Terrain</option> <option value="terrain">Terrain</option>
<option value="satellite_terrain">Terrain + Satellit</option> <option value="satellite_terrain">Terrain + Satellit</option>
</select> </select>
<span class="selectArrow">&#9207</span> <span class="selectArrow">&#9207</span>
</div> </div>
<div class="selectWrapper"> <div class="selectWrapper">
<select name="pointcloud" id="pointcloud"> <select name="pointcloud" id="pointcloud">
<option value="" disabled selected>Punktwolke auswählen</option> <option value="" disabled selected>Punktwolke auswählen</option>
<option value="first">Fläche im unteren Bereich</option> <option value="first">Fläche im unteren Bereich</option>
<option value="second">Abbauwand</option> <option value="second">Abbauwand</option>
<option value="third">Dinosaurier-Spuren</option> <option value="third">Dinosaurier-Spuren</option>
</select> </select>
<span class="selectArrow">&#9207</span> <span class="selectArrow">&#9207</span>
</div> </div>
<button id="disable">Punktwolke ausblenden</button> <button id="disable">Punktwolke ausblenden</button>
<p class="sideBarText">Qualität der Punktwolke</p> <p class="sideBarText">Qualität der Punktwolke</p>
<div class="buttonRow"> <div class="buttonRow">
<button class="qualityButtons" id="low">niedrigste</button> <button class="qualityButtons" id="low">niedrigste</button>
<button class="qualityButtons active" id="medium">mittel</button> <button class="qualityButtons active" id="medium">mittel</button>
<button class="qualityButtons" id="high">höchste</button> <button class="qualityButtons" id="high">höchste</button>
</div> </div>
<p class="sideBarText">Farbdarstellung</p> <p class="sideBarText">Farbdarstellung</p>
<div class="buttonRow"> <div class="buttonRow">
<button class="colorButtons active" id="rgb">RGB</button> <button class="colorButtons active" id="rgb">RGB</button>
<button class="colorButtons" id="height">höhencodiert</button> <button class="colorButtons" id="height">höhencodiert</button>
</div> </div>
<p class="sideBarText" id="pointSizeSliderValue">Punktgröße</p> <p class="sideBarText" id="pointSizeSliderValue">Punktgröße</p>
<div class="slider-labels"> <div class="slider-labels">
<span>Klein</span> <span>Klein</span>
<span>Groß</span> <span>Groß</span>
</div> </div>
<input id="pointSizeSlider" type="range" min="1" max="10" value="2" step="1"> <input id="pointSizeSlider" type="range" min="1" max="10" value="2" step="1"/>
<p class="sideBarText">Renderer</p> <p class="sideBarText">Renderer</p>
<button id="rendererToggle" data-active="deckgl" title="Renderer wechseln"> <button id="rendererToggle" data-active="deckgl" title="Renderer wechseln">
<span id="rendererLabel">Renderer: Deck.gl</span> <span id="rendererLabel">Renderer: Deck.gl</span>
<span id="rendererIcon">⇄</span> <span id="rendererIcon">⇄</span>
</button> </button>
<button id="openInfoPanel" title="Informationen zur Punktwolke"><img src="info.png"/>Informationen</button> <button id="openInfoPanel" title="Informationen zur Punktwolke">
<div class="logos"> <img src="info.png" />Informationen
<a href="http://www.jade-hs.de"> </button>
<img id="logoJadeHs" src="logoJadeHs.png" /> <div class="logos">
</a> <a href="http://www.jade-hs.de">
<a href="https://www.lbeg.niedersachsen.de/startseite/"> <img id="logoJadeHs" src="logoJadeHs.png" />
<img id="logoLbeg" src="logoLbeg.svg" /> </a>
</a> <a href="https://www.lbeg.niedersachsen.de/startseite/">
</div> <img id="logoLbeg" src="logoLbeg.svg" />
</aside> </a>
</div> </div>
</aside>
</div>
<main id="main"> <main id="main">
<div id="location-button"> <div id="location-button">
<img id="location" title="Standort zurücksetzen" src="standort.png" /> <img id="location" title="Standort zurücksetzen" src="standort.png" />
</div> </div>
<div id="map"></div> <div id="map"></div>
<div id="potree_render_area"></div> <div id="potree_render_area"></div>
<footer> <footer>&#169 Arne Zitting u. Hauke Kahrs</footer>
&#169 Arne Zitting u. Hauke Kahrs
</footer>
<div id="info-panel"> <div id="info-panel">
<div id="info-panel-inner"> <div id="info-panel-inner">
<button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button> <button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button>
<h3 id="info-panel-title">Info</h3> <h3 id="info-panel-title">Info</h3>
<img id="info-panel-image" src="" alt="Standortbild" style="display:none;" /> <img id="info-panel-image" src="" alt="Standortbild" style="display: none"/>
<div id="info-image-nav" style="display:none;"> <div id="info-image-nav" style="display: none">
<button id="info-img-prev">&#8592;</button> <button id="info-img-prev">&#8592;</button>
<span id="info-image-counter"></span> <span id="info-image-counter"></span>
<button id="info-img-next">&#8594;</button> <button id="info-img-next">&#8594;</button>
</div> </div>
<p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p> <p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p>
</div> </div>
</div> </div>
<div id="info-button-outer"> <div id="info-button-outer"></div>
</div>
</main> </main>
<script src="./libs/jquery/jquery-3.1.1.min.js"></script> <script src="./libs/jquery/jquery-3.1.1.min.js"></script>
<script src="./libs/other/BinaryHeap.js"></script> <script src="./libs/other/BinaryHeap.js"></script>
main.js
+495 -445
View File
File diff suppressed because it is too large Load Diff
public/info.json
+3 -3
View File
@@ -2,16 +2,16 @@
"first": { "first": {
"title": "Fläche im unteren Bereich", "title": "Fläche im unteren Bereich",
"text": "Dieser Bereich des Steinbruchs zeigt eine natürliche Oberfläche aus Obernkirchener Sandstein. Zwischen einzelnen Sandsteinblöcken haben sich Sträucher und andere Pflanzen angesiedelt. Der Sandstein entstand vor etwa 140 Millionen Jahren in einer küstennahen Landschaft der Unterkreide.", "text": "Dieser Bereich des Steinbruchs zeigt eine natürliche Oberfläche aus Obernkirchener Sandstein. Zwischen einzelnen Sandsteinblöcken haben sich Sträucher und andere Pflanzen angesiedelt. Der Sandstein entstand vor etwa 140 Millionen Jahren in einer küstennahen Landschaft der Unterkreide.",
"images": ["stand1_1.jpeg", "stand1_2.jpeg"] "images": ["/stand1_1.jpeg", "/stand1_2.jpeg"]
}, },
"second": { "second": {
"title": "Abbauwand", "title": "Abbauwand",
"text": "An dieser Felswand wird der Obernkirchener Sandstein abgebaut. Das Gestein ist für seine hohe Festigkeit und Witterungsbeständigkeit bekannt und wird seit Jahrhunderten als Bau- und Werkstein genutzt. Es findet sich unter anderem an zahlreichen historischen Gebäuden in Deutschland.", "text": "An dieser Felswand wird der Obernkirchener Sandstein abgebaut. Das Gestein ist für seine hohe Festigkeit und Witterungsbeständigkeit bekannt und wird seit Jahrhunderten als Bau- und Werkstein genutzt. Es findet sich unter anderem an zahlreichen historischen Gebäuden in Deutschland.",
"images": ["stand2_1.jpeg"] "images": ["/stand2_1.jpeg"]
}, },
"third": { "third": {
"title": "Dinosaurier-Spuren", "title": "Dinosaurier-Spuren",
"text": "Auf dieser öffentlich zugänglichen Fläche sind fossile Fußspuren von Dinosauriern erhalten geblieben. Die Spuren entstanden vor rund 140 Millionen Jahren in feuchtem Sand und wurden später durch weitere Sedimentschichten konserviert. Sie gehören zu den bekanntesten Fossilienfunden im Obernkirchener Sandstein.", "text": "Auf dieser öffentlich zugänglichen Fläche sind fossile Fußspuren von Dinosauriern erhalten geblieben. Die Spuren entstanden vor rund 140 Millionen Jahren in feuchtem Sand und wurden später durch weitere Sedimentschichten konserviert. Sie gehören zu den bekanntesten Fossilienfunden im Obernkirchener Sandstein.",
"images": ["stand3_1.jpeg", "stand3_2.jpeg"] "images": ["/stand3_1.jpeg", "/stand3_2.jpeg"]
} }
} }
style.css
+291 -282
View File
@@ -1,59 +1,60 @@
html, body { html,
body {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
body{ body {
margin:0; margin: 0;
overflow:hidden; overflow: hidden;
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
} }
#main{ #main {
width:100vw; width: 100vw;
height:100vh; height: 100vh;
position:relative; position: relative;
} }
#header{ #header {
position:absolute; position: absolute;
top:20px; top: 20px;
left:50%; left: 50%;
transform:translateX(-50%); transform: translateX(-50%);
z-index:30; z-index: 30;
padding:14px 28px; padding: 14px 28px;
border-radius: 20px; border-radius: 20px;
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(200, 200, 200, 0.221) 10%, rgba(200, 200, 200, 0.221) 10%,
rgba(79, 79, 79, 0.756) 60%, rgba(79, 79, 79, 0.756) 60%,
rgba(47, 47, 47, 0.864) 100% rgba(47, 47, 47, 0.864) 100%
), ),
rgba(24,24,27,0.78); rgba(24, 24, 27, 0.78);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
color:white; color: white;
font-size:24px; font-size: 24px;
font-weight:600; font-weight: 600;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.536); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.536);
} }
.logos{ .logos {
margin-top:20px; margin-top: 20px;
margin-left: 12px; margin-left: 12px;
opacity:0.8; opacity: 0.8;
} }
.logos img{ .logos img {
width:80px; width: 80px;
margin-right: 10px; margin-right: 10px;
} }
.logos img:hover{ .logos img:hover {
transform:translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
} }
#location-button { #location-button {
@@ -67,9 +68,11 @@ body{
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #f8f9fa; background-color: #f8f9fa;
border: none !important; border: none !important;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.1),
0 4px 6px rgba(0, 0, 0, 0.05);
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -78,28 +81,28 @@ body{
background-color: #f4f4f4; background-color: #f4f4f4;
} }
#location{ #location {
width:20px; width: 20px;
height:20px; height: 20px;
object-fit:contain; object-fit: contain;
margin-left: 1px; margin-left: 1px;
margin-top: 1px; margin-top: 1px;
cursor: pointer; cursor: pointer;
} }
#location:hover{ #location:hover {
transform:scale(1.05); transform: scale(1.05);
background:rgb(233, 232, 232); background: rgb(233, 232, 232);
} }
#location-button:hover{ #location-button:hover {
background:rgb(233, 232, 232); background: rgb(233, 232, 232);
} }
#sidebar { #sidebar {
position: absolute; position: absolute;
top: 48%; top: 48%;
transform:translateY(-50%); transform: translateY(-50%);
left: 20px; left: 20px;
width: 210px; width: 210px;
padding: 22px; padding: 22px;
@@ -107,13 +110,13 @@ body{
padding-top: 10px; padding-top: 10px;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.3); border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px; border-radius: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
z-index: 20; z-index: 20;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap:8px; gap: 8px;
} }
#main { #main {
@@ -126,9 +129,9 @@ body{
height: 100%; height: 100%;
} }
#potree_render_area{ #potree_render_area {
position:absolute; position: absolute;
top:0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -140,50 +143,49 @@ body{
background: transparent !important; background: transparent !important;
} }
select{ select {
appearance:none; appearance: none;
-webkit-appearance:none; -webkit-appearance: none;
-moz-appearance:none; -moz-appearance: none;
width:100%; width: 100%;
padding:10px 16px; padding: 10px 16px;
border:none; border: none;
border-radius:14px; border-radius: 14px;
background:rgba(255,255,255,0.92); background: rgba(255, 255, 255, 0.92);
font-size:14px; font-size: 14px;
font-weight:500; font-weight: 500;
color:#0f172a; color: #0f172a;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
cursor:pointer; cursor: pointer;
transition:0.2s; transition: 0.2s;
} }
.selectWrapper{ .selectWrapper {
position:relative; position: relative;
width:100%; width: 100%;
} }
.selectArrow{ .selectArrow {
position:absolute; position: absolute;
right:14px; right: 14px;
top:48%; top: 48%;
transform:translateY(-50%); transform: translateY(-50%);
pointer-events:none; pointer-events: none;
font-size:14px; font-size: 14px;
color:#000000; color: #000000;
} }
#disable{ #disable {
appearance:none; appearance: none;
-webkit-appearance:none; -webkit-appearance: none;
-moz-appearance:none; -moz-appearance: none;
width:100%; width: 100%;
padding:10px 16px; padding: 10px 16px;
border:none; border: none;
border-radius:14px; border-radius: 14px;
font-size:14px; font-size: 14px;
font-weight:500; font-weight: 500;
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(18, 77, 216, 0.92) 10%, rgba(18, 77, 216, 0.92) 10%,
@@ -191,16 +193,16 @@ select{
rgba(6, 45, 135, 0.92) 100% rgba(6, 45, 135, 0.92) 100%
), ),
rgba(6, 45, 135, 0.92); rgba(6, 45, 135, 0.92);
color: white; color: white;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
cursor:pointer; cursor: pointer;
transition:0.2s; transition: 0.2s;
margin-top: 8px; margin-top: 8px;
margin-bottom: 10px; margin-bottom: 10px;
} }
#disable.active-state { #disable.active-state {
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(18, 77, 216, 0.92) 10%, rgba(18, 77, 216, 0.92) 10%,
@@ -208,37 +210,39 @@ select{
rgba(6, 45, 135, 0.92) 100% rgba(6, 45, 135, 0.92) 100%
), ),
rgba(6, 45, 135, 0.92); rgba(6, 45, 135, 0.92);
color: white; color: white;
} }
#disable.inactive-state { #disable.inactive-state {
background: rgba(255,255,255,0.92); background: rgba(255, 255, 255, 0.92);
color: #0f172a; color: #0f172a;
} }
select:hover{ select:hover {
transform:translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
} }
select:focus{ select:focus {
outline:none; outline: none;
box-shadow:0 0 0 4px rgba(37,99,235,0.15), 0 8px 24px rgba(0,0,0,0.12); box-shadow:
0 0 0 4px rgba(37, 99, 235, 0.15),
0 8px 24px rgba(0, 0, 0, 0.12);
} }
#disable:hover{ #disable:hover {
transform:translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
} }
*{ * {
transition: transition:
background 0.2s, background 0.2s,
transform 0.01s, transform 0.01s,
opacity 0.2s; opacity 0.2s;
} }
footer{ footer {
z-index: 30; z-index: 30;
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
@@ -246,13 +250,13 @@ footer{
font-size: small; font-size: small;
} }
.sideBarText{ .sideBarText {
font-size:80%; font-size: 80%;
margin:0; margin: 0;
margin-bottom: -2px; margin-bottom: -2px;
} }
#pointSizeSlider{ #pointSizeSlider {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -260,7 +264,7 @@ margin-bottom: -2px;
margin-bottom: 8px; margin-bottom: 8px;
} }
input[type="range"]{ input[type="range"] {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 100%; width: 100%;
@@ -272,12 +276,12 @@ input[type="range"]{
outline: none; outline: none;
} }
input[type="range"]::-webkit-slider-thumb{ input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width:16px; width: 16px;
height:16px; height: 16px;
border-radius:50%; border-radius: 50%;
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(18, 77, 216, 0.92) 10%, rgba(18, 77, 216, 0.92) 10%,
@@ -285,106 +289,108 @@ input[type="range"]::-webkit-slider-thumb{
rgba(6, 45, 135, 0.92) 100% rgba(6, 45, 135, 0.92) 100%
), ),
rgba(6, 45, 135, 0.92); rgba(6, 45, 135, 0.92);
cursor:pointer; cursor: pointer;
} }
.slider-labels{ .slider-labels {
display:flex; display: flex;
justify-content:space-between; justify-content: space-between;
font-size:0.5rem; font-size: 0.5rem;
color:#868686; color: #868686;
margin-bottom:0px; margin-bottom: 0px;
margin-top: -5px; margin-top: -5px;
} }
#title{ #title {
z-index: 30; z-index: 30;
position: absolute; position: absolute;
top: 75px; top: 75px;
left: 50%; left: 50%;
transform:translateX(-50%); transform: translateX(-50%);
font-size: small; font-size: small;
color: #ffffff; color: #ffffff;
text-shadow: 1px 1.5px #00000059; text-shadow: 1px 1.5px #00000059;
} }
#coordinates{ #coordinates {
z-index: 30; z-index: 30;
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
left: 50%; left: 50%;
transform:translateX(-50%); transform: translateX(-50%);
font-size: smaller; font-size: smaller;
color: #000000cf; color: #000000cf;
border: none; border: none;
border-radius: 14px; border-radius: 14px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
padding:8px; padding: 8px;
border-radius: 15px; border-radius: 15px;
background-color: rgba(255, 255, 255, 0.751); background-color: rgba(255, 255, 255, 0.751);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.sideBarButtons{ .sideBarButtons {
font-family:monospace; font-family: monospace;
border:none; border: none;
border-radius:10px; border-radius: 10px;
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(200, 200, 200, 0.221) 10%, rgba(200, 200, 200, 0.221) 10%,
rgba(79, 79, 79, 0.756) 60%, rgba(79, 79, 79, 0.756) 60%,
rgba(47, 47, 47, 0.864) 100% rgba(47, 47, 47, 0.864) 100%
), ),
rgba(24,24,27,0.78); rgba(24, 24, 27, 0.78);
font-size:15px; font-size: 15px;
color:#ffffff; color: #ffffff;
box-shadow: 0 2px 10px rgba(0,0,0,0.08); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
cursor:pointer; cursor: pointer;
transition:0.2s; transition: 0.2s;
z-index: 30; z-index: 30;
} }
#closeSideBarButton{ #closeSideBarButton {
align-self: flex-end; align-self: flex-end;
right: 0%; right: 0%;
padding:5px 15px; padding: 5px 15px;
}
#openSideBarButton{
position: absolute;
left: 5px;
padding:5px 15px;
} }
.buttonRow{ #openSideBarButton {
position: absolute;
left: 5px;
padding: 5px 15px;
}
.buttonRow {
display: flex; display: flex;
width: 100%; width: 100%;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
overflow:hidden; overflow: hidden;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
margin-bottom: 10px; margin-bottom: 10px;
}
.qualityButtons, .colorButtons{
flex: 1;
margin: 0;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
border:none;
background:rgba(255,255,255,0.92);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
font-size:12px;
color:#0f172a;
padding:5px;
cursor:pointer;
transition:0.2s;
} }
.qualityButtons.active, .colorButtons.active{ .qualityButtons,
background: .colorButtons {
flex: 1;
margin: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
font-size: 12px;
color: #0f172a;
padding: 5px;
cursor: pointer;
transition: 0.2s;
}
.qualityButtons.active,
.colorButtons.active {
background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(18, 77, 216, 0.92) 10%, rgba(18, 77, 216, 0.92) 10%,
@@ -392,182 +398,185 @@ position: absolute;
rgba(6, 45, 135, 0.92) 100% rgba(6, 45, 135, 0.92) 100%
), ),
rgba(6, 45, 135, 0.92); rgba(6, 45, 135, 0.92);
color: #ffffff; color: #ffffff;
} }
#potree_render_area { #potree_render_area {
pointer-events: none; pointer-events: none;
} }
#info-button-outer { #info-button-outer {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 20px; right: 20px;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 30; z-index: 30;
} }
#rendererToggle { #rendererToggle {
width: 100%; width: 100%;
padding: 10px 16px; padding: 10px 16px;
border: none; border: none;
border-radius: 14px; border-radius: 14px;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: 0 5px 10px rgba(0,0,0,0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
transition: 0.2s; transition: 0.2s;
} }
#rendererToggle[data-active="deckgl"] { #rendererToggle[data-active="deckgl"] {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(18,77,216,0.92) 10%, rgba(18, 77, 216, 0.92) 10%,
rgba(13,61,175,0.92) 60%, rgba(13, 61, 175, 0.92) 60%,
rgba(6,45,135,0.92) 100%); rgba(6, 45, 135, 0.92) 100%
color: #ffffff; );
color: #ffffff;
} }
#rendererToggle[data-active="potree"] { #rendererToggle[data-active="potree"] {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(22,163,74,0.92) 10%, rgba(22, 163, 74, 0.92) 10%,
rgba(15,118,54,0.92) 60%, rgba(15, 118, 54, 0.92) 60%,
rgba(6,78,32,0.92) 100%); rgba(6, 78, 32, 0.92) 100%
color: #ffffff; );
color: #ffffff;
} }
#rendererToggle:hover { #rendererToggle:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
} }
#rendererIcon { #rendererIcon {
font-size: 16px; font-size: 16px;
} }
#openInfoPanel { #openInfoPanel {
margin-top: 12px; margin-top: 12px;
border: none; border: none;
border-radius: 14px; border-radius: 14px;
width: 100%; width: 100%;
padding: 10px 16px; padding: 10px 16px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
background: rgba(255,255,255,0.9); background: rgba(255, 255, 255, 0.9);
box-shadow: 0 5px 10px rgba(0,0,0,0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
color: #1e293b; color: #1e293b;
} }
#openInfoPanel:hover { #openInfoPanel:hover {
background: rgb(233,232,232); background: rgb(233, 232, 232);
transform: translateY(-1px); transform: translateY(-1px);
} }
#openInfoPanel img { #openInfoPanel img {
width: 16px; width: 16px;
height: 16px; height: 16px;
object-fit: contain; object-fit: contain;
} }
#info-panel { #info-panel {
display: none; display: none;
position: absolute; position: absolute;
top: 48%; top: 48%;
right: 20px; right: 20px;
transform: translateY(-50%); transform: translateY(-50%);
width: 340px; width: 340px;
padding: 18px 22px; padding: 18px 22px;
background: rgba(255,255,255,0.9); background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.3); border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px; border-radius: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
z-index: 20; z-index: 20;
display: none; display: none;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
} }
#info-panel.open { #info-panel.open {
display: flex; display: flex;
} }
#closeInfoPanel { #closeInfoPanel {
align-self: flex-start; align-self: flex-start;
padding: 5px 15px; padding: 5px 15px;
margin-bottom: 14px; margin-bottom: 14px;
} }
#info-panel-title { #info-panel-title {
margin: 0 0 14px 0; margin: 0 0 14px 0;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #0f172a; color: #0f172a;
} }
#info-panel-image { #info-panel-image {
width: 100%; width: 100%;
border-radius: 12px; border-radius: 12px;
object-fit: cover; object-fit: cover;
max-height: 220px; max-height: 220px;
margin-bottom: 14px; margin-bottom: 14px;
} }
#info-image-nav { #info-image-nav {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
margin-bottom: 14px; margin-bottom: 14px;
} }
#info-panel-text { #info-panel-text {
margin: 0; margin: 0;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
color: #1e293b; color: #1e293b;
} }
#info-img-prev, #info-img-next { #info-img-prev,
border: none; #info-img-next {
background: rgba(255,255,255,0.9); border: none;
border-radius: 8px; background: rgba(255, 255, 255, 0.9);
padding: 4px 10px; border-radius: 8px;
cursor: pointer; padding: 4px 10px;
font-size: 16px; cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.15); font-size: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
} }
#info-img-prev:hover, #info-img-next:hover { #info-img-prev:hover,
background: rgb(233,232,232); #info-img-next:hover {
background: rgb(233, 232, 232);
} }
#info-image-counter { #info-image-counter {
font-size: 12px; font-size: 12px;
color: #555; color: #555;
} }
.lidar-control-icon { .lidar-control-icon {
display: none !important; display: none !important;
} }
.maplibregl-ctrl:has(.lidar-control-icon), .maplibregl-ctrl:has(.lidar-control-icon),
.maplibregl-ctrl-group:has(.lidar-control-icon), .maplibregl-ctrl-group:has(.lidar-control-icon),
button:has(.lidar-control-icon) { button:has(.lidar-control-icon) {
display: none !important; display: none !important;
visibility: hidden !important; visibility: hidden !important;
width: 0px !important; width: 0px !important;
height: 0px !important; height: 0px !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
border: none !important; border: none !important;
} }