132 lines
1.7 KiB
HTML
132 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
<title>FluidNC Control</title>
|
|
|
|
<style>
|
|
|
|
body{
|
|
font-family:Arial;
|
|
margin:40px;
|
|
}
|
|
|
|
button{
|
|
width:60px;
|
|
height:40px;
|
|
margin:3px;
|
|
}
|
|
|
|
.axis{
|
|
margin-bottom:30px;
|
|
}
|
|
|
|
.status{
|
|
font-size:20px;
|
|
margin-bottom:20px;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h2 id="connection">Trying to connect to FluidNC...</h2>
|
|
|
|
<div class="axis">
|
|
|
|
<h3>X Axis</h3>
|
|
|
|
<button onclick="jog('x',-10)">-10</button>
|
|
<button onclick="jog('x',-1)">-1</button>
|
|
|
|
<span id="x">0</span>
|
|
|
|
<button onclick="jog('x',1)">+1</button>
|
|
<button onclick="jog('x',10)">+10</button>
|
|
|
|
</div>
|
|
|
|
<div class="axis">
|
|
|
|
<h3>Z Axis</h3>
|
|
|
|
<button onclick="jog('z',-10)">-10</button>
|
|
<button onclick="jog('z',-1)">-1</button>
|
|
|
|
<span id="z">0</span>
|
|
|
|
<button onclick="jog('z',1)">+1</button>
|
|
<button onclick="jog('z',10)">+10</button>
|
|
|
|
</div>
|
|
|
|
<h3>GCode</h3>
|
|
|
|
<input id="gcode" style="width:300px"/>
|
|
<button onclick="sendGcode()">Send</button>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="setZero()">Set Current Position to Zero</button>
|
|
|
|
<script>
|
|
|
|
const ws = new WebSocket("wss://"+location.host);
|
|
|
|
ws.onmessage = (e)=>{
|
|
|
|
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>
|
|
|
|
</body>
|
|
</html> |