GCode Preview 
A simple G-code parser & viewer with 3D printing in mind. Written in Typescript. Try the demo
Features
3D WebGL + pan/zoom/rotate controls
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.
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:
Demo
Go try the interactive demo.
Installation
npm install gcode-preview
or
yarn add gcode-preview
Quick start
Html
<body>
<canvas class="gcode-preview"></canvas>
<script src="three/build/three.min.js"></script>
<script src="three/examples/js/controls/OrbitControls.js"></script>
<script src="gcode-preview.js"></script>
</body>
Javascript
const preview = new GCodePreview.init({
document.querySelector('canvas'),
});
// draw a diagonal line
const gcode = 'G0 X0 Y0 Z0.2\nG1 X42 Y42 E10';
preview.processGCode(gcode);
Vue.js integration
There's a Vue.js example that has a Vue component to wrap the library.
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
Notice: deprecation of Canvas2D
In favor of WebGL, I'm deprecating the Canvas 2Drendering. My reasons for this are:
- WebGL (via THREE.js) gives me more options, like rotating the model
- WebGL renders faster
- I don't want to maintain 2 rendering methods due to time constraints
This means that as of version 2.1.0 only WebGL will be supported. I you really want to use Canvas 2D, stay at the 2.0.x version branch and/or consider forking.
Sponsors
A big thanks to these sponsors for their contributions.
Q42 
Duet3DContributing
If you have found a bug or if have an idea for a feature, don't hesitate to create an issue.
It would be great if you want to help out because I'm always short on time to do more testing and improving. So for instance, maybe you'd like to help out with:
- testing GCode Preview with a variety of gcode files, from different slicers
- reporting 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
- demos, especially in combination with frameworks like React, Svelte etc
Donate
If you want to show gratitude you can always buy me beer/coffee/filament via a Paypal donation ^_^
Changelog
Jump to the CHANGELOG