Embedded design

HTMAA 2021 Recitation

10.21.2021 // 5 - 6 PM EST

Leo McElroy
[leomcelroy AT gmail.com]

Quentin Bolsee
[quentinbolsee AT hotmail.com]

Today's goal

Discover an in-browser tool to design embedded circuits from js.

SVG-PCB: history

This project was inspired from Neil's PCB.py. This tool is based on frep, a string-based functional representation. In that format, a unit circle would be described as "X*X+Y+Y <= 1". Evaluating this function for all XY coordinates in a grid provides an image. If a PCB's wires and pads is described as sums of circles and rectangles, an frep string describing the whole board can easily be generated. You're surely familiar with Neil's hello world boards, all rendered with this method: plot runtime

It turns out evaluating the frep quickly becomes a matter of seconds for larger boards. To speed this up, Quentin developed a GPU based renderer with PyOpenGL in 2020. Rendering time went from seconds to milliseconds, but including the frep in a shader required a new C-style syntax with strict typing. plot runtime

As a challenge, Leo decided to work on a js-based version of the GPU renderer in Spring 2021. This quickly led to a usable tool for drawing boards directly in the browser.

Here is a demo of the js-based frep evaluator, showing a mathematical function. Note that any constant can be dragged with the mouse, try it for yourself!

This tool was a breeze compared to the previous Python scripts, but the technical limitations of freps led us to turn to svg for the rendering. Leo's gram language already had all the necessary tools for merging and rendering svg paths, so migrating was fast. The final version of our tool can be found here. Freps are entirely gone, but the API for adding components and wires on a PCB remained unchanged.

Adding a component

A component is an instance of a footprint at a given position and rotation.

Footprints are js objects containing each pad. Each pad consists of:

The footprint can then be added on the board as a new component.

Here is an example of footprint definition followed by a component creation:

The component object has the following useful attributes:

When adding components that have some relationship on the board, it's good practice to have position references in the component's add. This makes your board parametric with little extra effort.

Adding wires

A wire is simply a list of coordinates followed by a thickness. This is the best opportunity for referencing pads and component's positions, as it makes wires parametric as well.

Full-scale example

Here is an interactive version of Neil's hello.t1614.echo.js board shown earlier. Don't hesitate to change component's positions, either using the visual handles in the GUI or dragging the constants in the code.


The output is a svg with all requested layers drawn on it. For manufacturing the board, try to enabling the "F.cu" layer only and disabling all other layers. The resulting svg is a good candidate for the PCB milling module in mods or could be printed on a transparent sheet for UV exposure.