Customizable Keypad

Missing a few extra buttons in your workplace? Want something that shines and blinks at you? Need a place to hide those secret love notes you keep receiving?

Then this programmable, Teensy/Arduino-Based, Button Pad is the thing for you!

I am a student at the Technical University Vienna and I want to share this little Project with you.

You could also use other microcontrollers should you have some lying around, but bear in mind that you are limited by the space available. You will also need at least 4 Digital I/O Pins, one of which can drive the Neo Pixel ring, the possibility to use Internal Pull-up (unless you want to do that externally) and, for the sake of not having to open up the assembled project every time you want to update or change the code, designated reset and program pins.

• 1x Teensy Micro-controller – I used a Teensy 3.2, but any of the Teensys with the same footprint should work (LC, 3.1, 3.2, 4.0).
• 1x Neopixel Ring – the 24 LED variant
• 3x Keyboard switches – I used Zealios v2 78g because I liked their tactile response, any standard keyboard switches should work – 3 or 5 pin does not matter.
• 3x 6mm by 6mm Momentary Buttons – I used two Flat Plunger buttons and one Projected Plunger type button
• 1x USB-C to Micro USB Adapter (Female/Male)
• Wires – the 3D-Models are designed around 22 AWG wires, smaller gauges will work (and make routing a lot easier)
• 3D-Printer Filament – I used PETG, however PLA and ABS should also work and will provide a better basis for post-processing the prints should you want to do so
• A Soldering-iron
• Solder
• Flux – if needed

Software and Tools

• Autodesk Fusion 360
• Arduino IDE
• 3D Printer (for example, Prusa mik3s+)

To put it simply, this Button Pad is a very small keyboard with LEDs. The layout, if you just flash the microcontroller with the code as is, will have the top 2 keys mapped as Volume Up/Down respectively and the bottom key as Play/Pause. Holding down the “Layer Change” button, which is the one located on the canted surface, will map the top 2 keys as Previous/Next Track respectively while the bottom key will cycle through the LED animations (think of the “Layer Change” like the “Fn” button on laptop keyboards)

The two buttons on the circumference of the Pad are there to make programming and resetting the microcontroller easier, as you will not have to take the pad apart. One will put the Teensy into programming mode, while the other will reset it.

The 3D models were designed in Fusion 360, and the code was written in the Arduino IDE, with the Teensyduino plugin installed.

You will need to print the following files:

• 1x “button_plate”
• 1x “diffuser” or “diffuser_low-profile”
• 1x “lid” should you print the “diffuser” – the “diffuser_low-profile” does not require a lid.

Theoretically, you only need to print the “button_plate”, as it houses all the electronics and wires. The other files are to contain and hide the mess, as well as to make the whole thing look a lot neater and, should you print the “diffuser” with the “lid”, give you a compartment you can hide some small items in.

The “button_plate” is by far the most challenging print, as it has many small channels and bridges that are unsupported when not printing with supports everywhere. You can support those channels and bridges, but it will make the removal of the support structures somewhat difficult.

In the end, only you can judge if your printer can handle those challenges and determine the support settings you need.

The parts are put together by 3D-Printed threads, where the thread of the “button_plate” is a M48x3 left-handed thread and the thread in the “diffuser” for the “lid” is a M48x3 right-handed thread. The “diffuser_low-profile” houses the counterpart to the left-handed thread. The threads have a built-in tolerance of 0.2 mm, to allow for variances during printing.

The Neo Pixel ring is held in place via a friction fit along the outer and inner diameter of the ring, so there is very little tolerance in the design. If you find that the fit is too tight for your ring, sanding down the outer/inner interface surfaces of the “button_plate” will help.

The cutout for the USB-Adapter is also designed to be a friction fit, so tolerances will be fairly tight. As it is not supposed to move once assembled, using (reasonable amounts of) force to insert the adapter is recommended.

After printing the parts, remove the supports structures and do any post-processing you want to do.

I found it easiest to solder the wires to the switches and Neo Pixel ring, snip off the unused legs of the momentary buttons, then route the wires through the channels to the center of the “button_plate”, put all the switches and buttons into position, trim the wires if necessary and lastly solder directly to the pins of the microcontroller.

Neo Pixel Ring:

The “button_plate” has channels that allow to run the cables behind the Neo Pixel Ring. So solder the wires to the side of the ring that does not have the LEDs on it. You will need three wires.

• +5V
• GND
• Data In

Momentary Buttons:

The momentary buttons I used were internally wired so that the connection between pins diagonal from each other would be established when pressed. So I soldered two wires correspondingly and snipped off the unused legs. The three buttons will each have a different use:

• One will be a reset for the microcontroller
• One will put the microcontroller into programming mode
• One will function as a layer shift for the keyboard switches, so that you have two different functions per keyboard switch

Each of the buttons will need to be pulled to ground, so one wire goes to the microcontroller and the other one to a ground pin.

Bear in mind that the 3D Printed part has channels only for certain pins, so I suggest you double and triple check that you have soldered to the right ones before snipping off the other legs.

Keyboard Switches:

The Keyboard switches sit directly above the microcontroller, so you may have to shorten the pins and/or snip off the supporting pins of the switches. They will also be pulled to ground when pressed, so just like the momentary buttons, one wire will go to the microcontroller and one to ground.

Once every part has its wires attached and other modifications made, I routed everything and put the pieces into their places. I had to trim a fair bit off the wires, as I cut mine too long. There is room for some slack in the wires, so that you can still take out the microcontroller, but it is a fairly tight space.

When I had everything routed the way I wanted, I proceeded to solder the wires to the Teensy. Looking at its pinout, you can basically solder the wires for the buttons, switches and NeoPixel ring to any pin of the microcontroller that is not a ground, voltage input, or otherwise special pin.

Two of the momentary buttons (the ones that are right next to each other and not on the top/canted surface) need to be wired to the “Program” Pin and the “Reset” pad on the underside of the Teensy, respectively.

As we need seven connections to ground I zip-tied the ground wires in batches of 3 to 4, soldered them together, and soldered an additional wire to them, that would then go to the Teensys ground pins.

The NeoPixel ring needs 5 Volts to operate, but the Teensy only works on 3.3 Volts. Luckily, the “Vin” pin is routed to have the same Voltage that the USB-Port provides, so we will solder the NeoPixels “+5V” wire to this pin. Alternatively, you can also solder to the “VUSB” pad on the underside of the Teensy.

I soldered the “Data In” pin to pin 12 of the Teensy. However, you can just solder the “Data In” Pin to any of the Teensys digital pins, you will have to adapt the code to reflect that change, however.

That only leaves the wires for the buttons and switches. In my case, I wired the buttons as follows:

• Button 1 (top left keyboard switch) to pin 14
• Button 2 (top right keyboard switch) to pin 16
• Button 3 (bottom keyboard switch) to pin 18
• Button 4 (momentary button on canted surface) to pin 20

You can solder any of the buttons/switches to any of the Teensys digital pins, as you can just change the assignments in the code.

Once all solder connections are done, you should install the USB-Adapter. Make sure that the Micro USB end of the adapter is oriented the same way as the Micro USB port on the Teensy and push the adapter through the cutout and the plug into the port of the microcontroller.

If you used the same hardware, soldered the same connections and just want to get this thing flashed and working, then you will just have to download & install both the Arduino IDE and Teensyduino, download and open the code, select “Teensy 3.2” under “Tools” → “Board”, connect the Teensy to the computer, select the Port under “Tools” → “Port”, select “Keyboard” under “Tools” → “USB Type” and upload the code.

If you want to understand the code a little better, allow me to elaborate.

The libraries used are all included in either the base installation of the Arduino IDE or Teensyduino. The following libs are used:

• Bounce2 – for debouncing the buttons
• FastLED – for driving the NeoPixel ring

Let me go through the lines of code you can, and depending on the hardware you used, should change.

Under “Parameters for LED Animations” you will find the following parameters:

• DATA_PIN – the pin the code expects the NeoPixels “Data In” pin to be connected to.
• LED_TYPE – the type of LEDs that are used. To my knowledge, most of Adafruits NeoPixel products ship with either the “WS2812B” or the “SK6812” LEDs, which are functionally the same.
• COLOR_ORDER – the order of the individual light emitting diodes within one WS2812B, or, for that matter, any RGB LED.
• NUM_LEDS – the number of LEDs on the NeoPixel ring

Under “Parameters for Buttons” you will find the following definitions:

• BUTTON1 – Pin for the first button, in my setup that would be the top left key-switch
• BUTTON2 – Pin for the first button, in my setup that would be the top right key-switch
• BUTTON3 – Pin for the third button, in my setup that would be the bottom key-switch
• BUTTON4 – Pin for the fourth button, in my setup that would be the momentary button on the canted surface
• BUTTON_INTERVAL the interval used for debouncing the buttons and switches

Under “Parameters for LED Animations” you will find some parameters used in some of the Animations – on which I will not elaborate further (reason explained further down).

After the blocks of parameters, you will see the “setup” function. This function runs once at the start of the program and is used to, as the name implies, do some setup of the program before switching over to the “loop” function which will then run repeatedly, or on loop, for as long as the microcontroller is powered on. For this specific project, the “setup” function does the following:

• Wait for 3 seconds to give the computer and microcontroller some time to figure each other out and for the Teensy to report itself as a Keyboard

• Set up the communication to the NeoPixel ring with the given above parameters
• Define all buttons and switches as inputs and set the internal pull-up resistor
• Set the debounce interval for all buttons and switches
• Set the state for the buttons being pressed to digital low

Afterwards the code defines and enumerates a list of all LED animations, sets the currently active LED animation to the first (or rather the zeroth) animation in the list and sets the hue of the animations.

Then the microcontroller enters the before mentioned “loop” function, which will run repeatedly, indefinitely. The function does the following:

• Check and show the currently active LED animation
• Increase the Hue of the LED animation over time
• Update the status of all buttons
• Check if the “Layer Change” button has been pressed and update a variable
• Check if any of the other buttons has been pressed
• If any of the other buttons has been pressed, check the “Layer Change” variable
• Execute the corresponding keyboard press/release

After the “loop” function, you will find the individual functions for the LED animations. I will not elaborate on them further, as I am not that good of a programmer to understand how they function and what they do. I collected the animations from the various FastLED examples that come with the library.

If you want to code your own LED animations, add them after the “loop” function and update the list accordingly.

If you want to change the behavior of the buttons and switches, you will have to dive into the various “if”s of the code and update the key codes according to this key codes list: https://www.pjrc.com/teensy/td_keyboard.html

Get to using your shiny new Button Pad

That is pretty much it! Once you have made the changes necessary, you just have to flash the code onto the Teensy and you are set!

Credit to the folks over at PRJC for the incredibly easy to understand and well written documentation of the Teensy and its functions.

Credit also to Mark Kriegsman and Mary Corey March for the “DemoReel100” and “Pacifica” example codes