In the new issue of HackSpace magazine, out today, Ben Everard shows us how to build user interfaces out of FR4.

We love the bare circuit board aesthetic. There’s probably a word for it, but we’re not quite sure what it is. It’s not quite cyberpunk, but it’s along those lines. It appeals to the part of us that instantly wants to pull something open to see what’s inside because you can already see the insides – there’s no need to unscrew the back and invariably lose a screw.

It’s also a practical way of building things. Circuit boards are probably the cheapest material to get CNCed to your desired shape (as long as your desired shape is 2D), and if you need some electronics anyway, why not just work with everything in FR4?

Of course, if you’re going to make things with circuit boards, you’re going to need ways of interacting with the user from the circuit board. Sure, you can mount buttons and screens on the board, but in this article we’re going to go a bit further and build them with the PCB itself in a couple of ways. We’ve already looked at reverse-mounting LEDs on PCBs and shining them through cut-outs in the copper layer. You can use this to light symbols and otherwise output information. Here, we’re going to have a look at combining this with an input to create interactive buttons.

We’re going to build a notification button in two ways. The idea behind this button is that it lights up to let you know about an event. When you’ve dealt with the event, you press the button and the light turns off again. However, you can use the basic idea of the light-up symbol-button however you like.

The two methods we’re testing out are, firstly, using a PCB mounted over a physical button, so you can press the light itself and this will, in turn, press the button. Secondly, we’ll use a touch-sensitive pad next to the light. This is a little simpler to create, but doesn’t have the tactile feel of the first method.

Bendy PCBs

For our first light-up button, we have a small PCB that has just the reverse-mounted LED and the cut-out in the copper layer. It also has two header pins that allow it to be mounted on a second PCB. This second PCB has a button mounted under the first PCB so that when you press the first PCB, this PCB presses the button.

For this to work, we need the PCB to flex slightly, and this will put a strain on the header pins connecting the two PCBs. The more the PCB flexes, the less strain on the pins. One solution would be to use a very thin PCB, but we found that if the PCB was too thin, we didn’t get a good diffusion on the light from the LED. Instead of making the PCB thinner, in the Z direction, we use cut-outs to make it narrower in the Y direction. As you can see in Figure 1, there are cut-outs to a small neck. This bends more easily than if the force was spread over the entire width of the PCB, and therefore should put less stress on the header pins. For the small amount of flex needed to press a button, this might be overkill, but it’s easy to do.

You should be able to create a design like this in any EDA package. We used EasyEDA, and in the last issue we looked at how to create custom footprints using SVG Import. To create a shine-through area, the process is the same, but obviously you have to include a void in the copper layer to let the light shine through, and you have to match this void with a shape in the solder mask layer as this will also block the light. On the other side of the PCB to this, you want to place your LED. You can use a normal surface-mount LED footprint (we use 0805 because they’re easy to work with), but don’t forget to mount the LED upside down when you come to solder it, so that the light shines through.

You can then wire up the LED and button (on the underneath PCB – we used protoboard to test with) as you would any other LED and button, and they work as normal.

Having the large PCB to press gives a wonderful tactile feel that small buttons often lack.

Touchy-feely

We really like the click of a real button, but it’s not always practical to mount a second PCB on top of your main PCB. As an alternative, you can use a touch-sensitive area. These are just areas of exposed metal; when you touch them, you create an electrical connection with your body and this changes the capacitance of the area. 

The only wiring your exposed metal area needs is a high-value (circa 1 MΩ) resistor to ground and a connection to a microcontroller I/O pin. With that in place, you can sense-touch with the CircuitPython TouchIO module.

Both of these methods have their pros and cons – buttons have a lovely clicky feel and the ability to press the actual notification light, while the touchpads are easier to implement.

However, both methods let us retain the PCB aesthetic and make it easy to build useful, practical designs out of PCBs.

HackSpace magazine issue 53 out NOW!

Each month, HackSpace magazine brings you the best projects, tips, tricks and tutorials from the makersphere. You can get HackSpace from the Raspberry Pi Press online store or your local newsagents.

As always, every issue is free to download in PDF format from the HackSpace magazine website.