Difference between revisions of "Rainboard - DIY Dynamic Rainbow Isomorphic Keyboard"

Line 34: Line 34:
  
  
[[File:Rainboard Acrylic CAD Printed and Punched.JPG|thumb|200px|CAD drawing punched]]
+
[[File:Rainboard Acrylic CAD Printed and Punched.JPG|200px|CAD drawing punched]]
[[File:Rainboard Acrylic Pilot Drilling 4.JPG|thumb|200px|]]
+
[[File:Rainboard Acrylic Pilot Drilling 4.JPG|200px|Small pilot hole drilling]]
 
{{#widget:YouTube|id=UDmB3_oHtpQ}}
 
{{#widget:YouTube|id=UDmB3_oHtpQ}}
  
  
[[File:Rainboard Acrylic Pilot Drilling 3.JPG|thumb|200px|]]
+
[[File:Rainboard Acrylic Pilot Drilling 3.JPG|200px|Drilling large and small pilot holes]]
[[File:Rainboard Acrylic Pilot Drilling 3.JPG|thumb|200px|]]
+
[[File:Rainboard Acrylic Pilots Drilled.JPG|200px|All Pilot holes drilled]]
[[File:Rainboard Acrylic Pilots Drilled.JPG|thumb|200px|]]
+
[[File:Rainboard Acrylic Hole Cutting 1.JPG|thumb|200px|]]
+
{{#widget:YouTube|id=nQFuxzMtzrA}}
+
  
Each button hole was punched in order to ensure accuracy. Each punch hole was then drilled twice with two different bits in order to ensure not to crack the acrylic. An adjustable hole saw was then used to drill each hole. This process proved to be difficult using a hand drill. A drill press would have likely been easier to use, however the one that we had access to did not offer enough room between the drill location and the back of the press in order to reach the inside of the acrylic. As well, the drilling of the holes caused the acrylic to melt and stick to the side of the holes. This forced use to use a Dremol in order to grind away the excess plastic. It was originally decided not to use a hole saw as  they generally only come in 1 1/8" and 1 1/4" sizes and we needed a size of ~ 1 3/16". However, it might be able to use a 1 1/8" hole saw and then Dremol the hole slightly larger.
+
[[File:Rainboard Acrylic Hole Cutting 1.JPG|thumb|200px|First hole cut]]
  
[[File:Rainboard Acrylic Hole Cutting 1.JPG|200px|]]
+
Each button hole was punched in order to ensure accuracy. Each punch hole was then drilled twice with two different bits in order to ensure not to crack the acrylic. An adjustable hole saw was then used to drill each hole. This process proved to be difficult using a hand drill. A drill press would have likely been easier to use, however the one that we had access to did not offer enough room between the drill location and the back of the press in order to reach the inside of the acrylic. As well, the drilling of the holes caused the acrylic to melt and stick to the side of the holes. This forced use to use a Dremol in order to grind away the excess plastic. It was originally decided not to use a hole saw as  they generally only come in 1 1/8" and 1 1/4" sizes and we needed a size of ~ 1 3/16". However, it might be able to use a 1 1/8" hole saw and then Dremol the hole slightly larger.
[[File:Rainboard Acrylic Cut 2.JPG|200px|]]
+
{{#widget:YouTube|id=nQFuxzMtzrA}}
[[File:Rainboard Acrylic Cut 3.JPG|200px|]]
+
 
{{#widget:YouTube|id=ZwhJ4QG1jEo}}
 
{{#widget:YouTube|id=ZwhJ4QG1jEo}}
  
 +
[[File:Rainboard Acrylic Cut 2.JPG|200px|Close up of all holes cut]]
 +
[[File:Rainboard Acrylic Cut 3.JPG|200px|All holes cut]]
  
[[File:Rainboard Acrylic Drilled and Cut 1.JPG|thumb|200px|]]
+
[[File:Rainboard Acrylic Drilled and Cut 1.JPG|thumb|200px|Acrylic all cut and drilled]]
[[File:Rainboard Acrylic Drilled and Cut 2.JPG|thumb|200px|]]
+
After all the holes were created the rest of the acrylic was cut with a skill saw using a metal cutting blade. The process was loud but worked well. Although the cuts were not perfectly on the line, the end result was acceptable.
+
  
[[File:|thumb|200px|]]
+
After all the holes were created the rest of the acrylic was cut with a skill saw using a metal cutting blade. The process was loud but worked well. Although the cuts were not perfectly on the line, the end result was acceptable.
[[File:Rainboard Acrylic Melting Sides.JPG|thumb|200px|]]
+
[[File:Rainboard Acrylic Drilled and Cut 2.JPG|none|200px|Acrylic all cut and drilled]]
  
 +
[[File:Rainboard Acrylic Melting Sides.JPG|thumb|200px| Using a propane torch to heat and bend the sides]]
 
The acrylic was then placed on the edge of a table. For the first edge, a computer case door was placed on the acrylic with some weight on it to keep it flat. A heat gun was used slowly heat the acrylic so it could be bent down at a 90 degree angle. After this process was done it was noticed that a large bubble had formed on the acrylic top. A propane torch was used to head up the bubbled area. Weight was then put on it using the computer case door in order to flatten the area back out. For the other 5 sides the propane torch was used. The quicker heating appeared to work better. After all sides were folded down, the edges of the Rainboard were flamed with the torch in order to get ride of the edges caused by cutting. The end result is that the edges are clear and smooth.
 
The acrylic was then placed on the edge of a table. For the first edge, a computer case door was placed on the acrylic with some weight on it to keep it flat. A heat gun was used slowly heat the acrylic so it could be bent down at a 90 degree angle. After this process was done it was noticed that a large bubble had formed on the acrylic top. A propane torch was used to head up the bubbled area. Weight was then put on it using the computer case door in order to flatten the area back out. For the other 5 sides the propane torch was used. The quicker heating appeared to work better. After all sides were folded down, the edges of the Rainboard were flamed with the torch in order to get ride of the edges caused by cutting. The end result is that the edges are clear and smooth.
  
[[File:Rainboard Acrylic Finished 1.JPG|200px|]]
+
[[File:Rainboard Acrylic Finished 1.JPG|200px|Final Housing for the Rainboard]]
[[File:Rainboard Acrylic Finished 2.JPG|200px|]]
+
[[File:Rainboard Acrylic Finished 2.JPG|200px|Final Housing for the Rainboard]]
 +
<br style="clear: both" />
 +
== Button Drilling ==
  
== Button Drilling ==
+
[[File:Two buttons inserted.JPG|thumb|200px|The drilled hole can be seen at the bottom of the button]]
 
In order to fit the LEDs into the buttons a hole was drilled into the bottom of each button casing. The top portion and plunger of each LED was removed. A 5/16" bit was used to drill a hole in the casing.
 
In order to fit the LEDs into the buttons a hole was drilled into the bottom of each button casing. The top portion and plunger of each LED was removed. A 5/16" bit was used to drill a hole in the casing.
 
+
<br style="clear: both" />
 
== Button Insertion ==
 
== Button Insertion ==
 +
[[File:Rainboard with buttons.JPG|thumb|200px|Buttons inserted and glued into the Rainboard]]
 
Each button was then inserted into the housing (still without the tops and plungers). Each was inserted with the same orientation. A large majority of the buttons fit well into the housing, however, about 1 out of 6 had an issue with the housing hole being too large. This caused the button to rotate easily or in a few cases, fall right through the acrylic. In order to remedy this issue hot glue was used to secure these buttons in place.
 
Each button was then inserted into the housing (still without the tops and plungers). Each was inserted with the same orientation. A large majority of the buttons fit well into the housing, however, about 1 out of 6 had an issue with the housing hole being too large. This caused the button to rotate easily or in a few cases, fall right through the acrylic. In order to remedy this issue hot glue was used to secure these buttons in place.
 
+
<br style="clear: both" />
 
== LED Wiring ==
 
== LED Wiring ==
 
+
[[File:Soldered LED.JPG|thumb|200px|Soldered LED]]
 +
[[File:Rainboard_Wired_LEDs.JPG|thumb|200px|Upclose LED Wiring]]
 +
[[File:Rainboard back with leds.JPG|thumb|200px|The LEDs have all been wired and glued in place]]
 +
[[File:Rainboard LED Demo.JPG|thumb|200px|LED Demo]]
 
The LEDs were soldered in a chain the length of each button row using 4 wire ribbon cable. Sadly, we ran across a fair number (1 in 10) LEDs where the board was missing a capacitor. After soldering, each strand was tested to ensure all of the solder points were correct. All of the segments were then soldered into one long strand. Each light was inserted into the bottom of the  button casing through the hole drilled. A couple dabs of hot glue was added to each side to secure the LEDs.
 
The LEDs were soldered in a chain the length of each button row using 4 wire ribbon cable. Sadly, we ran across a fair number (1 in 10) LEDs where the board was missing a capacitor. After soldering, each strand was tested to ensure all of the solder points were correct. All of the segments were then soldered into one long strand. Each light was inserted into the bottom of the  button casing through the hole drilled. A couple dabs of hot glue was added to each side to secure the LEDs.
  
 +
{{#widget:YouTube|id=gQYPXATlC1E}}
 +
<br style="clear: both" />
 
== Button Wiring ==
 
== Button Wiring ==
 +
[[File:Row Column Button Wiring.JPG|thumb|200px|Row and Column Wiring]]
 +
[[File:Rainboard Wiring with rows sideview.JPG|thumb|200px|Wiring with diodes for the columns, no rows]]
 +
[[File:Rainboard wiring without rows.JPG|thumb|200px|Wiring with diodes for the columns, no rows]]
  
 
Before starting to wire the buttons, some care and consideration was given to the proposed wiring schematic. The button shield works by wiring 8 rows and 8 columns. Our button has 9 rows and 9 columns and its widest point. In order to keep the wiring clean and efficient, a scheme was developed where the rows and columns would hook up on two sides of the housing.  
 
Before starting to wire the buttons, some care and consideration was given to the proposed wiring schematic. The button shield works by wiring 8 rows and 8 columns. Our button has 9 rows and 9 columns and its widest point. In order to keep the wiring clean and efficient, a scheme was developed where the rows and columns would hook up on two sides of the housing.  
  
[[File:Row Column Button Wiring.JPG|200px|Row and Column Wiring]]
+
 
  
 
Each column was connected from the button with a diode in order to control voltage flow. This allows the shield to discern which buttons are pressed in the case that several buttons are pressed in similar columns and rows at the same time. The row side of the buttons was connected through using straight wiring. The end of each row and column was soldered to a ribbon cable which runs to the button shield.  
 
Each column was connected from the button with a diode in order to control voltage flow. This allows the shield to discern which buttons are pressed in the case that several buttons are pressed in similar columns and rows at the same time. The row side of the buttons was connected through using straight wiring. The end of each row and column was soldered to a ribbon cable which runs to the button shield.  
 +
[[File:Rainboard Wiring close up.JPG|none|200px|Final Wiring]]
  
 +
<br style="clear: both" />
 
== Button Shield Modifications ==
 
== Button Shield Modifications ==
  
Line 98: Line 108:
  
 
The sketch code uses several static tables to map between button/row numbers, led numbers, midi numbers, and note numbers. The note numbers are used as the top layer of abstraction for note location.
 
The sketch code uses several static tables to map between button/row numbers, led numbers, midi numbers, and note numbers. The note numbers are used as the top layer of abstraction for note location.
[[File:Hex_Layout_Numbered.jpg|400px|thumb|center|Note Numbering]]
+
[[File:Hex_Layout_Numbered.jpg|300px|thumb|center|Note Numbering]]
  
  
 
The current code is rather simple as all the layout manipulation is done on the iOS Musix side. The Arduino listens for button presses/depresses as well as serial communication. When a button is pressed midi data is sent to the music shield and Musix. As well, the led colour of the note is changed to white. When the button is released the colour changes back to its previous state and a midi off message is then sent to the music shield and to Musix. Currently the Rainboard only listens for midi sysex input from Musix. One sysex message is used to send colours and a second is used to send midi values. All communication between Musix and the Rainboard is done using the native note numbers, not midi values.
 
The current code is rather simple as all the layout manipulation is done on the iOS Musix side. The Arduino listens for button presses/depresses as well as serial communication. When a button is pressed midi data is sent to the music shield and Musix. As well, the led colour of the note is changed to white. When the button is released the colour changes back to its previous state and a midi off message is then sent to the music shield and to Musix. Currently the Rainboard only listens for midi sysex input from Musix. One sysex message is used to send colours and a second is used to send midi values. All communication between Musix and the Rainboard is done using the native note numbers, not midi values.
 +
 +
== Additional Shots ==
 +
<gallery perrow=4>
 +
File:Rainboard Colored Bright 1.JPG
 +
File:Rainboard Colored Bright 2.JPG
 +
File:Rainboard Colored Dark 1.JPG
 +
File:Rainboard Colored Dark 2.JPG
 +
File:Rainboard Focused with Musix high angle.JPG
 +
File:Rainboard Red Green LED Demo.JPG
 +
File:Rainboard Top View.JPG
 +
File:Rainboard with Musix focused.JPG
 +
</gallery>
  
 
== Future Plans ==
 
== Future Plans ==

Revision as of 17:15, 10 November 2011

The goal of the Rainboard is to create an Isomorphic Musix Keyboard that is easy to reconfigure and provides visual feedback to the user.

Current State of the Rainboard

Close Shot of the Buttons Top shot of the Rainboard

The Rainboard is a 61 button isomorphic keyboard. Each button contains a RGB led in order to light up the button. A midi value is also mapped to each button. The colours and midi values of the buttons are set from an external source (currently the Musix iOS application, but could easily be set by any serial midi device) using sysex messages. This allows the layout to be change very rapidly. All that needs to be done is to use Musix to select the desired layout on screen and push a button to send the data to the Rainboard. The Rainboard then sets all the LEDs and midi values then stores these values in EEPROM to save settings across resets so the external device is not needed after the desired layout is set. When buttons are pressed the note values are sent to an onboard midi instrument shield in order to produce sound via a 1/8 inch audio jack. As well, the midi values are sent to Musix (with note identifier values rather than midi values). This allows Musix to know exactly which button was pressed if multiple notes of the same midi value are present on the board. Musix can then use it's built in synthesizer to play the music or it can send the data on to other iOS apps to synthesize the audio (such as NLogSynth, Arctic Keys, or SampleWiz).

Active Development Updates

For a frequently updated list of development activity please watch the Rainboard Updates page.

Hardware List

The current hardware for the rain board uses standard DIY parts off of the internet.

  • 64 - LED Pixel RGB 8mm Naked PCB [1] from Bliptronics
  • 64 - Arcade Button - 30mm Translucent Clear [2] from Adafruit
  • 64 Button Shield [3] from SpenzieLabs
  • Arduino Uno Board [4]
  • Musical Instrument Shield [5]
  • iOS Serial Cable [6] - Redpark Serial Cable
  • 0.220" (0.559 cm) thick x 24" x 24" piece of acrylic (plexiglass)

Acrylic Cutting and Moulding

Acrylic used for RainBoard
Adjustable hole saw
Printed CAD drawing

A 48" x 24" x 0.220" piece of clear acrylic (plexiglass) was purchased to be the body of the rain board. This piece could easily be substituted with a piece of plywood or any other sturdy material. We only needed ~ 2' x 2' of the material for the board so we cut the sheet in half. The design for the Rainboard was developed as a CAD drawing and printed to scale. It was then taped to the acrylic.


CAD drawing punched Small pilot hole drilling


Drilling large and small pilot holes All Pilot holes drilled

First hole cut

Each button hole was punched in order to ensure accuracy. Each punch hole was then drilled twice with two different bits in order to ensure not to crack the acrylic. An adjustable hole saw was then used to drill each hole. This process proved to be difficult using a hand drill. A drill press would have likely been easier to use, however the one that we had access to did not offer enough room between the drill location and the back of the press in order to reach the inside of the acrylic. As well, the drilling of the holes caused the acrylic to melt and stick to the side of the holes. This forced use to use a Dremol in order to grind away the excess plastic. It was originally decided not to use a hole saw as they generally only come in 1 1/8" and 1 1/4" sizes and we needed a size of ~ 1 3/16". However, it might be able to use a 1 1/8" hole saw and then Dremol the hole slightly larger.

Close up of all holes cut All holes cut

Acrylic all cut and drilled

After all the holes were created the rest of the acrylic was cut with a skill saw using a metal cutting blade. The process was loud but worked well. Although the cuts were not perfectly on the line, the end result was acceptable.

Acrylic all cut and drilled
Using a propane torch to heat and bend the sides

The acrylic was then placed on the edge of a table. For the first edge, a computer case door was placed on the acrylic with some weight on it to keep it flat. A heat gun was used slowly heat the acrylic so it could be bent down at a 90 degree angle. After this process was done it was noticed that a large bubble had formed on the acrylic top. A propane torch was used to head up the bubbled area. Weight was then put on it using the computer case door in order to flatten the area back out. For the other 5 sides the propane torch was used. The quicker heating appeared to work better. After all sides were folded down, the edges of the Rainboard were flamed with the torch in order to get ride of the edges caused by cutting. The end result is that the edges are clear and smooth.

Final Housing for the Rainboard Final Housing for the Rainboard

Button Drilling

The drilled hole can be seen at the bottom of the button

In order to fit the LEDs into the buttons a hole was drilled into the bottom of each button casing. The top portion and plunger of each LED was removed. A 5/16" bit was used to drill a hole in the casing.

Button Insertion

Buttons inserted and glued into the Rainboard

Each button was then inserted into the housing (still without the tops and plungers). Each was inserted with the same orientation. A large majority of the buttons fit well into the housing, however, about 1 out of 6 had an issue with the housing hole being too large. This caused the button to rotate easily or in a few cases, fall right through the acrylic. In order to remedy this issue hot glue was used to secure these buttons in place.

LED Wiring

Soldered LED
Upclose LED Wiring
The LEDs have all been wired and glued in place
LED Demo

The LEDs were soldered in a chain the length of each button row using 4 wire ribbon cable. Sadly, we ran across a fair number (1 in 10) LEDs where the board was missing a capacitor. After soldering, each strand was tested to ensure all of the solder points were correct. All of the segments were then soldered into one long strand. Each light was inserted into the bottom of the button casing through the hole drilled. A couple dabs of hot glue was added to each side to secure the LEDs.


Button Wiring

Row and Column Wiring
Wiring with diodes for the columns, no rows
Wiring with diodes for the columns, no rows

Before starting to wire the buttons, some care and consideration was given to the proposed wiring schematic. The button shield works by wiring 8 rows and 8 columns. Our button has 9 rows and 9 columns and its widest point. In order to keep the wiring clean and efficient, a scheme was developed where the rows and columns would hook up on two sides of the housing.


Each column was connected from the button with a diode in order to control voltage flow. This allows the shield to discern which buttons are pressed in the case that several buttons are pressed in similar columns and rows at the same time. The row side of the buttons was connected through using straight wiring. The end of each row and column was soldered to a ribbon cable which runs to the button shield.

Final Wiring


Button Shield Modifications

The button shield uses the rx pin on the arduino for Serial communication (57600 baud) or pins 2,3,4 for SPI like communication. The hardware serial is being used by the RedPark cable. SPI worked when single buttons where pressed. However, when multiple buttons were pressed at once or quickly after each other the Arduino would not be able to keep up with receiving all of the messages (likely due to interrupt disabling and cpu load). Therefore, the serial line was rerouted to pin 8 and a software serial connection was setup on the Arduino using NewSoftwareSerial v11b. This seems to have fixed most of the button press issues

Musical Instrument Shield

A Musical Instrument Shield was added to the project to allow the Rainboard to generate audio without the need for an external device. The input for the shield was rerouted to pin 5. The shield works with very low latency but does not have amazing sound output by any means. The latency between pressing a button and audio generation from the shield is unmeasured, but appears to be imperceptible.

LED Connection

The LEDs come with a LPD6803 chip which allows easy colour modification over 4 wires. However, one of the problems with this chip is that it requires constant clocking in order to perform PWM. The result is that the Arduino must constantly be sending data. The lights connect to the Arduino using two of the built in SPI Pins (11 - Master Out Slave In and 13 - Clock). By using built in SPI the lights an be updated much faster than bit banging and with less cpu usage. The library that was provided by the buttons worked but took much of the cpu time causing button and serial issues. By switching to the Fast SPI library many of the issues eased off, but did not completely go away.

Arduino Code

The sketch code uses several static tables to map between button/row numbers, led numbers, midi numbers, and note numbers. The note numbers are used as the top layer of abstraction for note location.

Note Numbering


The current code is rather simple as all the layout manipulation is done on the iOS Musix side. The Arduino listens for button presses/depresses as well as serial communication. When a button is pressed midi data is sent to the music shield and Musix. As well, the led colour of the note is changed to white. When the button is released the colour changes back to its previous state and a midi off message is then sent to the music shield and to Musix. Currently the Rainboard only listens for midi sysex input from Musix. One sysex message is used to send colours and a second is used to send midi values. All communication between Musix and the Rainboard is done using the native note numbers, not midi values.

Additional Shots

Future Plans

Being as the buttons do not have double press detection, the keys are not velocity sensitive. However, we are going to try to add an accelerometer to the centre of the board in order to try and allow some velocity sensitivity.

We are also considering adding touch strips of joystick buttons to the sides of the Rainboard in order to allow layout dragging (as is done in Musix) or to allow dynamics information to be input.

Issues / Limitations Encountered

Bliptronics lights / SPI / Serial breaking

The Arduino library [7] that comes with the bliptronics lights uses SPI [8] in order to send data to the lights quickly. It was found that once the blip library was included with the project and init was called, hardware serial data receive (rx pin 0) on the arduino would not work. The current explanation is that the blip library spends a large quantity of time inside an interrupt. This is causing the serial rx interrupt to not be fired and the receive data is lost. So cercumvent this issue, SoftwareSerial is used instead of hardware serial. For more details on the issue please visit Rainboard SPI LED Serial Conflict page.

SerialSoftware (NewSerialSoftware v11b)

In order to work around the broken hardware serial rx, a software serial solution called NewSoftSerial [9] was used. The version currently being used is version 11 beta [10]. This library will like replace the SoftwareSerial library included with the Arduino software. The serial connection is used to talk to the red park serial cable. It appears that connections from the Rainboard to the iPad worked fine, but data would get corrupted from the iPad to the Rainboard when sending more than a few bytes. This issue has been fixed by altering the timing of the serial receive delays. For more details on the issue please visit Rainboard NewSoftSerial.

External Links

  1. http://www.bliptronics.com/item.aspx?ItemID=114
  2. https://www.adafruit.com/products/471
  3. http://spikenzielabs.com/SpikenzieLabs/Button64Shield.html
  4. http://arduino.cc/en/Main/arduinoBoardUno
  5. http://www.sparkfun.com/products/10587
  6. http://redpark.com/c2db9.html
  7. http://bliptronics.com/Arduinocode/BLIP_LEDS_SPI_LPD6803.zip
  8. http://www.arduino.cc/en/Reference/SPI
  9. http://arduiniana.org/libraries/newsoftserial/
  10. http://arduiniana.org/2011/01/newsoftserial-11-beta/


Comments

blog comments powered by Disqus