Skip to content

Commit

Permalink
wip: improve interface of GRBL
Browse files Browse the repository at this point in the history
  • Loading branch information
@lpatiny
lpatiny committed Mar 12, 2023
1 parent 927feff commit 58c5f9f
Show file tree
Hide file tree
Showing 16 changed files with 547 additions and 209 deletions.
115 changes: 63 additions & 52 deletions demo/grbl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,10 @@
<script src="./devicesToTable.js"></script>
<script src="../dist/legoino-navigator-serial.js"></script>
</head>
<body>
<body style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif">
<div style="display: flex; flex-direction: row">
<div>
<p>
<button onclick="devicesManager.updateDevices()">
updateDevices
</button>
<button onclick="devicesManager.requestDevices()">
requestDevices
</button>
Expand All @@ -37,91 +34,101 @@
</script>
</p>
</div>
<div id="error">

</div>
<div
id="messages"
style="
background-color: lightgrey;
height: 100px;
width: 500px;
display: flex;
flex-direction: column-reverse;
"
></div>
</div>
<div style="display: flex; flex-direction: row">
<div>
<p>
<button onclick="sendCommand('$$')">Print settings</button>
<button onclick="sendCommand('$#')">Print parameters</button>
<button onclick="sendCommand('~')">~ cycle start/resume</button>
<button onclick="sendCommand('!')">! Feed hold</button>
</p>

<p>
<div style="display: flex; flex-direction: column">
<button onclick="sendCommand(String.fromCharCode(0x18))">
ctrl-x
</button>
<button onclick="sendCommand('$')">$ Help</button>
<button onclick="sendCommand('$I')">$I Version info</button>
<button onclick="sendCommand('?')">? Status</button>
<button onclick="sendCommand('~')">~ cycle start/resume</button>
<button onclick="sendCommand('!')">! Feed hold</button>
</p>
<p>
<button onclick="sendCommand('G0 X0 Y0 Z0')">G0 X0 Y0 Z0</button>
<button onclick="sendCommand('G0 X100 Y0 Z0')">
G0 X100 Y0 Z0
</button>
<button onclick="sendCommand('G0 X0 Y100 Z0')">
G0 X0 Y100 Z0
</button>
<button onclick="sendCommand('G0 X0 Y0 Z100')">
G0 X0 Y0 Z100
</button>
</p>

</div>
<div style="background-color: lightgreen">
<h2>Command</h2>
<h2>Manual control</h2>
<p>
X:
<button onclick="sendCommand('X'+(status.info.MPos[0]-100))">
<button onclick="sendCommand('X'+(state.status.MPos[0]-100))">
-100
</button>
<button onclick="sendCommand('X'+(status.info.MPos[0]-10))">
<button onclick="sendCommand('X'+(state.status.MPos[0]-10))">
-10
</button>
<button onclick="sendCommand('X0')">Home</button>
<button onclick="sendCommand('X'+(status.info.MPos[0]+10))">
<button onclick="sendCommand('X0')">0</button>
<button onclick="sendCommand('X'+(state.status.MPos[0]+10))">
+10
</button>
<button onclick="sendCommand('X'+(status.info.MPos[0]+100))">
<button onclick="sendCommand('X'+(state.status.MPos[0]+100))">
+100
</button>
</p>
<p>
Y:
<button onclick="sendCommand('Y'+(status.info.MPos[1]-100))">
<button onclick="sendCommand('Y'+(state.status.MPos[1]-100))">
-100
</button>
<button onclick="sendCommand('Y'+(status.info.MPos[1]-10))">
<button onclick="sendCommand('Y'+(state.status.MPos[1]-10))">
-10
</button>
<button onclick="sendCommand('Y0')">Home</button>
<button onclick="sendCommand('Y'+(status.info.MPos[1]+10))">
<button onclick="sendCommand('Y0')">0</button>
<button onclick="sendCommand('Y'+(state.status.MPos[1]+10))">
+10
</button>
<button onclick="sendCommand('Y'+(status.info.MPos[1]+100))">
<button onclick="sendCommand('Y'+(state.status.MPos[1]+100))">
+100
</button>
</p>
<p>
Z:
<button onclick="sendCommand('Z'+(status.info.MPos[2]-100))">
<button onclick="sendCommand('Z'+(state.status.MPos[2]-100))">
-100
</button>
<button onclick="sendCommand('Z'+(status.info.MPos[2]-10))">
<button onclick="sendCommand('Z'+(state.status.MPos[2]-10))">
-10
</button>
<button onclick="sendCommand('Z0')">Home</button>
<button onclick="sendCommand('Z'+(status.info.MPos[2]+10))">
<button onclick="sendCommand('Z0')">0</button>
<button onclick="sendCommand('Z'+(state.status.MPos[2]+10))">
+10
</button>
<button onclick="sendCommand('Z'+(status.info.MPos[2]+100))">
<button onclick="sendCommand('Z'+(state.status.MPos[2]+100))">
+100
</button>
</p>
</div>
<div style="background-color: lightyellow; overflow: auto; height: 250px">
<div style="text-align: center; font-size: 1.2em">Status
<span style="cursor: pointer;" title="Send ? command" onclick="sendCommand('?')">⟳</span>
</div>
<button onclick="sendCommand('$H')">$H Home</button>
<button onclick="sendCommand('$X')">$X Unlock</button>
<div id="state"></div>
</div>
<div style="background-color: lightcyan">
<h2>GCODE
<button onclick="sendCommand('$G')">$G Gcode status</button>
</h2>
<textarea cols="30" rows="10" id="gcode">X100
Y100
Z100
X0
Y0
Z0
</textarea>
<button onclick="sendGcode(document.getElementById('gcode').value)">Send GCODE</button>
</div>
</div>
</div>

Expand All @@ -130,7 +137,7 @@ <h2>Command</h2>
id="terminal"
style="
background-color: black;
font-family: 'Courier New', Courier, monospace;
font-family: Monaco, Courier, monospace;
font-size: 14px;
overflow: auto;
height: 300px;
Expand All @@ -139,20 +146,24 @@ <h2>Command</h2>
flex-direction: column-reverse;
"
></div>
<div style="background-color: lightyellow; overflow: auto; height: 400px">
<h2>Status</h2>
<div id="status"></div>
</div>

<div style="background-color: pink; overflow: auto; height: 400px">
<h2>Settings</h2>
<div style="text-align: center; font-size: 1.2em">Settings
<span style="cursor: pointer;" title="Send $$ command" onclick="sendCommand('$$')">⟳</span>
</div>
<div id="settings"></div>
</div>
<div style="background-color: lightblue; overflow: auto; height: 400px">
<h2>Parameters</h2>
<div style="text-align: center; font-size: 1.2em">Parameters
<span style="cursor: pointer;" title="Send $# command" onclick="sendCommand('$#')">⟳</span>
</div>
<div id="parameters"></div>
</div>
</div>
<div style="display: flex; flex-direction: row">
<button onclick="devicesManager.updateDevices()">
updateDevices
</button>
<div id="devices"></div>
<div id="logs"></div>
</div>
Expand Down
81 changes: 49 additions & 32 deletions demo/grbl.init.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
const status = {
message: '',
info: {},
settings: {},
parameters: {},
error: {},
version: '',
};
const state = LegoinoSerial.GRBL.getEmptyState();

const terminal = new LegoinoSerial.Terminal({
onChange: (newEvents, allEvents) => {
document.getElementById('terminal').innerHTML = terminal.toHtml();
},
ignoreSend: [/\?/],
ignoreReceive: [/^(ok|<)/],
//ignoreSend: [/\?/],
// ignoreReceive: [/^(ok|<)/],
showSpecial: false,
});

const devicesManager = new LegoinoSerial.DevicesManager(navigator.serial, {
Expand All @@ -33,7 +27,7 @@ const devicesManager = new LegoinoSerial.DevicesManager(navigator.serial, {
},
device: {
interCommandDelay: 50,
timeout: 100,
timeout: 1000,
},
});

Expand All @@ -48,9 +42,9 @@ async function doAll() {
},
});

// monitoring the status
// monitoring the state
window.setInterval(async () => {
await sendCommand('?');
await sendCommand('?', { disableTerminal: true });
}, 250);

// checking if anything is coming just like that
Expand All @@ -60,7 +54,6 @@ async function doAll() {
timeout: 20,
timeoutResolve: true,
});
console.log(result);
}, 2000);
}

Expand All @@ -75,27 +68,51 @@ async function sendCommand(command, options = {}) {
await devicesManager
.sendCommand('9025-67', command, options)
.then((result) => {
LegoinoSerial.GRBL.updateStatus(result, status);
LegoinoSerial.GRBL.updateState(result, state);
})
.catch((e) => {
LegoinoSerial.GRBL.updateStatus(e, status);
LegoinoSerial.GRBL.updateState(e, state);
});
updateScreen();
}

function sendGcode(text) {
for (let command of text.split(/\r?\n/).filter((line) => line)) {
const sentLine = state.gcode.sentLine++;
sendCommand(`N${sentLine} ${command}`);
}
}

function updateScreen() {
console.log(status.error);
document.getElementById('error').innerHTML = status.error.code
? `${status.error.code}: ${status.error.description}`
: '';
document.getElementById('status').innerHTML = `
<h2>${status.message}</h2>
<h3>X: ${status.info?.MPos?.[0]}</h3>
<h3>Y: ${status.info?.MPos?.[1]}</h3>
<h3>Z: ${status.info?.MPos?.[2]}</h3>
FS: ${status.info.FS}<br/>
Ov: ${status.info.Ov}<br/>
WCO: ${status.info.Ov}<br/>
document.getElementById('messages').innerHTML = `<div>${state.messages
.map((message) => {
const style = message.kind.match(/(error|alarm)/i)
? 'color: red; font-weight: bold'
: '';
let line = `<div style="${style}">${message.kind}: ${message.description}</div>`;
return line;
})
.join('\n')}</div>`;

const pinStates = state.status.Pn.map((pinState, pinIndex) => {
const pinName = state.settings[`$P${pinIndex}`]?.description;
return `<span style="padding: 2px; margin: 2px; border: solid 1px; color: ${
pinState ? 'green' : 'red'
}">${String.fromCharCode(88 + pinIndex)}: ${pinState}</span>`;
}).join('\n');

document.getElementById('state').innerHTML = `
<div style="font-size: 2em; text-align: center; font-weight: bold">${state.status.value}</div>
<div style="font-size: 1.5em; font-weight: bold">X: ${state.status?.MPos?.[0]}</div>
<div style="font-size: 1.5em; font-weight: bold">Y: ${state.status?.MPos?.[1]}</div>
<div style="font-size: 1.5em; font-weight: bold">Z: ${state.status?.MPos?.[2]}</div>
Pin states: ${pinStates}<br/>
Feed rate: ${state.status.FS?.[0]}<br/>
Spindle rate: ${state.status.FS?.[1]}<br/>
GCode line number: ${state.status.Ln?.[0]}<br/>
Override Values: ${state.status.Ov}<br/>
Work Coordinate Offset: ${state.status.WCO}<br/>
`;

document.getElementById('settings').innerHTML = `
Expand All @@ -105,9 +122,9 @@ function updateScreen() {
<th>Value</th>
<th>Description</th>
</tr>
${Object.keys(status.settings)
${Object.keys(state.settings)
.sort((a, b) => Number(a.substring(1)) - Number(b.substring(1)))
.map((key) => status.settings[key])
.map((key) => state.settings[key])
.map(
(setting) =>
`
Expand All @@ -129,9 +146,9 @@ function updateScreen() {
<th>Value</th>
<th>Description</th>
</tr>
${Object.keys(status.parameters)
${Object.keys(state.parameters)
.sort()
.map((key) => status.parameters[key])
.map((key) => state.parameters[key])
.map(
(parameter) =>
`
Expand Down
Loading

0 comments on commit 58c5f9f

Please sign in to comment.