From b9cd2a0622b2017a13f37170af62248372dd6ee8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Baumg=C3=A4rtner?= <mail@felixbaumgaertner.de>
Date: Tue, 16 Jan 2024 08:55:19 +0100
Subject: [PATCH] added second render to aframe

---
 src/components/Map.svelte | 82 ++++++++++++++++++++++++++++-----------
 1 file changed, 60 insertions(+), 22 deletions(-)

diff --git a/src/components/Map.svelte b/src/components/Map.svelte
index 87bc5a9..6491f11 100644
--- a/src/components/Map.svelte
+++ b/src/components/Map.svelte
@@ -1,19 +1,43 @@
 <script>
+	import { page } from '$app/stores';
+
+	var canvasVisible = false;
+	$: $page.url.pathname == '/control' ? canvasVisible = true : canvasVisible = false;
+
+	var frontalView = true;
+	function setFrontalView(bool) {
+		frontalView = bool;
+	}
 </script>
 
 <svelte:head>
 	<script>
-		AFRAME.registerComponent("foo", {
-				init: function() {
-				this.canvas = document.querySelector("#cam");
-				this.ctx = this.canvas.getContext("2d");
-				this.secondaryCam = document.querySelector("#secondarycam").components.camera.camera;
+		AFRAME.registerComponent("additional-cams", {
+			init: function() {
+				this.frontalCanvas = document.querySelector("#frontal-canvas");
+				this.frontalCtx = this.frontalCanvas.getContext("2d");
+				this.frontalCam = document.querySelector("#frontal-cam").components.camera.camera;
+
+				this.topCanvas = document.querySelector("#top-canvas");
+				this.topCtx = this.topCanvas.getContext("2d");
+				this.topCam = document.querySelector("#top-cam").components.camera.camera;
 			},
 			tick: function() {
-				if (!this.secondaryCam) return;
-				
-				this.el.renderer.render(this.el.sceneEl.object3D, this.secondaryCam);
-				this.ctx.drawImage(this.el.renderer.domElement, 0, 0, 480, 270);
+				if (!this.frontalCam && !this.topCam) return;
+
+				if (this.frontalCanvas.parentElement.classList.contains('hidden') == false) {
+					this.el.renderer.render(this.el.sceneEl.object3D, this.frontalCam);
+					this.frontalCtx.drawImage(this.el.renderer.domElement, 0, 0, 480, 270);
+				} else {
+					// console.error('Canvas not found or not supported');
+				}
+
+				if (this.topCanvas.parentElement.classList.contains('hidden') == false) {
+					this.el.renderer.render(this.el.sceneEl.object3D, this.topCam);
+					this.topCtx.drawImage(this.el.renderer.domElement, 0, 0, 270, 480);
+				} else {
+					// console.error('Canvas not found or not supported');
+				}
 			}
 		});
 
@@ -227,15 +251,16 @@
 	</script>
 </svelte:head>
 
-<canvas id="cam" width="480" height="270"></canvas>
-<div id="aframe-wrapper">
-	<a-scene embedded background="color: #FAFAFA" foo>
+<canvas id="frontal-canvas" class="w-full {canvasVisible == true && frontalView == true ? "block" : "hidden"}" width="480" height="270"></canvas>
+<canvas id="top-canvas" class="w-full {canvasVisible == true && frontalView == false ? "block" : "hidden"}" width="270" height="480"></canvas>
+<div id="aframe-wrapper" class="{canvasVisible == false ? "block" : "hidden"}" allowfullscreen="no">
+	<a-scene embedded background="color: #FAFAFA" xr-mode-ui="enabled: false" additional-cams>
 		<a-assets>
-			<!-- <a-asset-item id="fts-case" src="/aframe/fts-case.glb"></a-asset-item> -->
-		  	<a-asset-item id="warehouse" src="/aframe/Factory_Warehouse.glb"></a-asset-item>
+			<!-- <a-asset-item id="fts-case" src="/aframe/fts-case-decimated-export.glb"></a-asset-item>
+		  	<a-asset-item id="warehouse" src="/aframe/Factory_Warehouse.glb"></a-asset-item> -->
 		</a-assets>
 
-		<!-- <a-entity gltf-model="#warehouse" position="3 0 2.5" scale="0.1 0.1 0.1"></a-entity> -->
+		<a-entity gltf-model="/aframe/Factory_Warehouse.glb" position="3 0 2.5" scale="0.1 0.1 0.1"></a-entity>
 
 		<!-- description -->
 		<a-text value="Cannon" position="5 0.5 1" rotation="-90 0 0" align="center" opacity="0.5"></a-text>
@@ -252,19 +277,32 @@
 		</a-entity>
 		<!-- dynamic cam fts -->
 		<a-entity id="fts" position="5 0.025 1" rotation="0 0 0" mqtt-control>
-			<a-entity id="secondarycam" camera="active: false" camrender="cid: cam-front" position="0 0.005 0.06" rotation="10 180 0" material="opacity: 0" canvas-updater></a-entity>
+			<a-entity id="frontal-cam" camera="active: false" position="0 0.005 0.06" rotation="10 180 0" material="opacity: 0"></a-entity>
+			<a-entity id="top-cam" camera="active: false" position="0 0.3 0" rotation="-90 180 0" material="opacity: 0"></a-entity>
 			<a-entity gltf-model="/aframe/fts-case-decimated-export.glb" position="0 -0.02 0" scale="0.1 0.1 0.1"></a-entity>
 		</a-entity>
-		
 	</a-scene>
 </div>
-<button onclick="animateToDest('cannon')">Cannon</button>
-<button onclick="animateToDest('station-a')">Station A</button>
-<button onclick="animateToDest('station-b')">Station B</button>
-<p>Toggle camera view: Follow, Manual, Zoom?</p>
 
-<style>
+<div class="btn-group variant-filled-primary grid grid-cols-3">
+	<button onclick="animateToDest('cannon')">Cannon</button>
+	<button onclick="animateToDest('station-a')">Station A</button>
+	<button onclick="animateToDest('station-b')">Station B</button>
+</div>
+<div class="{canvasVisible == true ? "block" : "hidden"}">
+	<h2>Toggle camera</h2>
+	<div class="btn-group variant-filled-primary grid grid-cols-2">
+		<button on:click={() => setFrontalView(true)}>Dynamic</button>
+		<button on:click={() => setFrontalView(false)}>Static</button>
+	</div>
+</div>
+
+<style lang="postcss">
 	#aframe-wrapper {
 		aspect-ratio: 2/1.4;
 	}
+
+	button {
+		@apply grow;
+	}
 </style>
\ No newline at end of file