Look what I made: a simple gcode previewer written in plain javascript
realstuffforabstractpeople.com/experiments/gc...Posted Feb 13, 2017, 2:18 PM UTC
4216
realstuffforabstractpeople.com
Can you make it treat .gco files as gcode?
2
It should already treat .gco files as gcode as it doesn't look at the extension. There where some bugs though that prevented gcode from particular slicers to be rendered. I put up a new version that fixes some of these issues.
1
Any chance of a second slider to have a bottom bound for the section to render? IE look at the 3rd quarter of a print?
1
Would love you to continue with this, I've written something similar but simpler and less graphical just because I couldn't find anything that showed me when my fan was turning on and off. It would be great if you could add this and much more.
2
The gcode for turning on the fan seems to be M106 and in my parsed gcode it should be detectable as a javascript object with an 'm' property and the value 106: {m:106}. The question then is how to render this info. There's only so much you can do with coloring. Anyway feel free to play with the code and possibly send me a PR ;-)
1
[deleted]
1
Great work, however it didn't work on one of my model gcodes. When I dropped the gcode files on the interface, nothing happened.
1
I'm not surprised it trips over some gcode as my implementation is very quick & dirty ;-) But if you could send me that gcode file, I'll have a stab at fixing the issue.
1
Also does not work for me with gcode output from Slic3r. Chrome console says
FilamentClipC_175.gcode 3904771 bytes
gcode-preview.js:235 parsing: 71.133ms
gcode-preview.js:237 layers 0
gcode-preview.js:242 rendering: 1.584ms
1
Could you send me the gcode file via this link? https://www.dropbox.com/request/3eyeIzMrj2o7btJ3ybLV
1
Cool; good job.
The Tiko web interface does a similar thing all in JS; they also used an OTS 3D library to allow for object manipulation. You might take a look at how they glued it together for inspiration.
1
Great job!
1
Looks really nice, takes me a night to do a few basic while loops. I've used this http://gcode.ws/ as a way of analyzing my gcode but the 3D rendering is fairly basic, all the code is on github if you wanted to improve on it.
1
Context: I wrote this mostly to get a basic understanding of gcode (hey I'm a programmer ;-) ). I'd been walking around with the idea for a few weeks when I realized I could keep things simple by just drawing layers on top of each other. This results in an isometric (or 2.5D) perspective and that's why you can't rotate the camera. This shortcut allowed me to create this in a single evening though! ;-)
update some gcode files don't seem to work. If you want to help me out, you can send me those files via this link (plz make sure it's not copyrighted) https://www.dropbox.com/request/3eyeIzMrj2o7btJ3ybLV
update2 I just put up a new version that will accept Slic3r's flavor of gcode. Thanks for sending me those gcode files guys! Note that because Slic3r's gcode lacks information on infill, shells, support, etc the coloring is different.
update3 There's a new version adding coloring for S3D flavored gcode and a slider to set the scale (zooming). If anyone is interested they can watch and/or star this project on github
Nice work! I'm sure you know you can use 'layer view' in most slicing programs, but it's neat that you made this on your own and gained a deeper understanding of gcode in the process. Do you print Benchy with supports? Cheater! :-P
:-P
This is actually very cool... thanks for sharing.