A Gamepad with Personality

What happens when you mix Kawaii with a game controller? JOY! Say hello to our new Circuit Playground character, JOY – the game controller.

An LCD screen is hidden behind JOY's facial features that display pupils in her eyes and teeth in her mouth. Joy's "eye" move and rotate with the position of the 2-axis analog joystick. JOY also randomly blink her eyes.

USB HID Controller

JOY operates as a USB controller when plugged into a computer. The joystick is converted from 2-axis analog to a conventional D-pad (up, down, left, right). The action buttons are mapped to keyboards letters (such as W, A, S, D) but can be mapped to any characters, function keys and modifiers.

JOY doesn't have to be a game controller, she can control any number of software or media such as youtube, photoshop, premiere, Ableton live, etc anything that a USB keyboard can do.

Building Joy

At any skill level, soldering wires to breakout boards and 3D printing take up the majority of the build. I estimate the project build to about 2-3hrs, suggest for a weekend. So if you're a beginner or novice, building this project entails soldering, wiring, modifying and uploading code. 

I recommend walking through the guide before committing and buying all of the parts. As a thoroughly documented tutorial, some "micro steps" and terminology are assumed.

Prerequisite Guides

If your new to electronics and the Adafruit Feather M0 Express, I suggest you walk through the following guides to get the basics. The Adafruit Feather M0 Express guide will walk you through setting it up with CircuitPython.

Parts & Components

You'll need just a couple a parts to build this project. You have the option to choose from two Adafruit Feather M0 boards. You also can choose different batteries (capacities).

1 x Feather M0 Express
Micro-controller
1 x Soft Buttons
8mm buttons
1 x Thumb Joystick
Breakout with Thumb Joystick
1 x 1.44 TFT Display
Color screen
1 x Slide Switch
on/off switch
1 x 500mAh Lipo
Battery

Hardware Machine Screws

The electronic components are secured to the 3D printed enclosure using metric machine screws. I used Phillips flat head style screws that are ~5mm in length. These low-profile screws can be purchased from your local hardware store or online retailers like Albany County Fasteners or McMasterCar.

 

  • 10qt – M2.5 x 0.45 x 5mm
  • 4qt – M3 x 0.5 x 5mm

Tools & Supplies

Hardware, cutters, solder, wires, that sorta thing.

10 x M2.5 Machine Screws
Phillips Flat Head Machine Screw A2 SS M2.5 x .45 x 5MM
4 x M3 Machine Screws
Phillips Flat Head Machine Screw A2 SS - M3 x .5 x 5MM
1 x 30AWG Wire
Silicone Cover Stranded-Core Wire - 30AWG in Various Colors
1 x Solder Wire
Solder Spool - 1/4 lb SAC305 RoHS lead-free / 0.031" rosin-core - 0.25 lb / 100 g
1 x Heat Shrink Tubing
Multi-Colored Heat Shrink Pack - 3/32" + 1/8" + 3/16" Diameters
1 x Mounting Putty Tack
Loctite Fun-Tak Mounting Putty 2-Ounce

Cool Tools!

These things really do help make building the project smoothly. You don't need them all of them, but I recommend them.

1 x Ultimaker 3
3D Printer
1 x Wire Strippers
Hakko Professsional Quality 20-30 AWG Wire Strippers - CSP-30-1
1 x Wire Cutters
Flush diagonal cutters - CHP170
1 x Soldering Iron
Adjustable 30W 110V soldering iron - XY-258 110V
1 x Panavise
Panavise Jr. - PV-201
1 x Helping Third Hands
Helping Third Hand Magnifier W/Magnifying Glass Tool - MZ101

3D Printed Parts & Materials

All of the parts are designed to be 3D printed using various colored PLA filament. The majority of the parts are "friction fitted" and snap fit and lock together.

3D Printing with Dual Extrusion

The top cover (the one with the facial features) is dual extruded in black and white filament. The STL files joy-top-black.stl and joy-top-white.stl are the top half of the case that are combined together to form one piece. 3D printers with a toolhead capable of dual extrusion have dedicated slicing software. The Ultimaker 3 features CURA slicer which requires setup for preparing models for dual extrusion. See Ultimaker's Getting started with Printing with Two Colors in CURA.

3D Printing Single Extrusion

The STL file joy-top-face.stl is the top half of the case that is designed specifically for single extrusion 3D printers. This could be printed in different colors using the "color swap" technique where the printjob is paused, the filament is changed, and then the print is resumed – Repeated a few times can result in a 2-color 3D print. See our Boomy The Boombox guide for details on how to accomplish this using SImplify3D.

Parts Assembly

Main two piece case snap fits together. The left and right pads are friction fitted into the top half of the case. Various details are a combination of securing with adhesives and 3D printed via dual extrusion. Most of the electronic components are secured to the top and bottom half of the case with machine screws.

CURA Slice Settings

Here's a screenshot of the settings used to 3D print the top and bottom halves of the case. To get the most accurate tolerances for the snap fit features, you'll want to adjust your slice settings accordingly. The parts were tested with PLA filament, other materials that have more shrinkage such as ABS or Nylon may have different tolerances.

Support Material

The left pad (the one that houses the 4-action-buttons) required support material to 3D print properly. Support material helps 3D printers resolve overhangs and undercuts that would not be possible otherwise. 3D printing slicer software such as CURA and Simplify3D features tools and settings for setup support material. I used a pair of precision flat pliers to remove the supports by pinching and pulling it off the part. 

Pink Strips

The pink strips in the bottom case piece are printed separately and can be attached with either double-sided tape or adhesives. I used tape called nitto paper tape that is has a strong hold (I actually use this stuff for securing material to my CNC milling machine). Using scissors, cut very thin strips of tape and stick them to the pink strips. I placed the strips with the help of tweezers to ensure they were evenly spaced out. 

Button Assembly

The right pad features "masking" details that fit over the button actuators. These button masks are pressed into the right pad's cavities and have a friction fit – or can be secured with adhesives. Optionally can be dual extruded, but requires more consideration with support material. The button actuators were printed in several different colored filament. The buttons can optionally be spray painted.

Registration Keys

The purple left and right pads feature "little slots" that snap into "registration keys" that are located on the back of the top half of the case. These four notches were designed to have a very tight fit and lock into the nubs.

Install Left Pad

Start with the left pad (this one fits over the analog thumb joystick). Line up the registration slits with the nubs on the top half of the case. Orient the part so the quarter sized circular notch lines up with the center standoffs. Firmly press down on the part until it clicks into place.

Buttons Covers

The two button covers can be pressed into the recessed areas on the right purple pad. These should have snug fit and click into place. Optionally add some adhesives if you find them come loose.

Install Button Actuators

The four colored button actuators are inserted into the four holes on the back of the purple right pad. The button actuators has a flange that prevents them from falling through the hole. The actuators should have a loose fit which is necessary for the buttons to be pressed without getting stuck.

Feather M0 Express Arduino IDE Setup

We'll upload the code to the Adafruit Feather M0 Express using the Arduino IDE. We'll need to have the Adafruit board profile and libraries installed before uploading the code. If you're new to Arduino, let's first walkthrough the board profile setup using the Adafruit Feather M0 Express guide.

Installing Libraries in Arduino

With the board profile, we can then install the dependencies. We'll use Arduino's built-in Library Manage to install the libraries. Goto Sketch > Include Library  and select Manage Libraries. Here, we'll search for the Adafruit ST7735 Library and install the latest version.

Uploading Code

With the Feather board profile and Arduino library installed, download the Joy.ino file and the graphics.h file and save them to a new folder named "Joy". You'll want to place the new folder into arduino's sketches folder (ie. ~/HD/Documents/Arduino/sketches). 

Open the Joy.ino file in the Arduino IDE. Select the Adafruit Feather M0 Express board under the Tools > Board menu. Connect the Feather board to your computer via microUSB cable and select "/dev/cu.modem..." under the Tools > Port menu (Option might be named different using Windows OS).

Upload the code to the Feather using the Upload command, Cmd+U or clicking the arrow icon.

Changing Key Mappings

The button array lists the pins mapped to specific keyboard characters. Depending on the wiring, the buttons will be mapped to analog pins A2-A5, respectfully.

You can modify the keys by updating the values in the single quotes ('x') and the KEY_XX arguments. For special characters like return, esc and function keys, reference the Arduino Key Modifiers page here.

} button[] = {
  { A5, KEY_HOME },         // Button 0 Blue
  { A4, KEY_RETURN },       // Button 1 Pink
  { A3, 'x' },              // Button 2 Yellow
  { A2, 'z' },              // Button 3 Green
  { 11, KEY_ESC },          // Joystick select click
};
I suggest having the code uploaded to the Adafruit Feather before wiring the components. 

Circuit Diagram

This provides a visual reference for wiring of the components. They aren't true to scale, just meant to be used as reference. In the actual circuit, most of the wiring is made to the bottom of the PCBs (front of the PCBs are shown for clarity).

 

Wired Connections

The connected are broke out and listed below. 

Switch

  • Switch to Enable pin on Adafruit Feather
  • Switch to GND pin on Adafruit Feather

Analog Thumb Joystick

  • VCC from Joystick to 3V on Adafruit Feather
  • GND from Joystick to GND on Adafruit Feather
  • XOUT from Joystick to A1 on Adafruit Feather
  • YOUT from Joystick to A0 on Adafruit Feather
  • Sel from Joystick to 11 on Adafruit Feather

1.44 TFT Display

  • VIN from display to 3V on Adafruit Feather
  • GND from display to GND on Adafruit Feather
  • SCK from display to SCK on Adafruit Feather
  • MISO from display to MISO on Adafruit Feather
  • MOSI from display to MOSI on Adafruit Feather
  • TCS from display to 10 on Adafruit Feather
  • RST from display to 9 on Adafruit Feather
  • DC from display to 6 on Adafruit Feather
  • CCS from display to 5 on Adafruit Feather

Buttons

  • GND from Buttons to GND on Adafruit Feather
  • Button 1 to A2 on Adafruit Feather
  • Button 2 to A3 on Adafruit Feather
  • Button 3 to A4 on Adafruit Feather
  • Button 4 to A5 on Adafruit Feather

USB or Battery Power

The circuit can be powered via 5V USB or a 3.7v lithium polymer battery. If you're using the controller as a USB HID, the lipo battery is not required. I used a battery in this circuit to demo the display untethered.  If you're looking to writing code for using the controller via Bluetooth, you would need a battery.

CNC Milled PCB

The button PCB was machined using an Bantam Tools CNC mill (formally Othermill Pro) using single sided FR-1 copper clad. The PCB was designed in Autodesk Eagle and available to download – Included is the library part for the 8mm soft tactile switch.

 

The milling process can be watched in our YouTube video linked below.

3D Printed Button PCB

Optionally, you can 3D print the button PCB. The 8mm soft tactile buttons snap fit into the pin holes. You'll need to wire the ground connections together and avoid melting the 3D print (the soldering iron tip is hot!).

Solder Buttons to PCB

The buttons are installed to the non-copper side of the board and should hold in place. The terminals of the buttons are then soldered to the pads on the copper side. 

Buttons Wires

We'll need five wires to connect the buttons to the Adafruit Feather. I suggest using different colored wires to help distinguish the connections. These wires should be about 9cm in length. A piece of heat shrink tubing can help keep the wires together. 

Tin Wires

Using wire strippers, remove a bit of insulation from the tips of each wire and apply a small amount of solder to them – This is called "tinning" and will prevent the strands of wires from fraying. A third helping hand tool can assist in the process as it helps hold the wires in place while soldering. 

Solder Wires to PCB

Now we can attach the wires to the pins on the button PCB. You can follow the traces to determine which pins are connected to their respective buttons. The common ground has two available pins. I tinned the pins on the PCB before soldering the wires. If you're using different colored wires, you'll want to take note and keep track of these connections when soldering them to the Adafruit Feather. 

Slide Switch

We'll need to connect a slide switch to the Adafruit Feather by wiring it to the enable and ground pins. This will allow us to power the 3V regulator on and off. I used 30AWG silicone cover stranded wire because it's strong and flexible. The length of the wires can be about the same length of the Adafruit Feather.  

Prep Switch

We'll only need two of the three terminals on the slide switch. Using flush diagonal cutters, remove of the terminals (either the far left or right, but not the middle!). Then, shorten the two remaining terminals by cutting them in half. Now you can tin the two remaining terminals with a bit of solder – This will help make soldering them to the wires easier.

Strip Wires

Using wire strippers, you want to remove a bit of insulation from the tip of the two wires.

Tin Wires

Next we can tin the tips of each wire by applying a bit of solder. Tinning the wires will help prevent the strands from fraying. A third helping hand can help keep the wires secured and held in place while applying the solder. 

Connect Wires to Switch

Attach the wires to the two remaining shortened terminals on the switch.

Connect Switch to Feather

Now we can connect the switch to the Feather by soldering the two wires to the Enable and Ground pins, respectively (doesn't matter which wire as long as one goes to enable and other to ground). I recommend using a Panavise Jr. to keep the Feather secured while soldering. 

Test Switch

We can test out the switch by plugging in the battery to the Feather. Sliding the switch back and forth will power the circuit on and off. The on-board status LED and NeoPixel LED will light up indicating that it's receiving power from the battery. If everything works, you can disconnect the battery and set it aside for now.

Display Wires

In order to connect the TFT Display to the Adafruit Feather, we'll need a handful of wires – 9 wires in total. It's helpful if they're different colors, but you'll most likely have some repeating colors. The length of these wires can be about 11cm long, longer is OK but any shorter and they won't be long enough to reach when mounted to the 3D printed case.

Tin Wires for Display

It's a good idea to tin each wire with a bit of solder – Again, making it less likely for the strands to fray when attaching them to the display breakout board. 

Prepped Wires

I found this to be the most time consuming portion of the build. You can speed up the process by using a wire stripper that can strip multiple wires at a time, such as a self-adjusting wire stripper. It doesn't matter which color are connected to the display, but it's a good idea to have some sort of consistency – using blue for ground and red for power is common.

Connect Wires to TFT Display

Now we can connect the wires to the display. I suggest securing the PCB of the display to a Panavise Jr with the back of the PCB facing up. Tin the pinouts on the breakout board by applying a bit of solder to each pin. Follow the circuit diagram for reference – All but the far left and right pins on the breakout are going to need a wire. 

Connecting TFT to Feather

Now we can connect the wires from the TFT display to the Adafruit Feather. I found it necessary to secure the TFT display to a pair of third helping hands. The Adafruit Feather is then secured to the Panavise Jr. The wires a bit short so you'll need to keep the two components relatively in close proximity to comfortably solder the wires.   

Solder TFT Wires to Feather

You'll want to reference the circuit diagram while soldering the wires from the TFT display to the Adafruit Feather. I suggest downloading the JPG image to your smart phone to reference the connections on while soldering. Some of the connections have similar labeling, such as MOSI, MISO, SCK, ground and 3V. 

Connected TFT Display

It's a good idea to thoroughly inspect the wiring to ensure the wires are connected to the appropriate pinouts.  

Connecting Buttons to Feather

Going back to the Button PCB, we can get it ready to connect to the Adafruit Feather. Before soldering, I suggest slipping on a piece of heat shrink tubing to keep the wires grouped together. 

Solder Button Wires to Feather

The buttons will need to be connected to the analog pins on the Adafruit Feather. Solder the wires to pins A5, A4, A3 and A2 – Doesn't matter which order the buttons go as along as they are connected to those analog pins. Connect the ground wire to any of the available ground pins on the Adafruit Feather.

Connected Buttons

With the wires now connected to the Feather, it's a good idea to inspect your work and double check the wiring. 

Install Joystick

The analog thumb joystick will be need to installed to the breakout board and soldered in place. Orient the pins of the joystick and line them up with the pinholes on the breakout board. You may need to slightly bend the pins into place. Check all of the pins to ensure they're inserted to their respective pinholes before fully seating the joystick. Firmly pressing down the joystick to install it. 

Solder Joystick to PCB

With the joystick now installed to the breakout board, apply solder to all of the pins to permanently secure them in place. Again, I suggest using a Panavise Jr. to help keep the board steady while soldering. 

Wires for Joystick

We'll need a total of five wires to connect the joystick to the Adafruit Feather. These connections will be power, ground, x-axis, y-axis, and select. The length of these wires should be about 11cm.

Tin Wires

Slip on a piece of heat shrink tubing to keep the wires grouped together. Using third helping hands, secure the bundle of wires and apply a bit of solder to tin all of the tips.

Connect Wires to PCB

The wiring works best when soldered to the back side of the PCB. There aren't any labels on the back, so you'll need to flip it over to reference the connections – If you're being consistent with the colors, you may want to periodically check which wire goes to which pinhole. 

Connect Wires to Feather

Now we can solder the wires from the Joystick PCB to the Adafruit Feather. At this point, the pinouts on the Feather are a bit cluttered, so you'll need to move some of the other wires to make room for the wires from the joystick. Reference the circuit diagram to get the correct pinouts for each wire. 

Wired Components

Now we have all of the wiring complete! It's a good idea to double check the wiring and cross reference them with the circuit diagram to ensure it's all correct. You'll also want to make sure you have a sufficient amount of solder on each pinhole. There's a total of 21 wires in the build, so it's not common to find one isn't fully soldered. 

Install Feather

We'll start the assembly with the Adafruit Feather. The Feather will be mounted to the bottom half of the enclosure. Position the Feather PCB over the center of the case. Lay the board over the standoffs and line up the mounted holes. The microUSB port from the Feather should be facing the edge of the case.

Secure Feather

We'll use 2x M2.5 (4mm long) screws to secure the Feather board to the bottom halve of the case. While holding the Feather PCB down, insert a machine screw into one of the mount holes and fasten it until fully tightened. Repeat for the second mounting hole. 

Install Joystick

Next component we'll mount to the bottom half of the case is the PCB from the thumb joystick. Position it to the left of the feather board (positioned down, in the photo) and line up the mounting holes with the standoffs. Adjust the wires so they're not being kinked. You may need to snip any excess pins from the bottom of the PCB to prevent the wires from being punctured. 

Secure Joystick

We'll need 4x M3 (4mm long) screws to secure the PCB to the case. While holding the PCB in place, insert and fasten the machine screws. The orientation of the board matters, so make sure to cross reference the image.

Install Screws to Button PCB

Moving onto the button PCB, we'll need 4x M2.5 (4mm long). I suggest installing the screws into the button PCB first, going through the copper side. Fasten them to the four mount holes until the threads just barely poke through the other side. Repeat this process for the four screws.

Install Button PCB

Grab the top half of the case and position the button PCB over the standoffs on the right side pad. Adjust the PCB until the screw threads fit over the mounting holes in the standoffs. The orientation doesn't matter all that much, as long as the wiring is long enough reach.

Secure Button PCB

While holding the button PCB to the standoffs, fasten the machine screws until fully tightened. The surface of the PCB should be flush with the top edge of the standoffs. Test the button actuators by pressing them. They should have a bit of travel and be sticky free. 

Install TFT Display

Next, install the display to the top half of the case by resting over the four standoffs in the center. Orient the PCB so the wiring is near the bottom and the SD card facing the other edge. You may need to press down on the PCB so the bezel of the display fits in between the standoffs. The tabs on the PCB should sit flush with the standoffs.

Secure TFT Display

Insert four M2.5 (4mm long) screws into the tabs of the PCB with the mounting holes. Fasten the screws until they're fully tightened. 

Install Switch

The slide switch can be inserted into the little holder near the Adafruit Feather. You'll need to insert it at an angle and press it down until it clicks into place. A little nub will keep the switch from being pushed inside the case when actuated.

Mounting Battery 

I used a glob of mounting putty (tack) to secure the battery to the bottom half of the case. This stuff is nice because it'll keep the battery from rattling inside the case but is also removable/adjustable unlike tape or glue. 

Connect Battery

The battery fits nicely next to the Adafruit Feather. Adjust the position of the battery so the cable can reach the JST connector on the Adafruit Feather. Once in place, plugin the JST connector from the battery.

Final Check

With all of the components now secured to the case, double check all of the mounting holes and ensure everything is tight and none of the wires are being kinked. At this point, it's a good idea to make any final adjustments. A good example would be to shortened any excessive wires. Long wires are OK, but they may prevent the case from being able to fully close shut.

Close It Shut!

OK, now it's time to close up the case by joining the two halves together. Slowly bring the top half of the case to the bottom half. Make sure none of the wires are bing kinked, ensure all of the connections are fitted inside the case. The two halves will click together and snap fit shut.

Test it, Use it, Play it!

Try it out and see if the screen powers on – The Feather takes about 2-3 seconds to boot, so it's normal if it doesn't instantly powers on. Rotating the joystick should move Joy's pupils. If you notice the movement of the joystick is Inverted, you may have the joystick PCB installed backwards. 

This guide was first published on Oct 04, 2017. It was last updated on Sep 13, 2017.