ProtoSpring, part 3: manufacturing and demo

After coming up with the idea in part 1 for ProtoSpring, the prototyping board for Springboard, and creating the PCB in part 2, this final segment shows the end-result and a demo application – using GPIO to control a 7-segment display from an Android app!

Finished Prototyping Board

After finishing the v1 of the PCB, I’ve exported the Gerber files from KiCad and sent them to Seeed Studio. Looking at their specifications, some of the filenames they require were different from the ones KiCad creates by default (the board outline and the drill files need different extensions). It’s a bit weird, but it’s easy enough to adjust before submission.

The board fits on a 5 cm x 10 cm base, has 2 layers, standard 1.6mm thickness, and didn’t bother changing the PCB colour to save some money on the manufacturing (though I bet the others looks very good too). The printing took less than a week together with shipping from Shenzhen to Taipei, and got 5 boards for about US$20:

ProtoSpring board straight from manufacturing

The board feels really nice and solid, and I’m almost surprised that it worked out so well on the first try (this is my first ever PCB!) After reviewing it, I’ve added a few changes for future print runs:

moved a few of the ground-plane vias so they are not underneath any silk-screen text, that’s better for readability
• changed the “2” in I2C into superscript, because it’s nicer (superscript font size is 60% of the base font of 0.03″)
• added a “tested” silk screen pad to the the bottom, because it’s nice! The pad can be made with GIMP and imported by Bitmap2Component; size is determined by the fact that the import is 300dpi (i.e. a 300px width is 1 inch on the board)
• moved the wires for the power and reset buttons, so they don’t cut a ground plane into half near the mounting screw

The Prototyping boards are the heart of every electronic good which we are using on our day-to-day lives. The components in the prototyping board are checked in a minute way to avoid some critical problems in the future. The electrical components in this board decide the way of working and how fast it should work and much more. We can know more about PCB and how it tends to address different issues.

These are pretty much just cosmetic changes, but they feel right!

While the board was printing, I’ve ordered the required components from Mouser, and that package arrived just before the PCB got here. It was a great feeling that everything fit. Here’s how the board looks assembled (with a few extra 0.1″ male headers for testing).

ProtoSpring with headers and other components mounted

The surface mount components are soldered really badly, hopefully next time it will be nicer. I was considering replacing the 0603 size components (two capacitors, a resistor, and an LED) with larger pieces on the PCB (0805, or 1206), but finally I kept them, just have to learn to do things better. Now I can test my reflowing skills fixing these ones up.

The board slides onto the Springboard front I/O pins very well, I guess the positioning was correct after all.

ProtoSpring attached to the Springboard

The first thing is to test the important parts of the wiring: the power lines and the GPIO! The test were done with a BusPirate v4, PirateScope, and the demo app on the Springboard Android system to toggle the GPIO channels.

Testing ProtoSpring GPIO lines

So far so good, we have a working board, now time for a demonstration.

Demo: SpringTap

I did realize quite quickly that coming up with a project is difficult, when the purpose is just coming up with a (or “any”) project. After a bit of brainstorming arrived to an idea of controlling a 7-segment display with the GPIO channels interactively from an Android app. This probably covers the most common interesting use case of interactive physical computing – and everyone loves blinking lights! 🙂

Probably the GPIO channels could have controlled the display’s LEDs directly (it’s only 10mA each), but I like transistors and felt that it would be more correct too, so ended up with this design:

SpringTap wiring of the 7-segment display (click to enlarge)

All the parts required for this end up around $1.50 (or 45TWD). I bought a bunch of other components as well for some future projects I have in mind, and to “breadboardify” the prototyping board, but those are all optional.

Shopping at the electronics market

By the way, useful thing I’ve learned at the store today: “common anode” is 共陽, while “common cathode” is 共陰. That comes handy, when the parts’ part numbers are not easy to look up so I actually need to speak the language to distinguish between two components. I got the XDK-5161 BHLA common anode 7-segment displays (now I know that “B” means “common anode”, “A” in front as AHLA is “common cathode”).

Making into a breadboard for reusability

For reusability I breadboardified one side of the prototyping board, using single lines of 5-pin sockets. In hindsight, this is probably not a great idea. These sockets require thicker pins, and I ended up with a lot of debugging to find pins that look like they connect but in fact they don’t (e.g. the 7-segment display connected better after its pins were slightly bent inwards before plugging in).

Working in the electronics workshop

Another lesson learned from the setup is that the 10 lines for a prototyping board might not be enough for even some simple projects. Instead of just plugging in components, I had to solder the resistors onto the transistors’ base, otherwise I didn’t have enough sockets to just plug them. Maybe a 10 cm x 10 cm board, or creating all-separate pins instead of the current 5-together rails could be a good idea for version 2. I’ll wait for some feedback on that one, it’s not very difficult to change either way.

Testing the wiring using GPIO

After confirming the wiring with the GPIO test app, time to get down into programming the Android app that will drive our display.

Programming SpringTap in Android Studio

Keep in mind that it’s a marketing guy’s level of programming, and all done in about a day with a lot of copy paste, but the end result is SpringTap: the screen is divided into 9 different, vivid coloured segments, and as mouse is moved over them, the 7-segment display shows which segment the mouse is in:

The segments lighting up when the cursor is in the different areas of the screen

And here’s the end result:

The source code of the demo app is available on Github, and it’s using the VIA SmartETK to control the GPIO pins, the API manual for that is online, though it is not the final version, the API is still evolving.

Getting your own ProtoSpring

If after all this you are interested in getting your own ProtoSpring, there are two ways:

First, because the design is under CERN Open Hardware License, you can print it yourself: the schematics and PCB are available on Github, the version in this article is v1. The Bill of Materials is shown in the Readme and in the schematics.

Second, if you just want to get one, I’ve listed the board on Tindie, the indie hardware marketplace. For this November to promote prototyping, it will be listed at material cost only ($5 for the board, and about $15 for the parts and sockets, especially the sockets), with free shipping. It can’t get much easier than this!

Lesson learned

What a ride this was… Did my first PCB, printed it, assembled it, and created an app and interactive computing setup. It’s an amazing experience, and shows how easy it is now to expand existing hardware with additional accessories, on demand. If you want to make your own extension board for the Springboard that does something different, here’s a blueprint of the things you need to do. If you do that, would love to hear about your project!