splitbrain.org

electronic brain surgery since 2001

Pinout Leaf Generator

If you're working with modern electronics, may it be a Raspberry Pi, an ESP32 microcontroller or any of the myriad of available development boards, you are aware of pinout diagrams. They are helpful graphics quickly showing you the capabilities of each connector pin.

However comparing the graphic with the real thing and counting pins is error prone. Many years ago Simon Monk came up with the Raspberry Leaf and I published my own version for the then new RPi B+.

The idea is simple: you print a pinout diagram in exactly the right size to stick the real pins through the paper, ending up with the labels right next to them. Thus making pin counting a thing of the past.

Example of a printed leaf on a Raspberry Pi

Whenever I was working on projects with ESPs or other electronics in the last 10 years, I was thinking of this. Wishing for a leaf version for the particular device I was working with.

So this weekend I finally sat down and wrote a Pinout Leaf Generator.

The basic premise is that all modern PCBs use a pin layout that fit a breadboard. Eg. they use a default raster of 2.54mm (0.1“). And they usually have their pins on the four edges of the board.

Assuming these restrictions makes automatic layouting relatively simple.

My generator is written in JavaScript and generates SVGs from a simple YAML description. The nice thing about automating the graphic generation is that you can create a leaf for looking at the board from the front or the back, depending on your application. Because the only thing more annoying than counting pins is also having to flip their alignment in your head.

And since it is all written in JavaScript, it was straight forward to add a web based editor for quickly creating a new pinout diagram in just minutes.

Screenshot of the Web Editor

You can try the editor here.

Tags:
electronics, pinout, programming
Similar posts:

Comments