diff --git a/public/ar_main.js b/public/ar_main.js index 2719804e10890e9dd6f9aac05aeda3d8c8cea200..52984eaf955cbb773faa8c1a999354693e38f6ef 100644 --- a/public/ar_main.js +++ b/public/ar_main.js @@ -356,20 +356,32 @@ function openMoveMenu() { const dynamicMenu = document.getElementById("dynamic-menu"); dynamicMenu.style.display = "flex"; dynamicMenu.innerHTML = ` - <h3>Position anpassen</h3> - <label>Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span> - <input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}" onchange="updateMoveDelta(this.value)"></label> - <div id="button-controls"> - <button class="control-button" id="up" onclick="moveModelDynamic('z', -moveDelta)">↑</button> - <div class="middle-row"> - <button class="control-button" id="left" onclick="moveModelDynamic('x', -moveDelta)">â†</button> - <div class="spacer"></div> - <button class="control-button" id="right" onclick="moveModelDynamic('x', moveDelta)">→</button> + <div id="move-menu"> + <h3>Position anpassen</h3> + <label> + Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span> + <input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}" onchange="updateMoveDelta(this.value)"> + </label> + <div id="button-controls"> + <button class="control-button" id="up" onclick="moveModelDynamic('z', -moveDelta)"> + <img src="assets/icons/up-arrow.png" alt="Up" /> + </button> + <div class="middle-row"> + <button class="control-button" id="left" onclick="moveModelDynamic('x', -moveDelta)"> + <img src="assets/icons/left-arrow.png" alt="Left" /> + </button> + <div class="spacer"></div> + <button class="control-button" id="right" onclick="moveModelDynamic('x', moveDelta)"> + <img src="assets/icons/right-arrow.png" alt="Right" /> + </button> + </div> + <button class="control-button" id="down" onclick="moveModelDynamic('z', moveDelta)"> + <img src="assets/icons/down-arrow.png" alt="Down" /> + </button> </div> - <button class="control-button" id="down" onclick="moveModelDynamic('z', moveDelta)">↓</button> + <button onclick="closeDynamicMenu()">Zurück</button> </div> - <button onclick="closeDynamicMenu()">Zurück</button> - `; + `; } function updateMoveDelta(value) { diff --git a/public/assets/icons/down-arrow.png b/public/assets/icons/down-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..c49f3aaf4758518467172a1ecfb6e7f785cd0807 Binary files /dev/null and b/public/assets/icons/down-arrow.png differ diff --git a/public/assets/icons/left-arrow.png b/public/assets/icons/left-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..81cfb4755c610397aeaf845064c684b3d7996e88 Binary files /dev/null and b/public/assets/icons/left-arrow.png differ diff --git a/public/assets/icons/right-arrow.png b/public/assets/icons/right-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..6fac90b1066d8c09bb805d23abab8fea18da628f Binary files /dev/null and b/public/assets/icons/right-arrow.png differ diff --git a/public/assets/icons/up-arrow.png b/public/assets/icons/up-arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..f1c69a2536c3daf5e569de0a868e8852201b21de Binary files /dev/null and b/public/assets/icons/up-arrow.png differ diff --git a/public/style.css b/public/style.css index 2ea50e87cb28d36bc6d26336e7da1a3d78a5aca3..49fd00d87e02290aecd5ecc9a2de0e0f85a5e428 100644 --- a/public/style.css +++ b/public/style.css @@ -240,6 +240,14 @@ button:active { /* Style für Move Menu */ +#move-menu { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 10px; +} + #button-controls { display: flex; flex-direction: column; @@ -261,12 +269,16 @@ button:active { border: none; border-radius: 5px; background-color: #007BFF; - color: white; - font-size: 18px; cursor: pointer; transition: background-color 0.3s, transform 0.2s; } +#button-controls .control-button img { + width: 100%; + height: 100%; + object-fit: contain; +} + #button-controls .control-button:active { background-color: #0056b3; transform: scale(0.95);