Skip to content

A simple wrapper for canvas context to export a g-code file starting from your web sketch

Notifications You must be signed in to change notification settings

lavolpecheprogramma/gcode-context

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gcode-context

A simple wrapper for canvas context to export a g-code file starting from your web sketch! Very useful to print your drawings with a penplot.

Installation

You can grab it as an npm package

npm i --save @gcode-context

Example

You can use gcode-context with canvas-sketch by Matt DesLauriers (@mattdesl).

Check https://github.com/lavolpecheprogramma/gcode-file to set correctly your gcode file.

const canvasSketch = require('canvas-sketch');
const GCodeContext = require('gcode-context');

const gcodeSettings = {
  feedRate: 4000,
  seekRate: 4000,
  flipX: true,
  paperSize: [210, 297],
  margin: 5,
  fileName: name + '.gcode',
}

const settings = {
  dimensions: [
    gcodeSettings.paperSize[0] - (gcodeSettings.margin*2),
    gcodeSettings.paperSize[1] - (gcodeSettings.margin*2)
  ],
  units: 'mm',
}

const sketch = ({context}) => {
  const ctx = new GCodeContext({context, gcodeSettings})
  return ({ width, height, data }) => {
    ctx.gCode.updateCoordsArea(width, height)
    ctx.clear()
    
    ctx.beginPath()
    ctx.rect(0, 0, width, height)
    ctx.stroke()

    // with CMD+S you can download your gcode file 
    // or
    ctx.saveFile()
  }
}

canvasSketch(sketch, settings);

or in plain javascript:

const GCodeContext = require('gcode-context');

// for more information on gcode file settings see https://github.com/lavolpecheprogramma/gcode-file
const gcodeSettings = {
  feedRate: 4000,
  seekRate: 4000,
  paperSize: [ 210, 297],
  margin: 10,
  fileName: 'sketch.gcode'
}

const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
const ctx = new GCodeContext({context, gcodeSettings})
// ... your canvas setup ...
ctx.gCode.updateCoordsArea(canvas.width, canvas.height);

ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();

// with CMD+S you can download your gcode file 
// or
ctx.saveFile()

You can pass some options to costructor:

const ctx = new GCodeContext({
  context,
  autoBind: true,
  gcodeSettings
})

GCodeContext has the following drawing functions that match those in Canvas2D contexts. Under the hood, it use the original canvas context to render and createPath to store the paths for gcode file.

  • beginPath()
  • closePath()
  • moveTo(x, y)
  • lineTo(x, y)
  • quadraticCurveTo(cpx, cpy, x, y)
  • bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)
  • arcTo(x1, y1, x2, y2, radius)
  • arc(x, y, radius, startAngle, endAngle[, anticlockwise])
  • rect(x, y, width, height)
  • stroke()

Other methods are available:

clear()

Clear the canvas and remove all the saved paths

addLayer()

Add layer in gcode file instance

saveFile()

Download the gcode file

About

A simple wrapper for canvas context to export a g-code file starting from your web sketch

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published