# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Overview

https://youtu.be/WMKVC1su4Bw

## DIY MIDI Controller

Build your own CircuitPython powered MIDI controller! This "MIDI fighter"-like controller features 16 arcade buttons with built-in LEDs, an OLED screen and joystick. Play drums, synthesizers or anything MIDI related! All of the electronics are housed in a snap-fit 3D printed case.

![3d_printing_loop-thumb-hq.gif](https://cdn-learn.adafruit.com/assets/assets/000/100/403/medium640thumb/3d_printing_loop-thumb-hq.jpg?1614972587)

## Buttons and LEDs

The Raspberry Pi Pico has plenty of GPIO for connecting 4x4 buttons. The AW9525 GPIO expander / LED driver powers the LEDs and connects to the Raspberry Pi Pico over I2C.

The LEDs light up when the buttons are pressed and stay lit until released. Awesome!

![3d_printing_hero-1.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/542/medium640/3d_printing_hero-1.jpg?1615314494)

## Edit MIDI on the Fly

This MIDI controller's special sauce is the ability to change and save MIDI notes directly on the device. This allows quick MIDI notes remapping. Perfect for crafting your own kits and setups for performances.

![3d_printing_oled-demo-loop.gif](https://cdn-learn.adafruit.com/assets/assets/000/100/544/medium640thumb/3d_printing_oled-demo-loop.jpg?1615315887)

## Intuitive UI/UX

The OLED screen shows the 16 buttons as little circles with numbers. The numbers are the MIDI notes assigned to each button. Use the joystick to select a button and edit the MIDI note. In edit mode, the button will blink the LED, letting you know it's been activated. While in edit mode, the buttons can be pressed to compare MIDI notes.

![3d_printing_hero-oled-joystick.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/545/medium640/3d_printing_hero-oled-joystick.jpg?1615316558)

## Kickstand Handle

Lunchbox vibes? Yes! The handle is 3d printed, print-in-place, with no support material. Can you handle it? It also works great as a kickstand to prop up the case.

![3d_printing_hero-3.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/543/medium640/3d_printing_hero-3.jpg?1615314524)

![](https://cdn-learn.adafruit.com/assets/assets/000/100/553/medium800/3d_printing_hero-2.jpg?1615318590)

## Prerequisite Guides

Take a moment to walk through the following guides:

- [Raspberry Pi Pico RP2040](https://learn.adafruit.com/getting-started-with-raspberry-pi-pico-circuitpython/overview)
- [AW9523 GPIO Learn Guide](https://learn.adafruit.com/adafruit-aw9523-gpio-expander-and-led-driver)
- [1.5" OLED Display Guide](https://learn.adafruit.com/adafruit-grayscale-1-5-128x128-oled-display)

## Parts from Adafruit

List of parts required for this build.

- [Raspberry Pi Pico](https://www.adafruit.com/product/4864)
- [AW9523 GPIO Expander and LED Driver](https://www.adafruit.com/product/4886)
- [1.5" OLED Display](https://www.adafruit.com/product/4741)
- [5-way Navigation Switch](https://www.adafruit.com/product/504)
- [30mm Arcade Button with LED](https://www.adafruit.com/product/3491)

![3d_printing_parts.jpg](https://cdn-learn.adafruit.com/assets/assets/000/099/854/medium640/3d_printing_parts.jpg?1614606289)

### Raspberry Pi Pico RP2040

[Raspberry Pi Pico RP2040](https://www.adafruit.com/product/4864)
The Raspberry Pi foundation changed single-board computing [when they released the Raspberry Pi computer](https://www.raspberrypi.org/archives/723), now they're ready to do the same for microcontrollers with the release of the brand new **Raspberry Pi Pico**. This...

In Stock
[Buy Now](https://www.adafruit.com/product/4864)
[Related Guides to the Product](https://learn.adafruit.com/products/4864/guides)
![Angle shot of Raspberry Pi Pico RP2040](https://cdn-shop.adafruit.com/640x480/4864-00.jpg)

### Adafruit AW9523 GPIO Expander and LED Driver Breakout

[Adafruit AW9523 GPIO Expander and LED Driver Breakout](https://www.adafruit.com/product/4886)
Expand your project possibilities, with the **Adafruit AW9523 GPIO Expander and LED Driver Breakout** - a cute and powerful I2C expander with a lot of tricks up its sleeve.

GPIO expanders work like this: you have a board with some number of GPIO but not enough for your...

In Stock
[Buy Now](https://www.adafruit.com/product/4886)
[Related Guides to the Product](https://learn.adafruit.com/products/4886/guides)
![Video of a Adafruit AW9523 GPIO Expander and LED Driver Breakout connected to a LED changing colors. ](https://cdn-shop.adafruit.com/product-videos/640x480/4886-05.jpg)

### Adafruit Grayscale 1.5" 128x128 OLED Graphic Display

[Adafruit Grayscale 1.5" 128x128 OLED Graphic Display](https://www.adafruit.com/product/4741)
This OLED goes out to all the fans who want _more pixels_! Normally our 128x64 OLEDs are the biggest ones we've stocked that can use I2C. This one is a whopping 128x128 pixels and it even has an extra bonus - it can do grayscale pixels! Yep, you get the same crispness of a...

In Stock
[Buy Now](https://www.adafruit.com/product/4741)
[Related Guides to the Product](https://learn.adafruit.com/products/4741/guides)
![Monochrome OLED module wired to QT Py showing falling Adafruit logos](https://cdn-shop.adafruit.com/product-videos/640x480/4741-00.jpg)

### Arcade Button with LED - 30mm Translucent Clear

[Arcade Button with LED - 30mm Translucent Clear](https://www.adafruit.com/product/3491)
A button is a button, and a switch is a switch, but these translucent arcade buttons are in a class of their own. Particularly because they have  **LEDs built right in!**  That's right, you'll be button-mashing amidst a wash of beautiful light with these lil'...

In Stock
[Buy Now](https://www.adafruit.com/product/3491)
[Related Guides to the Product](https://learn.adafruit.com/products/3491/guides)
![Video of 30mm translucent clear LED arcade button flashing on and off.](https://cdn-shop.adafruit.com/product-videos/640x480/3491-03.jpg)

### Part: STEMMA QT / Qwiic JST SH 4-pin Cable - 100mm Long
quantity: 2
STEMMA QT / Qwiic JST SH 4-pin Cable - 100mm Long
[STEMMA QT / Qwiic JST SH 4-pin Cable - 100mm Long](https://www.adafruit.com/product/4210)

### Part: Thru-hole 5-way Navigation switch
quantity: 1
Thru-hole 5-way Navigation switch
[Thru-hole 5-way Navigation switch](https://www.adafruit.com/product/504)

### Part: Rubber Joystick Nubbin Cap
quantity: 1
For Navigation Joystick
[Rubber Joystick Nubbin Cap](https://www.adafruit.com/product/4697)

### Part: Panel Mount Extension USB Cable - Micro B Male to Micro B Female
quantity: 1
Panel Mount Extension USB Cable - Micro B Male to Micro B Female
[Panel Mount Extension USB Cable - Micro B Male to Micro B Female](https://www.adafruit.com/product/3258)

### Part: Black Nylon Screw and Stand-off Set – M2.5 Thread
quantity: 1
Black Nylon Screw and Stand-off Set – M2.5 Thread
[Black Nylon Screw and Stand-off Set – M2.5 Thread](https://www.adafruit.com/product/3299)

### Part: Silicone Cover Stranded-Core Ribbon Cable - 10 Wire 1 Meter Long - 28AWG Black
quantity: 1
Silicone Cover Stranded-Core Ribbon Cable - 10 Wire 1 Meter Long - 28AWG Black
[Silicone Cover Stranded-Core Ribbon Cable - 10 Wire 1 Meter Long - 28AWG Black](https://www.adafruit.com/product/3890)

### Part: M2 Hardware Kit
quantity: 1
Black Nylon M2 Hardware
[M2 Hardware Kit](https://www.amazon.com/gp/product/B07D78PFQL/)

## Hardware List

Screws, nuts and standoffs used in this build.

**Handle**

- 4x M3 x 10mm long screws

**USB Extension Cable**

- 2x M3 x 10mm long screws
- 2x M3 locknuts

**OLED**

- 4x M2.5 x 12mm long screws
- 4x M2.5 nuts

**5-way navigation PCB**

- 2x M3 x 4mm long screws

**PCB Mount**

- 4x M3 x 12mm long FF standoffs
- 4x M2.5 x 8mm long FF standoffs
- 4x M2 x 6mm long FF standoffs
- 8x M3 x 6mm long screws
- 8x M2.5 x 4mm long screws
- 8x M2 x 4mm long screws

## Author Credits

CAD by [Noe Ruiz](https://www.twitter.com/ecken) and Code by [Liz Clark](https://www.twitter.com/blitzcitydiy).

Inspired by MIDI Fighter by [DJTechTools](https://www.djtechtools.com)

https://www.youtube.com/watch?v=7P3A9_wPk_I

https://youtu.be/bhS6FO-59jY

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Installing CircuitPython

[CircuitPython](https://github.com/adafruit/circuitpython) is a derivative of [MicroPython](https://micropython.org) designed to simplify experimentation and education on low-cost microcontrollers. It makes it easier than ever to get prototyping by requiring no upfront desktop software downloads. Simply copy and edit files on the **CIRCUITPY** drive to iterate.

## CircuitPython Quickstart

Follow this step-by-step to quickly get CircuitPython working on your board.

[Download the latest version of CircuitPython for the Raspberry Pi Pico from circuitpython.org](https://circuitpython.org/board/raspberry_pi_pico/)
 **Click the link above and download the latest UF2 file.**

Download and save it to your desktop (or wherever is handy).

![circuitpython_Cat_UF2_download.png](https://cdn-learn.adafruit.com/assets/assets/000/098/753/medium640/circuitpython_Cat_UF2_download.png?1611157944)

Start with your Pico unplugged from USB. Hold down the **BOOTSEL** button, and while continuing to hold it (don't let go!), plug the Pico into USB. **Continue to hold the BOOTSEL button until the RPI-RP2 drive appears!**

If the drive does not appear, unplug your Pico and go through the above process again.

A lot of people end up using charge-only USB cables and it is very frustrating! **So make sure you have a USB cable you know is good for data sync.**

![raspberry_pi_one_one_two.png](https://cdn-learn.adafruit.com/assets/assets/000/125/993/medium640/raspberry_pi_one_one_two.png?1699493528)

You will see a new disk drive appear called **RPI-RP2**.

 

Drag the **adafruit\_circuitpython\_etc.uf2** file to **RPI-RP2.**

![circuitpython_Cat_RPI-RP2_drive.png](https://cdn-learn.adafruit.com/assets/assets/000/098/756/medium640/circuitpython_Cat_RPI-RP2_drive.png?1611158210)

![circuitpython_Cat_drag_UF2.png](https://cdn-learn.adafruit.com/assets/assets/000/098/758/medium640/circuitpython_Cat_drag_UF2.png?1611158274)

The **RPI-RP2** drive will disappear and a new disk drive called **CIRCUITPY** will appear.

That's it, you're done! :)

![circuitpython_Cat_CIRCUITPY.png](https://cdn-learn.adafruit.com/assets/assets/000/098/759/medium640/circuitpython_Cat_CIRCUITPY.png?1611158312)

## Flash Resetting UF2

If your Pico ever gets into a really _weird_ state and doesn't even show up as a disk drive when installing CircuitPython, try installing this 'nuke' UF2 which will do a 'deep clean' on your Flash Memory. You will lose all the files on the board, but at least you'll be able to revive it! After nuking, re-install CircuitPython

[flash_nuke.uf2](https://datasheets.raspberrypi.com/soft/flash_nuke.uf2)
# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Coding the Raspberry Pi Pico MIDI Controller

## Installing the CircuitPython Library Bundle
We're constantly updating and improving our libraries, so we don't (at this time) ship our CircuitPython boards with the full library bundle. Instead, you can find example code in the guides for your board that depends on external libraries. Some of these libraries may be available from us at Adafruit, some may be written by community members!

Either way, as you start to explore CircuitPython, you'll want to know how to get libraries on board.

You can grab the latest Adafruit CircuitPython Bundle release by clicking the button below.

[Click for the Latest Adafruit CircuitPython Library Bundle Release](https://circuitpython.org/libraries)
Once you've finished setting up your Raspberry Pi Pico with CircuitPython, you can add the libraries to the  **lib**  folder of the Pico's  **CIRCUITPY**  drive which should appear when the board is plugged into your computer via USB. Copy these folders:

- **adafruit\_bus\_device**
- **adafruit\_display\_shapes**
- **adafruit\_display\_text**
- **adafruit\_midi**
- **adafruit\_register**

And these files:

- **adafruit\_aw9523.mpy**
- **adafruit\_ssd1327.mpy**
- **simpleio.mpy**

To the  **CIRCUITPY**  flash drive  **/lib**  directory (create the directory if it doesn't exist).

Then, you can click on the Download: Project Zip link in the window below to download the code file.

https://github.com/adafruit/Adafruit_Learning_System_Guides/blob/main/Pico_MIDI_Fighter/code.py

## Review

Make sure you've followed these steps:

- Loaded all the required library files and directories into the  **CIRCUITPY /lib**  directory
- Copied  **code.py**  to the main (root) directory of the  **CIRCUITPY**  drive

Your Raspberry Pi Pico  **CIRCUITPY ** drive should look like this after you load the libraries and  **code.py**  file:

![](https://cdn-learn.adafruit.com/assets/assets/000/100/320/medium800/3d_printing_picoCpFiles.png?1614785092)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## CircuitPython Code Walkthrough

### Import the Libraries
First, the CircuitPython libraries are imported.

```python
import time
import board
import displayio
import i2cdisplaybus
import terminalio
import adafruit_aw9523
import busio
import adafruit_ssd1327
import digitalio
from adafruit_display_text import label
from adafruit_display_shapes.circle import Circle
from adafruit_display_shapes.rect import Rect
import usb_midi
import adafruit_midi
from adafruit_midi.note_on          import NoteOn
from adafruit_midi.note_off         import NoteOff
```

### I2C and MIDI Setup
I2C is setup to use the Pico's `GP0` and `GP1` pins. You have two I2C devices in this project: the Grayscale 1.5" 128x128 OLED Display and the AW9523 GPIO Expander and LED Driver. 

`midi` is also setup to act as a USB MIDI output device. `midi_out` sends notes out from the device.

```python
# i2c setup, higher frequency for display refresh
i2c = busio.I2C(board.GP1, board.GP0, frequency=1000000)
#  i2c display setup
display_bus = i2cdisplaybus.I2CDisplayBus(i2c, device_address=0x3D)
#  i2c AW9523 GPIO expander setup
aw = adafruit_aw9523.AW9523(i2c)
#  MIDI setup as MIDI out device
midi = adafruit_midi.MIDI(midi_out=usb_midi.ports[1], out_channel=0)
```

### Display Setup
This project utilizes a graphical user interface (GUI) to let you change the MIDI note numbers assigned to each of the arcade buttons. Each button is represented on the display as a circle. The code uses the `Circle` object from the `adafruit_display_shapes` library to easily draw circles on the display without having to import a bitmap.

`spots` holds the list of coordinates for each of the circles and the `for` statement creates each circle and assigns them to the correct coordinate.

A rectangle is also created using the `Rect` object from the `adafruit_display_shapes` library. This rectangle is used to highlight the currently selected circle on the display.

```python
# display dimensions
WIDTH = 128
HEIGHT = 128
#  display setup
display = adafruit_ssd1327.SSD1327(display_bus, width=WIDTH, height=HEIGHT, brightness = 0.01)

#  main display group, shows default GUI menu
splash = displayio.Group()
#  group for circle icons
circle_group = displayio.Group()
#  group for text labels on circles
text_group = displayio.Group()

#  list of circle positions
spots = (
    (16, 16),
    (48, 16),
    (80, 16),
    (112, 16),
    (16, 48),
    (48, 48),
    (80, 48),
    (112, 48),
    (16, 80),
    (48, 80),
    (80, 80),
    (112, 80),
    (16, 112),
    (48, 112),
    (80, 112),
    (112, 112),
    )

#  creating the circles & pulling in positions from spots
for spot in spots:
    circle = Circle(x0=spot[0], y0=spot[1], r=14, fill=0x888888)
	#  adding circles to their display group
    circle_group.append(circle)
#  square to show position on menu
rect = Rect(0, 0, 33, 33, fill=None, outline=0x00FF00, stroke = 3)

splash.append(circle_group)
splash.append(rect)
```

### MIDI Note Labels
Each circle has text that shows the currently assigned MIDI note number for each arcade button. This information is stored in `texts` along with the coordinates for each string's location. The `for` statement creates each text object, pulling this information from `texts`, and stores them in the `text_labels` array.

```python
#  strings and positions for the MIDI note text labels
texts = [
    {'num': "60", 'pos': (12, 16)},
    {'num': "61", 'pos': (44, 16)},
    {'num': "62", 'pos': (76, 16)},
    {'num': "63", 'pos': (108, 16)},
    {'num': "64", 'pos': (12, 48)},
    {'num': "65", 'pos': (44, 48)},
    {'num': "66", 'pos': (76, 48)},
    {'num': "67", 'pos': (108, 48)},
    {'num': "68", 'pos': (12, 80)},
    {'num': "69", 'pos': (44, 80)},
    {'num': "70", 'pos': (76, 80)},
    {'num': "71", 'pos': (108, 80)},
    {'num': "72", 'pos': (12, 112)},
    {'num': "73", 'pos': (44, 112)},
    {'num': "74", 'pos': (76, 112)},
    {'num': "75", 'pos': (108, 112)},
    ]
text_labels = []

for text in texts:
    text_area = label.Label(terminalio.FONT, text=text['num'], color=0xFFFFFF)
    text_area.x = text['pos'][0]
    text_area.y = text['pos'][1]
    text_labels.append(text_area)
    text_group.append(text_area)
splash.append(text_group)
```

### Secondary GUI Menu
In addition to the main GUI, there is a secondary GUI. When you select an arcade button's MIDI note to edit, the display shows a large circle with large text showing the MIDI note number that you're editing. This secondary GUI is stored in `big_splash`.

```python
#  secondary display group, shows large circle when button is selected
big_splash = displayio.Group()
#  large circle to fill display
big_circle = Circle(x0=64, y0=64, r=62, fill=0x888888)
big_splash.append(big_circle)
#  large text to fill circle
big_text = label.Label(terminalio.FONT, text='   ', color=0xFFFFFF)
big_text.x = 43
big_text.y = 62
big_text.scale = 4
big_splash.append(big_text)
```

LEDs with the AW9523

The arcade button's LEDs are controlled with the AW9523 GPIO expander. The I/O of the AW9523 is accessed with `aw.get_pin(pin_number)`. The pin numbers are stored in the `led_pins` array and the `for` statement sets up the pins to be outputs.

```python
#  array for LEDs on AW9523
leds = []
led_pins = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
#  setup to create the AW9523 outputs for LEDs
for led in led_pins:
    led_pin = aw.get_pin(led)
    led_pin.direction = digitalio.Direction.OUTPUT
    leds.append(led_pin)
```

Arcade Button Pins

The pins used for the arcade buttons are stored in the `note_pins` array. They are setup to be digital inputs in the `for` statement and are then stored in the `note_buttons` array. 

Each arcade button has a state setup for debouncing. These states are stored in the `note_states` array.

```python
#  button pins, all pins in order skipping GP15
note_pins = [board.GP7, board.GP8, board.GP9, board.GP10, board.GP11,
             board.GP12, board.GP13, board.GP14, board.GP16, board.GP17,
             board.GP18, board.GP19, board.GP20, board.GP21, board.GP22, board.GP26]

note_buttons = []

for pin in note_pins:
    note_pin = digitalio.DigitalInOut(pin)
    note_pin.direction = digitalio.Direction.INPUT
    note_pin.pull = digitalio.Pull.UP
    note_buttons.append(note_pin)

#  note states
note0_pressed = False
note1_pressed = False
note2_pressed = False
note3_pressed = False
note4_pressed = False
note5_pressed = False
note6_pressed = False
note7_pressed = False
note8_pressed = False
note9_pressed = False
note10_pressed = False
note11_pressed = False
note12_pressed = False
note13_pressed = False
note14_pressed = False
note15_pressed = False
#  array of note states
note_states = [note0_pressed, note1_pressed, note2_pressed, note3_pressed,
               note4_pressed, note5_pressed, note6_pressed, note7_pressed,
               note8_pressed, note9_pressed, note10_pressed, note11_pressed,
               note12_pressed, note13_pressed, note14_pressed, note15_pressed]
```

### 5-Way Navigation Switch
The GUI is navigated with a 5-way switch. This allows you to move in all directions around the screen and select the arcade button that you want to edit. The digital pins for the 5-way switch are stored in the `joystick` array and are setup as inputs in the `for` statement.

```python
#  pins for 5-way switch
select = digitalio.DigitalInOut(board.GP6)
up = digitalio.DigitalInOut(board.GP5)
down = digitalio.DigitalInOut(board.GP4)
left = digitalio.DigitalInOut(board.GP3)
right = digitalio.DigitalInOut(board.GP2)
#  array for 5-way switch
joystick = [select, up, down, left, right]

for joy in joystick:
    joy.direction = digitalio.Direction.INPUT
    joy.pull = digitalio.Pull.UP
```

### State Machines
There are a few state machines used in the code. Each pin for the 5-way switch has a state for debouncing. The other states' functionality is commented below.

```python
#  states for 5-way switch
select_state = None
up_state = None
down_state = None
left_state = None
right_state = None
midi_state = None

#  coordinates for navigating main GUI
select_x = [0, 32, 64, 96]
select_y = [0, 32, 64, 96]

#  y coordinate for 5-way switch navigation
y_pos = 0
#  x coordinate for 5-way switch navigation
x_pos = 0
sub_state = False
#  default midi number
midi_num = 60
#  default MIDI button
button_num = 0
#  default MIDI button position
button_pos = 0
#  check for blinking LED
led_check = None
#  time.monotonic() device
clock = time.monotonic()
```

### GUI Navigation Setup
The navigation for the GUI works by counting the number of times each directional input from the 5-way switch is pressed. The combinations of these counts are stored in the `switch_coordinates` array to act as x and y coordinates on the GUI. It's helpful to think of the arcade buttons as a 4x4 grid.

```python
#  coordinates for tracking location of 5-way switch
up_scroll = 0
down_scroll = 0
left_scroll = 0
right_scroll = 0
switch_coordinates = [(0, 0), (1, 0), (2, 0), (3, 0), (0, 1), (1, 1), (2, 1), (3, 1), (0, 2),
            (1, 2), (2, 2), (3, 2), (0, 3), (1, 3), (2, 3), (3, 3)]
```

### MIDI Note Array
The `midi_notes` array holds the default MIDI notes that are assigned to the arcade buttons. If you want to change the MIDI notes that are loaded after powering the MIDI Fighter, you'll want to edit this array.

```python
#  array of default MIDI notes
midi_notes = [60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75]
```

## The Loop
### Switch Debouncing
The loop begins by debouncing the five inputs of the 5-way switch.

```python
while True:

    #  debouncing for 5-way switch positions
    if up.value and up_state == "pressed":
        print("Button pressed.")
        up_state = None
    if down.value and down_state == "pressed":
        print("Button pressed.")
        down_state = None
    if left.value and left_state == "pressed":
        print("Button pressed.")
        left_state = None
    if right.value and right_state == "pressed":
        print("Button pressed.")
        right_state = None
    if select.value and select_state == "pressed":
        print("Button pressed.")
        select_state = None
```

### MIDI Input
The arcade buttons send their assigned MIDI note number out with a MIDI `NoteOn` message when they are pressed. Additionally, when you press an arcade button, its LED lights up with the AW9523. When the arcade button is released, a `NoteOff` message is sent and the LED is turned off.

```python
#  MIDI input
    for i in range(16):
        buttons = note_buttons[i]
        #  if button is pressed...
        if not buttons.value and note_states[i] is False:
            #  send the MIDI note and light up the LED
            midi.send(NoteOn(midi_notes[i], 120))
            note_states[i] = True
            leds[i].value = True
        #  if the button is released...
        if buttons.value and note_states[i] is True:
            #  stop sending the MIDI note and turn off the LED
            midi.send(NoteOff(midi_notes[i], 120))
            note_states[i] = False
            leds[i].value = False
```

### Main GUI Navigation
The main GUI is navigated using the 5-way switch. Every time you press up, down, left or right, the values of `up_scroll`, `down_scroll`, `left_scroll` or `right_scroll` are updated with a count between `0` and `3`. These values are used as coordinates to track where you are on the GUI. 

`y_pos` and `x_pos` also hold these values and are used as array indexes to update the highlighting square's position on the GUI.

```python
#  if we're on the main GUI page
    if not sub_state:
        #  if you press up on the 5-way switch...
        if not up.value and up_state is None:
            up_state = "pressed"
            #  track the switch's position
            up_scroll -= 1
            if up_scroll < 0:
                up_scroll = 3
            y_pos = up_scroll
            down_scroll = up_scroll
        #  if you press down on the 5-way switch...
        if not down.value and down_state is None:
            down_state = "pressed"
            #  track the switch's position
            down_scroll += 1
            if down_scroll > 3:
                down_scroll = 0
            y_pos = down_scroll
            up_scroll = down_scroll
        #  if you press left on the 5-way switch...
        if not left.value and left_state is None:
            # print("scroll", down_scroll)
            left_state = "pressed"
            #  track the switch's position
            left_scroll -= 1
            if left_scroll < 0:
                left_scroll = 3
            x_pos = left_scroll
            right_scroll = left_scroll
        #  if you press right on the 5-way switch...
        if not right.value and right_state is None:
            # print("scroll", down_scroll)
            right_state = "pressed"
            #  track the switch's position
            right_scroll += 1
            if right_scroll > 3:
                right_scroll = 0
            x_pos = right_scroll
            left_scroll = right_scroll

        #  update square's position on the GUI
        rect.y = select_y[y_pos]
        rect.x = select_x[x_pos]
```

### Track the Button
In order to keep track of which button on the GUI is highlighted, the `x_pos` and `y_pos` values are compared to the `switch_coordinates` array to track which button is highlighted on the screen. This is how that button's value can then be affected in the secondary GUI.

`button_num` is used to track the MIDI note number for the currently selected button.

```python
#  update the currently highlighted button on the GUI
        for coords in switch_coordinates:
            if x_pos == coords[0] and y_pos == coords[1]:
                button_pos = switch_coordinates.index(coords)
                #  print(button_pos)
        button_num = text_labels[button_pos].text
```

### Selecting a Button to Edit
When you have navigated to your chosen arcade button's position, you can press select on the 5-way switch to enter the editing mode for that button. `midi_num` grabs the highlighted button's MIDI note number so that you'll be able to edit and update that number.

```python
#  if you press select on the 5-way switch...
        if not select.value and select_state is None:
            select_state = "pressed"
            #  grab the selected button's MIDI note
            midi_num = int(button_num)
            #  change into the secondary GUI menu
            sub_state = True
```

### Secondary GUI: Edit the Arcade Button's MIDI Note Number
When you enter the editing mode, the secondary GUI is displayed. Your selected button's LED will also blink on and off until you exit this mode. The blinking is done using `time.monotonic()` so that it doesn't interrupt anything else happening in the loop.

```python
#  if an arcade button is selected to change the MIDI note...
    if sub_state:
        #  display the secondary GUI menu
        display.root_group = big_splash
        #  display the selected button's MIDI note
        big_text.text = midi_num

        #  blink the selected button's LED without pausing the loop
        if (time.monotonic() > (clock + 1)) and led_check is None:
            leds[button_pos].value = True
            led_check = True
            clock = time.monotonic()
        if (time.monotonic() > (clock + 1)) and led_check is True:
            leds[button_pos].value = False
            led_check = None
            clock = time.monotonic()
```

### MIDI Note Number Range
A MIDI note range is setup so that you don't go below 0 or above 128.

```python
#  blocks the MIDI number from being set above 128
        if midi_num >= 128:
            midi_num = 128
        #  blocks the MIDI number from being set below 0
        if midi_num <= 0:
            midi_num = 0
```

### Adjusting the MIDI Note
The MIDI note number can be increased by pressing up or right with the 5-way switch and decreased by pressing down or left with the 5-way switch. The value of `midi_num` is either increased or decreased by `1` depending on the input.

```python
#  if you press right on the 5-way switch...
        if not right.value and right_state is None:
            #  increase the MIDI number
            midi_num += 1
            right_state = "pressed"
        #  if you press up on the 5-way switch...
        if not up.value and up_state is None:
            #  increase the MIDI number
            midi_num += 1
            up_state = "pressed"
        #  if you press left on the 5-way switch...
        if not left.value and left_state is None:
            #  decrease the MIDI number
            midi_num -= 1
            left_state = "pressed"
        #  if you press down on the 5-way switch...
        if not down.value and down_state is None:
            #  decrease the MIDI number
            midi_num -= 1
            down_state = "pressed"
```

### Update the MIDI Note
The value of the selected arcade button's MIDI note is adjusted in real time. This allows you to play the note while you're adjusting to make sure it's the correct note.

```python
#  update arcade button's MIDI note
        #  allows you to check note while you're adjusting it
        midi_notes[button_pos] = midi_num
```

### Save the New MIDI Note
After deciding on your MIDI note, you can press select again on the 5-way switch to save your choice. This updates the text label on the main GUI, stops the LED from blinking and brings you back to the main GUI on the display.

```python
#  if you press select on the 5-way switch...
        if not select.value and select_state is None:
            select_state = "pressed"
            #  change back to main menu mode
            sub_state = False
            #  update new MIDI number text label
            text_labels[button_pos].text = midi_num
            #  show main GUI display
            display.root_group = splash
            #  turn off blinking LED
            leds[button_pos].value = False
```

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Circuit Diagram

![](https://cdn-learn.adafruit.com/assets/assets/000/100/527/medium800/3d_printing_circuit-diagram.jpg?1615309735)

The diagram below provides a visual reference for wiring of the components. This diagram was created using the software package [Fritzing](http://fritzing.org/download/).

## Adafruit Library for Fritzing

Use Adafruit's Fritzing parts library to create circuit diagrams for your projects. Download the library or just grab individual parts. Get the library and parts from [GitHub - Adafruit Fritzing Parts](https://github.com/adafruit/Fritzing-Library/tree/master/parts).

 **STEMMA QT Connections**

The following components are connected via STEMMA QT cables.

- Raspberry Pi Pico – 1.5" OLED
- 1.5" OLED – AW9523 LED Driver

 **5-way navigation switch**

The 5-way navigation switch is connected to the following pins on the Raspberry Pi Pico.

- Ground – Ground
- Select – GP6
- Up – GP2
- Down – GP3
- Left – GP4
- Right – GP5

 **Button Switches**

The switches from the buttons are connected to the following pins on the Raspberry Pi Pico.

- Button 1 – GP7
- Button 2 – GP8
- Button 3 – GP9
- Button 4 – GP10
- Button 5 – GP11
- Button 6 – GP12
- Button 7 – GP13
- Button 8 – GP14
- Button 9 – GP16
- Button 10 – GP17
- Button 11 – GP18
- Button 12 – GP19
- Button 13 – GP20
- Button 14 – GP21
- Button 15 – GP22
- Button 16 – GP26

 **Button LEDs**

The LEDs from the buttons are connected to the following pins on the AW9523 LED Driver.

- Button 1 – Pin 0
- Button 2 – Pin 1
- Button 3 – Pin 2
- Button 4 – Pin 3
- Button 5 – Pin 4
- Button 6 – Pin 5
- Button 7 – Pin 6
- Button 8 – Pin 7
- Button 9 – Pin 8
- Button 10 – Pin 9
- Button 11 – Pin 10
- Button 12 – Pin 11
- Button 13 – Pin 12
- Button 14 – Pin 13
- Button 15 – Pin 14
- Button 16 – Pin 15

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## 3D Printing

## CAD Files

STL files for 3D printing are oriented to print "as-is" on FDM style machines. Parts are designed to 3D print without any support material. Original design source may be downloaded using the links below.

![3d_printing_3d-parts.jpg](https://cdn-learn.adafruit.com/assets/assets/000/099/775/medium640/3d_printing_3d-parts.jpg?1614354079)

## CAD Parts List

List of the 3D printed parts.

- case-top.stl
- case-frame.stl
- case-bottom.stl
- case-handle.stl
- PCB-mount.stl
- 5way-switch-pcb.stl
- window-print-blank.stl
- window-printed-midi-logo.stl
- case-bottom-window.stl

Opens in the web browser to preview 3D models. More download options available in the preview page.

[Fusion 360 Share Link](https://a360.co/47l69zn)
Includes a STEP and Fusion 360 Archive.

[Download CAD Source](https://cdn-learn.adafruit.com/assets/assets/000/100/540/original/Pico_MIDI_Fighter_CAD_files.zip?1615314258)
Grab just the STL files for 3D printing.

[Download STL Files](https://cdn-learn.adafruit.com/assets/assets/000/100/541/original/STLs.zip?1615314277)
## Window Options

The top cover is designed to have a window. This allows you to peek through and see the Raspberry Pi Pico. The window can be 3D printed using transparent filament.

Have fun with this! Add your own text, logo or stickers / vinyl decals. Personalize it, make it yours.

Optionally, the window can be made from acrylic using a laser cutter or CNC mill.

![3d_printing_top-window-options.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/537/medium640/3d_printing_top-window-options.jpg?1615313129)

## Install Window

The window features a lip to prevent it from being pressed all the way through the cut out in the top cover.

The window is installed through the bottom side of the top cover. It should have a tight fit.

Optionally glue in place to permanently secure to the top cover.

![3d_printing_top-window-printed-install.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/538/medium640/3d_printing_top-window-printed-install.jpg?1615313277)

![3d_printing_top-window-installing.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/539/medium640/3d_printing_top-window-installing.jpg?1615313392)

## Install Handle to Frame

Use the following hardware to secure the handle to the frame.

- 4x M3 x 10mm screws
- 4x M3 locknuts

![3d_printing_handle-screws.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/514/medium640/3d_printing_handle-screws.jpg?1615235372)

## Handle Kickstand

The handle features an angled surface for propping up the case. Reference the image for the correct placement of the handle. Use the USB opening on the side of the frame as an indicator for the correct orientation.

![3d_printing_handle-frame-angle.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/516/medium640/3d_printing_handle-frame-angle.jpg?1615235372)

## Secure Handle to Frame

Insert the M3 screws through the mounting holes in the hinges. Then, insert the screws through the holes on the side of the frame. Install and fasten the locknuts onto the screws. Use pliers to tightly secure the screw and nuts.

![3d_printing_handle-frame-install.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/519/medium640/3d_printing_handle-frame-install.jpg?1615247896)

## Install Bottom Cover to Frame

The bottom cover snap fits onto the frame. The bottom cover features snap fit clips that are designed to lock onto the edges inside the frame.

Reference the image for the correct orientation.

![3d_printing_frame-bottom.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/517/medium640/3d_printing_frame-bottom.jpg?1615235384)

![3d_printing_frame-bottom-installed.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/518/medium640/3d_printing_frame-bottom-installed.jpg?1615236819)

https://youtu.be/MjNaRfypjwE

 **Fusion 360 CAD Tutorial**

Taking a look at designing a hinged handle that can be 3d printed in place with no supports. The design features a handle that can rotate 180 degrees. This handle is apart of the enclosure for a MIDI controller. Driven with user parameters, the handle can be customized to fit any project.

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## PCB Mount Assembly

## Hardware for PCB Mount

Use the following hardware for assembling the PCB mount.

- 4x M3 x 12mm long FF standoffs
- 4 x M2.5mm x 8mm long FF standoffs
- 4x M2 x 6mm long FF standoffs
- 8x M3 x 6mm screws
- 8x M2 x 4mm screws
- 8x M2.5 x 4mm screws

![3d_printing_pcb-mount-hardware.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/468/medium640/3d_printing_pcb-mount-hardware.jpg?1615233881)

## Install M3 hardware

Insert M3 screws through the mounting holes on the outer perimeter of the PCB mount. Fasten the M3 standoffs onto the thread of the screw. 

![3d_printing_pcb-mount-install-M3.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/469/medium640/3d_printing_pcb-mount-install-M3.jpg?1615233898)

## Install M2 Hardware

Insert M2 screws through the mounting holes that are near the M3 standoffs. Fasten the M2 standoffs onto the threads of the screws. 

![3d_printing_pcb-mount-install-M2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/470/medium640/3d_printing_pcb-mount-install-M2.jpg?1615233919)

## Install M2.5 Hardware

Flip the PCB over and insert the M2.5 screws through the remaining mounting holes. Fasten the M2.5 standoffs onto the threads of the screws. The M2.5 standoffs should be facing the opposite side. Reference the image for correct placement.

![3d_printing_pcb-mount-install-M2-5.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/471/medium640/3d_printing_pcb-mount-install-M2-5.jpg?1615233965)

## Assembled PCB Mount

Double check the standoffs are tightly fastened and installed in the correct mounting holes. Reference the images, click the thumbnail to enlarge.

![3d_printing_pcb-mount-done-1.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/472/medium640/3d_printing_pcb-mount-done-1.jpg?1615233983)

![3d_printing_pcb-mount-done-2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/473/medium640/3d_printing_pcb-mount-done-2.jpg?1615233997)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Wiring the 5-Way Navigation Switch

## Wires for 5-Way Nav Switch

Choose the method to switch you'd like to wire the 5-way navigation switch. Provided is an STL to 3D print the PCB or you can optionally send the PCB to a fab service.

Use a 6-wire ribbon cable, 114mm long.

![3d_printing_5way-pcbs-wire.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/444/medium640/3d_printing_5way-pcbs-wire.jpg?1615232755)

[Download 5-Way Navigation Switch PCB files](https://cdn-learn.adafruit.com/assets/assets/000/100/525/original/5way-switch-PCB.zip?1615307390)
## Install 5-Way Switch to PCB

Line up the pins of the switch with the holes in the PCB. Fit the 5-way navigation switch onto the PCB.

![3d_printing_5way-pcb.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/445/medium640/3d_printing_5way-pcb.jpg?1615232796)

![3d_printing_5way-printed.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/446/medium640/3d_printing_5way-printed.jpg?1615232845)

## 5-Way Navigation Switch Schematic

Reference the schematic to get the correct connections for the pins. 

The common ground and center pins are good indicators for wiring. Up, down, left and right are subject to change depending on the switches orientation.

The full data sheet is available and a PDF can be [downloaded from here](https://cdn-shop.adafruit.com/datasheets/SKQUCAA010-ALPS.pdf).

![raspberry_pi_5way-schematic.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/675/medium640/raspberry_pi_5way-schematic.jpg?1615384697)

## Solder Wires to 5-Way Nav Switch PCB

If you're using the PCB, solder the pins of the switch to the PCB. Then, solder the 6-wires from the ribbon cable to the breakout pins on the PCB.

If you're using the 3D printed PCB, solder the wires to the exposed pins from the bottom. Be careful not to melt the plastic.

![3d_printing_5way-pcb-wire-solder.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/447/medium640/3d_printing_5way-pcb-wire-solder.jpg?1615232872)

## Soldering 5-Way Switch to Pico

Get ready to solder the 6-wires from the navigation switch to the Raspberry Pi Pico.

![3d_printing_5way-pico-presolder.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/448/medium640/3d_printing_5way-pico-presolder.jpg?1615232934)

Danger: 

## Solder Wires to 5-Way Switch

Solder the 6-wires from the navigation switch to the bottom of the Raspberry Pi Pico PCB. Reference the pins below.

- Ground – Ground
- Select – GP6
- Up – GP5
- Down – GP4
- Left – GP3
- Right – GP2

![3d_printing_5way-pico-soldering.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/449/medium640/3d_printing_5way-pico-soldering.jpg?1615232966)

## Soldered 5-Way Switch

Double check all of the wires have been properly soldered.

![3d_printing_5way-pico-soldered.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/450/medium640/3d_printing_5way-pico-soldered.jpg?1615233008)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Wiring STEMMA for Pico

## STEMMA Wire

Use the STEMMA QT JST SH-4 cable for the Raspberry Pi Pico. This will plug into the OLED display.

Remove the male header pins by cutting them off leaving the cable about 150mm in length.

Use wire strippers to remove a bit of insulation from the tips of each wire. Tin the exposed strands of wire by adding a bit of solder.

![3d_printing_pico-stemma-wire.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/451/medium640/3d_printing_pico-stemma-wire.jpg?1615233105)

## Solder STEMMA to Raspberry Pi Pico

Attach the four wires from the STEMMA cable to the bottom of the Raspberry Pi Pico.

- Blue wire – GP0
- Yellow Wire – GP1
- Red Wire – 3V3
- Black Wire – GND

![3d_printing_pico-stemma-soldering.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/452/medium640/3d_printing_pico-stemma-soldering.jpg?1615233150)

## Soldered Pico STEMMA cable

Double check the four wires have been properly soldered to the pins on the Raspberry Pi Pico.

![3d_printing_pico-stemma-soldered.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/453/medium640/3d_printing_pico-stemma-soldered.jpg?1615233206)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Install Buttons

## Installing Buttons

Get the 16 buttons ready to panel mount to the top cover. Remove the hex nuts by unscrewing them from the body of each button.

![raspberry_pi_3d_printing_top-buttons.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/737/medium640/raspberry_pi_3d_printing_top-buttons.jpg?1615916345)

## Panel Mount Buttons

Start by installing one button. Insert the body of the button through the hole. While holding it in place, fasten the hex nut onto the button.

To make the wiring easier, ensure all sixteen buttons are orientated the same. This will help keep the wiring tidy as well.

Tightly fasten the hex nuts to secure the buttons to the top cover.

![3d_printing_button-hexnut-secured.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/476/medium640/3d_printing_button-hexnut-secured.jpg?1615234061)

![raspberry_pi_3d_printing_button-hexnut-install.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/735/medium640/raspberry_pi_3d_printing_button-hexnut-install.jpg?1615916159)

## Numbering Buttons for Wiring

Each button will need to wired to the Raspberry Pi Pico and LED Driver. The numbering of the buttons is important and should be planned before wiring.

Take a moment to review the numbering scheme of the buttons. This will help you ensure the buttons are soldered to the correct pins.

![3d_printing_button-first-installed.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/477/medium640/3d_printing_button-first-installed.jpg?1615234093)

## Installed Buttons

The first button starts from the the top right. The numbering scheme appears reversed because we'll be soldering from the back view of the top cover.

Reference the image for the assigned button numbers.

![3d_printing_buttons-sixteen-installed-numbers.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/520/medium640/3d_printing_buttons-sixteen-installed-numbers.jpg?1615302731)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Wiring Grounds

## Ground Wires

All of the switches and LEDs from the buttons will share common ground. In order to do this, we'll need to create several short wires. 

Use silicone ribbon wire to create 32 short wires that are approximately 70mm(2.76in) in length. 

Use wire strippers to remove a bit of insulation from both ends of each wire. Tin the exposed wire with a bit of solder.

![3d_printing_ground-wires-alt.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/414/medium640/3d_printing_ground-wires-alt.jpg?1615151695)

## Tinning Pins

Apply a bit of solder to all of the pins on each button. This will make attaching the wires to the pins easier.

![3d_printing_butttons-pins-tinned.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/415/medium640/3d_printing_butttons-pins-tinned.jpg?1615151451)

Danger: 

## First Ground Wires

Attach two wires to the ground pin of the first switch. Reference the markings on the buttons (if they have them).

The pins inside the gray box are the pins for the switch. The pins outside the gray box are the pins for the LEDs.

![3d_printing_button-first-grounds.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/416/medium640/3d_printing_button-first-grounds.jpg?1615151467)

## Sharing Ground

Each ground connect will need to jump to the next button in the arrangement. Using tweezers can help hold two wires in place while soldering. 

![3d_printing_button-second-grounds.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/417/medium640/3d_printing_button-second-grounds.jpg?1615151484)

## Wiring Grounds

Starting with the first button from the top right, proceed to wire from right to left to complete the first row of four buttons.

On the four button, jump to the next row with button #8 and proceed to jump from left to right.

On the fifth button, jump to the next row with button #9 and proceed to share ground from right to left.

On the twelfth button, jump to the last row with button #16. Proceed to share ground from left to right. 

![3d_printing_buttons-row-1-4-grounds.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/418/medium640/3d_printing_buttons-row-1-4-grounds.jpg?1615151503)

![3d_printing_buttons-row-5-8-grounds.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/422/medium640/3d_printing_buttons-row-5-8-grounds.jpg?1615151615)

![3d_printing_buttons-row-9-12-grounds.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/423/medium640/3d_printing_buttons-row-9-12-grounds.jpg?1615151643)

![3d_printing_buttons-row-13-16-grounds.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/424/medium640/3d_printing_buttons-row-13-16-grounds.jpg?1615151659)

## Button Switches Shared Ground

Take a moment to double check the wiring and ensure the all of the solder joints are solid. Lightly tug on the wires to check if they're secured.

![3d_printing_button-switches-ground-wired.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/426/medium640/3d_printing_button-switches-ground-wired.jpg?1615151759)

## LED and Switch Shared Ground

On button #13 in last row, connect the second ground wire to the ground pin on the LED. Proceed to share ground to all of the button LEDs.

![3d_printing_button-switch-LED-share-ground.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/425/medium640/3d_printing_button-switch-LED-share-ground.jpg?1615151729)

## Button LED Ground Wiring

Complete the last row, Button #13 to #16 and connect each going right to left.

Proceed to connect Button #16 to Button #12 going from left to right.

Proceed to connect Button #9 to Button #5 going from right to left.

Proceed to connect Button #8 to Button #4 going from left to right.

The last ground wire connects Button #2 to Button #1.

Once complete, take a moment to review all of the wires.

![3d_printing_button-leds-row-13-16-ground.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/427/medium640/3d_printing_button-leds-row-13-16-ground.jpg?1615151894)

![3d_printing_button-leds-row-9-12-ground.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/428/medium640/3d_printing_button-leds-row-9-12-ground.jpg?1615151935)

![3d_printing_button-leds-row-5-8-ground.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/429/medium640/3d_printing_button-leds-row-5-8-ground.jpg?1615151974)

![3d_printing_button-leds-row-1-4-ground.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/430/medium640/3d_printing_button-leds-row-1-4-ground.jpg?1615151994)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Wiring Button Switches

## Wire Planning

Start planning to wire the switches from all sixteen buttons to the Raspberry Pi Pico. The wires will be soldered to the bottom of the PCB.

Place the Raspberry Pi Pico over the opening in the top cover to reference how long the wires will need to be in order to reach the PCB.

![3d_printing_pico-buttons-wire-planning.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/432/medium640/3d_printing_pico-buttons-wire-planning.jpg?1615232085)

## Wires for Switches

Each wire will most likely have a different length of wire. To help keep them organized, use heat shrink tubing, tape or similar to keep sets of wire bundled together.

Here I've created four sets of wires, each set having four wires.

![3d_printing_buttons-wires-1-16.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/434/medium640/3d_printing_buttons-wires-1-16.jpg?1615232163)

## Wiring Buttons 1-4

Solder the wires to buttons 1-4.

![3d_printing_buttons-wired-1-4.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/435/medium640/3d_printing_buttons-wired-1-4.jpg?1615232223)

## Wiring Buttons 5-8

Solder the next set of wires to Buttons 5-8

![3d_printing_buttons-wired-5-8.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/436/medium640/3d_printing_buttons-wired-5-8.jpg?1615232267)

## Wiring Buttons 9-12

Solder the next set of wires to Buttons 9-12.

![3d_printing_buttons-wired-9-12.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/437/medium640/3d_printing_buttons-wired-9-12.jpg?1615232327)

## Wiring Buttons 13-16

Solder the last set of wires to Buttons 13-16.

Once complete, take a moment to review each wire.

![3d_printing_buttons-wired-13-16.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/438/medium640/3d_printing_buttons-wired-13-16.jpg?1615232422)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Wiring Button LEDs

## Wires for LEDs

Time to make wires for connecting the Button LEDs. Create four sets of wire, each set containing four wires. 

![3d_printing_led-wires.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/439/medium640/3d_printing_led-wires.jpg?1615232479)

## Wiring LEDs 1-4

Proceed to wire up the LEDs in the first row.

![3d_printing_led-wired-1-4.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/440/medium640/3d_printing_led-wired-1-4.jpg?1615232502)

## Wiring LEDs 5-8

Proceed to wire up the second row, Buttons 5-8.

![3d_printing_led-wired-5-8.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/441/medium640/3d_printing_led-wired-5-8.jpg?1615232564)

## Wiring LEDs 9-12

Proceed to wire up the third row, buttons 9-12.

![3d_printing_led-wired-9-12.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/442/medium640/3d_printing_led-wired-9-12.jpg?1615232596)

## Wiring LEDs 13-16

Proceed to wire up the last row, buttons 13-16.

Once complete, review.

![3d_printing_led-wired-13-16.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/443/medium640/3d_printing_led-wired-13-16.jpg?1615232657)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Wiring Button Switches to Pico

## Wiring Button LEDs and Switches to Pico

Get ready to solder all of the wires to the bottom of the Raspberry Pi Pico PCB.

![3d_printing_pico-button-led-wires-presolder.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/454/medium640/3d_printing_pico-button-led-wires-presolder.jpg?1615233247)

## Solder Button Switches 1-4

Use a PCB vise or third helping hands to keep the Raspberry Pi Pico PCB secured while soldering.

Solder the switch wires from Button 1-4 to GP7-10.

- Button 1 – GP7
- Button 2 – GP8
- Button 3 – GP9
- Button 4 – GP10

 

![3d_printing_pico-buttons-1-4.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/455/medium640/3d_printing_pico-buttons-1-4.jpg?1615233299)

## Solder Button Switches 5-8

Proceed to wire up the second row of button switches to the Raspberry Pi Pico.

- Button 5 – GP11
- Button 6 – GP12
- Button 7 – GP13
- Button 8 – GP14

![3d_printing_pico-buttons-5-8.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/456/medium640/3d_printing_pico-buttons-5-8.jpg?1615233325)

Danger: 

## Solder Button Switches to 9-12

Proceed to wire up the third row of button switches to the Raspberry Pi Pico.

- Button 9 – GP16
- Button 10 – GP17
- Button 11 – GP18
- Button 12 – GP19

![3d_printing_pico-buttons-9-12.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/457/medium640/3d_printing_pico-buttons-9-12.jpg?1615233378)

## Solder Button Switches 13-16

Proceed to wire up the last row of button switches to the Raspberry Pi Pico.

- Button 13 – GP20
- Button 14 – GP21
- Button 15 – GP22
- Button 16 – GP26

![3d_printing_pico-buttons-13-16.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/458/medium640/3d_printing_pico-buttons-13-16.jpg?1615235541)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Install OLED

## Solder Ground to OLED

Secure the OLED to a panavise, PCB vise or third helping hands. Solder the remaining ground wire to the ground pin on the OLED breakout.

![3d_printing_oled-buttons-leld-ground.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/460/medium640/3d_printing_oled-buttons-leld-ground.jpg?1615233527)

## Connect STEMMA Cables to OLED

Plug in the STEMMA QT cable from the Raspberry Pi Pico to the left port on the side of the OLED.

Plug in the STEMMA QT / Qwiic JST SH 4-Pin Cable to the right port on the other side of the OLED.

![3d_printing_oled-stemma-connect.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/464/medium640/3d_printing_oled-stemma-connect.jpg?1615233689)

## Hardware for OLED

Use the following hardware to secure the OLED to the top cover.

- 4x M2.5 x 12mm screws
- 4x M2.5 hex nuts

![3d_printing_oled-hardware.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/461/medium640/3d_printing_oled-hardware.jpg?1615233543)

## Install OLED to Top Cover

Place the OLED face down into the top cover. Line up the mounting tabs with the mounting holes in the top cover.

Insert the screws through the holes in the top cover and push them through the mounting holes on the OLED.

![3d_printing_oled-top-install.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/462/medium640/3d_printing_oled-top-install.jpg?1615233552)

## Secure OLED

While holding screw in place, insert and fasten an M2.5 hex nut onto the thread of the screw. Only finger tightly the hex nuts to secure the screen. Proceed to install the remaining screws. 

![3d_printing_oled-top-secure.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/463/medium640/3d_printing_oled-top-secure.jpg?1615233572)

Danger: 

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Install 5-Way Nav Switch

## Install Rubber Nub for 5-Way Nav Switch

Before panel mounting the 5-way navigation switch, install the rubber nubbin for the Joystick (if you'd like, it's optional). It is press fitted over the stem of the joystick and has a snug fit. 

![3d_printing_5way-nub-install.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/465/medium640/3d_printing_5way-nub-install.jpg?1615233763)

## Screws for 5-Way Nav Switch

Install the 5-way navigation switch into the top cover. Line up the mounting tabes with the built-in standoffs on the top cover. Use the following screws to secure the 5-way navigation switch.

- 2x M3 x 4mm screws

![3d_printing_5way-top-hardware.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/466/medium640/3d_printing_5way-top-hardware.jpg?1615233800)

## Secure 5-Way Nav Switch

Insert and fasten the two M3 x 4mm screws through the mounting tabs on the PCBs.

![3d_printing_5way-top-secured.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/467/medium640/3d_printing_5way-top-secured.jpg?1615233816)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Install PCB Mount

## Installing PCB Mount

Get the PCB mount ready to secure the Raspberry Pi Pico. Use the following screws.

- 4x M2 x 4mm long screws

![3d_printing_pico-pcb-preinstall.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/484/medium640/3d_printing_pico-pcb-preinstall.jpg?1615234314)

## Secure Pico to PCB Mount

Carefully place the Raspberry Pi Pico over the M2 standoffs that are secured to the PCB mount. Use the 4x M2 x 4mm long screws to secure the Raspberry Pi Pico to the four M2 standoffs.

![3d_printing_pico-pcb-secure.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/485/medium640/3d_printing_pico-pcb-secure.jpg?1615234342)

## Connect USB Extension Cable to Pico

Grab the USB extension cable and connect it to the microUSB port on the Raspberry Pi Pico. It's important to connect these together before securing the PCB mount to the top cover.

![3d_printing_pico-usb-connect.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/486/medium640/3d_printing_pico-usb-connect.jpg?1615234386)

## Screws for Securing PCB mount to Top Cover

Use the following screws to secure the PCB mount to the top cover.

- 4x M3 x 4mm long screws

![3d_printing_pcb-mount-top-screws.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/487/medium640/3d_printing_pcb-mount-top-screws.jpg?1615235419)

## Secure PCB Mount to Top Cover

Position the PCB mount in place and line up the M3 standoffs with the mounting holes in the top cover.

While holding in place, insert and fasten the 4x M3x4mm long screws to secure the PCB mount to the top cover.

![3d_printing_pcb-mount-top-install.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/491/medium640/3d_printing_pcb-mount-top-install.jpg?1615234652)

## Secured PCB Mount

Check the PCB mount is properly secured to the top cover.

![3d_printing_pcb-mount-top-secured.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/492/medium640/3d_printing_pcb-mount-top-secured.jpg?1615234672)

![3d_printing_pcb-mount-top-secured-back.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/493/medium640/3d_printing_pcb-mount-top-secured-back.jpg?1615234709)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Install and Wire LED Driver

## Screws for LED Driver

Use the following hardware to secure the LED driver to the PCB mount.

- 4x M2.5 x 4mm long screws

![3d_printing_led-driver-screws.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/494/medium640/3d_printing_led-driver-screws.jpg?1615234781)

## Secure LED Driver to PCB Mount

Place the LED driver over the remaining M2.5 standoffs.

Insert and fasten 4x M2.5x4mm long screws to secure the LED driver to the PCB mount.

![3d_printing_led-driver-secure.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/495/medium640/3d_printing_led-driver-secure.jpg?1615235984)

## Wire Button LEDs 1-4 to LED Driver

Get ready to solder the LED wires to the LED driver. Make the following connections.

- Button 1 – Pin #0
- Button 2 – Pin #1
- Button 3 – Pin #2
- Button 4 –  Pin #3

![3d_printing_led-driver-wired-1-4.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/496/medium640/3d_printing_led-driver-wired-1-4.jpg?1615234863)

Warning: 

## Wire Button LEDs 5-8 to LED Driver

Make the following connections.

- Button 5 – Pin #4
- Button 6 – Pin #5
- Button 7 – Pin #6
- Button 8 – Pin #7

![3d_printing_led-driver-wired-5-8.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/497/medium640/3d_printing_led-driver-wired-5-8.jpg?1615234909)

## Wire Button LEDs 9-12 to LED Driver

Make the following connections.

- Button 9 – Pin #8
- Button 10 – Pin #9
- Button 11 – Pin #10
- Button 12 – Pin #11

![3d_printing_led-driver-wired-9-12.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/498/medium640/3d_printing_led-driver-wired-9-12.jpg?1615236680)

Warning: 

## Wire Button LEDs 13-16 to LED Driver

Make the following connections

- Button 13 – Pin #12
- Button 14 – Pin #13
- Button 15 – Pin #14
- Button 16 – Pin #15

 

![3d_printing_led-driver-wired-13-16.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/499/medium640/3d_printing_led-driver-wired-13-16.jpg?1615234963)

## Connect STEMMA Cable to LED Driver

Lastly, connect the STEMMA cable from the OLED to the STEMMA port on the LED driver.

It just plugs in, isn't STEMMA QT awesome?

![3d_printing_led-driver-stemma-connect.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/500/medium640/3d_printing_led-driver-stemma-connect.jpg?1615234989)

## Wiring Complete

YES! Congratulations, you've completed the wiring. Take a moment to bask in the glory.

![](https://cdn-learn.adafruit.com/assets/assets/000/100/509/medium800/3d_printing_wiring-done.jpg?1615235035)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Final Assembly

## Secure USB Extension Cable

The USB extension cable is panel mounted to the side of the frame. Use the screws included or use your own (mine are coated in black paint).

- M3 x 10mm long screws

Hold the USB extension port in place with your desired orientation. Insert and fasten the two M3 screws while holding the USB port in place.

The stock length of the USB extension cable is just the right length we need – No need to cut or extend, yay!

![3d_printing_usb-ext-install.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/510/medium640/3d_printing_usb-ext-install.jpg?1615235081)

![3d_printing_usb-ext-secured.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/511/medium640/3d_printing_usb-ext-secured.jpg?1615235359)

## Close Case

The top cover snap fits onto the frame. Bring the two together and line up the clips with the edges of the frame. Firmly press them together to snap fit the case shut.

![3d_printing_top-frame-install.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/512/medium640/3d_printing_top-frame-install.jpg?1615235356)

## Final Build

And there you have it! Your DIY MIDI Controller is assembled and ready for jamming. Congratulations!

![3d_printing_final-build.jpg](https://cdn-learn.adafruit.com/assets/assets/000/100/513/medium640/3d_printing_final-build.jpg?1615235372)

# Raspberry Pi Pico and LED Arcade Button MIDI Controller

## Jam Out

With your Raspberry Pi Pico MIDI controller all assembled, you're ready to jam! You can use it with any software that allows MIDI input. Most commonly, you'll use a MIDI controller with music production software such as Reason, Garage Band, FL Studio, Ableton Live, etc.

You could use the MIDI device for recording your own music with MIDI or for playing live. With the MIDI mapping, you can create unique arrangements on the fly without having to go back and forth between software and the device. In a live situation, the added control of the quick mapping opens up a world of possibilities. 

https://youtu.be/bhS6FO-59jY


## Featured Products

### Raspberry Pi Pico RP2040

[Raspberry Pi Pico RP2040](https://www.adafruit.com/product/4864)
The Raspberry Pi foundation changed single-board computing [when they released the Raspberry Pi computer](https://www.raspberrypi.org/archives/723), now they're ready to do the same for microcontrollers with the release of the brand new **Raspberry Pi Pico**. This...

In Stock
[Buy Now](https://www.adafruit.com/product/4864)
[Related Guides to the Product](https://learn.adafruit.com/products/4864/guides)
### Adafruit AW9523 GPIO Expander and LED Driver Breakout

[Adafruit AW9523 GPIO Expander and LED Driver Breakout](https://www.adafruit.com/product/4886)
Expand your project possibilities, with the **Adafruit AW9523 GPIO Expander and LED Driver Breakout** - a cute and powerful I2C expander with a lot of tricks up its sleeve.

GPIO expanders work like this: you have a board with some number of GPIO but not enough for your...

In Stock
[Buy Now](https://www.adafruit.com/product/4886)
[Related Guides to the Product](https://learn.adafruit.com/products/4886/guides)
### Adafruit Grayscale 1.5" 128x128 OLED Graphic Display

[Adafruit Grayscale 1.5" 128x128 OLED Graphic Display](https://www.adafruit.com/product/4741)
This OLED goes out to all the fans who want _more pixels_! Normally our 128x64 OLEDs are the biggest ones we've stocked that can use I2C. This one is a whopping 128x128 pixels and it even has an extra bonus - it can do grayscale pixels! Yep, you get the same crispness of a...

In Stock
[Buy Now](https://www.adafruit.com/product/4741)
[Related Guides to the Product](https://learn.adafruit.com/products/4741/guides)
### Arcade Button with LED - 30mm Translucent Clear

[Arcade Button with LED - 30mm Translucent Clear](https://www.adafruit.com/product/3491)
A button is a button, and a switch is a switch, but these translucent arcade buttons are in a class of their own. Particularly because they have  **LEDs built right in!**  That's right, you'll be button-mashing amidst a wash of beautiful light with these lil'...

In Stock
[Buy Now](https://www.adafruit.com/product/3491)
[Related Guides to the Product](https://learn.adafruit.com/products/3491/guides)
### STEMMA QT / Qwiic JST SH 4-pin Cable - 100mm Long

[STEMMA QT / Qwiic JST SH 4-pin Cable - 100mm Long](https://www.adafruit.com/product/4210)
This 4-wire cable is a little over 100mm / 4" long and fitted with JST-SH female 4-pin connectors on both ends. Compared with the chunkier JST-PH these are 1mm pitch instead of 2mm, but still have a nice latching feel, while being easy to insert and remove.

<a...></a...>

Out of Stock
[Buy Now](https://www.adafruit.com/product/4210)
[Related Guides to the Product](https://learn.adafruit.com/products/4210/guides)
### Thru-hole 5-way Navigation switch

[Thru-hole 5-way Navigation switch](https://www.adafruit.com/product/504)
This navigation switch is an intuitive way to add 5 button's worth of interfacing with a single component. Inside is 5 switches: left, right, up, down and 'select' (pressing down), all with a common ground pin. The package isn't exactly on a 0.1" grid, but we found that...

In Stock
[Buy Now](https://www.adafruit.com/product/504)
[Related Guides to the Product](https://learn.adafruit.com/products/504/guides)
### Panel Mount Extension USB Cable - Micro B Male to Micro B Female

[Panel Mount Extension USB Cable - Micro B Male to Micro B Female](https://www.adafruit.com/product/3258)
Check out this handy MicroUSB extension cable, which will make it easy for you to enclose a device that has a B&nbsp;type (micro USB host) port. Great if you need to extend the USB port for your Raspberry Pi, Arduino, Feather or really anything development board.  
  
This Micro-B...

In Stock
[Buy Now](https://www.adafruit.com/product/3258)
[Related Guides to the Product](https://learn.adafruit.com/products/3258/guides)
### Black Nylon Machine Screw and Stand-off Set – M2.5 Thread

[Black Nylon Machine Screw and Stand-off Set – M2.5 Thread](https://www.adafruit.com/product/3299)
Totaling 380 pieces, this **M2.5 Screw Set** &nbsp;is a must-have for your workstation.&nbsp;You'll have enough screws, nuts, and hex standoffs to fuel your maker tendencies&nbsp;for days on end! M2.5 size screws fit almost all of the Adafruit breakout/dev board mounting holes...

In Stock
[Buy Now](https://www.adafruit.com/product/3299)
[Related Guides to the Product](https://learn.adafruit.com/products/3299/guides)

## Related Guides

- [Adafruit Grayscale 1.5" 128x128 OLED Display](https://learn.adafruit.com/adafruit-grayscale-1-5-128x128-oled-display.md)
- [Adafruit AW9523 GPIO Expander and LED Driver](https://learn.adafruit.com/adafruit-aw9523-gpio-expander-and-led-driver.md)
- [Programmable Wireless BLE Gesture Mouse](https://learn.adafruit.com/ble-wireless-gesture-mouse.md)
- [Planetary Gear Dreidels](https://learn.adafruit.com/planetary-gear-dreidels.md)
- [MIDI Laser Harp with Time of Flight Distance Sensors](https://learn.adafruit.com/midi-laser-harp-time-of-flight-sensors.md)
- [Stepper Motor Turntable](https://learn.adafruit.com/stepper-motor-turntable.md)
- [BLE Light Switch with Feather nRF52840 and Crickit](https://learn.adafruit.com/bluetooth-light-switch-with-crickit-and-nrf52840.md)
- [PyPortal Air Quality Display](https://learn.adafruit.com/pyportal-air-quality-display.md)
- [Doomscroll and Chill - A Wireless BLE Scroll Wheel Remote](https://learn.adafruit.com/doomscroll-and-chill-wireless-ble-scroll-wheel-rotary-encoder-remote.md)
- [DIY Pico Mechanical Keyboard with Fritzing and CircuitPython](https://learn.adafruit.com/diy-pico-mechanical-keyboard-with-fritzing-circuitpython.md)
- [Feather RP2350 Audio Reactive Video Synth](https://learn.adafruit.com/feather-rp2350-audio-reactive-video-synth.md)
- [Mini LED Matrix Audio Visualizer](https://learn.adafruit.com/mini-led-matrix-audio-visualizer.md)
- [Servo Boss](https://learn.adafruit.com/servo-boss.md)
- [CircuitPython Elgato WiFi Light Controller](https://learn.adafruit.com/circuitpython-elgato-wifi-light-controller.md)
- [How to Make Animated Graphics for Hologram Displays](https://learn.adafruit.com/how-to-make-animated-graphics-for-hologram-displays.md)
- [CYBERDECK Expansion Plate](https://learn.adafruit.com/cyberdeck-plate.md)
- [USB C Power Delivery Monitor](https://learn.adafruit.com/usb-c-benchtop-power-supply.md)