diff --git a/public/index.html b/public/index.html
index 51117586e7869b0a222ec3d4a58058a88b5feacc..99d4d9a811046070c234fd208b62fc8737564310 100644
--- a/public/index.html
+++ b/public/index.html
@@ -46,7 +46,7 @@
width: 100%;
background: rgba(0, 0, 0, 0.4);
color: white;
- display: flex;
+ display: none;
justify-content: space-around;
padding: 10px;
z-index: 10;
@@ -88,6 +88,55 @@
button:active {
background-color: #387a39;
}
+
+ #confirmation-dialog {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 20;
+ }
+
+ .dialog-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ }
+
+ .dialog-box {
+ position: relative;
+ background: white;
+ padding: 20px;
+ border-radius: 8px;
+ text-align: center;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+ }
+
+ .dialog-box button {
+ margin: 5px;
+ padding: 10px 20px;
+ font-size: 16px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ }
+
+ .dialog-box button:first-child {
+ background-color: #e74c3c;
+ color: white;
+ }
+
+ .dialog-box button:last-child {
+ background-color: #3498db;
+ color: white;
+ }
</style>
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
@@ -96,14 +145,22 @@
<body>
<div id="menu-bar">
<div class="menu-item active" id="robot-item" onclick="selectModel('robot')">
- <img src="placeholder.png" alt="Roboter" style="width: 50px; height: 50px;">
- <span>Roboter</span>
+ <img src="previewImages/robot.png" alt="Roboter" style="width: 50px; height: 50px;">
</div>
<div class="menu-item" id="sunflower-item" onclick="selectModel('sunflower')">
- <img src="placeholder.png" alt="Sonnenblume" style="width: 50px; height: 50px;">
- <span>Sonnenblume</span>
+ <img src="previewImages/sunflower.png" alt="Sonnenblume" style="width: 50px; height: 50px;">
+ </div>
+ <div class="menu-item" id="exit-item" onclick="exitAR()">
+ <img src="previewImages/exit.png" alt="Exit" style="width: 50px; height: 50px;">
+ </div>
+ </div>
+ <div id="confirmation-dialog" style="display: none;">
+ <div class="dialog-overlay"></div>
+ <div class="dialog-box">
+ <p>Möchten Sie die AR-Session wirklich verlassen?</p>
+ <button onclick="confirmExit(true)">Ja</button>
+ <button onclick="confirmExit(false)">Nein</button>
</div>
- <div class="menu-item" id="exit-item" onclick="exitAR()">Exit</div>
</div>
<script>
let selectedModel = 'robot'; // Start mit dem Roboter
@@ -166,6 +223,9 @@
const viewerSpace = await session.requestReferenceSpace('viewer');
const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });
+ // Menü sichtbar machen, wenn die AR-Session gestartet wird
+ document.getElementById('menu-bar').style.display = 'flex';
+
session.requestAnimationFrame(onXRFrame);
session.addEventListener("select", (event) => {
@@ -195,6 +255,12 @@
lastClickTime = currentTime;
});
+ session.addEventListener("end", () => {
+ console.log("AR-Session beendet");
+ currentSession = null;
+ document.getElementById('menu-bar').style.display = 'none'; // Menü ausblenden
+ });
+
// AR-Rendering
function onXRFrame(time, frame) {
session.requestAnimationFrame(onXRFrame);
@@ -224,6 +290,19 @@
}
}
+ function exitAR() {
+ document.getElementById('confirmation-dialog').style.display = 'flex'; // Dialog anzeigen
+ }
+
+ function confirmExit(shouldExit) {
+ if (shouldExit) {
+ if (currentSession) {
+ currentSession.end(); // Beende die AR-Session
+ }
+ }
+ document.getElementById('confirmation-dialog').style.display = 'none'; // Dialog ausblenden
+ }
+
// AR starten
if (navigator.xr) {
const startButton = document.createElement('button');
@@ -238,16 +317,7 @@
alert('WebXR wird nicht unterstützt.');
}
- function exitAR() {
- if (navigator.xr && navigator.xr.isSessionSupported('immersive-ar')) {
- navigator.xr.getSessions().then((sessions) => {
- sessions.forEach((session) => session.end());
- });
- }
- alert("AR-Session beendet.");
- }
-
</script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/public/previewImages/exit.png b/public/previewImages/exit.png
new file mode 100644
index 0000000000000000000000000000000000000000..92e60402e89de7087d7f9ed5837d617d3399fba1
Binary files /dev/null and b/public/previewImages/exit.png differ
diff --git a/public/placeholder.png b/public/previewImages/placeholder.png
similarity index 100%
rename from public/placeholder.png
rename to public/previewImages/placeholder.png
diff --git a/public/previewImages/robot.png b/public/previewImages/robot.png
new file mode 100644
index 0000000000000000000000000000000000000000..945ad5a022bf056f96878ca3db8198d0f70e56dc
Binary files /dev/null and b/public/previewImages/robot.png differ