update des Tages CameraSteuerung

Update Buttons in model viewer
zwischenspeichern
2025-05-14 17:08:30 +02:00 · 2025-05-12 16:22:27 +02:00 · 2025-05-08 15:35:24 +02:00 · 2025-05-07 18:09:47 +02:00 · 2025-04-17 12:05:15 +02:00 · 2025-04-17 09:03:48 +02:00
4 changed files with 184 additions and 108 deletions
--- a/2
+++ b/2
@@ -12,6 +12,6 @@ RUN npm run build
 FROM node:22-alpine3.20
 COPY --from=build /app .
 ENV HOST=0.0.0.0
-EXPOSE 4173
+EXPOSE 3000
 CMD ["sh", "-c", "ORIGIN=https://tatort.innovation-hub-niedersachsen.de node build/index.js"]

--- 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"
--- a/src/routes/(angemeldet)/upload/+page.server.js
+++ b/src/routes/(angemeldet)/upload/+page.server.js
@@ -4,7 +4,7 @@ import { createReadStream } from 'fs';
 /** import Minio from 'minio'; */
 import { Readable } from 'stream';
 /** const MINIO_ACCESS_KEY = 'tMhLrfog47lMm0HZ'; */
-/** import { client } from '$lib/minio'; */
+import { client } from '$lib/minio';
 import { fail } from '@sveltejs/kit';

 function isRequiredFieldValid(value) {
--- a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
+++ b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
@@ -4,13 +4,16 @@
 		width: 100%;
 	}

-	
 	.vertical-slider {
    writing-mode: bt-lr; /* Schreibt von unten nach oben (Vertikale Darstellung) */
    transform: rotate(270deg); /* Slider um 270° drehen */
    height: 200px;
  }

+  .model{
+		height: calc(100%-84px)
+	}
+
 </style>

 <script>
@@ -19,33 +22,37 @@
 	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)
+		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 100m";
+	let cameraOrbit = '0deg 0deg 0%';
+	let cameraTarget ="0m 0m 0m";
 	let fieldOfView = '0deg';

 	let cameraAzimuth = 0;
-	let cameraPolar = 75;
-	let cameraZoom = 3
+	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) {
@@ -55,12 +62,24 @@
 		} else hideProgressScreen = false;
 	}

+
 	function onResetView() {
-		 cameraOrbit = '0deg 0deg 5m';
-		 cameraTarget ="0m 0m 0m"
-		console.log("X",modelViewer.cameraOrbit, cameraOrbit, cameraTarget)
+		  
+
+		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;
+		  xRotation = yRotation = zRotation = 0;
+		cameraOrbit = '0deg 0deg 0m';
+	 cameraTarget ="0m 0m 0m";
+	fieldOfView = '0deg';
+
+	 cameraAzimuth = 0;
+	 cameraPolar = 0;
+	 cameraZoom = 0;
+	

 	}

@@ -68,23 +87,27 @@
 	 * @param {string} newOrbit
 	 */
 	function updateCameraOrbit(newOrbit) {
-		 cameraOrbit = newOrbit;
-		 cameraTarget ="0m 0m 0m"
-		console.log("X",modelViewer.cameraOrbit, cameraOrbit, cameraTarget)
-		 modelViewer.cameraOrbit = cameraOrbit;
+		 
+	//    cameraTarget ="0m 0m 0m"
+		console.log("update X",modelViewer.cameraOrbit,"target:", modelViewer.cameraTarget, newOrbit)
+		  modelViewer.cameraOrbit = newOrbit;
 		  modelViewer.cameraTarget = cameraTarget;

 	}

-	const slideCameraOrbit = ()=>{
-		modelViewer.cameraOrbit = `${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}m`;
+	function slideCameraOrbit(){
+		modelViewer.cameraOrbit =`${cameraAzimuth}deg ${cameraPolar}deg ${cameraZoom}%`;
 	}

-	const disableMouseWheelZoom = (event) => {
+	function slideRotation(){
+		modelViewer.orientation = `${xRotation}deg ${yRotation}deg ${zRotation}deg`
+	}
+
+	const disableMouseWheelZoom = (/** @type {{ preventDefault: () => void; }} */ event) => {
    event.preventDefault(); // Blockiert das Mausrad-Ereignis
  };
-</script>

+</script>

 <!-- 		<Button
 			on:click={toggleShowOptions}
@@ -95,11 +118,37 @@
 			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">
-	<div class="bg-redx-500 p-4">
+
+<div class="h-full model w-full bg-neutral-200  p-4">
+
+			<!-- 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"-->
+	<model-viewer
+		src={data.url}
+		bind:this={modelViewer}
+	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 0m')}}
+					on:click={()=>{updateCameraOrbit('0deg 0deg 0%')}}
 					type="button"
 					variant="white"
 					
@@ -109,17 +158,20 @@
 					Draufsicht
 					</Button>
 					<Button
-	on:click={()=>{updateCameraOrbit('0deg 75deg 3m')}}
+					on:click={()=>{onResetView()}}
 					type="button"
 					variant="white"
 					
 					align="left"
 					class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
 					>
-	Zurücksetzen
+					Werte zurücksetzen
 					</Button>
+		
 					<Button
-	on:click={()=>{updateCameraOrbit('0deg 90deg 5m')}}
+					
+					on:click={()=>{updateCameraOrbit('0deg 90deg 0%')}}
+		
 					type="button"
 					variant="white"
 					
@@ -133,45 +185,53 @@
 				
 				<!--Horizontal-->
 				<div>
+							<!-- svelte-ignore a11y_label_has_associated_control -->
 							<label>Horizontal drehen (Azimut):</label>
 							<input 
 							type="range" 
-			min="-180" max="180" 
+							min="0" max="360" 
 							bind:value={cameraAzimuth} 
-			on:input={slideCameraOrbit} />
+							 />
+							 <!-- 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="1"
-    max="10"
+					min="0"
+					max="120"
 			
 					 bind:value={cameraZoom} 
 					 on:input={slideCameraOrbit}/>
 				</div>
+		</div>
+			<!--Rotationen-->
+			<div class="flex  mt-2 ml-2">
 				
-<!--Vertikal-->
-<div class="flex flex-col items-center mt-2">
-			<label class="text-lg font-bold mb-2" for="polarSlider">Vertikal drehen (Polar):</label>
-			<input id="polarSlider" class="vertical-slider" type="range" min=0 max=120 bind:value={cameraPolar} on:input={slideCameraOrbit} />
+			<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" -->
-	<model-viewer
-		src={data.url}
-		camera-controls
-		model-rotation="0rad 0rad 0rad"
-		bind:this={modelViewer}
-		camera-target="0m 0m 0m"
-		camera-orbit = {cameraOrbit}
-		
-		max-field-of-view="10deg"
-		min-field-of-view="0.1deg"
-		on:progress={onProgress}
-	>
 		<!--Loading-->
 		<div
 			slot="progress-bar"
Author	SHA1	Message	Date
mina	9519b0fdd1	update des Tages CameraSteuerung	2025-05-14 17:08:30 +02:00
mina	8d71633f50	Update Buttons in model viewer	2025-05-12 16:22:27 +02:00
mina	f3850649c7	zwischenspeichern	2025-05-08 15:35:24 +02:00
mina	985d4a424f	Tages-Update	2025-05-07 18:09:47 +02:00
titver968	7cd19ceed8	Dockerfile port 3000	2025-04-17 12:05:15 +02:00
titver968	14b1e12e65	minio client beim upload definiert	2025-04-17 09:03:48 +02:00
mina	e72ad77866	reset branch	2025-04-16 16:46:28 +02:00