• Prototyping with the Puck.js

    parasquid • 08/20/2020 at 17:41 • 0 comments

    When I backed the Bangle.js kickstarter, I opted for the "all the Espruinos" tier as I've always wanted to get some of those boards, but the shipping costs almost half of the boards themselves. This was a good opportunity to get the JS powered smartwatch along with the Espruino boards at a bit of a lower cost.

    One of these boards is the Puck.js https://www.puck-js.com/ which was designed to be a Bluetooth beacon that you can program wirelessly and using Javascript. My MDBT42Q breakout is currently out of commission for another project, so I thought to myself: since the Puck.js also runs Espruino, there technically isn't anything preventing me from using it for something else other than a beacon.

    First I soldered in some male header pins onto the Puck.js which has thoughtfully provided 0.1in plated through-hole points on the PCB. I didn't want to mess with the original functionality of the Puck.js though, so instead of soldering the male header pins fully, I soldered them about halfway.

    Here's a closeup of the pins:

    The easiest way I've found was to solder the pin with the plastic thingies on top; then the lengths of the pins at the bottom is just right:

    This way, the button is unobstructed and I can still put the Puck.js back in its silicone case with no problems clicking.

    The pins are at right angles to each other, and they are spaced perfectly in line with a perfboard. I've tried with full-height female headers but the shortened pins just doesn't grip the contacts that well, and it falls out. Adafruit sells half-height pin headers https://www.adafruit.com/product/3008 but again, they're expensive to be shipped so I decided to DIY it :)

    The easiest way is to solder the female headers first, then gently pry up the plastic away from the metal parts (you might need to use some tweezers or a sharp knife to wedge between the perfboard and the bottom part of the plastic).

    Then just cut it in half using a pair of side cutters, and insert the top half fully back into the holes. The top half of the plastic would have some sort of "lip" that would prevent the metal parts from fully protruding out of the top hole.

    It's not a big problem if you cut too much and the metal parts are exposed; you can just put a small gob of hot glue to hold the plastic fimrly in place.

    And there we have it: the Puck.js in a perfboard, just as if it was designed to be a dev board :)

    I added an unconnected header on the opposite side just for stability:

    Now that the brains are done, come the easy part. Clickers can't be clickers without buttons, so I added them in the prototype. I opted to put them on the other side of the board because when I was trying to get a feel of the prototype, I felt that having the buttons on the same side as the "bump" caused by the Puck.js was too bulky and was somewhat off. Plus it's just easier to solder on the other side where the female header pins were soldered already :P

    The prototype feels good and around the right size (at least for my hands)

    I'm very happy with how the first hardware prototype turned out. Even if the Puck.js was designed to be a beacon, the flexible and thoughtful design allowed me to repurpose it as a generic devboard for the project.

    Now that we have the hardware out of the way, next up would be the software.