simple gcode visualization in javascript
Budget: $30 – $250 USD
The task is to build a one-way gcode visualization function using canvas and javascript. Attached is an example of a possible input and output:
G1 X0 Y20
G3 X10 Y30 I0 J10
G1 X30 Y30
G1 X30 Y10
G2 X30 Y-10 I0 J-10
G1 X30 Y-25
G1 X20 Y-20
G2 X0 Y-20 I-10 J0
G3 X20 Y0 I0 J20
G1 X20 Y20
G1 X20 Y25 Z5
G0 X0 Y30
G1 X0 Y30 Z0
G1 X-10 Y10
G1 X0 Y-10
G1 X10 Y10
G1 X0 Y30
1. The script only needs to support commands G0, G1, G2 and G3.
2. Only valid gcode will be provided, using only the above 4 commands.
3. The script should allow zooming with mouse wheel, panning and rotating with mouse button drag.
4. Canvas size and default stroke/color can be hardcoded.
5. The script should be able to accept parameters present in the first gcode comment passed as valid JSON. For example:
G2 X30 Y-10 I0 J-10 ({"lineColor": "#abcdef"})
This should draw the segment using the provided color.
G1 X30 Y-25 ({}) ({"lineColor": "#fedcba"})
This should draw the segment using the default color, because only the first comment contains functional parameters
Only two parameters should be supported: lineColor and strokeWidth.
6. Arrows and grid are not necessary.
The delivered function should take two parameters:
Parameter 1 is an array of strings that make up the gcode script. Each element of the array is always a valid gcode line.
Parameter 2 is an object literal containing options, please use best judgement to determine what options should be supported. A good starting point would be the default lineColor and strokeWidth.
The result of the function is not highly relevant, as the primary output is the canvas rendering.
For reference, this implementation is very close to what we have in mind: https://nraynaud.github.io/webgcode/ please see the 3d (top right) canvas area, you can use the example gcode provided above.
G1 X0 Y20
G3 X10 Y30 I0 J10
G1 X30 Y30
G1 X30 Y10
G2 X30 Y-10 I0 J-10
G1 X30 Y-25
G1 X20 Y-20
G2 X0 Y-20 I-10 J0
G3 X20 Y0 I0 J20
G1 X20 Y20
G1 X20 Y25 Z5
G0 X0 Y30
G1 X0 Y30 Z0
G1 X-10 Y10
G1 X0 Y-10
G1 X10 Y10
G1 X0 Y30
1. The script only needs to support commands G0, G1, G2 and G3.
2. Only valid gcode will be provided, using only the above 4 commands.
3. The script should allow zooming with mouse wheel, panning and rotating with mouse button drag.
4. Canvas size and default stroke/color can be hardcoded.
5. The script should be able to accept parameters present in the first gcode comment passed as valid JSON. For example:
G2 X30 Y-10 I0 J-10 ({"lineColor": "#abcdef"})
This should draw the segment using the provided color.
G1 X30 Y-25 ({}) ({"lineColor": "#fedcba"})
This should draw the segment using the default color, because only the first comment contains functional parameters
Only two parameters should be supported: lineColor and strokeWidth.
6. Arrows and grid are not necessary.
The delivered function should take two parameters:
Parameter 1 is an array of strings that make up the gcode script. Each element of the array is always a valid gcode line.
Parameter 2 is an object literal containing options, please use best judgement to determine what options should be supported. A good starting point would be the default lineColor and strokeWidth.
The result of the function is not highly relevant, as the primary output is the canvas rendering.
For reference, this implementation is very close to what we have in mind: https://nraynaud.github.io/webgcode/ please see the 3d (top right) canvas area, you can use the example gcode provided above.