Skip to content
GitLab
Commit 98e90082 authored by Cantuerk's avatar Cantuerk
Browse files

Merge branch '21caog1bif-master-patch-45871' into 'master' 

Update public/index.html

See merge request !179
parents 4ac75a0a c468418f
master 21caog1bif-master-patch-96693
1 merge request!179Update public/index.html
Pipeline #10928 passed with stage
in 38 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 148 additions and 105 deletions
+148 -105
public/index.html
+ 148
- 105
View file @ 98e90082
...@@ -94,40 +94,43 @@ ...@@ -94,40 +94,43 @@
</div> </div>
</div> </div>
<script src="ar_debug_console.js"></script> <script src="ar_debug_console.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <!-- Leaflet einbinden --> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <!-- Leaflet einbinden -->
<script src="ar_overviewmap.js"></script> <script src="ar_overviewmap.js"></script>
<!-- Audio-Element für Button-Klick -->
<audio id="button-sound" src="sounds/button-sound.mp3" preload="auto"></audio> <audio id="button-sound" src="sounds/button-sound.mp3" preload="auto"></audio> <!-- Audio-Element für Button-Klick -->
<script> <script>
// Variablen /* ========================= */
let selectedModel = 'robot'; /* GLOBALE VARIABLEN */
/* ========================= */
let selectedPlacedModel = null; let selectedPlacedModel = null;
let currentSession = null; let currentSession = null;
let reticle = null; let reticle = null;
let scene, camera; let scene, camera;
const menus = ['menu-bar', 'add-menu', 'edit-menu', 'options-menu', 'map-window'];
/* ========================= */
/* MODELLE */
/* ========================= */
let models = { let models = {
bench: { bench: {
name: "Bench", name: "Bench",
image: "previewImages/bench.PNG", image: "previewImages/bench.PNG",
file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/bench_model/scene.gltf", file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/bench_model/scene.gltf",
scale: { x: 0.1, y: 0.1, z: 0.1 }, scale: { x: 0.1, y: 0.1, z: 0.1 },
minScale: 0.05, // 50% der aktuellen Größe minScale: 0.05,
maxScale: 0.5 // 500% der aktuellen Größe maxScale: 0.5
}, },
trashbin: { trashbin: {
name: "Trash bin", name: "Trash bin",
image: "previewImages/trash_can.PNG", image: "previewImages/trash_can.PNG",
file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/trash_model/scene.gltf", file: "https://transfer.hft-stuttgart.de/gitlab/geovistoogsi/ar/-/raw/master/public/assets/models/trash_model/scene.gltf",
scale: { x: 0.03, y: 0.03, z: 0.03 }, scale: { x: 0.03, y: 0.03, z: 0.03 },
minScale: 0.01, // 50% der aktuellen Größe minScale: 0.01,
maxScale: 0.1 // 500% der aktuellen Größe maxScale: 0.1
}, },
lantern: { lantern: {
name: "Lantern", name: "Lantern",
...@@ -171,12 +174,14 @@ ...@@ -171,12 +174,14 @@
} }
}; };
const menus = ['menu-bar', 'add-menu', 'edit-menu', 'options-menu', 'map-window'];
/* ========================= */
/* INITIALISIERUNG */
/* ========================= */
window.onload = () => { window.onload = () => {
initializeAddMenu(); initializeAddMenu();
// Fügt Sound zu allen Buttons hinzu // Allen Buttons den Sound hinzufügen
const buttons = document.querySelectorAll("button, .menu-item"); const buttons = document.querySelectorAll("button, .menu-item");
buttons.forEach(button => { buttons.forEach(button => {
button.addEventListener("click", playButtonSound); button.addEventListener("click", playButtonSound);
...@@ -201,6 +206,10 @@ ...@@ -201,6 +206,10 @@
`; `;
} }
/* ========================= */
/* MENÜ-STEUERUNG */
/* ========================= */
function showMenu(menuId) { function showMenu(menuId) {
menus.forEach(id => { menus.forEach(id => {
document.getElementById(id).style.display = id === menuId ? 'flex' : 'none'; document.getElementById(id).style.display = id === menuId ? 'flex' : 'none';
...@@ -210,25 +219,15 @@ ...@@ -210,25 +219,15 @@
else if (menuId === 'map-window') init_map(); else if (menuId === 'map-window') init_map();
} }
function clearSelectedModel() { function closeDynamicMenu() {
if (selectedPlacedModel) { const dynamicMenu = document.getElementById("dynamic-menu");
selectedPlacedModel.traverse((child) => { dynamicMenu.style.display = "none";
if (child.isMesh) {
child.material.emissive.setHex(0x000000); // Markierung entfernen
}
});
selectedPlacedModel = null; // Kein Modell mehr ausgewählt
}
} }
function selectModel(modelId) {
const model = models[modelId];
if (model && model.file) {
loadModel(model.file);
showMenu('menu-bar');
}
}
/* ========================= */
/* MODELL-HANDLING */
/* ========================= */
function loadModel(filePath) { function loadModel(filePath) {
const modelConfig = Object.values(models).find(model => model.file === filePath); const modelConfig = Object.values(models).find(model => model.file === filePath);
const loader = new THREE.GLTFLoader(); const loader = new THREE.GLTFLoader();
...@@ -256,30 +255,11 @@ ...@@ -256,30 +255,11 @@
); );
} }
function highlightSelectedModel() { function selectModel(modelId) {
if (selectedPlacedModel) { const model = models[modelId];
removeHighlightFromAllModels(); if (model && model.file) {
selectedPlacedModel.traverse((child) => { loadModel(model.file);
if (child.isMesh) { showMenu('menu-bar');
child.material.emissive.setHex(0xff0000); // Rote Hervorhebung
}
});
}
}
function removeHighlightFromAllModels() {
scene.traverse((child) => {
if (child.isMesh && child.material && child.material.emissive) {
child.material.emissive.setHex(0x000000); // Markierung entfernen
}
});
}
function removeHighlightFromSelectedModel() {
if (selectedPlacedModel) {
selectedPlacedModel.traverse((child) => {
if (child.isMesh) child.material.emissive.setHex(0x000000); // Markierung entfernen
});
} }
} }
...@@ -305,7 +285,7 @@ ...@@ -305,7 +285,7 @@
// Überprüfe, ob das ausgewählte Objekt das Reticle ist // Überprüfe, ob das ausgewählte Objekt das Reticle ist
if (selectedObject === reticle) { if (selectedObject === reticle) {
console.log("Reticle kann nicht ausgewählt werden."); console.log("Reticle kann nicht ausgewählt werden.");
return; // Auswahl ignorieren return;
} }
// Markiere das gesamte Modell als ausgewählt // Markiere das gesamte Modell als ausgewählt
...@@ -315,6 +295,56 @@ ...@@ -315,6 +295,56 @@
} }
} }
function clearSelectedModel() {
if (selectedPlacedModel) {
selectedPlacedModel.traverse((child) => {
if (child.isMesh) {
child.material.emissive.setHex(0x000000); // Markierung entfernen
}
});
selectedPlacedModel = null;
}
}
function highlightSelectedModel() {
if (selectedPlacedModel) {
selectedPlacedModel.traverse((child) => {
if (child.isMesh) {
child.material.emissive.setHex(0xff0000); // Rote Hervorhebung
}
});
}
}
function removeHighlightFromSelectedModel() {
if (selectedPlacedModel) {
selectedPlacedModel.traverse((child) => {
if (child.isMesh) child.material.emissive.setHex(0x000000); // Markierung entfernen
});
}
}
function deleteModel() {
if (!selectedPlacedModel) {
console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es löschen.");
return;
}
const deleteDialog = document.getElementById('delete-confirmation-dialog');
deleteDialog.style.display = 'flex';
}
function confirmDelete(shouldDelete) {
const deleteDialog = document.getElementById('delete-confirmation-dialog');
deleteDialog.style.display = 'none';
if (shouldDelete && selectedPlacedModel) {
scene.remove(selectedPlacedModel);
selectedPlacedModel = null;
showMenu('menu-bar');
}
}
function completeEditing() { function completeEditing() {
removeHighlightFromSelectedModel(); removeHighlightFromSelectedModel();
closeDynamicMenu(); closeDynamicMenu();
...@@ -323,14 +353,17 @@ ...@@ -323,14 +353,17 @@
document.getElementById('menu-bar').style.display = 'flex'; document.getElementById('menu-bar').style.display = 'flex';
} }
/* ========================= */
/* BEARBEITUNGS-MENÜS */
/* ========================= */
function openRotationMenu() { function openRotationMenu() {
if (!selectedPlacedModel) { if (!selectedPlacedModel) {
console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten."); console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bearbeiten.");
return; return;
} }
// Holen Sie die aktuelle Y-Rotation des Modells (in Grad) const currentRotation = Math.round(THREE.MathUtils.radToDeg(selectedPlacedModel.rotation.y)); // Aktuelle Y-Rotation des Modells (in Grad)
const currentRotation = Math.round(THREE.MathUtils.radToDeg(selectedPlacedModel.rotation.y));
const dynamicMenu = document.getElementById("dynamic-menu"); const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.style.display = "flex"; dynamicMenu.style.display = "flex";
...@@ -346,7 +379,7 @@ ...@@ -346,7 +379,7 @@
const radians = (value / 180) * Math.PI; const radians = (value / 180) * Math.PI;
selectedPlacedModel.rotation[axis] = radians; selectedPlacedModel.rotation[axis] = radians;
// Update der aktuellen Rotation im Menü // Anzeige der aktuellen Rotation im Dynamic-Menü aktualisieren
const currentRotationDisplay = document.getElementById("current-rotation"); const currentRotationDisplay = document.getElementById("current-rotation");
if (currentRotationDisplay) { if (currentRotationDisplay) {
currentRotationDisplay.textContent = value; // Zeige den aktuellen Wert in Grad an currentRotationDisplay.textContent = value; // Zeige den aktuellen Wert in Grad an
...@@ -360,37 +393,40 @@ ...@@ -360,37 +393,40 @@
return; return;
} }
// Aktuelle Skalierung des Modells bestimmen // Aktuelle Skalierung und Grenzen bestimmen
const currentScale = selectedPlacedModel.scale.x; const currentScale = selectedPlacedModel.scale.x;
const minScale = selectedPlacedModel.modelConfig.minScale; const minScale = selectedPlacedModel.modelConfig.minScale;
const maxScale = selectedPlacedModel.modelConfig.maxScale; const maxScale = selectedPlacedModel.modelConfig.maxScale;
const step = (maxScale - minScale) / 100; // Dynamische Schrittgröße basierend auf Grenzen const step = (maxScale - minScale) / 100; // Dynamische Schrittgröße basierend auf Grenzen
console.log("Slider-Werte:", { minScale, maxScale, currentScale }); const currentScalePercent = ((currentScale - minScale) / (maxScale - minScale)) * 100; // Umrechnung der Werte in Prozent
const dynamicMenu = document.getElementById("dynamic-menu"); const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.style.display = "flex"; dynamicMenu.style.display = "flex";
dynamicMenu.innerHTML = ` dynamicMenu.innerHTML = `
<h3>Skalierung anpassen</h3> <h3>Skalierung anpassen</h3>
<label>Größe: <span id="scale-value">${currentScale.toFixed(2)}</span> <label>Größe: <span id="scale-value">${currentScalePercent.toFixed(0)}%</span>
<input type="range" min="${minScale}" max="${maxScale}" step="${step}" value="${currentScale}" onchange="updateScale(this.value)"></label> <input type="range" min="0" max="100" step="1" value="${currentScalePercent}" onchange="updateScale(this.value, ${minScale}, ${maxScale})"></label>
<button onclick="closeDynamicMenu()">Zurück</button> <button onclick="closeDynamicMenu()">Zurück</button>
`; `;
} }
function updateScale(value) { function updateScale(percentValue, minScale, maxScale) {
if (selectedPlacedModel) { if (selectedPlacedModel) {
const scale = parseFloat(value); // Berechnung der Skalierung basierend auf dem Prozentwert
const scale = minScale + (percentValue / 100) * (maxScale - minScale);
selectedPlacedModel.scale.set(scale, scale, scale); selectedPlacedModel.scale.set(scale, scale, scale);
// Anzeige des aktuellen Wertes aktualisieren // Anzeige des aktuellen Prozentsatzes im Dynamic-Menü aktualisieren
const scaleValueDisplay = document.getElementById("scale-value"); const scaleValueDisplay = document.getElementById("scale-value");
if (scaleValueDisplay) { if (scaleValueDisplay) {
scaleValueDisplay.textContent = `${scale.toFixed(2)}`; scaleValueDisplay.textContent = `${parseInt(percentValue, 10)}%`;
} }
} }
} }
let moveDelta = 0.1; // Standardwert für die Verschiebungsgröße, kann mit dem Slider geändert werden
function openMoveMenu() { function openMoveMenu() {
if (!selectedPlacedModel) { if (!selectedPlacedModel) {
console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bewegen."); console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es bewegen.");
...@@ -399,58 +435,56 @@ ...@@ -399,58 +435,56 @@
const dynamicMenu = document.getElementById("dynamic-menu"); const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.style.display = "flex"; dynamicMenu.style.display = "flex";
dynamicMenu.innerHTML = ` dynamicMenu.innerHTML = `
<h3>Modell bewegen</h3> <h3>Modell bewegen</h3>
<div> <div id="position-info">
<button onclick="moveModel('x', -0.1)">← X</button> <p>Aktuelle Position: X=${selectedPlacedModel.position.x.toFixed(2)}, Z=${selectedPlacedModel.position.z.toFixed(2)}</p>
<button onclick="moveModel('x', 0.1)">→ X</button>
</div> </div>
<div> <div>
<button onclick="moveModel('y', -0.1)">↓ Y</button> <p>Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span></p>
<button onclick="moveModel('y', 0.1)">↑ Y</button> <input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}"
onchange="updateMoveDelta(this.value)">
</div> </div>
<div> <div style="display: flex; flex-direction: column; align-items: center; gap: 10px;">
<button onclick="moveModel('z', -0.1)">- Z</button> <div>
<button onclick="moveModel('z', 0.1)">+ Z</button> <button onclick="moveModel('x', -moveDelta)">← X</button>
<button onclick="moveModel('x', moveDelta)">→ X</button>
</div>
<div>
<button onclick="moveModel('z', -moveDelta)">- Z</button>
<button onclick="moveModel('z', moveDelta)">+ Z</button>
</div>
</div> </div>
<button onclick="closeDynamicMenu()">Zurück</button> <button onclick="closeDynamicMenu()">Zurück</button>
`; `;
} }
function moveModel(axis, delta) { function updateMoveDelta(value) {
if (selectedPlacedModel) { moveDelta = parseFloat(value);
selectedPlacedModel.position[axis] += delta; const moveDeltaDisplay = document.getElementById("move-delta-display");
if (moveDeltaDisplay) {
moveDeltaDisplay.textContent = moveDelta.toFixed(2);
} }
} }
function moveModel(axis, delta) {
if (selectedPlacedModel) {
selectedPlacedModel.position[axis] += delta; // Bewegung durchführen
function deleteModel() { // Positionsanzeige im Dynamic-Menü aktualisieren
if (!selectedPlacedModel) { const positionInfo = document.getElementById("position-info");
console.log("Kein Modell ausgewählt. Bitte wählen Sie ein Modell aus, bevor Sie es löschen."); if (positionInfo) {
return; positionInfo.innerHTML = `
} <p>Aktuelle Position: X=${selectedPlacedModel.position.x.toFixed(2)}, Z=${selectedPlacedModel.position.z.toFixed(2)}</p>`;
}
// Dialog anzeigen
const deleteDialog = document.getElementById('delete-confirmation-dialog');
deleteDialog.style.display = 'flex';
}
function confirmDelete(shouldDelete) {
const deleteDialog = document.getElementById('delete-confirmation-dialog');
deleteDialog.style.display = 'none';
if (shouldDelete && selectedPlacedModel) {
scene.remove(selectedPlacedModel);
selectedPlacedModel = null;
showMenu('menu-bar');
} }
} }
function closeDynamicMenu() {
const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.style.display = "none";
}
/* ========================= */
/* KARTENSTEUERUNG */
/* ========================= */
function refreshMapDialog() { function refreshMapDialog() {
const mapDialog = document.getElementById('map-dialog'); const mapDialog = document.getElementById('map-dialog');
mapDialog.style.display = 'flex'; mapDialog.style.display = 'flex';
...@@ -461,6 +495,10 @@ ...@@ -461,6 +495,10 @@
mapDialog.style.display = 'none'; mapDialog.style.display = 'none';
} }
/* ========================= */
/* AR-HANDLING */
/* ========================= */
async function activateXR() { async function activateXR() {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
document.body.appendChild(canvas); document.body.appendChild(canvas);
...@@ -498,6 +536,7 @@ ...@@ -498,6 +536,7 @@
currentSession.addEventListener("end", () => { currentSession.addEventListener("end", () => {
currentSession = null; currentSession = null;
document.getElementById("dynamic-menu").style.display = "none";
menus.forEach(id => { menus.forEach(id => {
document.getElementById(id).style.display = 'none'; document.getElementById(id).style.display = 'none';
}); });
...@@ -537,14 +576,15 @@ ...@@ -537,14 +576,15 @@
} }
function confirmExit(shouldExit) { function confirmExit(shouldExit) {
if (shouldExit && currentSession) { if (shouldExit && currentSession) currentSession.end();
currentSession.end();
}
document.getElementById('confirmation-dialog').style.display = 'none'; document.getElementById('confirmation-dialog').style.display = 'none';
} }
let soundTimeout = false;
/* ========================= */
/* BENUTZERINTERAKTIONEN */
/* ========================= */
let soundTimeout = false;
function playButtonSound() { function playButtonSound() {
if (!soundTimeout) { if (!soundTimeout) {
const sound = document.getElementById("button-sound"); const sound = document.getElementById("button-sound");
...@@ -559,6 +599,9 @@ ...@@ -559,6 +599,9 @@
} }
/* ========================= */
/* DEBUGGING UND START */
/* ========================= */
if (navigator.xr) { if (navigator.xr) {
const startButton = document.createElement('button'); const startButton = document.createElement('button');
startButton.textContent = 'Start AR'; startButton.textContent = 'Start AR';
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal