The following step-by-step instructions show how to build a projBox hardware controller using an Arduino and how to test it using a software application written in Processing.
The first part of these instructions show how to fit the parts together and how to place an Arduino and protoboard inside the projBox. In the next section below instructions are given for building a custom hardware controller from scratch using the projBox.
You will need the following parts (links provided for specific parts):
- laser-cut projBox parts
- 6.5″ x 2.125″ solderless breadboard
- standard Arduino (Uno or Duemillanove)
- 2 small screws
Other things you will need:
- wood glue
- small screw-driver
Step 1: Build the Box
Try dry assembling the box first to see how everything fits together.
The smaller slots on the top of the side pieces should both be towards the back of the box and the ports should be on the right side. Also, one of the screw holes on the bottom should be to the lower right.
Once everything fits glue it up. Wood glue works really well with the plywood.
Step 2: Add the protoboard
Remove the sticker backing from a standard size protoboard, then place this in the box snug against the end opposite the ports. Try to leave a small gap on each of the long sides of the protoboard, this gap can be useful for tidying up wires. Press the protoboard onto the base of the box. The adhesive on these is quite strong so be careful when lowering it into position, you pretty much have one shot at it before it sticks permanently.
Step 3: Add the Arduino
Next tip the Arduino into place, with the ports in first, then lowering down the side towards the protoboard. Two small screws will attach the Arduino through two small holes in the base of the box.
The next set of instructions go step-by-step through assembling a projBox Controller. You can use your own parts, or purchase the projBox Kit available at the Maker Shed.
Four rows of knobs, switches and LEDs are attached to the lid and can be used to control custom software via the USB port on the Arduino. A test application written in the Processing language is also provided to see if everything is hooked up right.
- 10k potentiometers (x4) [link] or equivalent
- SPST switches (x4) [link] or equivalent
- LEDs (x4) [link] or equivalent
- Mini-Male to Standard-Male USB cable
- various wires
Other things that will be useful:
- needle-nose pliers
- super glue
- electrical tape
And, if you are building this from scratch you’ll also need:
- wire cutter/stripper
- soldering iron
- solder and flux
- a well ventilated space
If you are using your own parts you’re on your own figuring out the soldering portion. If you are already familiar with electronics the solder points should be pretty easy to match based off of the illustrations.
Step 3: Attach the Switches
Attach the switches to the lid using a nut and washer. Needle-nose pliers are useful, try holding the switches in place with the pliers by clamping down on the rectangular section, turning both the lid and switch a bit at the same time to twist them in. After it’s in snug attach a hex nut on the opposite side. Do this for each of the four switches.
After they’re all in you may want to gently curl the lead wires out of the way to make attaching the other components easier.
Step 4: Attach the Potentiometers
Attach the potentiometers to the lid, press them straight in with the set pin and main shaft both at a 90º angle to the lid. Then attach the washer and hex nut onto the shaft threading. The projBox lid has spaces for four potentiometers.
Step 5: Press in the LEDs
Press in the four LEDs to the lid. A spot of super glue can help hold them in place.
When you’re done attaching all the components to the lid put it aside. In the next steps you’ll run jumper wires between the protoboard and the Arduino creating connections on the protoboard for attaching the components later.
Step 6: Hook Up Power
Inside the box run a red wire from 5V on the Arduino to the top red rail on the protoboard. Run a black wire along side it from one of the GND pins to the top blue rail.
On the other side of the protoboard jump a red wire from the top red rail to the bottom one. Do this also with another black wire jumping from the top to bottom blue rails. This provides power for components connected nearer to that side of the box.
Needle-nose pliers will be very useful throughout the process of hooking up the jumper wires inside the box, and then later connecting the components on the lid to the protoboard. Many times a wire can be coerced into place by holding the wire with the pliers just above the stripped part being inserted into a pin hole.
Step 7: Connect Jumper Wires for the Potentiometers
Run green wires from the ANALOG IN pins 1 through 4 to the vertical rows on the top half of the protoboard, spacing every 15 rows, starting at row 15, to align the connections closer to the potentiometers on the lid. These wires will be used to connect the potentiometers green (middle) output wire to the Arduino.
Step 8: Connect Jumper Wires for the Switches
Run green wires for the switch output from the bottom rows of the protoboard to the Arduino. Again place them every 15 rows, starting from row 15, but this time connect the wires to DIGITAL pins 2 through 5.
If you allowed for a gap along the long sides of the protoboard try gently pushing the wires into the gap to tidy them up on both the top and bottom.
Step 9: Connect Jumpers for the LEDs
The LEDs, in order to have variable output, must be connected to the DIGITAL pins marked PWM. PWM is Pulse Width Modulation and is a way to create the “illusion” of variable voltage output to simple analog components by switching between high and low output at various speed intervals. More about PWM can be found at arduino.cc along with all the other specifics about the Arduino pins and their behavior.
Run the green jumper wires for the LEDs every 15 rows starting at row 20 to stagger them against the wires for the switches. Also connecting them a few spaces above the switch connections helps differentiate them. Connect wires from row 20 to DIGITAL 6, row 35 to DIGITAL 9, row 50 to DIGITAL 10 and row 63 to DIGITAL 11.
With all the wires connected between the protoboard and the Arduino you’re ready to connect the components on the lid.
Step 10: Hook-Up the Potentiometers to the Protoboard
Fit the box lid into the slots on the rear top of the box sides. The box sides are not shown in the illustration to provide a clearer view of the connections.
Connect the potentiometers first as they are at the back of the box. Connect each potentiometer’s red lead to the red power rail on the protoboard and the black leads to the black power rail. These can be positioned anywhere on the rail, but placing them to their closest row will help keep the wires tidier.
From left to right connect the green lead on the first knob to row 15 and the subsequent potentiometers green leads to the other rows on the protoboard connected to the ANALOG pins on the Arduino.
Step 11: Hook-up the Switches
Connect the black lead of each switch to the blue rail on the bottom half of the protoboard. Connect the red leads to their respective rows on the protoboard starting with row 15, these leads connect to the rows with jumpers connecting to DIGITAL 2 through 5 on the Arduino.
Step 12: Hook-up the LEDs
At this point there will be a lot of wires connected inside the box. Carefully move the connected wires out of the way when adding other wires, thinking in terms of how to fold the wires in to close the lid. The main thing to look out for is the connections on the protoboard from the components on the lid. You might want to periodically go around to each wire while assembling everything and use the needle-nose pliers to make sure each connection is snug.
To connect the LEDs run the black wires in the blue rail on bottom half of the protoboard. Connect the red leads on the LEDs to their respective rows starting with row 20. These are the rows with jumpers connecting to DIGITAL 6, 9, 10 and 11 on the protoboard.
Step 13: Lowering the Lid
Closing the lid is the final step to finishing the projBox controller. ￼This is possibly the trickiest part of the process as the wires have a natural springiness and will try to push the lid back open unless they are wrangled just right.
Start by tucking back each lead wire running from the box lid. There should be enough play to be able to bend them a bit somewhere toward the middle. Lift the lid gently out of the back slots and then start pushing the lid down. If you bent the wires right they should fold in and the lid should be able to lower entirely in place, this may take a bit of trial and error. Again, using the pliers to ensure the connections are firm is really useful.
Be patient with this part of the process, try and try again until everything fits together nicely.
Once the lid fits down wrap a bit of electrical tape around the box to hold the lid in place. In the next step we’ll plug the projBox into a computer via USB and run some test software to make sure everything is working. After that you can find a way to more permanently attach the box lid, like using more tape.
Testing the projBox
Step 14: Install the Arduino and Processing IDEs
You will need both the Arduino and Processing development environments installed on your computer to get the test software going.
Instructions for installing the Arduino IDE (or Integrated Development Environment) and communicating to the Arduino board can be found at:
A guide for installing the Processing IDE is also available on processing.org at:
Make Magazine has also published excellent guides for both technologies written by the founders of these now global initiatives: Getting Started with Processing is by Ben Fry and Casey Reas, and Getting Started with Arduino is by Massimo Banzi.
Step 15: Upload Standard Firmata to the Arduino Board
Once you’ve got both programs up-and-running download the zip archive from the Software page. It contains the Processing source code for an application that shows a graphical representation of the projBox that is connected.
For the application to work you must first load Standard Firmata onto the Arduino board inside the projBox. First connect a USB cable from the projBox USB port to a USB input on your computer.
Then, in the Arduino IDE go to File -> Examples -> Firmata and select Standard Firmata. Under the Tools -> Board menu select the board model you are using (probably Duemillanove or the newer Uno board).
Then, under Tools -> Serial Port select the port listed for the board. Once selected upload the sketch to the Arduino simply by pressing the icon at the top left of the Arduino sketch window with the arrow pointing right. A message will appear at the bottom left of the window saying “Upload Complete” when it is done. Once Firmata has been uploaded you can quit out of the Arduino IDE entirely, as the remaining steps will be done using only the Processing IDE.
More about Firmata and how to use it with Arduino and Processing together can be found here.
Step 16: Run the projBoxTester Software
Open the projBoxTester sketch in Processing. Press the Play button and the software will compile and run instantly.
If everything displays as shown in the image to the left then great! If it doesn’t take a look at the troubleshooting tips below.
With everything working on the software side try turning the knobs and flipping the switches on the projBox itself. If the wires inside the box are connected properly the knob and switch graphics on the screen will change along with the physical ones. By default the LEDs on the box will mimic the on/off state of the switches.
It might be that something doesn’t behave as you expected, like a switch not working or a knob turning the wrong direction on screen. If so open the lid of the projBox and get back to re-connecting the wires utilizing the steps listed above until everything works.
That’s it! Once everything is working how you expect it to you may want to attach the lid a bit more solidly. I usually just wrap some electrical tape around the box in a few places.
From here you’ll be ready to write custom software in Processing that you can control using the projBox. Check the software page for more about the projBox class designed for utilizing the projBox hardware.
Often when the software is first run there will be an error. This is most likely because the software is trying to connect to another piece of hardware instead of the Arduino.
When you first run the program it will show a list of serial devices in the Processing IDEs output window. Find the serial device that is your Arduino board, it will be named the same thing that it was in the Arduino IDE when you selected it under Tools -> Serial Ports. Copy the name of the device and paste it into the code, uncommenting and commenting out the necessary lines:
After that step try running the projBoxTester again by clicking the Play button, it should work. If it still doesn’t work check your USB connection. Beyond that you may want to look at the Arduino documentation or ask questions on a forum dedicated to the topic.
All text © Joseph Gray, 2011. Illustrations also by Joseph Gray. Some images are copyright O’Reilly Media Inc., used with permission.