A simple G-code parser & viewer with 3D printing in mind. Written in Typescript.
Join us on discord
- multi-color
- tube geometry (experimental)
- g2/g3 arcs
- thumbnail preview
- build volume
- examples for various frameworks
Click to see the interactive demo:
npm install gcode-preview
import * as GCodePreview from 'gcode-preview';
const preview = GCodePreview.init({
canvas: document.querySelector('canvas'),
extrusionColor: 'hotpink'
});
// draw a diagonal line
const gcode = 'G0 X0 Y0 Z0.2\nG1 X42 Y42 E10';
preview.processGCode(gcode);
Check the full API documentation at https://gcode-preview.web.app/docs
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.
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.
![image](https://private-user-images.githubusercontent.com/461650/323358728-d965d30f-101e-40d3-8ad7-c8257dd7866a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1NjgwNTksIm5iZiI6MTcyNDU2Nzc1OSwicGF0aCI6Ii80NjE2NTAvMzIzMzU4NzI4LWQ5NjVkMzBmLTEwMWUtNDBkMy04YWQ3LWM4MjU3ZGQ3ODY2YS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI1JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNVQwNjM1NTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zZDgxYTVjMThhNGU0OTA3ZDc5MGVkMDI2ZmVkMjdlZmY2YThlMWJkM2E5MzVjMmU2YmQxYzQzYTI0MGEzMzg3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.OvAR49z-X-ofby1F6-LyS9hyC--Eq4PA6R99q_us89M)
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
renderTubes : true
Thanks to @Sindarius arc commands are now supported, which means gcode processed by ArcWelder should be rendered correctly.
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.
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.
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:
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.
It would be great if you want to help! Maybe you'd like to help out with:
- testing GCode Preview with a variety of gcode files, from different slicers
- making GCode Preview suitable for different printer types, like Deltas, Belt printers, IDEX, etc.
- please report any bugs you find and add as much detail as possible, or even better, a screenshot
- even better yet: send in a pull request :-)
- apart from the main code, lots of improvements can still be made in:
- documentation
- unit tests
- ❤️ 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.
Jump to the CHANGELOG
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
A big thanks to these sponsors for their contributions.
If you want to show gratitude you can always buy me beer/coffee/filament via a Paypal donation ^_^