Main Menu

Secondary Menu

Sugarcube MIDI Controller

Introduction: Sugarcube MIDI Controller

This project is a portable, Arduino-powered, grid-based MIDI controller that boots up into a variety of apps to do lots of things with sound. It has 16 backlit buttons, used as both inputs and outputs to give the controller some visual feedback. 2 potentiometers give analog control, depending on the app the pots are assigned to tempo, MIDI velocity, pitch, and scrolling (making the avaible grid space larger than 4x4). An x/y accelerometer and an x/y gyroscope add some playful, gestural control to the device; most of the apps implement a "shake to erase" control and several respond to tilt in various ways. It boots up into 7 different apps (described below), though it has the potential to boot up into 16 total. This device is primarily a MIDI controller, but I've also written an app that allows you to pull the button and analog data into MaxMSP and to control audio.

This controller was inspired by both the monome and tenori-on. When I was in college, I built a large touchscreen display, based on the Arduinome monome-Arduino clone schematics and code, that worked with all the open source monome applications written in MaxMSP. There are a ton of people building their own monome-type devices using these buttons from Sparkfun and the Arduinome code, as well as a few variations on the theme. With this project, I was interested in making a device that was a little more self-contained and relatively cheap to make (lots of buttons = lots of $). In keeping more with the concept of the tenori-on, this controller does all its app processing itself, it does not rely on a computer to process button presses/analog controls into MIDI. This means you can plug it directly into a synth or any device that understands MIDI and you're good to go, no computer required. It runs off a beefy LiPo battery that keeps it running for days on a charge, so it's fairly portable as well. In keeping with the monome side of things, it's totally open source and can be adapted to your particular audio setup/needs. All the Arduino code is up on github (click the cloud-shaped button to download), along with a MaxMSP patch that decodes data from the controller into something usable in Max.

An overview of the apps I've written so far:

Pixel Tilt - One pixel moves across a 2D keyboard with tilt, triggering MIDI as it moves. Control velocity and basenote with pots.

Flin - Music Box app based on monome. Speed and velocity of notes controlled by y tilt. Paging across 16 "lanes" with pot. Shake to erase.

Serial Communication with MaxMSP - Pull data from buttons and analog controls into MaxMSP and use Max to send LED states. Supports 5 bit analog controls for x/y accelerometer and 2 pots. This is great if you want to run audio processing applications with the controller. Download SerialDemo app (SerialDemo.maxpat, included with the Arduino files, click the cloud-shaped button here) to parse data in Max. Beat slicer (shown above) app is included with the Arduino files as well.

Arpeggiator - Plays a two, three, or four note arpeggio, similar to this app I wrote for monome. One pot controls the speed of the arpeggio, another controls velocity. Notes within the arpeggio can be shifted up or down by one semitone via button controls. The whole arpeggio is transposed via x tilt. Press the leftmost note in the arpeggio to play the notes in ascending order, press the rightmost note in the arpeggio to play the notes in descending order, and press a middle note in the arpeggio to play the notes in a random order. Shake to erase.

Boiing - Bouncing pixels that generate polyrhythms, based on this tenori-on app. Bounce direction based on y tilt. Speed and MIDI velocity (loudness) controlled by pots. Shake to erase.

I put a 3-axis accelerometer and 2 axis gyroscope in this controller to give it some gestural control, but so far I haven't actually used the gyro in any apps, and I've only got the x and y axis of the accelerometer wired up. That means you could sub in a simpler/cheaper part like this. Update: this part is no longer available and I'm having a hard time finding an analog gyro to replace it. This analog accelerometer board will work, and as I said before, I haven't actually implemented any apps with the gyro yet, so it's not really necessary. the wiring is a little different for the new accelerometer, but if you connect x, y, z, gnd the way I've described in the rest of the schematics, and connect the 5V from the Arduino to the accelerometer's Vin, it should work the same.

(1x) Size N Panel-Mount Coaxial DC Power Jack with Switch Radioshack 274-1573 Update Digikey CP-002AHPJCT-ND this part may look different than the one pictured, check the datasheet/use a multimeter to be sure connection are correct.

Step 1: Schematic and Overview

All schematics for this project are shown above. Detailed overviews of the 74HC595, 74HC165, and power connections are given later in this Instructable. All the Arduino pin connections are listed below:

Step 2: Solder LEDs to Sparkfun PCB

Thread the leads of 16 LEDs (5mm or 3mm are fine, I used 5mm) through LED holes in the Sparkfun PCB. These boards are compatible with 4-lead RGB LEDs, so there are four available holes on each button pad. You can use the two center holes for single color LEDs (see figure 3). Be sure that the flat edge of the LED (the cathode) lines up with the flat marking on the PCB.

Solder the LED leads and cut away the excess wire.

Step 3: Solder Diodes to Sparkfun PCB

Solder 16 diodes to Sparkfun PCB. Be sure to line up black marking on diode (cathode) with the stripe on the PCB.

Step 4: Ribbon Cable

Cut about 1ft of 16 conductor ribbon cable. Separate and strip the ends of all 16 wires on one side and solder to Sparkfun PCB. The following list gives all the colored conductors in order with the name of the PCB hole they should be soldered to, if you do this correctly none of the wires should cross. Note that since I'm only using a single color LED, I'll wire up only the "blue" anode.

Connections:

(one side of ribbon cable) Brown to SWT-GND1 Red to LED-GND1 Orange to SWT-GND2 Yellow to LED-GND2 Green to SWT-GND3 Blue to LED-GND3 Purple to SWT-GND4 Grey to LED-GND4 White to BLUE4 Black to SWITCH4 Brown to BLUE3 Red to SWITCH3 Orange to BLUE2 Yellow to SWITCH2 Green to BLUE1 Blue to SWITCH1 (other side of ribbon cable)

Step 5: Clamp Socket

Use a bench vice to clamp the16 pin socket on the ribbon cable. If you do not have a bench vice do not use pliers do this, you will clamp the socket on sideways and mess up the connections. You're better off using a hammer to tap the clamp shut, just make sure you are always applying pressure evenly across the socket.

Be sure the clamp the socket on the ribbon cable in the same orientation indicated in the images above.

Step 6: Multiplexing With Arduino and 74HC595

Two 74HC595s (wired in parallel) will be driving all the LEDs in the project as well as providing power to all of the buttons. The 74HC595 is an 8 bit serial in parallel out shift register. I've written a detailed tutorial about multiplexing with the 74HC595, and you can find more info about this chip on its datasheet. Please note that the 74HC595 drawn in the schematic is not a pin diagram, I have rearranged the order of the pins to make the circuit diagram more clear. The pin diagram for the chip is shown in fig 4.

The 74HC595 has the following pins (the technical name may be one of several things depending on which data sheet you are reading):

Step 7: Header Pins

Solder two rows of eight header pins to the protoboard. This is where the ribbon cable socket will attach to the board.

Step 8: Current Limiting Resistors

The 74HC595 will be driving the LEDs in the sparkfun board. However, this chip only outputs 0 or 5V and it can output as much as 70mA. This means we must use current limiting resistors to prevent damaging the LEDs.

From the specs of the LEDs I used: max forward current: 30mA forward voltage: 3.2V

I used 68 ohm resistors so that I was not running at the absolute maximum, but also ensuring that I wouldn't lose too much brightness. (I made a mistake a grabbed the 100KOhm resistors when I made this project, I fixed it later, but the stripes of 100Ohm resistors should be blue, grey, black, gold, ignore the colors in the images).

These are the sample calculations for the specific LEDs I used, you'll need to do you own calculations based on the specs of your LEDs. If you are unsure of what to do, use 220ohm or higher resistors; using too much resistance will make the LEDs less bright, but they will not be damaged.

Solder four resistors to the protoboard as shown in the images. Connect the leads of the resistors to their adjacent header pins with solder (figure 2).

Step 9: 74HC595 Socket

Solder an 8-pin socket to the protoboard as shown in the images above.

Step 10: Connections to LEDs

As shown in figure 6, the output pins (Q0-Q7) are located on pins 1-7 and 15. This image was taken from the datasheet of the 74HC595. Connect the resistors to pins 4-7 with jumper wires as shown in figures 1 and 2. Connect pins 1-3 and 15 to the header pins according to the schematic (note the wiring in the image is incorrect, but the schematic is correct). The pins connections to the 74HC595 should be as follows:

Be sure to get these pin connections correct- do this part slowly and refer to the schematic often.

Make sure to electrically join all these connections with solder on the underside of the board (figs 2 and 4)

Step 11: Add Second 74HC595: Part 1

Each 74HC595 can only source 70mA at a time for all its pins. With the 100ohm current limiting resistors, if all 4 LEDs in a row are on at the same time (with multiplexing this is the max number of LEDs that can possibly be on at the same time), they will each draw about 18mA which puts the current requirements slightly above the 70mA maximum rating. I'll be drawing additional current from pins Q0-Q7 to multiplex the buttons (in later steps). An easy solution to this problem is to add another 74HC595 to the circuit, it will be wired parallel to the current 74HC595 (see schematic). This will give us additional 70mA to draw from on all 8 pins.

Add another 16 pin socket to the protoboard as shown in the images.

Step 12: Add Second 74HC595: Part 2

Wire pins 1-7 and 15 of the sockets to each other (see note on schematic). These pins correspond to all eight outputs of the 74HC595s.

Step 13: Add Second 74HC595: Part 3

Step 14: Add Second 74HC595: Part 4

Connect pins 11, 12, and 14 of the sockets to each other. These correspond to the clock, latch, and data pins of the 74HC595s.

Step 15: Add Second 74HC595: Part 4

Wire pin 10 to 5V (pin 16) and pin 13 to ground (pin 8). Pin 10 (MR) should be high and pin 13 (OE) should be low in order to send data to the output pins (Q0-Q7).

Step 16: Header Pins

Solder header pins to the perfboard so that an Arduino Uno can snap fit onto it. Be careful of the odd pin spacing between digital pins 7 and 8, I've designed this project so that connecting to pin 8-13 is not necessary, it's probably best to omit header pins for Arduino pins 0-13 so that things snap together easier (see image note).

Step 18: Test LEDs

Upload the code below onto the Arduino and test to see if LEDs are wired correctly. Insert two 74HC595s into the empty sockets, plug the button pcb into its socket, and connect the arduino to the protoboard (fig 1). You should see each LED light up one at a time, this loop will continue repeating forever (see video below). If this is not working, double check the connections in the previous steps and check all your connections for continuity. Do not continue onto the next steps until you get the LEDs working.

Step 19: Multiplexing With Arduino and 74HC165

The 74HC595 can only do parallel output, so I used a 74HC165 to measure the state of the buttons via 4 current limiting resistors and send this information to the Arduino. More info about the chip can be found on its datasheet. Note in fig 2 that the 595 chips from the previous steps will be providing power to the buttons (as they are doing for the LEDs).

The 74HC165 has the following pins (the technical name may slightly different depending on which data sheet you are reading):

Step 20: 74HC165: Part 1

Solder a third 16 pin socket to the protoboard, this will be for the 74HC165. Connect 5V to pin 16 and ground to pin 8.

Step 21: 74HC165: Part 2 Pull Down Resistors

I used resistors in series with the buttons to pull D0-D3 of the 165 chip down to ground while the buttons are not pressed - this is called a "pull down resistor". Solder four 10kOhm resistors to the pins adjacent to the header pins (see fig 1). Connect four wires from the 74HC165 inputs D0-3 (pins 11-14) to the space between the male header pins and the 10k resistors as indicated in fig 3 and in the schematic (also see yellow wires in fig 2). Drag solder between the header pins, the wires to the 165 chip, and the resistors to connect them (see fig 3). Connect the other side of all four resistors to each other and to Arduino ground (again see fig 3 and the schematic).

We'll be powering the buttons with the same supply that is powering the LEDs - the 595 chips. Drag solder between the header pins that connect to the LED-BLUE (1-4) on the sparkfun board to the header pins that connect to SWITCH (1-4) on the sparkfun board (see note on fig 3 and 5).

Step 22: 74HC165: Part 3

Connect the data pins of the 74HC165 to the Arduino (brown wires) Pin connections (also shown in schematic):

Step 23: 74HC165: Part 4

Connect ground to pins 15 (CE with line on top) and 10 (DS) of the 74HC165.

Step 24: Test Buttons

Upload the following code onto the Arduino. If everything is wired correctly each button will light up while pressed. If you're noticing that some buttons are not as responsive try cleaning the conductive rings and the traces on the pcb with water and drying thoroughly, this solved some response problems for me.

Step 25: Serial Communication

At this point in the project I got a little impatient and wanted to start making some sounds, so I added some things to the firmware to make the Arduino send and receive information serially. I've posted the code below. I used a timer interrupt to keep the Arduino responsive to incoming serial messages, you can read a little more about how that works here. (if you're going to test this code, use the app attached, the newer version of the beat slicer app on github is a little different).

I sent this serial data to an audio processing application I wrote in MaxMSP. You can download this application below (called beat slicer) and open it with MaxMSP or MaxRuntime (free version) here. I'm running Max 5, I assume it will work on Max 6 as well. It will prompt you to select an audio file (wav, mp3, aiff). Then you can manipulate this audio file using the button grid as shown in the video below:

Attachments

Step 26: Battery

One of my main objectives for this project was to make something portable, so the next step is to add portable power. I used a rechargeable Li-Po battery to minimize waste and provide enough power for hours of use. Additionally, I wanted a Li-Po battery that only had two leads coming out of it so that I could charge it using a regular barrel plug.

Here are the parts for the power setup, taken from the parts list on the first page:

Cut and strip the two leads from the battery (do not let them short out). Make connections between the battery, plug, switch and Arduino according to the schematic above. I like to always attach ground to the outside part of the coaxial jack, but you can wire it however you like (just make sure your wiring of the charger is consistent!).

Cut and strip the two leads from the charger. Solder the n type barrel plug to these leads as shown in the image above. Make sure that the polarity of your charger's barrel plug matches the polarity of the jack. Again, I've chosen to connect ground to the outside part of the coaxial jack/plug in the images above.

Now the switch acts as an on/off switch to the Arduino and the battery can be charged via the barrel plug. Charging Li-Po batteries is a somewhat complicated procedure that involves balancing the cells of the battery, I'm not sure if hooking up the Arduino in parallel with the battery during charging will interfere with this process. Just to be safe, I'm always sure to switch the power switch off during charging, thereby removing the Arduino from the circuit.

Note- be careful when using Li-Po batteries, improper use can result in fire. Be careful not to short circuit the battery and always use the proper charger.

Step 27: Midi Out

This instrument is primarily a MIDI device, so we need to build a MIDI out. There are two ways to do this (and over the course of this project I did one and then switched to the other):

Either of these options is fine, I chose USB because I didn't want to have to carry a special MIDI to USB cable all the time. If you have a lot of synthesizers that receive a 5 pin MIDI input, it might be more convenient for you to use the 5 pin jack (it's also a little easier). I'll go through both processes below:

5 pin connection:

Solder a 220ohm resistor to pin 4 of the MIDI jack and connect to Arduino 5V. Solder a wire between MIDI pin 2 and ground. Solder a wire between MIDI pin 5 and digital pin 1 (TX).

MIDI over USB:

MIDI over USB is a little tricky. Ideally we'd be able to send MIDI out the USB port already connected to the Arduino, but this turns out to be more trouble than it's worth in my opinion. You can read a little bit about various solutions here. Instead, I found a really great tutorial that explains how you can take apart a cheap MIDI to USB cable, solder new connections to it, and tuck it inside your project enclosure with your Arduino, to create a secondary MIDI-USB output. The process is explained really well on the Shiftmore blog, but the MIDI to USB cable I received from amazon was a little different, so I'll describe the process again here.

Remove the plastic casing from the MIDI to USB cable and unsolder the connections to the cables on either end (fig 8). The USB connections are shown here, make the following connections:

5V to + DP to D+ DM to D- VSS to -

As you can see in figs 9 and 10, I used a pieced of perf board to make the connections to the USB jack. On the other side of the MIDI to USB board, make the following connections to the Ardunio:

IN- to Digital Pin 1 (TX) GND to Arduino Ground

Testing it out:

Load the firmware below onto the Arduino (also in attached file), it will turn the keypad into a simple MIDI device: pressing each of the buttons will cause the button to light up and trigger a MIDI note. Disconnect the Arduino's serial connection and connect the MIDI output to a MIDI instrument or your computer to hear the MIDI notes. You should also see the yellow MIDI IN light on the MIDI to USB board turn on with each note. More info about programming the Arduino to send MIDI can be found here.

Attachments

Step 28: Accerometer/Gyro

I attached a 2 axis gyroscope and 3 axis accelerometer onto this project so that I could add some interesting control to the device. The 5 degrees of freedom board from Sparkfun outputs data from its gyroscope and accelerometer as analog voltages. I sent these to analog pin 0-4. You may notice that the Gyro has four outputs- I chose to use the X/Y4.5 out instead of the X/YRate out because the 4.5 has higher resolution. I wrote more about this board and explained some of the code I used to get it up and running here.

Solder header pins on the gyro/accelerometer board. Solder on the perfboard, making sure to leave room for the Arduino to fit on top. Make the following pin connections:

Upload the following code and check the serial monitor to make sure accelerometer/gyro is functioning properly. When the board is lying still and parallel to the ground the values of xGyro, yGyro, xAcc, and yAcc should all hover around 0. zAcc should output a value around -66 (see fig 8). Move the board around and see how the values change. In figure 9 you can see how rotation about the x axis changes xGyro and y and zAcc, but not yGyro or xAcc.

Once you add the potentiometers, you will be able to use the accelerometer/gyro for gestural control, as shown in the following video:

Step 29: Pots

Connect a black wire to the left lead of a 10K linear taper potentiometer. Connect a green wire to the middle lead. Connect a red wire to the remaining lead. Repeat this for the other potentiometer. Connect the other end of the red wires to 5V, the black wires to ground, and the green wires to Analog in

Use pliers to remove the pin on the side of the pots, so that you can mount it more easily in your project enclosure.

Step 30: Enclosure

I borrowed an idea from former Artist in Residence Mads Hobye for my enclosure. Mads founds these sleek boxes at the container store and used them to make project enclosures for the various musical instruments he built during his stay. These boxes are particularly convenient because they have a bevel around the top that allows you to easily mount a 5mm acrylic front panel.

I mounted all the components in the box either using epoxy (Amazon), or for less permanent bonding, I used a foam core adhesive tape (Amazon).

I used a laser cutter to cut out two USB ports (one for the Arduino and one for MIDI out) in the bottom of the enclosure. Then I used a drill to make holes for two pots, a power switch, and a charging jack. The vector files are attached (scTopLaser, scBottomLaser).

I laser cut 2.5cm standoffs from 3mm ply and epoxied them into the enclosure. I laser cut a backing plate (SCsupport.pdf) for the button pcb from 0.25" ply and screwed it down to the standoffs with small wood screws.

Originally, I laser cut a front panel from translucent white 5mm acrylic so that it would snap fit into the wood box. Later, I waterjet an aluminum from panel from 3mm aluminum sheet. I secured the aluminum front panel to the pcb backing plate with small, countersunk machine screws. I drilled out four holes in the laser cut pcb backer and epoxied some small nuts for the screws to clamp to. The vector file is attached (SCface.pdf).

Attachments

Step 31: Final Firmware

For the final firmware, I've extracted all the code that controls the buttons and leds into a library to make it more tidy, all of this is in a class called SugarCube. I was inspired by the work I've been doing on the Instructables iOS app, and wrote the event handling pieces of the code so that they work in a similar way that an iPhone deals with touch and other gestural events. Basically I created a set of methods that each app can subscribe to, things like "deviceWasShaken" or "buttonPressed". When the SugarCube class detects one of these events, it tells the current app to execute the corresponding method. If you're interested in seeing an example of this structure in action, check out SimpleMIDIKeyboard.cpp, it shows how few lines of code are needed to wire up all the button and analog controls to MIDI outputs. I hope to eventually write out a little more complete documentation for how to write your own apps based on this framework, please let me know if there is interest. This is by far my biggest piece of C++ code, and I am by no means an expert in C++, I'd love to hear an expert's thoughts on how I did!

The controller boots up into several different apps. In the main file, you'll see a section with case 0, case 1, case 2.... etc. The buttons on the controller are named 0-15 starting from the top left corner, going left to right. If you press button 0 (top left) after turning the controller on, you will boot into Step Sequencer mode, holding down button 1 (the one to the right of button 0) will boot into Flin, and so on.

Step 32: Future Work

This project has the potential to be expanded upon quite a bit. Unfortunately, I just don't have the time to invest in exploring all the possibilities, but here's some ideas I had for things to look into:

More apps: The current implementation of this device allows you to boot into 16 different applications, but I've only written seven so far. There's a ton of great ideas over on the monome website for grid based controllers, it'd be great to see some of that translated into Arduino.

Gyro Control: As I mentioned earlier, I threw an x/y gyroscope in the controller, but I've yet to write an app that actually uses it. I'd love to hear if someone has an idea for how this could work with MIDI.

Wireless: When I started this project, my major design objectives were portability and plug and play ease of use. I wanted to try to break away from the model of the electronic controller that necessitates a computer to run, in an effort to bring electronic music out of the traditional studio environment. In keeping with that idea, I'd like to eventually get this controller to wirelessly send MIDI to my phone to make it totally portable. I have one of these bluetooth boards from Red Bear Labs, and I think there might be some way to send the data to my phone, translate it into CoreMIDI and run it though a MIDI synth, but I just haven't explored the idea enough yet. If anyone has any insight, I'd love to hear your thoughts.

Step 33: Appendix: Cut PCB for Control Buttons

Originally, I planned to have four extra "control" buttons on the side of the controller that I was going to use in various applications. I started wiring it up, but eventually scrapped it. I haven't written any code for these buttons, and they are in no way integrated into the apps I've written, but I figured I'd still include the images that I took during that process in this Instructable in case it's useful to anyone.

Cut the 2x2 sparkfun pcb as shown in the pictures above. Solder white LEDs and diodes on the pcb as in steps 2 and 3.

Step 34: Appendix: Control Buttons Wiring Part 1: PCB

Cut a piece of ribbon cable and solder 8 wires to the sparkfun PCB holes labelled "switch gnd" and "led gnd". Solder four more wires to the holes labelled "switch" and "blue." See the images for more info.

On one half of the PCB (the one labelled "green" and "blue") you will have to rewire some of the traces that were broken when the PCB was cut. Both connections to the positive switch rail will need to be connected to each other and then connected to the "green" led trace as shown in fig 4. I did this by removing one strand of a piece of stranded wire and poking it through the vias on the PCB. Use a dab of solder to secure the electrical connection between the copper strand and the PCB (fig 7). You will also have to solder a wire between the two "blue" positive rails (also shown in fig 4). Once this is done, test for continuity and cover the exposed copper with electrical tape to prevent short circuits (fig 6).

On the other half of the PCB, use a jumper wire to connect the "red" and "blue" sockets of one of the LEDs together (see fig 7). This will connect the anode of your white LEDs to the ribbon cable.

Step 35: Appendix: Control Buttons Wiring Part 2: Socket

Clamp a 16 pin socket onto the ribbon cable as shown in fig 1. Solder two rows of male header pins to the protoboard so that the control buttons fit onto the board as shown in fig 3. Trim any excess ribbon cable.

Step 36: Appendix: Control Buttons Wiring Part 3: Header Pins

Solder 3 more male header pins to snap to digital pins 11-13. Since the spacing between Arduino digital pins 0-7 and pin 8-13, I had to drill holes in my perfboard and scrape off some of the copper traces. See the images above for more information.

Step 37: Appendix: Control Buttons Wiring Part 4: Connections to LEDs

Solder four 68ohm resistors to the pins which connect to the LED cathodes. Connect the other end of these resistors to pins 4-7 of the 74HC595 with jumper wires (yellow).

We'll be using pin 11 of the Arduino to supply positive voltage to the LEDs, but one Arduino pin cannot source enough current to drive the LEDs by itself. I used a 222 NPN transistor in an emitter-follower configuration to boost the power of pin 11's signal. Connect pin 11 to the base (middle pin) of the transistor. Connect the collector to the Arduino's 5V supply and the emitter to the header pins which connect to the LED anodes (fig 5).

Solder a jumper wire between pin 13 of the Arduino and the header pins which attach to the button anodes.

On the reverse side of the perfboard I soldered four jumper wires from the button cathode pins to 10k resistors connected to ground (fig 4). I did this to save space on my PCB so that it would fit in an enclosure better. I also soldered four jumper wires from the non grounded side of the 10k resistors to 165 pins 3-6.

Great guide, built in and got in working. I've been using it in both Traktor and Ableton Live. I do have a question though - how can I get it to light LEDs other than than the one associated with the button press?

you mean you want to be able to control the leds to make them do other things? They won't be able to change color or brightness bc the circuit isn't set up for that, but you could write your own app to control them in different ways.