GCode Preview

Join us on discord

New org: XYZ Tools

Feature summary

• multi-color
• tube geometry
• g2/g3 arcs
• streaming (progressive rendering from a ReadableStream)
• thumbnail preview
• build volume
• orthographic camera
• slicer detection (PrusaSlicer family, Cura, Simplify3D, Slic3r)
• per-path extrusion width & line height from ;WIDTH: / ;HEIGHT: slicer comments (adaptive layer height)
• drag & drop
• examples for various frameworks

Demo

Minimal demo

try it out: https://codepen.io/remcoder/pen/PwYVXBg

Batteries included

Installation

npm install gcode-preview

GCode Preview depends on three.js and supports three >=0.166.0 <0.186.0.

Quick start

import { GCodePreview } from 'gcode-preview';
const preview = new GCodePreview({
      canvas: document.querySelector('canvas'),
      extrusionColor: 'hotpink'
  });
  
  // draw a diagonal line
  const gcode = 'G0 X0 Y0 Z0.2\nG1 X42 Y42 E10';
  preview.processGCode(gcode);

G-code can also be streamed in and rendered progressively:

const response = await fetch('benchy.gcode');
  await preview.processGCodeStream(response.body);

Constructor options

The main options accepted by new GCodePreview({ ... }) (see the API docs for the full reference):

• canvas — the canvas element to render to
• buildVolume — renders the build volume (see below)
• colors: backgroundColor, extrusionColor, travelColor, topLayerColor, lastSegmentColor, boundingBoxColor
• render toggles: renderExtrusion, renderTravel, renderTubes, disableGradient
• geometry: lineWidth, lineHeight, extrusionWidth — per-path dimensions from ;WIDTH: / ;HEIGHT: slicer comments always win (adaptive layer height renders correctly); lineHeight / extrusionWidth fill in for paths without them, and built-in defaults (0.6 width / 0.2 height) apply last
• layer range: startLayer, endLayer
• camera: orthographic, initialCameraPosition
• streaming: liveRenderInterval (throttles progressive rendering)
• arcs: arcChordTolerance (tessellation precision for G2/G3)
• misc: droppable (drag & drop g-code files onto the canvas), devMode (debug GUI + stats), keepLines, minLayerThreshold

API Docs

Vue.js / React / Svelte integration

There's a Vue.js example that has a Vue component to wrap the library.

Feature description

Supported G-code commands

The interpreter currently handles:

| Command | Meaning | | --- | --- | | G0 / G1 | linear move | | G2 / G3 | clockwise / counter-clockwise arc | | G20 / G21 | set units to inches / millimeters | | G28 | home | | G31 | straight probe | | G38.2–G38.5 | probe family | | G92 | set position | | G92.1 | reset coordinate system offsets | | T0–T7 | tool selection |

Commands without a handler are parsed but ignored by the interpreter.

G92.2 and G92.3 are not supported. Standalone ;WIDTH: and ;HEIGHT: comments (emitted by PrusaSlicer, SuperSlicer, OrcaSlicer and Bambu Studio) are picked up by the slicer metadata pipeline and set the extrusion width and line height of the paths that follow, so prints sliced with adaptive layer height render with the true dimensions of each path. Dimensions resolve per path: the slicer-announced value wins, the lineHeight / extrusionWidth options fill in for paths without one, and the built-in defaults (0.6 width / 0.2 height) apply last.

Multi-color support

GCode files that were sliced for a multi-tool system can be previewed as such. Pass an array of colors as the extrusionColor constructor option (or assign preview.sceneManager.extrusionColor at runtime), where the index in the array corresponds to the index of the tool: T0..T7.

example:

extrusionColor: ['hotpink', 'indigo', 'lime']

Supported systems include: - Prusa MMU1/2/3 and XL - Bambulab AMS & AMS lite - Enraged Rabbit Carrot Feeder (ERCF) - IDEX machines - toolchangers - 3D Chameleon - Virtual tools (color mixing) - and possibly more

Render extrusion as tubes

new GCodePreview({ canvas, renderTubes: false });

G2/G3 arc support

Thumbnail preview

!image Thumbnail Preview as generated by PrusaSlicer

The thumbnails can be accessed like this: gcodePreview.parser.metadata.thumbnails['220x124']

Thumbnails have a .src property that will create a usable data url from the base64 string.

See an example in the demo source.

Build volume

buildVolume: { 
  x: number; 
  y: number; 
  z: number;
  smallGrid?: boolean;
}

example:

Development

npm i && npm run dev

This runs the demo app which is fairly complete in using the libs features.

If you don't need the demo app, just run npm run dev:watch.

Both build a dev bundle in the dist directory. Note the dev bundle: - is not minified - has no type defs (.d.ts)

Submitting a PR

• npm run check (test + typeCheck + lint)
• npm run build for a production build
• npm run test:coverage — CI requires 100% coverage for every file under src/

• npm run lint:fix or npm run prettier:fix

Production builds

• npm run demo which does a prod build and launches the demo app using local server
• or just npm run build or npm run build:watch

Feedback

Contributing

- maybe there is an open issue that appeals to you? - other things that are always helpful: - testing different gcode files, from different slicers - reporting bugs! Screenshot == ❤️ - making GCode Preview suitable for different printer types, like Deltas, Belt printers, IDEX, etc. Even CNC machines - documentation & examples - unit tests

Contributors

• ❤️ Thank you @0xTHAC0 for adding the orthographic camera.
• ❤️ Thank you @sophiedeziel for rendering extrusion as tubes and creating a new interpreter.
• ❤️ Thank you @RickRyan26 and @Sindarius for implementing G2/G3 arc support.
• ❤️ Thank you @Zeng95 for providing a React & Typescript example.
• ❤️ Thank you @raulodev for parser and preview fixes.
• ❤️ Thank you @TimTheBig for dependency and tooling updates.

Known issues

Preview doesn't render in Brave

Sponsors

A big thanks to these sponsors for their contributions.

Donate

License

This project is licensed under the MIT License.