142 lines
3.4 KiB
HTML
142 lines
3.4 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: 300px;
|
|
padding: 15px;
|
|
background: #333;
|
|
border-radius: 10px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.btnGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 120px);
|
|
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;
|
|
}
|
|
</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></button>
|
|
<button onclick="jog('X', 10)">X +10</button>
|
|
|
|
<button onclick="jog('Z', 10)">Z +10</button>
|
|
<button></button>
|
|
<button onclick="jog('Z', -10)">Z -10</button>
|
|
</div>
|
|
|
|
<script>
|
|
let ws;
|
|
|
|
function connectWS() {
|
|
ws = new WebSocket("wss://" + window.location.hostname + ":3000");
|
|
|
|
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(line) {
|
|
|
|
let match = line.match(/WPos:([^|>]+)/);
|
|
if (!match) {
|
|
match = line.match(/MPos:([^|>]+)/);
|
|
if (!match) return; // Keiner von beiden vorhanden
|
|
}
|
|
|
|
|
|
const coords = match[1].split(",").map(Number);
|
|
|
|
// Nur X (Index 0) und Z (Index 2) anzeigen
|
|
const x = coords[0];
|
|
const z = coords[2];
|
|
|
|
|
|
document.getElementById("posX").textContent = x.toFixed(3);
|
|
document.getElementById("posZ").textContent = z.toFixed(3);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |