change background

public/ar_start.js

@@ -18,6 +18,11 @@ let predefinedButton2 = null;
 async function loadPredefinedScene(filePath, fileName) {
   try {
     const response = await fetch(filePath);
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
     const data = await response.json();
 
     sceneData = data;
@@ -25,11 +30,11 @@ async function loadPredefinedScene(filePath, fileName) {
 
     console.log("Vordefinierte Szene geladen:", fileName);
 
+    return true;
   } catch (error) {
-    console.error(
-      "Fehler beim Laden der vordefinierten Szene:",
-      error
-    );
+    console.error("Fehler beim Laden der vordefinierten Szene:", error);
+
+    return false;
   }
 }
 
@@ -51,54 +56,46 @@ function showStartScreen() {
 
   startButton.textContent = "Start AR";
 
-  startButton.style.cssText =
-    "position: fixed; " +
-    "top: 45%; " +
-    "left: 50%; " +
-    "transform: translate(-50%, -50%); " +
-    "padding: 15px; " +
-    "font-size: 18px;";
+  startButton.classList.add("start-screen-button", "start-ar-button");
 
   document.body.appendChild(startButton);
 
   /* ========================= */
-  /*      LOAD SCENE            */
+  /*      LOAD SCENE           */
   /* ========================= */
 
   loadButton = document.createElement("button");
 
   loadButton.textContent = sceneFileName || "Umgebung Laden";
 
-  loadButton.style.cssText =
-    "position: fixed; " +
-    "top: 55%; " +
-    "left: 50%; " +
-    "transform: translate(-50%, -50%); " +
-    "padding: 15px; " +
-    "font-size: 18px;";
+  loadButton.classList.add(
+    "start-screen-button",
+    "load-scene-button",
+    "scene-button",
+  );
 
   document.body.appendChild(loadButton);
 
   /* ========================= */
-  /*       START AR CLICK       */
+  /*       START AR CLICK      */
   /* ========================= */
 
-startButton.onclick = () => {
-  // Remove start-page buttons
-  startButton.remove();
-  loadButton.remove();
-  predefinedButton1.remove();
-  predefinedButton2.remove();
-
-  // Reset references
-  startButton = null;
-  loadButton = null;
-  predefinedButton1 = null;
-  predefinedButton2 = null;
-
-  // Start AR
-  activateXR(sceneData);
-};
+  startButton.onclick = () => {
+    // Remove start-page buttons
+    startButton.remove();
+    loadButton.remove();
+    predefinedButton1.remove();
+    predefinedButton2.remove();
+
+    // Reset references
+    startButton = null;
+    loadButton = null;
+    predefinedButton1 = null;
+    predefinedButton2 = null;
+
+    // Start AR
+    activateXR(sceneData);
+  };
 
   /* ========================= */
   /*      LOAD SCENE CLICK     */
@@ -111,11 +108,19 @@ startButton.onclick = () => {
         sceneFileName = fileName;
 
         loadButton.textContent = fileName;
+
+        // Mark uploaded scene as selected
+        loadButton.classList.add("selected");
+
+        // Deselect predefined scenes
+        predefinedButton1.classList.remove("selected");
+        predefinedButton2.classList.remove("selected");
       } else {
         loadButton.textContent = sceneFileName || "Umgebung Laden";
       }
     });
   };
+
   /* ========================= */
   /*   PREDEFINED SCENE 1      */
   /* ========================= */
@@ -124,23 +129,30 @@ startButton.onclick = () => {
 
   predefinedButton1.textContent = "Gengenbach Plaza";
 
-  predefinedButton1.style.cssText =
-    "position: fixed; " +
-    "top: 65%; " +
-    "left: 50%; " +
-    "transform: translate(-50%, -50%); " +
-    "padding: 15px; " +
-    "font-size: 18px;";
+  predefinedButton1.classList.add(
+    "start-screen-button",
+    "predefined-scene-button-1",
+    "scene-button",
+  );
 
   document.body.appendChild(predefinedButton1);
 
   predefinedButton1.onclick = async () => {
-    await loadPredefinedScene(
+    const success = await loadPredefinedScene(
       "scenes/gengenbach-plaza.json",
       "Gengenbach Plaza",
     );
 
-    predefinedButton1.textContent = sceneFileName;
+    if (success) {
+      // Select Plaza
+      predefinedButton1.classList.add("selected");
+
+      // Deselect Street
+      predefinedButton2.classList.remove("selected");
+
+      // Deselect uploaded scene
+      loadButton.classList.remove("selected");
+    }
   };
 
   /* ========================= */
@@ -151,28 +163,35 @@ startButton.onclick = () => {
 
   predefinedButton2.textContent = "Gengenbach Street";
 
-  predefinedButton2.style.cssText =
-    "position: fixed; " +
-    "top: 75%; " +
-    "left: 50%; " +
-    "transform: translate(-50%, -50%); " +
-    "padding: 15px; " +
-    "font-size: 18px;";
+  predefinedButton2.classList.add(
+    "start-screen-button",
+    "predefined-scene-button-2",
+    "scene-button",
+  );
 
   document.body.appendChild(predefinedButton2);
 
   predefinedButton2.onclick = async () => {
-    await loadPredefinedScene(
+    const success = await loadPredefinedScene(
       "scenes/gengenbach-street.json",
       "Gengenbach Street",
     );
 
-    predefinedButton2.textContent = sceneFileName;
+    if (success) {
+      // Select Street
+      predefinedButton2.classList.add("selected");
+
+      // Deselect Plaza
+      predefinedButton1.classList.remove("selected");
+
+      // Deselect uploaded scene
+      loadButton.classList.remove("selected");
+    }
   };
 }
 
 /* ========================= */
-/*       INITIAL START        */
+/*       INITIAL START       */
 /* ========================= */
 
 if (navigator.xr) {

public/style.css

@@ -7,8 +7,7 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-image: url('https://www.hft-stuttgart.de/fileadmin/Dateien/Hochschule/-_R_Juergen_Pollak_HFT_18.04.18-0091.jpg');
-  background-size: cover;
+  background-image: url('assets/images/gengenbach.png');  background-size: cover;
   background-position: center;
 }
 
@@ -35,7 +34,6 @@ p {
 
 #add-menu {
   overflow-y: auto;
-
 }
 
 #menu-bar,
@@ -98,7 +96,69 @@ button:active {
   background-color: #387a39;
 }
 
-/* Confirmation Dialog */
+
+/* ============================================================
+   START SCREEN BUTTONS
+   ============================================================ */
+
+.start-screen-button {
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 15px;
+  font-size: 18px;
+}
+
+.start-ar-button {
+  top: 45%;
+  background-color: #4CAF50;
+  color: white;
+}
+
+.load-scene-button {
+  top: 55%;
+}
+
+.predefined-scene-button-1 {
+  top: 65%;
+}
+
+.predefined-scene-button-2 {
+  top: 75%;
+}
+
+
+/* ============================================================
+   SCENE SELECTION COLORS
+   ============================================================ */
+
+/* Scene buttons are gray when no scene is selected */
+.scene-button {
+  background-color: #808080;
+  color: white;
+}
+
+/* Gray hover */
+.scene-button:hover {
+  background-color: #707070;
+}
+
+/* Selected scene becomes green */
+.scene-button.selected {
+  background-color: #4CAF50;
+  color: white;
+}
+
+/* Selected scene hover */
+.scene-button.selected:hover {
+  background-color: #45a049;
+}
+
+
+/* ============================================================
+   CONFIRMATION DIALOG
+   ============================================================ */
+
 #confirmation-dialog,
 #delete-confirmation-dialog {
   position: fixed;
@@ -168,6 +228,10 @@ button:active {
 }
 
 
+/* ============================================================
+   DYNAMIC MENU
+   ============================================================ */
+
 #dynamic-menu {
   position: absolute;
   bottom: 90px;
@@ -186,7 +250,6 @@ button:active {
   border-radius: 8px;
 }
 
-
 #dynamic-menu input[type="range"] {
   width: 100%;
   margin: 10px auto;
@@ -205,6 +268,11 @@ button:active {
   cursor: pointer;
 }
 
+
+/* ============================================================
+   DEBUG CONSOLE
+   ============================================================ */
+
 #debug-container {
   position: fixed;
   top: 0;
@@ -239,7 +307,10 @@ button:active {
 }
 
 
-/* Style für Move Menu */
+/* ============================================================
+   MOVE MENU
+   ============================================================ */
+
 .button-row {
   display: flex;
   gap: 15px;
@@ -266,6 +337,8 @@ button:active {
   background-color: #0056b3;
   transform: scale(0.95);
 }
+
+
 /* ============================================================
    MAP WINDOW
    ============================================================ */
@@ -303,4 +376,4 @@ button:active {
 #map-container .leaflet-container {
   width: 100%;
   height: 100%;
-}
+}
\ No newline at end of file