Gcode viewer for Melt electrowriting Printer

Online GCODE viewer hosted by Cloudflare Pages.

An alternative G-code viewer that allows to visualize flat or tube structure. Many people use Ncviewer for visualizing a G-code file, which is maintained by one developer. I, for one, cannot ensure that this great tool will last forever. So, I decided to create this program from scatch and keep the functionality as small as possible. Please feel free to fork and modify it. By this way, the project will be sustainable for the community.

Features

Visual options

• Adjust point size
• Show/hide 1mm x 1mm square (grid)
• Show/hide points

Axis options

• Customize symbol/name for X, Y, and Z axis
• Current available symbols are x, y, z, i, j, k, a, b, c, u, v, w

Cylindrical Transformation

• It is for visualizing a tube with special axis like G0 X1 U1.

  Note that unit of U is mm. For example, G0 U6.283185 will move a rod with a diameter of 1 mm one round (360°).

• Steps:

  1. Define the longitudinal axis (main axis)
  2. The rotational axis (circumferential axis) must be visualized as y axis
  3. Set diameter. This number convert the distance in circumferential axis to angle.
  4. (Optional) Set an initial height. Tube with original diameter can be visualized with different radius.
  5. Set curve resolution. Increase this number to enhance curve smoothness. It will increase time to render.

Questions

1. How to measure a pore size or a distance between two points?
Click the first point. The program will show it 3D position above the options. Then, click the second one, do a calculation based on positions of two points.

2. How to save an image of the rendered geometries?
The simple answer is taking a screenshot.

3. How to add/remove options?
Check gui_options.js and lil-gui

4. I would like to extend the software for my special G-code
The program parses Gcode commands into an intermediate JSON object (gcode_to_json.js) like:

[
  {
    "cmd": "G0",
    "args": {"X": 1, "F": 200},
    "commend": "test",
    "tag": {}
  }, ...
]

Afterwards, JSONGeometryParser (in json_geometry_parser.js) convert this intermediate JSON into geometry object:

[
  {"type": "line", "start": [0,0,0], "end": [1,0,0], "feedrate": 200},
  {"type": "arc", "dir": "cw", "start": [1,0,0], "end": [2,0,0], "center": [1.5, 1, 0], "feedrate": 200},
  ...
]

Finally, GcodeRenderer (in gcode_renderer.js) renders this geometry object using Three.js. If you would like to extend the software, I suggest to check these three scripts.

Youtube Showcase

License: MIT