From f817dff6493f4c93643ae004a22844b2b5aa4474 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gerd=20M=C3=BCller?= <gerdesque@posteo.org>
Date: Sat, 17 Aug 2024 14:40:45 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20fix(app):=20adjust=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 image.html  | 37 ++++++++++++++++++++-----------------
 marker.html | 41 +++++++++++++++++++++++++++--------------
 model.html  | 32 ++++++++++++++++++--------------
 3 files changed, 65 insertions(+), 45 deletions(-)
diff --git a/image.html b/image.html
index 2e75458..7d7dcf3 100644
--- a/image.html
+++ b/image.html
@@ -11,26 +11,29 @@
     <meta name="theme-color" content="#ffffff">
     <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
     <script src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js'></script>
-
   </head>
 
   <body style='margin : 0px; overflow: hidden;'>
-      <a-scene
-        vr-mode-ui="enabled: false;"
-        renderer="logarithmicDepthBuffer: true;"
-        embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;'>
+    <div style='z-index: 10000; position: fixed; right: 20px; top: 20px; background-color: antiquewhite;'>
+      <h1>Scan <a href="https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex-image-big.jpeg">this picture</a> to see content through the camera.</h1>
+    </div>
+    <a-scene
+      gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/versioned/decoders/1.5.7/"
+      vr-mode-ui="enabled: false;"
+      renderer="logarithmicDepthBuffer: true;"
+      embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false;'>
 
-        <a-nft
-            type='nft' url='assets/image'
-            smooth='true' smoothCount='10' smoothTolerance='0.01' smoothThreshold='5'>
-            <a-entity
-                gltf-model='assets/bridge-v2.glb'
-                scale="5 5 5"
-                position="100 100 0"
-                >
-            </a-entity>
-        </a-nft>
-        <a-entity camera></a-entity>
-      </a-scene>
+      <a-nft
+          type='nft' url='assets/image'
+          smooth='true' smoothCount='10' smoothTolerance='0.01' smoothThreshold='5'>
+          <a-entity
+            gltf-model='assets/bridge-v2-draco.gltf'
+            scale="5 5 5"
+            position="0 0 0"
+          >
+          </a-entity>
+      </a-nft>
+      <a-entity camera></a-entity>
+    </a-scene>
   </body>
 </html>
diff --git a/marker.html b/marker.html
index 1e63ebf..e8ec128 100644
--- a/marker.html
+++ b/marker.html
@@ -1,19 +1,32 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <title>Blaues Wunder</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
+    <link rel="alternate icon" href="/assets/favicon.ico" type="image/png" sizes="16x16">
+    <link rel="apple-touch-icon" href="/assets/apple-touch-icon-180x180.png" sizes="180x180">
+    <link rel="mask-icon" href="/assets/favicon.svg" color="#FFFFFF">
+    <meta name="theme-color" content="#ffffff">
     <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
-    <!-- we import arjs version without NFT but with marker + location based support -->
     <script src="https://raw.githack.com/AR-js-org/AR.js/dev/aframe/build/aframe-ar.js"></script>
-    <body style="margin : 0px; overflow: hidden;">
-        <a-scene embedded arjs>
-        <a-marker preset="hiro">
-            <a-entity
-            position="0 0 0"
-            rotation="0 90 0"
-            scale="0.05 0.05 0.05"
-            gltf-model="assets/bridge-v2.glb"
-            ></a-entity>
-        </a-marker>
-        <a-entity camera></a-entity>
-        </a-scene>
-    </body>
+  </head>
+
+  <body style="margin : 0px; overflow: hidden;">
+    <div style='z-index: 10000; position: fixed; right: 20px; top: 20px; background-color: antiquewhite;'>
+      <h1>Scan <a href="https://seigedigital.github.io/blaueswunder/assets/marker.png">this picture</a> to see content through the camera.</h1>
+    </div>
+    <a-scene gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/versioned/decoders/1.5.7/" embedded arjs>
+    <a-marker preset="hiro">
+      <a-entity
+      position="0 0 0"
+      rotation="0 90 0"
+      scale="0.05 0.05 0.05"
+      gltf-model="assets/bridge-v2-draco.gltf"
+      ></a-entity>
+    </a-marker>
+    <a-entity camera></a-entity>
+    </a-scene>
+  </body>
 </html>
\ No newline at end of file
diff --git a/model.html b/model.html
index 11da663..b88ffd5 100644
--- a/model.html
+++ b/model.html
@@ -9,24 +9,28 @@
     <link rel="apple-touch-icon" href="/assets/apple-touch-icon-180x180.png" sizes="180x180">
     <link rel="mask-icon" href="/assets/favicon.svg" color="#FFFFFF">
     <meta name="theme-color" content="#ffffff">
-    <!-- Import the component -->
     <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
   </head>
   <body>
+    <div style='z-index: 10000; position: fixed; right: 20px; top: 20px; background-color: antiquewhite;'>
+      <h1>Click Button to open in AR-Mode</h1>
+    </div>
     <!-- src="assets/Astronaut.glb" -->
     <model-viewer
-    style='width: 100vw; height: 80vh;'
-    src="assets/bridge-v2-draco.gltf"
-    ar
-    poster="assets/bridge.webp"
-    ar-scale="fixed"
-    touch-action="pan-y"
-    shadow-intensity="2"
-    shadow-softness="0"
-    camera-controls
-    skybox-image="assets/model.jpg"
-    skybox-height="50m"
-    max-camera-orbit="auto 90deg auto"
-    xr-environment></model-viewer>
+      style='width: 100vw; height: 80vh;'
+      src="assets/bridge-v2-draco.gltf"
+      ar
+      poster="assets/bridge.webp"
+      ar-scale="fixed"
+      touch-action="pan-y"
+      shadow-intensity="2"
+      shadow-softness="0"
+      camera-controls
+      skybox-image="assets/model.jpg"
+      skybox-height="50m"
+      max-camera-orbit="auto 90deg auto"
+      xr-environment
+    >
+    </model-viewer>
   </body>
 </html>
