Skip to content
GitLab
Commit 7d7f8627 authored by Cantuerk's avatar Cantuerk
Browse files

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

Update public/index.html, public/previewImages/back-icon.png,...

See merge request !119
parents 5b097556 82569409
Pipeline #10664 passed with stage
in 9 seconds
Show whitespace changes
Inline Side-by-side
public/index.html
View file @ 7d7f8627
...@@ -22,17 +22,18 @@ ...@@ -22,17 +22,18 @@
.container { .container {
text-align: center; text-align: center;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(255, 255, 255, 0.9);
padding: 50px; padding: 50px;
border-radius: 10px; border-radius: 10px;
color: white; color: #333;
max-width: 80%; max-width: 80%;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
} }
h1 { h1 {
font-size: 3em; font-size: 3em;
margin-bottom: 20px; margin-bottom: 20px;
color: #444;
} }
p { p {
...@@ -44,50 +45,58 @@ ...@@ -44,50 +45,58 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 70px; height: 80px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
align-items: center; align-items: center;
background: rgba(0, 0, 0, 0.5); background: #e0e0e0;
padding: 10px; padding: 10px;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
z-index: 10; z-index: 10;
} }
.menu-section { .menu-item:hover {
width: 60px; background-color: #d6d6d6;
height: 60px; /* Etwas dunkleres Grau beim Hover */
display: flex; transform: scale(1.1);
justify-content: center; /* Leichte Vergrößerung beim Hover */
align-items: center;
cursor: pointer;
} }
.menu-section img { .menu-item img {
width: 40px; width: 50px;
height: 40px; height: 50px;
} }
#dynamic-menu { .menu-placeholder {
display: none;
position: absolute; position: absolute;
bottom: 70px; bottom: 0;
width: 100%; width: 100%;
height: 200px; height: 80px;
background: rgba(0, 0, 0, 0.8); display: flex;
color: white; justify-content: space-around;
padding: 20px; align-items: center;
z-index: 20; background: #e0e0e0;
overflow-y: auto; /* Helles Grau */
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
z-index: 15;
}
.menu-placeholder .menu-item img {
width: 50px;
height: 50px;
} }
button { button {
background-color: #4CAF50; background-color: #4CAF50;
color: white; color: white;
font-size: 1.5em; font-size: 1em;
padding: 15px 30px; padding: 10px 20px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.3s ease-in-out, transform 0.2s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 10px; margin: 10px;
} }
...@@ -99,6 +108,7 @@ ...@@ -99,6 +108,7 @@
background-color: #387a39; background-color: #387a39;
} }
/* Confirmation Dialog */
#confirmation-dialog { #confirmation-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -153,25 +163,48 @@ ...@@ -153,25 +163,48 @@
</head> </head>
<body> <body>
<div id="dynamic-menu" style="display: none;"></div> <!-- Standardmenü -->
<div id="menu-bar" style="display: none;">
<div id="menu-bar"> <div class="menu-item" id="edit-section" onclick="showMenu('edit-menu')">
<!-- Linkes Symbol: Stift (Bearbeiten) -->
<div class="menu-section" id="edit-section" onclick="openEditMenu()">
<img src="previewImages/edit-icon.png" alt="Bearbeiten" /> <img src="previewImages/edit-icon.png" alt="Bearbeiten" />
</div> </div>
<div class="menu-item" id="add-section" onclick="showMenu('add-menu')">
<!-- Mittleres Symbol: Plus (Modell hinzufügen) -->
<div class="menu-section" id="add-section" onclick="openAddMenu()">
<img src="previewImages/add-icon.png" alt="Hinzufügen" /> <img src="previewImages/add-icon.png" alt="Hinzufügen" />
</div> </div>
<div class="menu-item" id="options-section" onclick="showMenu('options-menu')">
<!-- Rechtes Symbol: Optionen -->
<div class="menu-section" id="options-section" onclick="openOptionsMenu()">
<img src="previewImages/options-icon.png" alt="Optionen" /> <img src="previewImages/options-icon.png" alt="Optionen" />
</div> </div>
</div> </div>
<!-- Hinzufügen-Menü -->
<div id="add-menu" class="menu-placeholder" style="display: none;"></div>
<!-- Bearbeiten-Menü -->
<div id="edit-menu" class="menu-placeholder" style="display: none;">
<div class="menu-item" onclick="openRotationMenu()">
<img src="previewImages/rotate-icon.png" alt="Rotation" />
</div>
<div class="menu-item" onclick="openScaleMenu()">
<img src="previewImages/scale-icon.png" alt="Skalierung" />
</div>
<div class="menu-item" onclick="deleteModel()">
<img src="previewImages/delete-icon.png" alt="Löschen" />
</div>
<div class="menu-item" onclick="showMenu('menu-bar')">
<img src="previewImages/back-icon.png" alt="Zurück" />
</div>
</div>
<!-- Optionen-Menü -->
<div id="options-menu" class="menu-placeholder" style="display: none;">
<div class="menu-item" onclick="exitAR()">
<img src="previewImages/exit-icon.png" alt="Beenden" />
</div>
<div class="menu-item" onclick="showMenu('menu-bar')">
<img src="previewImages/back-icon.png" alt="Zurück" />
</div>
</div>
<div id="confirmation-dialog" style="display: none;"> <div id="confirmation-dialog" style="display: none;">
<div class="dialog-overlay"></div> <div class="dialog-overlay"></div>
<div class="dialog-box"> <div class="dialog-box">
...@@ -182,8 +215,13 @@ ...@@ -182,8 +215,13 @@
</div> </div>
<script> <script>
// Variablen
let selectedModel = 'robot'; let selectedModel = 'robot';
let selectedPlacedModel = null; let selectedPlacedModel = null;
let currentSession = null;
let reticle = null;
let scene, camera;
let models = { let models = {
robot: { robot: {
name: "Roboter", name: "Roboter",
...@@ -205,9 +243,43 @@ ...@@ -205,9 +243,43 @@
} }
}; };
let currentSession = null; const menus = ['menu-bar', 'add-menu', 'edit-menu', 'options-menu'];
let reticle = null;
let scene, camera; window.onload = () => {
initializeAddMenu();
};
function initializeAddMenu() {
const addMenu = document.getElementById('add-menu');
addMenu.innerHTML = Object.entries(models)
.map(
([key, model]) => `
<div class="menu-item" id="${key}-item" onclick="selectModel('${key}')">
<img src="${model.image}" alt="${model.name}" />
</div>
`
)
.join('') +
`
<div class="menu-item" onclick="showMenu('menu-bar')">
<img src="previewImages/back-icon.png" alt="Zurück" />
</div>
`;
}
function showMenu(menuId) {
menus.forEach(id => {
document.getElementById(id).style.display = id === menuId ? 'flex' : 'none';
});
}
function selectModel(modelId) {
const model = models[modelId];
if (model && model.file) {
loadModel(model.file);
showMenu('menu-bar');
}
}
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);
...@@ -223,7 +295,6 @@ ...@@ -223,7 +295,6 @@
scene.add(model); scene.add(model);
selectedPlacedModel = model; selectedPlacedModel = model;
highlightSelectedModel(); highlightSelectedModel();
console.log(`Modell ${modelConfig.name} erfolgreich platziert.`);
}, },
undefined, undefined,
(error) => { (error) => {
...@@ -232,14 +303,6 @@ ...@@ -232,14 +303,6 @@
); );
} }
function removeHighlightFromAllModels() {
scene.traverse((child) => {
if (child.isMesh && child.material && child.material.emissive) {
child.material.emissive.setHex(0x000000); // Markierung entfernen
}
});
}
function highlightSelectedModel() { function highlightSelectedModel() {
if (selectedPlacedModel) { if (selectedPlacedModel) {
removeHighlightFromAllModels(); removeHighlightFromAllModels();
...@@ -251,13 +314,12 @@ ...@@ -251,13 +314,12 @@
} }
} }
function selectModel(modelId) { function removeHighlightFromAllModels() {
const model = models[modelId]; scene.traverse((child) => {
if (model && model.file) { if (child.isMesh && child.material && child.material.emissive) {
console.log(`Modell ausgewählt: ${model.name}`); child.material.emissive.setHex(0x000000); // Markierung entfernen
loadModel(model.file);
closeDynamicMenu();
} }
});
} }
function selectModelFromScene(event) { function selectModelFromScene(event) {
...@@ -273,81 +335,38 @@ ...@@ -273,81 +335,38 @@
if (intersects.length > 0) { if (intersects.length > 0) {
selectedPlacedModel = intersects[0].object; selectedPlacedModel = intersects[0].object;
highlightSelectedModel(); highlightSelectedModel();
console.log("Modell ausgewählt:", selectedPlacedModel);
}
}
function openAddMenu() {
const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.style.display = "block";
dynamicMenu.innerHTML = `
<h3>Modell hinzufügen</h3>
<div class="model-list">
${Object.entries(models)
.map(
([key, model]) => `
<div class="model-item" onclick="selectModel('${key}')">
<img src="${model.image}" alt="${model.name}" />
<span>${model.name}</span>
</div>
`
)
.join("")}
</div>
<button onclick="closeDynamicMenu()">Schließen</button>
`;
}
function openEditMenu() {
if (!selectedPlacedModel) {
alert("Kein Modell ausgewählt. Bitte tippen Sie auf ein Modell, um es zu bearbeiten.");
return;
} }
const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.style.display = "block";
dynamicMenu.innerHTML = `
<h3>Modell bearbeiten</h3>
<button onclick="openRotationMenu()">Rotation</button>
<button onclick="openScaleMenu()">Skalierung</button>
<button onclick="deleteModel()">Löschen</button>
<button onclick="closeDynamicMenu()">Schließen</button>
`;
} }
function openRotationMenu() { function openRotationMenu() {
const dynamicMenu = document.getElementById("dynamic-menu"); const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.innerHTML = ` dynamicMenu.innerHTML = `
<h3>Rotation anpassen</h3> <h3>Rotation anpassen</h3>
<label>X-Achse: <input type="range" min="0" max="360" step="10" onchange="updateRotation('x', this.value)"></label>
<label>Y-Achse: <input type="range" min="0" max="360" step="10" onchange="updateRotation('y', this.value)"></label> <label>Y-Achse: <input type="range" min="0" max="360" step="10" onchange="updateRotation('y', this.value)"></label>
<label>Z-Achse: <input type="range" min="0" max="360" step="10" onchange="updateRotation('z', this.value)"></label> <button onclick="showMenu('edit-menu')">Zurück</button>
<button onclick="openEditMenu()">Zurück</button>
`; `;
} }
function updateRotation(axis, value) {
if (selectedPlacedModel) {
const radians = (value / 180) * Math.PI;
selectedPlacedModel.rotation[axis] = radians;
}
}
function openScaleMenu() { function openScaleMenu() {
const dynamicMenu = document.getElementById("dynamic-menu"); const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.innerHTML = ` dynamicMenu.innerHTML = `
<h3>Skalierung anpassen</h3> <h3>Skalierung anpassen</h3>
<label>Größe: <input type="range" min="0.1" max="3" step="0.1" onchange="updateScale(this.value)"></label> <label>Größe: <input type="range" min="0.1" max="3" step="0.1" onchange="updateScale(this.value)"></label>
<button onclick="openEditMenu()">Zurück</button> <button onclick="showMenu('edit-menu')">Zurück</button>
`; `;
} }
function updateRotation(axis, value) {
if (selectedPlacedModel) {
const radians = (value / 180) * Math.PI;
selectedPlacedModel.rotation[axis] = radians;
console.log(`Modell um ${value} Grad auf der ${axis.toUpperCase()}-Achse gedreht.`);
}
}
function updateScale(value) { function updateScale(value) {
if (selectedPlacedModel) { if (selectedPlacedModel) {
const scale = parseFloat(value); const scale = parseFloat(value);
selectedPlacedModel.scale.set(scale, scale, scale); selectedPlacedModel.scale.set(scale, scale, scale);
console.log(`Modell auf Größe ${value} skaliert.`);
} }
} }
...@@ -355,16 +374,9 @@ ...@@ -355,16 +374,9 @@
if (selectedPlacedModel) { if (selectedPlacedModel) {
scene.remove(selectedPlacedModel); scene.remove(selectedPlacedModel);
selectedPlacedModel = null; selectedPlacedModel = null;
console.log("Modell gelöscht.");
closeDynamicMenu();
} }
} }
function closeDynamicMenu() {
const dynamicMenu = document.getElementById("dynamic-menu");
dynamicMenu.style.display = "none";
}
async function activateXR() { async function activateXR() {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
document.body.appendChild(canvas); document.body.appendChild(canvas);
......
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