228 lines
6.2 KiB
HTML
228 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>SCARA Robot Control</title>
|
||
<style>
|
||
body {
|
||
background: #202020;
|
||
color: #e0e0e0;
|
||
font-family: Arial, sans-serif;
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#posBox {
|
||
margin: 20px auto;
|
||
width: 406px;
|
||
padding: 15px;
|
||
background: #333;
|
||
border-radius: 10px;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.btnGrid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 80px);
|
||
gap: 10px;
|
||
justify-content: center;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
button {
|
||
background: #444;
|
||
border: none;
|
||
padding: 15px;
|
||
font-size: 18px;
|
||
color: white;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
button:hover {
|
||
background: #666;
|
||
}
|
||
|
||
|
||
.gcodeRow {
|
||
display: inline-flex;
|
||
gap: 8px;
|
||
align-items: stretch;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.controlInput {
|
||
height: 48px; /* gleiche Höhe wie Button */
|
||
font-size: 18px;
|
||
padding: 0 10px; /* vertikal 0, dadurch exakte Höhe */
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
border: 1px solid #555;
|
||
background: #fff;
|
||
color: #000;
|
||
min-width: 260px; /* optional: Breite ähnlich wie vorher */
|
||
}
|
||
|
||
.controlButton {
|
||
height: 48px; /* gleiche Höhe wie Input */
|
||
padding: 0 18px; /* vertikal 0, zentriert via flex */
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<h1>SCARA Robot Control</h1>
|
||
|
||
<div id="posBox">
|
||
<div>X: <span id="posX">0.000</span></div>
|
||
<div>Z: <span id="posZ">0.000</span></div>
|
||
</div>
|
||
|
||
<h2>Jog Controls</h2>
|
||
|
||
<div class="btnGrid">
|
||
<button onclick="jog('X', -10)">X -10</button>
|
||
<button onclick="jog('X', -1)">X -1</button>
|
||
<button></button>
|
||
<button onclick="jog('X', 1)">X +1</button>
|
||
<button onclick="jog('X', 10)">X +10</button>
|
||
|
||
<button onclick="jog('Z', -10)">Z -10</button>
|
||
<button onclick="jog('Z', -1)">Z -1</button>
|
||
<button></button>
|
||
<button onclick="jog('Z', 1)">Z +1</button>
|
||
<button onclick="jog('Z', 10)">Z +10</button>
|
||
</div>
|
||
|
||
|
||
<h2>G‑Code Eingabe</h2>
|
||
<div class="gcodeRow">
|
||
<input id="gcodeInput" class="controlInput" type="text"
|
||
placeholder="G0 X10 Z-5"
|
||
onkeydown="if (event.key === 'Enter') { sendGcodeFeld(); this.select(); }"
|
||
autofocus>
|
||
<button class="controlButton" onclick="sendGcodeFeld()">Senden</button>
|
||
</div>
|
||
<br/><br/>
|
||
<div class="gcodeRow">
|
||
<button class="controlButton" onclick="setZero()">Zurücksetzen auf 0</button>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
let ws;
|
||
|
||
function connectWS() {
|
||
ws = new WebSocket("wss://" + window.location.hostname + ":" + window.location.port);
|
||
|
||
ws.onopen = () => {
|
||
console.log("WS connected");
|
||
};
|
||
|
||
ws.onclose = () => {
|
||
console.warn("WS disconnected → reconnecting...");
|
||
setTimeout(connectWS, 1000);
|
||
};
|
||
|
||
ws.onmessage = (ev) => {
|
||
const text = ev.data;
|
||
|
||
// GRBL/FluidNC status line?
|
||
if (text.startsWith("<")) {
|
||
handleStatus(text);
|
||
return;
|
||
}
|
||
|
||
// Try JSON only if valid JSON
|
||
try {
|
||
const data = JSON.parse(text);
|
||
console.log("JSON:", data);
|
||
} catch (e) {
|
||
// non JSON → ignore
|
||
}
|
||
};
|
||
|
||
ws.onerror = (e) => console.error("WS error:", e);
|
||
}
|
||
|
||
connectWS();
|
||
|
||
// --- Jog-Funktion ---
|
||
function jog(axis, value) {
|
||
ws.send(JSON.stringify({
|
||
type: "jog",
|
||
axis: axis,
|
||
value: value
|
||
}));
|
||
}
|
||
|
||
// --- GRBL Status Parser ---
|
||
|
||
function handleStatus(rawLine) {
|
||
const line = String(rawLine).trim();
|
||
|
||
// 1) Versuche WPos direkt zu lesen
|
||
const wposMatch = line.match(/WPos:([^|>]+)/);
|
||
if (wposMatch) {
|
||
const [x, , z] = wposMatch[1].split(",").map(Number);
|
||
updateXZ(x, z);
|
||
return;
|
||
}
|
||
|
||
// 2) Kein WPos vorhanden → MPos und WCO lesen und WPos = MPos - WCO berechnen
|
||
const mposMatch = line.match(/MPos:([^|>]+)/);
|
||
const wcoMatch = line.match(/WCO:([^|>]+)/);
|
||
|
||
if (mposMatch && wcoMatch) {
|
||
const mpos = mposMatch[1].split(",").map(Number);
|
||
const wco = wcoMatch[1].split(",").map(Number);
|
||
|
||
const x = (mpos[0] ?? 0) - (wco[0] ?? 0);
|
||
const z = (mpos[2] ?? 0) - (wco[2] ?? 0);
|
||
|
||
updateXZ(x, z);
|
||
}
|
||
}
|
||
|
||
function updateXZ(x, z) {
|
||
const elX = document.getElementById("posX");
|
||
const elZ = document.getElementById("posZ");
|
||
if (elX) elX.textContent = Number.isFinite(x) ? x.toFixed(3) : "—";
|
||
if (elZ) elZ.textContent = Number.isFinite(z) ? z.toFixed(3) : "—";
|
||
}
|
||
|
||
|
||
|
||
function sendGcodeFeld() {
|
||
const el = document.getElementById("gcodeInput"); // ← neu
|
||
const cmd = el.value.trim();
|
||
sendGcode("G90");
|
||
sendGcode(cmd);
|
||
|
||
el.value = ""; // ← neu
|
||
el.focus();
|
||
}
|
||
|
||
function sendGcode(cmd) {
|
||
if (!cmd) return;
|
||
ws.send(JSON.stringify({ type: "gcode", cmd }));
|
||
|
||
}
|
||
|
||
function setZero() {
|
||
sendGcode("G92 X0 Z0");
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |