First off, you'll need a bag of bits. You can buy these in several ways:

1 - you can source all the parts yourself (see the "Things" list above).

2 - you can buy the official "Pantri Bag Of Bits - A Bit Pushy Edition" with all the right bits in. Email us at hi@pantri.net to arrange for a bag to be sent out to you.

2 Assembling the Inside Bits

Now before you start...

You should now have a desk full of bits. You'll also need:

• Solder
• Soldering Iron
• Small Wire Cutting Pliers (or similar method for cutting to length & then stripping the wires)
• Mini Pliers (straight & round nose if possible)
• Small File

We also suggest you have:

• Mini Vice or a Third Hand (to hold the proto board in place)
• A multimeter (not particularly necessary & expensive so only get one if you really want to get one)

Make sure you also have this schematic diagram to hand:

Schematic available to download in github repo

You can get a copy of the schematic off this page, or via the Github Repo (both of which are down at the bottom of the page).

• And so it begins... ACTION 1

First off, grab your proto board. It should have two rows of headers with it. Put them to one side for a bit as you'll solder them on last once you've got everything else assembled.

Note which way is the top, & which is the bottom. Also, look at the bottom & note note that some of the pins are connected with interconnecting lines, as are lines 5 & 6 in from the left (these two provide you with a power & earth rail when they connect to the Feather Board later). Other pins are just separate circles for mounting components:

Adafruit Featherwing Proto (Underside)

If you look at the top side of the board, you can see the various connections mapped out as follows:

• Button Up: ACTION 2

Then grab the button. If there are any protrusions on the bottom of the board, they need to be removed (there will be some on the button that we recommend). Use your pliers & a small file to rub the base flat.

(Pre-Trim)

(Post-Trim)

Once this is done, insert the 4 legs into the proto board as follows:

From The Top

From The Bottom

Don't solder any of the legs yet. The button should sit on the board by itself (bend the pins slightly if it doesn't). Note that although the button has 4 legs, they are connected in pairs. Use your multimeter so that you solder one leg from each side of the button.

We'll leave the button for a bit now & come back to it later once we've got some more components on the board.

• Buzz Off: ACTION 3

Next, to the buzzer. Note that which pin is positive & which pin is earth.

If you're using the buzzer we supply, you'll see that it has a sticky label on the top. This is to stop Outer Mongolian Rabbits using the buzzer internals as a burrow. Underneath the sticky label is a positive symbol indicating the positive side. If you need any further validation, the positive leg is longer:

Buzzer (With Outer Mongolian Rabbit Burrow Protector In Situ)

Buzzer With Positive Symbol Showing

Side View - The Positive Pin Is The Long Pin

Mount this here:

Ta - Da

Only solder the positive pin in place for the time being (to hold the buzzer in place). You'll add another connection here shortly, so will re-heat the solder later (once the earth pin is firmly soldered in).

*A quick side note on the buzzer, if you use one different to the one we supply, you may have to modify the case (if you're using ours) so that it fits. The buzzer needs to be lower than the push button...Obviously.

• ACTION 4

Now that we've got the part attached to the board, get your purple wire. You want to cut it so that there is enough cable to go from the earth terminal of the buzzer, to the earth strip on the proto board.

We've found that you want to give yourself just under an extra 10mm between the pin & the earth strip which is roughly from the 3.3v strip to the positive terminal of the buzzer.

Once you've cut the wire (using small cable cutters) - you need to strip roughly 5mm of the purple sheath off the each end - exposing the inner wire core. If you're new to this, you'll likely cut through the entire cable at your first attempts (if you run out of cable - drop us an email at hi@pantri.net & we'll post you some more out for the cost of an envelope & a stamp).

This is a skill that you'll get better at with practice (cutting, not emailing us for more cable).

Once you have a cable that you're happy with, then use some small pliers to bend the cable ends 90 degrees. Finally, solder one end to the earth buzzer terminal & the other onto the middle pin of the earth strip:

• ACTION 5

Finally, let's wire the positive Buzzer connection to the 12 hole strip (inner holes) - 9 in from right.

• ACTION 6

Now you've got the hang of this, why not wire the bottom right button pin to the earth strip?

Light Me Up

The LED is a little different as it has 4 legs. If you aren't already aware, the LED is 3 LED's in 1. It emits red, blue or green, hence there are 3 anode (+) pins & 1 cathode (-). The longest of the 4 tails is usually the cathode (check the LED data sheet if you purchase one independently):

Cathode Highlighted Purple (LED from Bag Of Bits - A Bit Pushy Edition)

You'll have to test the other pins out yourself to check what does what. But, we can sort this out in the code later, so don't worry too much. As long as you have the cathode correctly assigned, you'll be fine.

• ACTION 7

Now, you'll need to carefully bend the LED pins so that they fit onto the board. This is a delicate operation. You can usually only bend the pins once before they break, so be diligent. We recommend you use some round nosed pliers to precisely bend the legs into the right place.

1 / 5 - Pre-Bend With Circlip Mini Pliers (which we find are the best tool to bend the pins)

2 / 5 - Bend the outer pin (2 away from the Cathode) outwards as close to the LED body as possible

3 / 5 - Then, bend the pin upwards.  This gives some separation to the pins so that they fit through the holes on the Proto board.

4 / 5 - Next, bend all the remaining non-Cathode pins directly upwards

Note that the LED needs to sit parallel with the board & close to it (so that it fits between the proto board & the ESP8266 board). Note that it is mounted underneath the Protoboard.

View From Underside Of Proto Board

Solder The Pin From The Top

Keep the tails for the time being as we'll use them shortly.

Now that the LED is secured in place, bend the Cathode 180º. We'll use this shortly too.

• ACTION 8

The next thing is to wire up the positive Red, Green & Blue terminals to pins on the board. The pins in question are the three directly to the right of the buzzer pin that we wired earlier on the 12 pin section (its at the bottom because we're looking at the proto board from the bottom).

Flipping back to the front of the board, remember those long LED legs? Well, we're going to fix our wire directly onto them by creating a small loop in the cable:

The loop can be soldered directly onto the LED legs

Make sure your cables are just long enough. You don't want too much cable as you'll have to fold it somewhere out of the way. Solder both ends of the wire to the LED legs & pins respectively. Don't worry about the order, we'll sort this out in the code later:

Top view after the excess LED legs have been trimmed

Note that the outer pin space is clear of cables (youll need to get a soldering iron in here later to connect the headers)

A Bit of Resistance

We need to add the resistors. Before we talk about what goes where, let's take a quick breather & think about what we've done so far & what we need to do to complete the electrical hardware on this task.

At the moment, we've got several parts soldered into individual independent mounting holes. We need to get them connected to set pins running horizontally along the top & bottom of the device, or along the power or ground rails. When the headers are then fixed, the electrical signal will then make its way from the Adafruit Feather Huzzah board to the necessary components.

We can do this by using some shielded wire, but where we've got resistors in between these connections & the components that we've already soldered, we may as well connect directly between the two points using them (making sure to use a cable sleeve on the resistor tails to stop them touching other connections & shorting).

You should be able to identify the different resistors by looking at the colour codes on them. If you don't know how to do that, take a look at this interactive guide - https://www.allaboutcircuits.com/tools/resistor-color-code-calculator/ *Note that some of the resistors have 4 bands of colours & some 5 bands.

• Resistor 1: ACTION 9

A 180Ω 4 ring resistor ±5>#/em###

With this in mind, let's grab the 180Ω resistor. This resistor sits between the cathode of the LED & the earth. It basically slows the current so that the LED doesn't burn out. We suggest that you solder 1 of the tails directly to the cathode (that we have pre-bent ready - remember).

Then connect the other end of the resistor to one of the earth connections on the Proto Board.

Soldered to the LED cathode directly

Check theres nothing touching that could cause a short circuit before moving on (we're starting to get tight & we're pulling things around so it can happen).

• Resistor 2: ACTION 10

12kΩ 4 band resistor ±5%

Next, we need to grab the 12kΩ resistor. This resistor sits between the live side of the momentary push button (which is directly wired inside the button to pin 16/reset - 5 pins to the right) & the 3.3v live strip (location to suit yourself). This resistor provides a balanced 3.3v supply onto pin 16 - encouraging any power to directly head towards earth when the button is pressed which provides a clean reading (rather than the signal jittering for a few milliseconds when the button contacts first touch).

You might have to pull the push button pin a little using some small pliers, but you should be able to fit bother the push button pin & the resistor wire into the same hole. Again, note the bending of the pins, as you need to return slightly due to the size of the resistor body being longer than the distance between the pins:

• Resistor 3 (marked as R4 on the circuit diagram): ACTION 11

1MΩ 5 band resistor ±0.1>#/em###

You now need to find the 1MΩ resistor. This sits between the VBAT pin from the Feather Huzzah & the ADC pin, which are conveniently at parallel sides of the board (1 on the left most pin of the 12 pin run & 1 on the direct opposite on the 16 pin run - both directly to the right of the gnd rail):

Push this down to contain the LED cables & keep low enough to not inhibit the push button

• Resistor 4 (marked as R3 on the circuit diagram): ACTION 12

220kΩ 5 band resistor ±1>#/p###

The final resistor is the 220kΩ resistor. This, along with resistor 3 balances the power from the VBAT (positive battery supply) & links through to the ADC (analogue) pin which reads the voltage & determines the amount of power left in the battery.

This resistor needs to be soldered between the earth rail & the ADC pin. As we've just soldered Resistor 3 into here, we find it easier to create a loop in the resistor tail & solder it directly onto the ADC Resistor 3 wire (as the most logical free earth hole to use is the one directly next to the ADC hole) :

Create a hook (with space to thread around the ADC Resistor 3 wire)

Once you've got it in place, you can use your pliers to crimp the hook onto the tail of resistor 3 before applying solder to both wires:

Again, be diligent not to accidentally make any short circuits.

• Back to the Button: ACTION 13

We’ve now got all the components on-board but we still need to make a link between some of the pins. There’s 2 more connections to make in total. As you will see from the circuit diagram, you're supposed to wire Reset to GPIO16. The GPIO16 is used to send a signal to reset the ESP8266 chip after a set time of being in deep sleep. We're not going to use this, but we need to have it there to make our manual push button resets work (we've tried it without... not pretty).

First, we want to link the Reset pin with the opposing side of the button to the 3.3v supply & the resistor.

Then we want to wire the same button pin to GPIO16 which is 4 in from the right on the top 12 pin run (2 holes to the right of the LED positive connections.

This bits a bit fiddly.  Be careful not to leave the soldering iron on the parts too long.

• Heading for the Finish

OK, we're pretty much done. You should have a desk clear of everything but some excess solder, half a mile of excess wire (because you cut right first time didn't you), a warm soldering iron & burnt finger tips... Oh & 4 of these things:

Male Headers at the top & Female Headers at the bottom (12 & 16 pins)

So now we need to give the proto board some legs so that it can connect to the Feather Huzzah where the brains live.

• Giving The Proto Board Some Legs: ACTION 14

First, let's finish the Proto Board. Now let's think about this - the buzzer & the button sit on the top of the board, so the Feather Huzzah will need to connect underneath.

You should have two lots of legs. One should have 16 pins & the other should have 12. If they are both 16 then split off 4 to bring one down to size.

Then you need to solder the 12 pin headers at the top & the 16 pin headers to the bottom - something like this:

Solder from the top - smaller section through the hole of the Proto Board

Make sure solder covers the holes but that there is no bridging

An Important Tip: Solder the outer two pins of the strip first. Make sure it's square & flat to the board (don't take too long otherwise the pins will melt the black plastic strip & be all cockeyed). If it's a bit wonky, warm up the solder & adjust. Once you're happy - solder in the remaining pins.

• The Final Connection: ACTION 15

We now need to stick the other header female pins (pointing up) onto this board:

The Brains AKA: The Adafruit Feather Huzzah ESP8266

Again, solder the outside pins first & get the thing level. You can even plonk the Protoboard on top to make sure you've not done something stupid. 12 at the top & 16 at the bottom:

Now, turn off your soldering iron, let it cool down & give it a good polish. Your work together is now done.

• Cap It Off: ACTION 16

Like adding the cherry to the top of the cake, all that's left to do is stick the plastic cap on the top of the button to finish off the electrical hardware:

Ta-da

Well done. Down tools, go to the fridge & pour yourself a glass of milk. If you've ran out - don't worry, this situation will soon be a thing of the past (let's just hope you've soldered it all together correctly)!

NOW IS A GOOD TIME TO GO TO BED / WALK THE DOG / DO WHATEVER ELSE YOU'VE BEEN PUTTING OFF!!!

Now we've got the brawn dealt with, let's get the brains sorted out. The brains in this instance reside on the ESP8266 chip on the Adafruit Feather Huzzah board:

You can See The ESP8266 that sits on its own circuit board proud of the main PCB

Its a micro-controller that controls the logic, connects to WiFi & can send & receive HTTP REST API commands. What makes it really cool is that it's really cheap.

Using the 150mAh LiPo battery, it should run for several years in low power mode without requiring a recharge. However, the circuitry to the left provide the charging circuit from the USB & LiPo battery which unfortunately draw more power (meaning that with the Huzzah Feather, your battery will go flat over the course of 2 days).

We'll rectify this problem with our upcoming Proper Pushy device.

But anyway, back to the brains. You programme the chip from your computer, by connecting a micro USB cable between the two.

Once you have your cable - make sure the cable supports data transfer (some just charge), we need to sort out the software side.

• Arduino

Have you heard of the phrase Arduino? No? Well be prepared to discover the equivalent of a new religion & type it into Google. Think of it to micro-controllers like Windows 95 was to the desktop computer revolution.

Download the Arduino IDE (again Google it). Install it & launch it. You should see something that looks like this:

This is the place that you're going to write you code to make the device work.

Prepare to Dock

But we still need to create the connection to the device. There are three steps to this outlined exceptionally in the following official Adafruit guide: https://learn.adafruit.com/adafruit-feather-huzzah-esp8266/using-arduino-ide

Having followed this you should have:

1 - Installed the CP2104 USB driver

2 - Installed the ESP8266 Board Package Manager

3 - Setup ESP8266 Support

(don't worry about the other sections in the guide).

• Do You Speak My Language?

So you've now done a load of stuff & you don't know whether any of it has worked... So let's test it.

We've written some code for you. If you know what you're doing, go write your own, but otherwise, check the code section of this guide & download the "A-BIT-PUSHY-OUTPUT-TEST" repo.

Open the pb01_Output_Test.ino file in the Arduino IDE

Once you've loaded this, you should see the following screen full of code:

Don't fret if you're looking at it going AAAAHHHHHHHHHHH WHAT THE FLUX CAPACITOR IS THAT!!!!!!!

Its all rather simple (we'll explain what goes on somewhere else at a later date). In the meantime, the only bits we're interested in is lines 22 - 25 (note this may be slightly higher if you download a later version than V 1.0.2 but it's the lines that look like below).

int buzzer = 14;
int LED = 13;
int successLED = 15;
int alertLED = 12;

Basically, this reads as follows:

The buzzer is connected to GPIO pin 14

The blue bit of the RGB LED to GPIO pin 13

The green bit of the RGB LED to GPIO pin 15

The red bit of the RGB LED to GPIO pin 12

• Test Flashing

If you purchased a board from us, then we've already flashed this code onto the board for you.

IF YOU'RE BUILDING IT YOURSELF, MAKE SURE YOU REMOVE THE PROTO BOARD FOR THE TIME BEING - THE BOARD WON'T FLASH PROPERLY & CAN SKIP TO POST FLASHING SECTION BELOW.

Now plug in your Huzzah board (without the Protoboard) to a spare USB socket. Once it's plugged in & flash the board by pressing the green arrow next to the tick (top left of the Arduino IDE).

Over the course of the next 20-30 seconds or so you'll see the black bit at the bottom of the screen with a status update.

Successful write to the Adafruit Feather Huzzah

If it looks something like this, then grab your board, unplug it, plonk on your Proto board & re-add the USB power.

Post Flashing

You should see the buzzer beep & see the RGB LED cycle through the three colours. You should see red, green, blue, red, green, blue, red...

Note that each time you re-flash your board, you need to unplug your Proto Board. Lovely.

• Serial Time

Now that we've got it doing something, we need to work out whether it's doing it properly.

This time, plug your Proto Board onto the Feather Board & plug the USB cable into both the Feather & your computer. We need to make sure that the colours are displaying what the code is intending. To do this, we need the board to tell us.

We do this via looking at the serial output in the code. Launch the Serial Inspector by pressing the magnifying glass in the top right hand corner of the Arduino IDE (along the green bar). You should see something like this:

Your window will probably be blank

The first thing that we need to do is set the baud rate to 115200 (which is done on the second drop down next to the "Clear Output" button.

Now that you've done that, hit the push button & you should start to see LED Blue appear when the blue LED emits from the board, LED Green... & so on.

If this isn't matching, then you need to change the pin numbers on lines 22-25 of the code & re-flash the board (making sure you unplug the Proto board as you do).

The last thing to note is the MAC address of the device. If you are unfamiliar what a MAC address is - Google it. It's basically a unique identifier that's unique to any 1 networked device.

The console should output this at the top of the Serial Console. If it doesn't click on the push button & it should appear then. Write this down somewhere as you'll need it later in the Pantri Dashboard.

• Final Flash

Now let's get the proper code up & running. This is a bit more complex. We need to do the following:

• Sense the push button press

• Connect to your local WiFi connection

• Send a REST API Post to the Pantri API

• Receive a response from the Pantri API

• Output the response with a buzzer pattern & a set colour depending on what the return information is

Want to write your own? Get stuck in. Request the REST API details from us (we've not written them yet) & get stuck in.

Want the code? Download that from the "A-Bit-Pushy" repo from the Code section below. Once it's downloaded, open it up in the Arduino IDE.

You should have something that looks a bit like this:

This time we're interested in lines 37 to 50. The last 3 you should know what you're doing with so correct if necessary.

• Line 37 needs the name of your WiFi network inserting inside of the speech marks

• Line 39 needs the password

• Line 41 needs your objectId...

You won't have a clue what this is yet. We issue it to you when you add your device onto your account on the Pantri Dashboard. Once you have it, insert the code between the objectID speech marks.

One last thing before we compile the code & flash it onto the board - you need to add the ArduinoJSON library to the your machine. This is a bunch of pre-compiled code that enables the board to send & receive JSON HTTP REST API info to the Pantri API. If you know what this means then cool. If not, go read up about it before you start making your own devices!

To do this, in the Arduino IDE you just need to click here:

Sketch > Include Library > Manage Libraries...

Once you've done that, you then need to search for "arduinojson" & install the latest version of the Library written by Benoit Blanchon (we can confirm version 5.13.0 works).

Press install to, well install (then you can press close)!

Now this is all done, press the left arrow button in the Arduino IDE again to flash the board (remembering to have the Proto Board removed).

Now you should be able to press the button & magic should happen...

You'll get one of all kinds of beeps & colours coming out of the board, depending on whats going on. You can find out what these mean on the repo description:

https://github.com/pantri/A-Bit-Pushy

Coming Soon...

You now need to add your button to the Pantri Dashboard. To do this, you need to sign-up here - https://dashboard.pantri.net. Then follow the instructions to add your device & start making use of it.

We're still writing the instructions for this, but they'll be available online at http://help.pantri.net soon.