innohub/tatort
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: innohub:a7c8bf91d9b2576c4c8467353655f7052bfee747
Branches Tags
innohub:main innohub:development innohub:f117_remaining_test_todos
innohub:archive/f03_remote innohub:archive/f03_temp_Chico-lokal
..
compare: innohub:9058ea38e2885aefe57d7af3760f395fa0efc7b1
Branches Tags
innohub:main innohub:development innohub:f117_remaining_test_todos
innohub:archive/f03_remote innohub:archive/f03_temp_Chico-lokal

5 Commits
a7c8bf91d9 ... 9058ea38e2

Author SHA1 Message Date
mina
9058ea38e2 Merge branch 'CameraSteuerung' into development 2025-05-14 17:14:38 +02:00
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
2 changed files with 229 additions and 18 deletions
Expand all files Collapse all files

40
package-lock.json generated
View File

@@ -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"

207
src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
View File

@@ -3,22 +3,56 @@
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;
}
.model{
height: calc(100%-84px)
}
</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 0%';
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 +61,181 @@
}, 250);
} else hideProgressScreen = false;
}
function onResetView() {
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;
}
/**
* @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}%`;
}
function slideRotation(){
modelViewer.orientation = `${xRotation}deg ${yRotation}deg ${zRotation}deg`
}
const disableMouseWheelZoom = (/** @type {{ preventDefault: () => void; }} */ event) => {
event.preventDefault(); // Blockiert das Mausrad-Ereignis
};
</script>
<div class="h-full w-full bg-neutral-100 p-4">
<model-viewer
src={data.url}
camera-controls
<!-- <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 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"
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 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"
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}
>