or: How I Learned to Stop Worrying and Love the Board

Alon Gruss 20/11/16

Tl;dr:

I made a tool that converts an image into multiple PCB layers - pixel brightness to board opacity.

source on Github

1. You are not limited to your discipline!

As a Designer by trade I like to jump head-first into new disciplines which I know nothing about, learn to control the terminology and try to mess around in unexpected ways. I am also lucky to share studio space with Arkadi Rafalovich, A talented engineer and omni-potentialite, who inspires and guides me through learning the basics of electronics and Eagle PCB design.

While diving into the subject I was constantly visualizing and thinking about the tools that are missing for me, the tools I need for implementing my art and design.

(I recommend Sparkfun’s tutorials).

2. Most PCB’s are boring!

PCB’s are usually designed functionally without any visual attention, A very boring rectangle. Sure, they have their digital charm with mazes of tracing running along the board, but as a user, I prefer my PCB’s when they're inside my products. Covered in a well designed injection-moulded shell.

I use the word ‘usually’ because sometimes you get boards like the Defcon badge - which can masterfully merge function and design to create a fun user experience.

Or this wonderful PCB-USB-Business card by Frank Zhao.

3. The Artist in the Engineer

So, what’s different in business cards and convention badges? These are where the engineer isn't working for a client, he relaxes a bit and has fun with the design tools. He’s not just a cog in the product development process. When he has no restrictions.

Sadly, even then, the board designer dare only to use the tools given. Drawing only in the ‘Silk’/’Copper’ layers or slightly shaping the board’s outline in the ‘Dimension’ layer.

4. All the layers!

Some of my past Design projects deal with layered/laminated materials and the smart use of the different layer properties:

Those were opaque materials. What intrigued me with PCB design-wise, was the ability to play with material’s opacity and the light transfer through the board. Artistically I thought I can convey a more complete message and user experience by having graphics that support and integrate with the board’s functionality.

5. Testing the hypothesis

I searched google for leonardo da vinci’s portrait of Mona Lisa (which I consider globally identifiable) and saved one of the results to my PC.

Opened it up in Gimp. scaled it down (nearest neighbour) and duplicated it to a couple of layers.

I then run a threshold filter on the layers changing the value a bit in each one and saved the layers to separate files.

Only then have I noticed that the new versions of Eagle already have a built-in script for importing image, from colors to layers. “That’s great! This saves me a lot of time” or so I thought.

Don’t misunderstand, It's a really great tool, just not for my purposes.

You see, I need to control the cumulative combination of layer opacities in order to achieve my goal. I aim for the PCB to be facing up (showing the top layers).

For example:

• Lightest - clear from traces or solder mask on both sides.
  • ( no top + no bottom + yes tstop + yes bstop )
• Light - clear from traces on both sides + solder mask only in back (bstop).
  • ( no top + no bottom + yes tstop + no bstop )
• Medium - ...
• Dark - ...
• Darkest - ...

We also have:

• White Silkscreen - requires the top solder mask layer and the top silk layer
  • (... + no tstop + yes tsilk )
• Copper trace - requires the top trace but without soldermask.

You might have noticed that some layers control the lack of material and must be treated as a negative. That’s a bit confusing, so here is a guide table:

6. Lessons learned

I ordered the boards from Seeed Studio - Fusion.

They came out better than I imagined. here are the test results:

Of course, when I started showing the result to my friends they all inquired about the board’s functionality (which wasn't what I was testing at all!). So I marked this as a successful test and took note that I need to find a method that retains prebuilt functionality (as a future goal).

Now I need to automate and refine the process.

7. Building a parser/generator for Eagle .brd files

The current Eagle .brd file format is written in XML which has a very textual syntax that is very easy for reading and writing

First I saved an empty board layout from a new and empty project, then I save a different version which had 3 different drawing tools on 3 different layers.

Using Notepad++ I compared the resulting .brd files in order to find the specific lines for each tool and layer.

8. Building an image slicer

Programming is one of those disciplines I jumped into a few years ago (8 years ago). My weapon of choice for art projects is the Processing language (which is basically a wrapper for java) and I write code using the Processing IDE.

So I wrote an app that:

1. Loads an image.
2. Copies it to multiple ‘sub-images’.
3. Runs a Threshold filter on each ‘sub-layer’ with ascending values.
4. Composes PCB layers using bitwise operations.
5. Converts the PCB layers to rectangles using a Quadtree algorithm (threaded).
6. Exports them into an Eagle .brd file.

Which is really easy to do in processing. I also made a GUI:

1. Render all the different layers on screen.
2. Button elements for manually loading images, subdividing the layers and exporting the .brd file (using the G4P GUI library).
3. The default windows file selection menu.
4. Scroll bars for each layer preview that give real time control of each threshold value. (using the G4P GUI library).
5. A mockup of the final composite result. (a bit broken at the moment).

It currently looks like this: (not much UX design)

9. Integration with existing and/or functional boards

TBA!

10. Giving you the tools!

Here you go!

• The source on Github.