Skip to content

Moonraker/Klipper Support and Thumbnails #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: v4.1
Choose a base branch
from
Open

Moonraker/Klipper Support and Thumbnails #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e4df232
fix probe
ssendev Apr 20, 2025
0aef7fb
remove postProcessRaster since it's broken
ssendev Apr 20, 2025
afee11f
fix checkSize crash if no gcode was generated
ssendev Apr 20, 2025
3166ab1
syncronize playing state in com.js and jog.js
ssendev Apr 20, 2025
f2ff9ba
allow to reset setZero with alt+click
ssendev Apr 20, 2025
f1e1f79
add Moonraker/Klipper support
ssendev Apr 20, 2025
e4c424e
add thumbnails to gcode
ssendev Apr 20, 2025
dbb18f9
make docker release build actually use the app from this repo
ssendev Apr 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion DOCKER.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ docker run -it --device=/dev/ttyUSB0 --rm -p 8000:8000 laserweb4:dev
## Release
You can run the current lw.comm-server version of the app in Docker using the commands below.

**Warning:** This will bundle the current (head) [lw.comm-server head](https://github.com/LaserWeb/lw.comm-server/) Git version + the LW app bundled with that, it *does not* build the latest LW app from this repo! Use the 'dev' target for that.
**Warning:** This will bundle the current (head) [lw.comm-server head](https://github.com/LaserWeb/lw.comm-server/) Git version + the LW app from this repo.

- build release image:
```
Expand Down
19 changes: 14 additions & 5 deletions Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
#
# ---- Base Node ----
FROM node:16-bullseye AS base
FROM node:22-bookworm AS base
# set working directory
WORKDIR /usr/src/app
# Set up Apt, install build tooling and udev
RUN apt update
RUN apt install -y build-essential udev
RUN apt install -y build-essential udev libudev-dev libusb-1.0-0-dev
# Upgrade npm and set node options
RUN npm install -g npm
RUN npm set progress=false
Expand All @@ -19,12 +19,21 @@ FROM base AS comm-server
# (Currently use --force to allow for broken deps, this should be removed once the dep tree is fixed
RUN npm install -g nodemon && npm install --force lw.comm-server@git+https://github.com/LaserWeb/lw.comm-server.git

# ---- Release ----
# This will use the git head version of lw.comm-server + the LW app version bundled with that.
# it DOES NOT build and serve the version of LaserWeb in this repo
#
# ---- build Laserweb ----
FROM base as build-prod
COPY package.json package-lock.json ./
RUN npm ci --force
COPY . .
RUN npm run bundle-prod

# ---- Release ----
# This will use the git head version of lw.comm-server and Laserweb from the build stage
FROM comm-server AS release
WORKDIR /usr/src/app
# Replace the bundled app with the freshly built Laserweb
RUN rm -rf node_modules/lw.comm-server/app/
COPY --from=build-prod /usr/src/app/dist /usr/src/app/node_modules/lw.comm-server/app/
# define CMD
CMD [ "node", "node_modules/lw.comm-server/server.js"]

Expand Down
556 changes: 497 additions & 59 deletions src/components/com.js
View file
Open in desktop

Large diffs are not rendered by default.

87 changes: 64 additions & 23 deletions src/components/jog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { xOffset, yOffset } from './com';
import CommandHistory from './command-history';

import { Input, TextField, NumberField, ToggleField, SelectField } from './forms';
import { runCommand, runJob, pauseJob, resumeJob, abortJob, clearAlarm, setZero, gotoZero, setPosition, home, probe, checkSize, laserTest, jog, jogTo, feedOverride, spindleOverride, resetMachine } from './com.js';
import { runCommand, runJob, pauseJob, resumeJob, abortJob, clearJob, clearAlarm, setZero, gotoZero, setPosition, home, probe, checkSize, laserTest, jog, jogTo, feedOverride, spindleOverride, resetMachine, serverConnected, socket } from './com.js';
import { MacrosBar } from './macros';

import '../styles/index.css'
Expand All @@ -33,6 +33,7 @@ var ovLoop;
var playing = false;
var paused = false;
var m0 = false;
var thatComponent;

$('body').on('keydown', function (ev) {
if (ev.keyCode === 17) {
Expand Down Expand Up @@ -123,6 +124,7 @@ class Jog extends React.Component {

componentDidMount()
{
thatComponent = this;
this.checkGcodeBounds(this.props.gcode);

bindKeys(this.bindings);
Expand Down Expand Up @@ -176,9 +178,13 @@ class Jog extends React.Component {
}
}

if (serverConnected && socket && socket.moonraker) {
socket.emit('getServerConfig');
}
}

componentWillUnmount() {
thatComponent = undefined;
liveJoggingState = this.state.liveJogging;
//
unbindKeys(this.bindings)
Expand Down Expand Up @@ -244,14 +250,16 @@ class Jog extends React.Component {
let cmd = this.props.gcode;
//alert(cmd);
console.log('runJob(' + cmd.length + ')');
playing = true;
if (cmd.length > 0) {
playing = true;

this.setState({
isPlaying: true,
liveJogging: {
... this.state.liveJogging, disabled: true, hasHomed: false
}
})
this.setState({
isPlaying: true,
liveJogging: {
... this.state.liveJogging, disabled: true, hasHomed: false
}
})
}

runJob(cmd);
} else {
Expand Down Expand Up @@ -296,6 +304,18 @@ class Jog extends React.Component {
}
}

clearJob() {
if (!socket || !socket.moonraker) {
return;
}

if (playing) {
CommandHistory.log('clearJob ignored, because job is running');
} else {
clearJob();
}
}

homeAll() {
console.log('homeAll');
let cmd = this.props.settings.gcodeHoming;
Expand All @@ -313,20 +333,21 @@ class Jog extends React.Component {

probe(axis) {
console.log('probe');
let offset
if (axis.indexOf('z') === 0) {
let offset = this.props.settings.machineZProbeOffset;
offset = this.props.settings.machineZProbeOffset;
} else {
let offset = this.props.settings.machineXYProbeOffset;
offset = this.props.settings.machineXYProbeOffset;
}
probe(axis, offset);
}

setZero(axis) {
setZero(axis, event) {
if (!this.state.isPlaying)
this.setState({ liveJogging: { ... this.state.liveJogging, hasHomed: true, disabled: false } })

console.log('setZero(' + axis + ')');
setZero(axis);
console.log('setZero(' + axis + ', ' + event.altKey + ')');
setZero(axis, event.altKey);
}

setPosition(pos) {
Expand All @@ -346,7 +367,11 @@ class Jog extends React.Component {
if (units == 'mm/s') mult = 60;
feedrate = jQuery('#jogfeedxy').val() * mult;

let bounds=this.getGcodeBounds(this.props.gcode)
let bounds = this.getGcodeBounds(this.props.gcode);
if (!bounds) {
CommandHistory.error('no gcode to check size of');
return;
}
let power = this.props.settings.gcodeCheckSizePower / 100 * this.props.settings.gcodeSMaxValue;
let moves = `
G90\n
Expand Down Expand Up @@ -412,11 +437,9 @@ class Jog extends React.Component {
}

laserTest() {
console.log('laserTest');
let power = this.props.settings.gcodeToolTestPower;
let duration = this.props.settings.gcodeToolTestDuration;
let maxS = this.props.settings.gcodeSMaxValue;
console.log('laserTest(' + power + ',' + duration + ',' + maxS + ')');
laserTest(power, duration, maxS);
}

Expand Down Expand Up @@ -523,7 +546,7 @@ class Jog extends React.Component {
return (
<div style={{ paddingTop: 6 }} >
<span className="badge badge-default badge-notify" title="Machine Status" id="machineStatus" style={{ marginRight: 5 }}>Not Connected</span>
<span className="badge badge-default badge-notify" title="Job details, based on gcode lines completed and queued" id="queueCnt" style={{ marginRight: 5 }}>Queued: 0</span>
<span className="badge badge-default badge-notify" onClick={(e) => { this.clearJob() }} title="Job details, based on gcode lines completed and queued" id="queueCnt" style={{ marginRight: 5 }}>Queued: 0</span>
<div id="mPosition" className="well well-sm" style={{ marginBottom: 7}}>
<div id="rX" className="drolabel">X:</div>
<div className="btn-group dropdown" style={{ marginLeft: -3 }}>
Expand All @@ -539,7 +562,7 @@ class Jog extends React.Component {
<li role="separator" className="divider"></li>
<li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-crop" aria-hidden="true"></i><b>Work Coordinates</b></li>
<li id="homeX"><a href="#" onClick={(e) => { this.home('x') }}><i className="fa fa-fw fa-home" aria-hidden="true"></i>Home X Axis</a></li>
<li id="zeroX"><a href="#" onClick={(e) => { this.setZero('x') }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set X Axis Zero</a></li>
<li id="zeroX"><a href="#" onClick={(e) => { this.setZero('x', e) }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set X Axis Zero</a></li>
<li role="separator" className="divider"></li>
<li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-arrows" aria-hidden="true"></i><b>Move</b></li>
<li id="gotoXZero"><a href="#" onClick={(e) => { this.gotoZero('x') }}><i className="fa fa-fw fa-play" aria-hidden="true"></i>G0 to X0</a></li>
Expand All @@ -562,7 +585,7 @@ class Jog extends React.Component {
<li role="separator" className="divider"></li>
<li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-crop" aria-hidden="true"></i><b>Work Coordinates</b></li>
<li id="homeY"><a href="#" onClick={(e) => { this.home('y') }}><i className="fa fa-fw fa-home" aria-hidden="true"></i>Home Y Axis</a></li>
<li id="zeroY"><a href="#" onClick={(e) => { this.setZero('y') }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set Y Axis Zero</a></li>
<li id="zeroY"><a href="#" onClick={(e) => { this.setZero('y', e) }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set Y Axis Zero</a></li>
<li role="separator" className="divider"></li>
<li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-arrows" aria-hidden="true"></i><b>Move</b></li>
<li id="gotoYZero"><a href="#" onClick={(e) => { this.gotoZero('y') }}><i className="fa fa-fw fa-play" aria-hidden="true"></i>G0 to Y0</a></li>
Expand All @@ -586,7 +609,7 @@ class Jog extends React.Component {
<li role="separator" className="divider"></li>
<li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-crop" aria-hidden="true"></i><b>Work Coordinates</b></li>
<li id="homeZ"><a href="#" onClick={(e) => { this.home('z') }}><i className="fa fa-fw fa-home" aria-hidden="true"></i>Home Z Axis</a></li>
<li id="zeroZ"><a href="#" onClick={(e) => { this.setZero('z') }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set Z Axis Zero</a></li>
<li id="zeroZ"><a href="#" onClick={(e) => { this.setZero('z', e) }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set Z Axis Zero</a></li>
<li role="separator" className="divider"></li>
<li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-arrows" aria-hidden="true"></i><b>Move</b></li>
<li id="gotoZZero"><a href="#" onClick={(e) => { this.gotoZero('z') }}><i className="fa fa-fw fa-play" aria-hidden="true"></i>G0 to Z0</a></li>
Expand All @@ -613,7 +636,7 @@ class Jog extends React.Component {
<li role="separator" className="divider"></li>
<li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-crop" aria-hidden="true"></i><b>Work Coordinates</b></li>
<li id="homeA"><a href="#" onClick={(e) => { this.home('a') }}><i className="fa fa-fw fa-home" aria-hidden="true"></i>Home A Axis</a></li>
<li id="zeroA"><a href="#" onClick={(e) => { this.setZero('a') }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set A Axis Zero</a></li>
<li id="zeroA"><a href="#" onClick={(e) => { this.setZero('a', e) }}><i className="fa fa-fw fa-crosshairs" aria-hidden="true"></i>Set A Axis Zero</a></li>
<li role="separator" className="divider"></li>
<li role="presentation" className="dropdown-header"><i className="fa fa-fw fa-arrows" aria-hidden="true"></i><b>Move</b></li>
<li id="gotoAZero"><a href="#" onClick={(e) => { this.gotoZero('a') }}><i className="fa fa-fw fa-play" aria-hidden="true"></i>G0 to A0</a></li>
Expand Down Expand Up @@ -706,7 +729,7 @@ class Jog extends React.Component {
</button>
</div>
<div className="btn-group">
<button type='button' id="zeroAll" className="btn btn-ctl btn-default" onClick={(e) => { this.setZero('all') }}>
<button type='button' id="zeroAll" className="btn btn-ctl btn-default" onClick={(e) => { this.setZero('all', e) }}>
<span className="fa-stack fa-1x">
<i className="fa fa-crosshairs fa-stack-1x"></i>
<strong className="fa-stack-1x icon-top-text">set</strong>
Expand Down Expand Up @@ -922,11 +945,20 @@ Jog = connect(
// Exports
export default Jog

export function hasHomed(hasHomed) {
liveJoggingState.hasHomed = hasHomed
if (thatComponent) {
thatComponent.setState({
liveJogging: { ...thatComponent.state.liveJogging, hasHomed: hasHomed }
});
}
}

export function runStatus(status) {
export function runStatus(status, applyState = true) {
if (status === 'running') {
playing = true;
paused = false;
m0 = false;
$('#playicon').removeClass('fa-play');
$('#playicon').addClass('fa-pause');
$('#xP').attr('disabled', true);
Expand Down Expand Up @@ -977,6 +1009,15 @@ export function runStatus(status) {
} else if (status === 'alarm') {
//socket.emit('clearAlarm', 2);
}
if (applyState && thatComponent) {
thatComponent.setState({
isPlaying: playing,
isPaused: paused,
isM0: m0,
liveJogging: { ...thatComponent.state.liveJogging, disabled: (playing && !m0) }
});
}
return { playing, paused, m0 };
};

export class LiveJogging extends React.Component {
Expand Down
Loading