From 985d4a424fb4c88435c7bcf0bb15383a825555f9 Mon Sep 17 00:00:00 2001
From: mina <mina.zarkesh@polizei.niedersachsen.de>
Date: Wed, 7 May 2025 18:09:47 +0200
Subject: [PATCH 1/4] Tages-Update

---
 package-lock.json                             |  40 ++--
 .../view/[vorgang]/[tatort]/+page.svelte      | 190 +++++++++++++++++-
 2 files changed, 213 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d2eafdb..dc9cd61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1454,9 +1454,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.20.7",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.7.tgz",
-			"integrity": "sha512-dVbLMubpJJSLI4OYB+yWYNHGAhgc2bVevWuBjDj8jFUXIJOAnLwYP3vsmtcgoxNGUXoq0rHS5f7MFCsryb6nzg==",
+			"version": "2.20.8",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.20.8.tgz",
+			"integrity": "sha512-ep9qTxL7WALhfm0kFecL3VHeuNew8IccbYGqv5TqL/KSqWRKzEgDG8blNlIu1CkLTTua/kHjI+f5T8eCmWIxKw==",
 			"dependencies": {
 				"@types/cookie": "^0.6.0",
 				"cookie": "^0.6.0",
@@ -3242,10 +3242,9 @@
 			}
 		},
 		"node_modules/fdir": {
-			"version": "6.4.3",
-			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
-			"integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
-			"license": "MIT",
+			"version": "6.4.4",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
+			"integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
 			"peerDependencies": {
 				"picomatch": "^3 || ^4"
 			},
@@ -5959,6 +5958,21 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/tinyglobby": {
+			"version": "0.2.13",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
+			"integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
+			"dependencies": {
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
+			}
+		},
 		"node_modules/tinypool": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz",
@@ -6227,14 +6241,16 @@
 			"license": "MIT"
 		},
 		"node_modules/vite": {
-			"version": "6.2.6",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.6.tgz",
-			"integrity": "sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==",
-			"license": "MIT",
+			"version": "6.3.5",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+			"integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
 			"dependencies": {
 				"esbuild": "^0.25.0",
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2",
 				"postcss": "^8.5.3",
-				"rollup": "^4.30.1"
+				"rollup": "^4.34.9",
+				"tinyglobby": "^0.2.13"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
diff --git a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
index a80e599..56d07ad 100644
--- a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
+++ b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
@@ -3,22 +3,53 @@
 		height: 100%;
 		width: 100%;
 	}
+
+	.vertical-slider {
+    writing-mode: bt-lr; /* Schreibt von unten nach oben (Vertikale Darstellung) */
+    transform: rotate(270deg); /* Slider um 270° drehen */
+    height: 200px;
+  }
+
+
 </style>
 
 <script>
 	import { preloadCode } from '$app/navigation';
 	import Panel from '$lib/components/ui/Panel.svelte';
 	import { onMount } from 'svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import autoprefixer from 'autoprefixer';
+	
 	export let data;
 
 	onMount(() => {
 		import('@google/model-viewer');
+		console.log(modelViewer.getAttribute('camera-orbit'), modelViewer.getAttribute('camera-target'), modelViewer.getAttribute('rotation'))
 	});
 
 	let progress = 0;
 	let hideProgressScreen = false;
+
+	let cameraOrbit = '0deg 0deg 0m';
+	let cameraTarget ="0m 0m 0m";
+	let fieldOfView = '0deg';
+
+	let cameraAzimuth = 0;
+	let cameraPolar = 0;
+	let cameraZoom = 0;
+	let xRotation=0;
+	let yRotation=0;
+	let zRotation=0;
+
+	/**
+	 * @type {any}
+	 */
+	let modelViewer;
+
+
 	$: style = `width: ${progress}%`;
 
+	// @ts-ignore
 	function onProgress({ detail }) {
 		progress = Math.ceil(detail.totalProgress * 100.0);
 		if (progress == 100) {
@@ -27,20 +58,169 @@
 			}, 250);
 		} else hideProgressScreen = false;
 	}
+
+
+	function onResetView() {
+		//  cameraOrbit = '0deg 0deg 50m';
+		//  cameraTarget ="0m 0m 0m"
+		console.log("show cameraOrbit:", modelViewer.getAttribute('camera-orbit'), modelViewer.cameraOrbit, modelViewer.getAttribute('rotation'))
+		console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('orientation'))
+
+		//  modelViewer.cameraOrbit = cameraOrbit;
+		//  modelViewer.cameraTarget = cameraTarget;
+
+	}
+
+	/**
+	 * @param {string} newOrbit
+	 */
+	function updateCameraOrbit(newOrbit) {
+		 
+	   cameraTarget ="0m 0m 0m"
+		console.log("update X",modelViewer.cameraOrbit,"target:", modelViewer.cameraTarget, newOrbit)
+		  modelViewer.cameraOrbit = newOrbit;
+		  modelViewer.cameraTarget = cameraTarget;
+
+	}
+
+	function slideCameraOrbit(){
+		modelViewer.cameraOrbit =`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}m`;
+	}
+
+	function slideRotation(){
+		modelViewer.orientation = `${xRotation}deg ${yRotation}deg ${zRotation}deg`
+	}
+
+	const disableMouseWheelZoom = (/** @type {{ preventDefault: () => void; }} */ event) => {
+    event.preventDefault(); // Blockiert das Mausrad-Ereignis
+  };
+
 </script>
 
+<!-- 		<Button
+			on:click={toggleShowOptions}
+			{disabled}
+			type="button"
+			variant="white"
+			fullWidth
+			align="left"
+			class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+		> -->
+
 <div class="h-full w-full bg-neutral-100 p-4">
-	<model-viewer
-		src={data.url}
-		camera-controls
+	<div class="bg-redx-500 p-4 flex">
+	<div class="flex flex-col">
+			<!--3 Buttons-->
+			<div>
+				<Button
+				on:click={()=>{updateCameraOrbit('0deg 180deg 0m')}}
+				type="button"
+				variant="white"
+				
+				align="left"
+				class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+				>
+				Draufsicht
+				</Button>
+				<Button
+				on:click={()=>{onResetView()}}
+				type="button"
+				variant="white"
+				
+				align="left"
+				class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+				>
+				Camera-Orbit Attribute
+				</Button>
+	
+				<Button
+				
+				on:click={()=>{updateCameraOrbit('0deg 90deg 0m')}}
+	
+				type="button"
+				variant="white"
+				
+				align="left"
+				class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+				>
+				Frontansicht
+				</Button>
+			
+			</div>
+			
+			<!--Horizontal-->
+			<div>
+						<!-- svelte-ignore a11y_label_has_associated_control -->
+						<label>Horizontal drehen (Azimut):</label>
+						<input 
+						type="range" 
+						min="0" max="360" 
+						bind:value={cameraAzimuth} 
+						 />
+						 <!-- on:input={slideCameraOrbit} -->
+			</div>
+					<!--Vertikal-->
+		<div class="">
+			<label class="  mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
+			<input id="polarSlider"  type="range" min=0 max=90 bind:value={cameraPolar}  /> 
+			<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+</div>
+			<!--Zoom/Distanz-->
+			<div>
+				<label for="cZoom">Zoomen</label>
+				<input id="cZoom" type="range"
+				min="0"
+				max="10"
+			  step="0.1"
+				 bind:value={cameraZoom} 
+				 on:input={slideCameraOrbit}/>
+			</div>
+	</div>
+		<!--Rotationen-->
+		<div class="flex  mt-2 ml-2">
+			
+		<div class="">
+			<label class="" for="polarSlider">Rotation X:</label>
+			<input id="polarSlider"  type="range" min=0 max=360 bind:value={xRotation}  /> 
+			<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+</div>
+<div class="">
+	<label class="" for="polarSlider">Rotation Y:</label>
+	<input id="polarSlider"  type="range" min=0 max=360 bind:value={yRotation}  /> 
+	<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+</div>
+<div class="">
+	<label class="" for="polarSlider">Rotation Z:</label>
+	<input id="polarSlider"  type="range" min=0 max=360 bind:value={zRotation}  /> 
+	<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+</div>
+		</div>
+		
+			</div>
+			<!-- field-of-view="auto" -->
+		<!--
+				camera-controls
+		model-rotation="0rad 0rad 0rad"
+		
+		camera-target="0m 0m 10m"
+		
 		field-of-view="auto"
 		max-field-of-view="10deg"
-		min-field-of-view="0.1deg"
+		min-field-of-view="0.1deg"-->
+	<model-viewer
+		src={data.url}
+		bind:this={modelViewer}
+		shadow-intensity="50"
+	
+	orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
+		camera-target="0m 0m 0m"
+		camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}m`}
 		on:progress={onProgress}
 	>
+		<!--Loading-->
 		<div
 			slot="progress-bar"
-			class="flex items-center justify-center h-full w-full transition-all delay-250"
+			class="flex items-center justify-center h-5/6 w-full transition-all delay-250"
 			class:opacity-0={hideProgressScreen}
 			class:hidden={hideProgressScreen}
 		>

From f3850649c73c2e4974c160689910d30a52ad1f02 Mon Sep 17 00:00:00 2001
From: mina <mina.zarkesh@polizei.niedersachsen.de>
Date: Thu, 8 May 2025 15:35:24 +0200
Subject: [PATCH 2/4] zwischenspeichern

---
 .../view/[vorgang]/[tatort]/+page.svelte      | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
index 56d07ad..0f5ed9d 100644
--- a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
+++ b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
@@ -63,8 +63,8 @@
 	function onResetView() {
 		//  cameraOrbit = '0deg 0deg 50m';
 		//  cameraTarget ="0m 0m 0m"
-		console.log("show cameraOrbit:", modelViewer.getAttribute('camera-orbit'), modelViewer.cameraOrbit, modelViewer.getAttribute('rotation'))
-		console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('orientation'))
+		console.log("show cameraOrbit:", modelViewer.getCameraOrbit(), modelViewer.cameraOrbit, modelViewer.getDimensions())
+		console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('rotation'))
 
 		//  modelViewer.cameraOrbit = cameraOrbit;
 		//  modelViewer.cameraTarget = cameraTarget;
@@ -76,7 +76,7 @@
 	 */
 	function updateCameraOrbit(newOrbit) {
 		 
-	   cameraTarget ="0m 0m 0m"
+	//    cameraTarget ="0m 0m 0m"
 		console.log("update X",modelViewer.cameraOrbit,"target:", modelViewer.cameraTarget, newOrbit)
 		  modelViewer.cameraOrbit = newOrbit;
 		  modelViewer.cameraTarget = cameraTarget;
@@ -84,7 +84,7 @@
 	}
 
 	function slideCameraOrbit(){
-		modelViewer.cameraOrbit =`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}m`;
+		modelViewer.cameraOrbit =`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`;
 	}
 
 	function slideRotation(){
@@ -113,7 +113,7 @@
 			<!--3 Buttons-->
 			<div>
 				<Button
-				on:click={()=>{updateCameraOrbit('0deg 180deg 0m')}}
+				on:click={()=>{updateCameraOrbit('0deg 180deg 100%')}}
 				type="button"
 				variant="white"
 				
@@ -135,7 +135,7 @@
 	
 				<Button
 				
-				on:click={()=>{updateCameraOrbit('0deg 90deg 0m')}}
+				on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}}
 	
 				type="button"
 				variant="white"
@@ -170,8 +170,8 @@
 				<label for="cZoom">Zoomen</label>
 				<input id="cZoom" type="range"
 				min="0"
-				max="10"
-			  step="0.1"
+				max="120"
+		
 				 bind:value={cameraZoom} 
 				 on:input={slideCameraOrbit}/>
 			</div>
@@ -211,10 +211,11 @@
 		src={data.url}
 		bind:this={modelViewer}
 		shadow-intensity="50"
-	
+	touch-action="pan-x"
+	camera-controls
 	orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
 		camera-target="0m 0m 0m"
-		camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}m`}
+		camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}`}
 		on:progress={onProgress}
 	>
 		<!--Loading-->

From 8d71633f501273bbbe20d588c0543002667d8a36 Mon Sep 17 00:00:00 2001
From: mina <mina.zarkesh@polizei.niedersachsen.de>
Date: Mon, 12 May 2025 16:22:27 +0200
Subject: [PATCH 3/4] Update Buttons in model viewer

---
 .../view/[vorgang]/[tatort]/+page.svelte      | 207 ++++++++++--------
 1 file changed, 111 insertions(+), 96 deletions(-)

diff --git a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
index 0f5ed9d..9cb348c 100644
--- a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
+++ b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
@@ -10,6 +10,9 @@
     height: 200px;
   }
 
+  .model{
+		height: calc(100%-84px)
+	}
 
 </style>
 
@@ -61,13 +64,23 @@
 
 
 	function onResetView() {
-		//  cameraOrbit = '0deg 0deg 50m';
-		//  cameraTarget ="0m 0m 0m"
+		  cameraOrbit = '0deg 0deg 0m';
+		  cameraTarget ="0m 0m 0m"
+
 		console.log("show cameraOrbit:", modelViewer.getCameraOrbit(), modelViewer.cameraOrbit, modelViewer.getDimensions())
 		console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('rotation'))
 
-		//  modelViewer.cameraOrbit = cameraOrbit;
-		//  modelViewer.cameraTarget = cameraTarget;
+		  modelViewer.cameraOrbit = cameraOrbit;
+		  modelViewer.cameraTarget = cameraTarget;
+		  xRotation = yRotation = zRotation = 0;
+		cameraOrbit = '0deg 0deg 0%';
+	 cameraTarget ="0m 0m 0m";
+	fieldOfView = '0deg';
+
+	 cameraAzimuth = 0;
+	 cameraPolar = 0;
+	 cameraZoom = 0;
+	
 
 	}
 
@@ -107,96 +120,8 @@
 			class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
 		> -->
 
-<div class="h-full w-full bg-neutral-100 p-4">
-	<div class="bg-redx-500 p-4 flex">
-	<div class="flex flex-col">
-			<!--3 Buttons-->
-			<div>
-				<Button
-				on:click={()=>{updateCameraOrbit('0deg 180deg 100%')}}
-				type="button"
-				variant="white"
-				
-				align="left"
-				class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
-				>
-				Draufsicht
-				</Button>
-				<Button
-				on:click={()=>{onResetView()}}
-				type="button"
-				variant="white"
-				
-				align="left"
-				class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
-				>
-				Camera-Orbit Attribute
-				</Button>
-	
-				<Button
-				
-				on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}}
-	
-				type="button"
-				variant="white"
-				
-				align="left"
-				class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
-				>
-				Frontansicht
-				</Button>
-			
-			</div>
-			
-			<!--Horizontal-->
-			<div>
-						<!-- svelte-ignore a11y_label_has_associated_control -->
-						<label>Horizontal drehen (Azimut):</label>
-						<input 
-						type="range" 
-						min="0" max="360" 
-						bind:value={cameraAzimuth} 
-						 />
-						 <!-- on:input={slideCameraOrbit} -->
-			</div>
-					<!--Vertikal-->
-		<div class="">
-			<label class="  mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
-			<input id="polarSlider"  type="range" min=0 max=90 bind:value={cameraPolar}  /> 
-			<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
-</div>
-			<!--Zoom/Distanz-->
-			<div>
-				<label for="cZoom">Zoomen</label>
-				<input id="cZoom" type="range"
-				min="0"
-				max="120"
-		
-				 bind:value={cameraZoom} 
-				 on:input={slideCameraOrbit}/>
-			</div>
-	</div>
-		<!--Rotationen-->
-		<div class="flex  mt-2 ml-2">
-			
-		<div class="">
-			<label class="" for="polarSlider">Rotation X:</label>
-			<input id="polarSlider"  type="range" min=0 max=360 bind:value={xRotation}  /> 
-			<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
-</div>
-<div class="">
-	<label class="" for="polarSlider">Rotation Y:</label>
-	<input id="polarSlider"  type="range" min=0 max=360 bind:value={yRotation}  /> 
-	<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
-</div>
-<div class="">
-	<label class="" for="polarSlider">Rotation Z:</label>
-	<input id="polarSlider"  type="range" min=0 max=360 bind:value={zRotation}  /> 
-	<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
-</div>
-		</div>
-		
-			</div>
+<div class="h-full model w-full bg-neutral-200  p-4">
+
 			<!-- field-of-view="auto" -->
 		<!--
 				camera-controls
@@ -210,14 +135,104 @@
 	<model-viewer
 		src={data.url}
 		bind:this={modelViewer}
-		shadow-intensity="50"
-	touch-action="pan-x"
+	touch-action="pan-y"
+	field-of-view="auto"
 	camera-controls
 	orientation={`${xRotation}deg ${yRotation}deg ${zRotation}deg`}
 		camera-target="0m 0m 0m"
 		camera-orbit = {`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}`}
 		on:progress={onProgress}
 	>
+<!--Buttons zum Steuern-->
+	<div class="bg-redx-500 p-4 flex z-10">
+		<div class="flex flex-col">
+				<!--3 Buttons-->
+				<div>
+					<Button
+					on:click={()=>{updateCameraOrbit('0deg 0deg 0%')}}
+					type="button"
+					variant="white"
+					
+					align="left"
+					class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+					>
+					Draufsicht
+					</Button>
+					<Button
+					on:click={()=>{onResetView()}}
+					type="button"
+					variant="white"
+					
+					align="left"
+					class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+					>
+					Werte zurücksetzen
+					</Button>
+		
+					<Button
+					
+					on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}}
+		
+					type="button"
+					variant="white"
+					
+					align="left"
+					class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+					>
+					Frontansicht
+					</Button>
+				
+				</div>
+				
+				<!--Horizontal-->
+				<div>
+							<!-- svelte-ignore a11y_label_has_associated_control -->
+							<label>Horizontal drehen (Azimut):</label>
+							<input 
+							type="range" 
+							min="0" max="360" 
+							bind:value={cameraAzimuth} 
+							 />
+							 <!-- on:input={slideCameraOrbit} -->
+				</div>
+						<!--Vertikal-->
+			<div class="">
+				<label class="  mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
+				<input id="polarSlider"  type="range" min=0 max=90 bind:value={cameraPolar}  /> 
+				<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+	</div>
+				<!--Zoom/Distanz-->
+				<div>
+					<label for="cZoom">Zoomen</label>
+					<input id="cZoom" type="range"
+					min="0"
+					max="120"
+			
+					 bind:value={cameraZoom} 
+					 on:input={slideCameraOrbit}/>
+				</div>
+		</div>
+			<!--Rotationen-->
+			<div class="flex  mt-2 ml-2">
+				
+			<div class="">
+				<label class="" for="polarSlider">Rotation X:</label>
+				<input id="polarSlider"  type="range" min=0 max=360 bind:value={xRotation}  /> 
+				<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+	</div>
+	<div class="">
+		<label class="" for="polarSlider">Rotation Y:</label>
+		<input id="polarSlider"  type="range" min=0 max=360 bind:value={yRotation}  /> 
+		<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+	</div>
+	<div class="">
+		<label class="" for="polarSlider">Rotation Z:</label>
+		<input id="polarSlider"  type="range" min=0 max=360 bind:value={zRotation}  /> 
+		<!-- on:input={slideCameraOrbit} class="vertical-slider"-->
+	</div>
+			</div>
+			
+				</div>
 		<!--Loading-->
 		<div
 			slot="progress-bar"

From 9519b0fdd1e854b162a8efee53fa8653f442828e Mon Sep 17 00:00:00 2001
From: mina <mina.zarkesh@polizei.niedersachsen.de>
Date: Wed, 14 May 2025 17:08:30 +0200
Subject: [PATCH 4/4] update des Tages CameraSteuerung

---
 .../(angemeldet)/view/[vorgang]/[tatort]/+page.svelte      | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
index 9cb348c..e254045 100644
--- a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
+++ b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
@@ -33,7 +33,7 @@
 	let progress = 0;
 	let hideProgressScreen = false;
 
-	let cameraOrbit = '0deg 0deg 0m';
+	let cameraOrbit = '0deg 0deg 0%';
 	let cameraTarget ="0m 0m 0m";
 	let fieldOfView = '0deg';
 
@@ -64,8 +64,7 @@
 
 
 	function onResetView() {
-		  cameraOrbit = '0deg 0deg 0m';
-		  cameraTarget ="0m 0m 0m"
+		  
 
 		console.log("show cameraOrbit:", modelViewer.getCameraOrbit(), modelViewer.cameraOrbit, modelViewer.getDimensions())
 		console.log("Camera-orbit: ",modelViewer.getAttribute('camera-orbit'), "camera-target: ",modelViewer.getAttribute('camera-target'), "object-rotation: ", modelViewer.getAttribute('rotation'))
@@ -73,7 +72,7 @@
 		  modelViewer.cameraOrbit = cameraOrbit;
 		  modelViewer.cameraTarget = cameraTarget;
 		  xRotation = yRotation = zRotation = 0;
-		cameraOrbit = '0deg 0deg 0%';
+		cameraOrbit = '0deg 0deg 0m';
 	 cameraTarget ="0m 0m 0m";
 	fieldOfView = '0deg';