JavaScript
⚡️ generate beautiful and accurate SVG renders of printed circuit boards

pcb stackup

Generate beautiful, precise SVG renders of printed circuit boards given a set of Gerber and drill files. Powered by gerber-to-svg and pcb-stackup-core.

Install with:

$ npm install --save pcb-stackup

sites using this

• viewer.tracespace.io - A Gerber viewer that lets you inspect the individual layers as well as the board preview
• kitnic.it - An electronics project sharing site with links to easily buy the required parts

example

1. $ git clone https://github.com/tracespace/pcb-stackup
2. $ cd pcb-stackup && npm install
3. $ npm run example

The example script builds a render of the Arduino Uno PCB. Arduino Uno design files copyright by Arduino and shared under the terms of a Creative Commons Attribution Share-Alike license (https://www.arduino.cc/en/Main/FAQ).

usage

This module is designed to work in Node or in the browser with Browserify or Webpack. The function takes three parameters: an array of layer objects an optional settings object and a callback function.

var pcbStackup = require('pcb-stackup')
var fs = require('fs')

var fileNames = [
  'board-F.Cu.gtl',
  'board-F.Mask.gts',
  'board-F.SilkS.gto',
  'board-F.Paste.gtp',
  'board-B.Cu.gbl',
  'board-B.Mask.gbs',
  'board-B.SilkS.gbo',
  'board-B.Paste.gbp',
  'board-Edge.Cuts.gm1',
  'board.drl',
  'board-NPTH.drl'
]

var layers = fileNames.map(function (path) {
  return {gerber: fs.createReadStream(path), filename: path}
})

pcbStackup(layers, function (error, stackup) {
  if (error) {
    throw error
  }

  console.log(stackup.top.svg) // logs "<svg ... </svg>"
  console.log(stackup.bottom.svg) // logs "<svg ... </svg>"
})

API

See the API documentation.

If your board doesn't appear at all or looks weirdly distorted try rendering it with the options {maskWithOutline: false} or filling in gaps in the outline with e.g. {outlineGapFill: 0.011}.

developing and contributing

Clone and then $ npm install. Please accompany all PRs with applicable tests. Please test your code in browsers, as Travis CI cannot run browser tests for PRs.

unit testing

This module uses Mocha and Chai for unit testing, Istanbul for coverage, and ESLint for linting.

• $ npm test - run the tests, calculate coverage, and lint
• $ npm run test:watch - run the tests on code changes (does not lint nor cover)
• $ npm run lint - lint the code (will be run as a pre-commit script)

integration testing

The integration tests run the example code on a variety of gerber files to ensure proper interfacing with gerber-to-svg and proper rendering of different stackups.

1. $ npm run test:integration
2. Open http://localhost:8001 in a browser

browser testing

Browser tests are run with Zuul and Sauce Labs.

• $ npm run test:browser - run the unit tests in a local browser
• $ npm run test:sauce - run the units tests in several browsers using Open Sauce (Sauce Labs account and local .zuulrc required)