WS statt Telnet
This commit is contained in:
chk
206
web/index.html
206
web/index.html
@@ -1,132 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<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;
|
||||
}
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<title>FluidNC Control</title>
|
||||
h1 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
<style>
|
||||
#posBox {
|
||||
margin: 20px auto;
|
||||
width: 300px;
|
||||
padding: 15px;
|
||||
background: #333;
|
||||
border-radius: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family:Arial;
|
||||
margin:40px;
|
||||
}
|
||||
.btnGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 120px);
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
button{
|
||||
width:60px;
|
||||
height:40px;
|
||||
margin:3px;
|
||||
}
|
||||
|
||||
.axis{
|
||||
margin-bottom:30px;
|
||||
}
|
||||
|
||||
.status{
|
||||
font-size:20px;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
button {
|
||||
background: #444;
|
||||
border: none;
|
||||
padding: 15px;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #666;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h2 id="connection">Trying to connect to FluidNC...</h2>
|
||||
<h1>SCARA Robot Control</h1>
|
||||
|
||||
<div class="axis">
|
||||
<div id="posBox">
|
||||
<div>X: <span id="posX">0.000</span></div>
|
||||
<div>Z: <span id="posZ">0.000</span></div>
|
||||
</div>
|
||||
|
||||
<h3>X Axis</h3>
|
||||
<h2>Jog Controls</h2>
|
||||
|
||||
<button onclick="jog('x',-10)">-10</button>
|
||||
<button onclick="jog('x',-1)">-1</button>
|
||||
<div class="btnGrid">
|
||||
<button onclick="jog('X', -10)">X -10</button>
|
||||
<button></button>
|
||||
<button onclick="jog('X', 10)">X +10</button>
|
||||
|
||||
<span id="x">0</span>
|
||||
<button onclick="jog('Z', 10)">Z +10</button>
|
||||
<button></button>
|
||||
<button onclick="jog('Z', -10)">Z -10</button>
|
||||
</div>
|
||||
|
||||
<button onclick="jog('x',1)">+1</button>
|
||||
<button onclick="jog('x',10)">+10</button>
|
||||
<script>
|
||||
let ws;
|
||||
|
||||
</div>
|
||||
function connectWS() {
|
||||
ws = new WebSocket("wss://" + window.location.hostname + ":3000");
|
||||
|
||||
<div class="axis">
|
||||
ws.onopen = () => {
|
||||
console.log("WS connected");
|
||||
};
|
||||
|
||||
<h3>Z Axis</h3>
|
||||
ws.onclose = () => {
|
||||
console.warn("WS disconnected → reconnecting...");
|
||||
setTimeout(connectWS, 1000);
|
||||
};
|
||||
|
||||
<button onclick="jog('z',-10)">-10</button>
|
||||
<button onclick="jog('z',-1)">-1</button>
|
||||
ws.onmessage = (ev) => {
|
||||
const text = ev.data;
|
||||
|
||||
<span id="z">0</span>
|
||||
// GRBL/FluidNC status line?
|
||||
if (text.startsWith("<")) {
|
||||
handleStatus(text);
|
||||
return;
|
||||
}
|
||||
|
||||
<button onclick="jog('z',1)">+1</button>
|
||||
<button onclick="jog('z',10)">+10</button>
|
||||
// Try JSON only if valid JSON
|
||||
try {
|
||||
const data = JSON.parse(text);
|
||||
console.log("JSON:", data);
|
||||
} catch (e) {
|
||||
// non JSON → ignore
|
||||
}
|
||||
};
|
||||
|
||||
</div>
|
||||
ws.onerror = (e) => console.error("WS error:", e);
|
||||
}
|
||||
|
||||
<h3>GCode</h3>
|
||||
connectWS();
|
||||
|
||||
<input id="gcode" style="width:300px"/>
|
||||
<button onclick="sendGcode()">Send</button>
|
||||
// --- Jog-Funktion ---
|
||||
function jog(axis, value) {
|
||||
ws.send(JSON.stringify({
|
||||
type: "jog",
|
||||
axis: axis,
|
||||
value: value
|
||||
}));
|
||||
}
|
||||
|
||||
<br><br>
|
||||
// --- GRBL Status Parser ---
|
||||
function handleStatus(line) {
|
||||
|
||||
<button onclick="setZero()">Set Current Position to Zero</button>
|
||||
let match = line.match(/WPos:([^|>]+)/);
|
||||
if (!match) {
|
||||
match = line.match(/MPos:([^|>]+)/);
|
||||
if (!match) return; // Keiner von beiden vorhanden
|
||||
}
|
||||
|
||||
<script>
|
||||
|
||||
const ws = new WebSocket("wss://"+location.host);
|
||||
const coords = match[1].split(",").map(Number);
|
||||
|
||||
ws.onmessage = (e)=>{
|
||||
// Nur X (Index 0) und Z (Index 2) anzeigen
|
||||
const x = coords[0];
|
||||
const z = coords[2];
|
||||
|
||||
|
||||
const data = JSON.parse(e.data);
|
||||
|
||||
if(data.type==="connection"){
|
||||
|
||||
if(data.connected){
|
||||
document.getElementById("connection").innerText="FluidNC connected";
|
||||
}else{
|
||||
document.getElementById("connection").innerText="Trying to connect to FluidNC...";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if(data.type==="status"){
|
||||
|
||||
document.getElementById("x").innerText=data.x.toFixed(2);
|
||||
document.getElementById("z").innerText=data.z.toFixed(2);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function jog(axis,val){
|
||||
|
||||
ws.send(JSON.stringify({
|
||||
type:"jog",
|
||||
axis:axis,
|
||||
value:val
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
function sendGcode(){
|
||||
|
||||
ws.send(JSON.stringify({
|
||||
type:"gcode",
|
||||
cmd:document.getElementById("gcode").value
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
function setZero(){
|
||||
|
||||
ws.send(JSON.stringify({
|
||||
type:"zero"
|
||||
}));
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
document.getElementById("posX").textContent = x.toFixed(3);
|
||||
document.getElementById("posZ").textContent = z.toFixed(3);
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user