GCode Preview

A simple G-code parser & viewer lib with 3D printing in mind. Written in Typescript.

Join us on discord

New org: XYZ Tools

11-11-2024 This repo was moved to a brand new org which is a collaboration between @remcoder and @sophiedeziel for everything 3D printing related.

Feature summary

• multi-color
• tube geometry
• g2/g3 arcs
• thumbnail preview
• build volume
• examples for various frameworks

Demo

Minimal demo

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

Batteries included

Click to see the full-fledged demo:

Installation

npm install gcode-preview

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);

API Docs

Check the full API documentation at https://gcode-preview.web.app/docs

Vue.js / React / Svelte integration

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

@Zeng95 provided a React & Typescript example that has a React component to wrap the library.

There is a Svelte example with a Svelte component.

Feature description

Multi-color support

GCode files that were sliced for a multi-tool system can be previewed as such. Assign an array of colors to the extrusionColor property, where the index in the array corresponds to the index of the tool: T0..T7.

example:

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

Here, T0 is hotpink, T1 is indigo and T2 is 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

renderTubes : true

G2/G3 arc support

Thanks to @Sindarius arc commands are now supported, which means gcode processed by ArcWelder should be rendered correctly.

Thumbnail preview

Thumbnail previews as generated by PrusaSlicer are detected and parsed. In the gcode these are found in comments, enclosed between 'thumbnail begin' and 'thumbnail end'. The images are encoded as base64 strings but split over multiple lines. These are now parsed and patched back together, but still kept a base64. This allows easy use in the browser for us as data urls.

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

The build volume will be rendered if the buildVolume parameter is passed. It has the following type:

buildVolume: { 
  x: number; 
  y: number; 
  z: number
}

example:

Development

To develop on gcode-preview run:

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

Before submitting a PR run:

• npm run build for a production build
• npm run test for unit tests
• npm run typeCheck for typescript typings
• npm run lint for code style and formatting
• or all together: npm run build && npm run test && npm run typeCheck && npm run lint

To auto-fix simple issues:

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

Production builds

For working on production builds you can use:

• 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

If you have found a bug or if have an idea for a feature, don't hesitate to create an issue on GitHub or talk to us on Discord.

Contributing

Want to help out? We are open to your ideas and always willing to get you started! talk to us on Discord.

• 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 @sophiedeziel for rendering extrusion as tubes.
• ❤️ Thank you @Sindarius for implementing G2/G3 arc support.
• ❤️ Thank you @Zeng95 for providing a React & Typescript example.

Known issues

Preview doesn't render in Brave

This is caused by the device recognition shield in Brave. By changing the setting for "Device Recognition" in Shield settings to "Allow all device recognition attemps" or "Only block cross-site device recognition attemps" you should not get this error.
mrdoob/three.js#16904

Sponsors

A big thanks to these sponsors for their contributions.

Donate

If you want to show gratitude you can always buy me beer/coffee/filament via ko-fi or
PayPal
^_^

License

This project is licensed under the MIT License.