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

Update public/style.css, public/ar_main.js

parent bb6cdee1
master
1 merge request!185Update public/style.css, public/ar_main.js
Hide whitespace changes
Inline Side-by-side
Showing
with 297 additions and 282 deletions
+297 -282
public/ar_main.js
+ 13
- 44
View file @ f0764516
......@@ -355,51 +355,20 @@ function openMoveMenu() {
dynamicMenu.style.display = "flex";
dynamicMenu.innerHTML = `
<h3>Modell bewegen</h3>
<div id="joystick-container" style="position: relative; width: 100px; height: 100px; border: 2px solid #ccc; border-radius: 50%; margin: 20px auto;">
<div id="joystick-knob" style="position: absolute; width: 30px; height: 30px; background: #007BFF; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);"></div>
</div>
<button onclick="closeDynamicMenu()">Zurück</button>
<div id="move-menu">
<h3>Modell bewegen</h3>
<div id="button-controls">
<button id="up" onclick="moveModelDynamic('z', -0.1)">↑</button>
<div class="middle-row">
<button id="left" onclick="moveModelDynamic('x', -0.1)">←</button>
<div class="spacer"></div>
<button id="right" onclick="moveModelDynamic('x', 0.1)">→</button>
</div>
<button id="down" onclick="moveModelDynamic('z', 0.1)">↓</button>
</div>
<button onclick="closeDynamicMenu()">Zurück</button>
</div>
`;
const container = document.getElementById("joystick-container");
const knob = document.getElementById("joystick-knob");
let isDragging = false;
const center = { x: container.offsetWidth / 2, y: container.offsetHeight / 2 };
const maxDistance = container.offsetWidth / 2;
knob.addEventListener("mousedown", () => (isDragging = true));
document.addEventListener("mouseup", () => {
isDragging = false;
knob.style.left = "50%";
knob.style.top = "50%";
moveModelDynamic('x', 0); // Bewegung stoppen, wenn Maus losgelassen wird
moveModelDynamic('z', 0);
});
document.addEventListener("mousemove", (event) => {
if (!isDragging) return;
const rect = container.getBoundingClientRect();
const dx = event.clientX - rect.left - center.x;
const dy = event.clientY - rect.top - center.y;
const distance = Math.min(Math.sqrt(dx * dx + dy * dy), maxDistance);
const angle = Math.atan2(dy, dx);
const offsetX = Math.cos(angle) * distance;
const offsetY = Math.sin(angle) * distance;
// Knopfposition aktualisieren
knob.style.left = `${center.x + offsetX}px`;
knob.style.top = `${center.y + offsetY}px`;
// Bewegung basierend auf Joystick-Position anwenden
const normalizedX = offsetX / maxDistance;
const normalizedY = offsetY / maxDistance;
moveModelDynamic('x', normalizedX * 0.1); // Feine Anpassung
moveModelDynamic('z', -normalizedY * 0.1); // Feine Anpassung
});
}
function moveModelDynamic(axis, value) {
......
public/style.css
+ 284
- 238
View file @ f0764516
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
display: flex;
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-position: center;
}
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.9);
padding: 50px;
border-radius: 10px;
color: #333;
max-width: 80%;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 3em;
margin-bottom: 20px;
color: #444;
}
p {
font-size: 1.2em;
margin-bottom: 30px;
}
#add-menu {
overflow-y: auto;
}
#menu-bar,
.menu-placeholder {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
background: #121212;
padding: 10px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.8);
color: white;
z-index: 10;
border-top: 1px solid #2a2a2a;
}
.menu-item {
background: #2c2c2c;
border-radius: 20px;
padding: 8px;
transition: background-color 0.3s, transform 0.2s;
}
.menu-item:hover {
background-color: #3a3a3a;
transform: scale(1.1);
}
.menu-item img {
width: 50px;
height: 50px;
}
.menu-placeholder .menu-item img {
width: 50px;
height: 50px;
}
button {
background-color: #4CAF50;
color: white;
font-size: 1em;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out, transform 0.2s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 10px;
}
button:hover {
background-color: #45a049;
}
button:active {
background-color: #387a39;
}
/* Confirmation Dialog */
#confirmation-dialog,
#delete-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.7);
}
.dialog-box {
position: relative;
background: #2c2c2c;
padding: 20px;
border-radius: 10px;
text-align: center;
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
}
.dialog-box p {
margin-bottom: 20px;
font-size: 1.2em;
color: #f0f0f0;
}
.dialog-box button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s;
}
.dialog-box button:first-child {
background-color: #e74c3c;
color: white;
}
.dialog-box button:first-child:hover {
background-color: #c0392b;
transform: scale(1.05);
}
.dialog-box button:last-child {
background-color: #3498db;
color: white;
}
.dialog-box button:last-child:hover {
background-color: #2980b9;
transform: scale(1.05);
}
#dynamic-menu {
position: absolute;
bottom: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: #1e1e1e;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.8);
color: white;
width: 100vw;
height: 250px;
z-index: 20;
overflow-y: auto;
border-radius: 8px;
}
#dynamic-menu input[type="range"] {
width: 100%;
margin: 10px auto;
background: #3a3a3a;
border-radius: 5px;
}
#dynamic-menu input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #fff;
border: 2px solid #555;
border-radius: 50%;
cursor: pointer;
}
#debug-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
font-family: monospace;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#debug-console {
width: 100%;
max-height: 200px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.7);
color: #00ff00;
padding: 5px;
display: none;
}
#debug-toggle-btn {
background: rgba(0, 0, 0, 0.7);
color: #00ff00;
font-size: 14px;
border: none;
padding: 5px 10px;
cursor: pointer;
display: none;
}
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
display: flex;
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-position: center;
}
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.9);
padding: 50px;
border-radius: 10px;
color: #333;
max-width: 80%;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 3em;
margin-bottom: 20px;
color: #444;
}
p {
font-size: 1.2em;
margin-bottom: 30px;
}
#add-menu {
overflow-y: auto;
}
#menu-bar,
.menu-placeholder {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
background: #121212;
padding: 10px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.8);
color: white;
z-index: 10;
border-top: 1px solid #2a2a2a;
}
.menu-item {
background: #2c2c2c;
border-radius: 20px;
padding: 8px;
transition: background-color 0.3s, transform 0.2s;
}
.menu-item:hover {
background-color: #3a3a3a;
transform: scale(1.1);
}
.menu-item img {
width: 50px;
height: 50px;
}
.menu-placeholder .menu-item img {
width: 50px;
height: 50px;
}
button {
background-color: #4CAF50;
color: white;
font-size: 1em;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out, transform 0.2s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 10px;
}
button:hover {
background-color: #45a049;
}
button:active {
background-color: #387a39;
}
/* Confirmation Dialog */
#confirmation-dialog,
#delete-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.7);
}
.dialog-box {
position: relative;
background: #2c2c2c;
padding: 20px;
border-radius: 10px;
text-align: center;
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
}
.dialog-box p {
margin-bottom: 20px;
font-size: 1.2em;
color: #f0f0f0;
}
.dialog-box button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s;
}
.dialog-box button:first-child {
background-color: #e74c3c;
color: white;
}
.dialog-box button:first-child:hover {
background-color: #c0392b;
transform: scale(1.05);
}
.dialog-box button:last-child {
background-color: #3498db;
color: white;
}
.dialog-box button:last-child:hover {
background-color: #2980b9;
transform: scale(1.05);
}
#dynamic-menu {
position: absolute;
bottom: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: #1e1e1e;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.8);
color: white;
width: 100vw;
height: 250px;
z-index: 20;
overflow-y: auto;
border-radius: 8px;
}
#dynamic-menu input[type="range"] {
width: 100%;
margin: 10px auto;
background: #3a3a3a;
border-radius: 5px;
}
#dynamic-menu input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #fff;
border: 2px solid #555;
border-radius: 50%;
cursor: pointer;
}
#debug-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
font-family: monospace;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#debug-console {
width: 100%;
max-height: 200px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.7);
color: #00ff00;
padding: 5px;
display: none;
}
#debug-toggle-btn {
background: rgba(0, 0, 0, 0.7);
color: #00ff00;
font-size: 14px;
border: none;
padding: 5px 10px;
cursor: pointer;
display: none;
}
/* Style für Move Menu */
#move-menu {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
#move-menu #button-controls {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
#move-menu .middle-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
#move-menu button {
width: 50px;
height: 50px;
border: none;
border-radius: 8px;
background-color: #007BFF;
color: white;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
#move-menu button:active {
background-color: #0056b3;
transform: scale(0.95);
}
#move-menu .spacer {
width: 50px; /* Platzhalter für die Lücke zwischen den Buttons */
}
\ No newline at end of file
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