With MixPlay on Mixer, viewers can control anything – from a hat that slaps you, to a Nerf turret gun that shoots the streamer. Today we’re going to learn about setting up viewer-controlled LED Cat Ears that change colors on button presses! This guide works with Mix It Up, but can probably work with Firebot as well. Funk yesh!
I must warn you that this is version 1 and that certain things may be a tad ghetto – but it does indeed work! My hope is that you learn from this guide, make your own and create something even sexier before we work on our version 2. As always, if you need help, let me know in the comments below.
These are the products we need to make this happen:
- Adafruit Feather M0 WiFi
https://www.adafruit.com/product/3010
https://amzn.to/2EYq2Bq - Flora RGB Smart NeoPixel version 2
https://www.adafruit.com/product/1260
https://amzn.to/2Rw1IbG
- Jumper Wire Kit
https://amzn.to/2Sai2zr - Any wireless dongle
https://amzn.to/2QD81hD
- Cat ears found on Etsy, Amazon or at a convention
https://www.etsy.com/search?ref=tab_search&q=cat+ears
https://amzn.to/2CoZhTH
- Soldering Iron
https://amzn.to/2Cocr3g - Hot glue gun
https://amzn.to/2QHbzzd
- Electrical tape
https://amzn.to/2BtiuSl - Any pair of headphones
https://amzn.to/2R6HN6B
These are useful but not needed:
- Helping Hands
https://amzn.to/2QhDXUj - Arduino For Dummies
https://amzn.to/2qq4cNd - Arduino Starter Kit
https://amzn.to/2yP02mt - Make: Wearable Electronics
https://amzn.to/2EEzkSq - Lithium Ion Polymer battery [if you don’t want to be connected]
https://www.adafruit.com/product/258
https://amzn.to/2EF149l
Before we begin I must state that I am by no means an expert in creating these sort of devices – I just have a lot of patience and a passion for trying new things; if you too have the patience and at least some interest in creating this, you’ll both have fun and learn something new in the process. If you get stuck, have any questions or have a way to improve this guide, feel free to comment below. Since this is version 1, expect many revisions to make these better and better.
Have everything? Time to start!
Let’s begin with setting up the Adafruit Feather M0 WiFi. Since Adafruit’s guides kick ass, I’m going to link you their documentation – just follow it and head back here once you’re done.
This guide will teach how to set up the Arduino IDE for use with Adafruit boards:
https://learn.adafruit.com/adafruit-feather-m0-wifi-atwinc1500/setup
After that is set up, we’re going to continue the Arduino IDE configuration along with installing drivers. Although the Blink sketch is not needed, it is good to do for ensuring everything is working properly. If you’d rather pass it, just head back here after installing the drivers:
https://learn.adafruit.com/adafruit-feather-m0-wifi-atwinc1500/using-with-arduino-ide
Now it’s time to set up the WiFi side of things! Technically all you need to do here is install the WiFi101 library, but you can go through the entire guide in case you want to get more familiar with how WiFi works with the board:
https://learn.adafruit.com/adafruit-feather-m0-wifi-atwinc1500/using-the-wifi-module
Chances are the firmware is out of date – so let’s update that bad boy! Follow the guide here:
https://learn.adafruit.com/adafruit-feather-m0-wifi-atwinc1500/updating-firmware
Hands-on time!
Get the Feather M0, NeoPixels and Jumper Wires ready, it’s time to start wiring. We’re going to connect everything first and test it before actually soldering everything.
The wiring will go as follows:
- Feather M0 – 3V -> NeoPixel +
- Feather M0 – GND -> NeoPixel –
- Feather M0 – PIN 6 -> NeoPixel arrow pointing to middle
Fritzing diagram on how to set up:
Here is a shot of a different Feather M0 with the correct wiring:
Yay – you wired a bunch of goodness! Hopefully that wasn’t too much trouble. Now it’s time to connect the micro USB cable from the Feather M0 to the PC. The final result should look like this, minus the LEDs being on:
And meow the software side of things…
Reading this section assumes you have properly set up the Arduino IDE to work with adafruit devices and have the Feather M0 connected via USB. If you haven’t done that, get your butt back up a few sections. 🙂
- Download this zip from GitHub and extract it
- Open up CatEarsLED.ino
- Select the Adafruit Feather M0 board [under Tools]
- Select the correct port [under Tools]
- Upload the code [CTRL + U]
- Open the Serial Monitor to confirm WiFi connection [CTRL + SHIFT + M]
- On your PC connect to the Feather SSID via WiFi
- Open your browser and connect to http://192.168.1.1
- Click on one of the links and see the LEDs change color; weeee!
I won’t go into much detail with customization unless requested, but here are a few things to know:
If you need to change the amount of pixels, change this number:
#define NUMPIXELS 4
This line of code changes a certain LED to a certain color:
pixels.setPixelColor(PIXELNUMBER, pixels.Color(RED,GREEN,BLUE));
Example of changing the third LED to blue:
pixels.setPixelColor(2, pixels.Color(0,0,255));
Here is a good guide on NeoPixels showcasing the different types and various info:
https://learn.adafruit.com/adafruit-neopixel-uberguide?view=all
If the LEDs all light up then proceed to the next step. If for whatever reason none of them light up, there are a few things you can look at:
- Does the serial monitor show that the WiFi is broadcasting?
- Did you connect to the Feather SSID from your PC via WiFi?
- Are you connected to the Feather M0 via USB to your PC?
- Are any of the cables loose?
- Are there any errors in the Arduino IDE?
- Is the Feather M0 on-board LED lit up?
If only some of the LEDs light up, check the cables – they’re either loose or need to be replaced.
Once all the LEDs light up and everything looks good then we can proceed. The soldering will come after you confirm jumper wire lengths with the cat ears, so no need to do that yet.
Let’s make a MixPlay board!
We’ll need to make a new MixPlay board in the developer lab, so head there now and make a new project. Be sure to name the project and set the project game too. Once you’re done with that, head to the Build tab on the top.
We’re going to make a very generic board just to show you how to make this work, so it’ll be up to you to customize it as you see fit. Create a new control, name it Unicorn and drag it to the board on the right. You’ll want to drag it for each grid type [small, medium & large], so be sure to change that on the right side. After you’ve dragged the button over three times for each grid type, save it.
If you want to dig deeper into the development side of Mixer, head over here, though it isn’t needed for this project.
Mix It Up time!
Mix It Up is a program that helps streamers connect various things with MixPlay, like our LED Cat Ears!
If you don’t have it already, download it now.
- Open Mix It Up, sign into Mixer and go through the new user process
- Click the Menu button and go to MixPlay
- Select your board from the Game dropdown menu
- Click Add Command on the Unicorn button, then click Advanced Command
- Under Action select Web Request
- On the Web Request URL put http://192.168.1.1/3, then None from the dropdown and save
- Back at the MixPlay screen, click Connect
- Go to your Channel page and you should see the buttons below
- Click the button and you should see the ears change colors
There is a lot of stuff you can do with Mix It Up, so definitely check out the Mix It Up wiki if you want to know more about customizing your board. As an example, when someone presses a button on Lychi’s stream, the cat ears change color and a sound effect plays – it also states who pressed it. Besides button presses, you could have event triggers change the lights as well.
If you want to use a different color or pattern than Unicorn, go to http://192.168.1.1 on your browser while being connected to the Feather M0, right click on the color you want, copy and paste it into the Web Request info. You could also just change the /3 at the end of the URL to one of these:
- /R for red
- /G for green
- /B for blue
- /P for pink
- /T for blue-green
- /Y for yellow
- /U for purple
- /Q for random color
- /1 for police
- /2 for random pattern
- /3 for unicorn
- /4 for purple pulse
- /5 for heartbeat
- /6 for strobe
- /7 for blue green pulse
- /8 for cyan yellow swap
- /9 for hacks
- /X for Christmas
Cat Ears finalization
Honestly this part is going to be a little tricky since you’re not using the exact same headphones or cat ears that was used for this version, so I apologize for this – you will have to use some of your creative skills to make this work; but I mean, if you got this far then I doubt it’ll be an issue for you. I promise that on the next version of these better documentation will be made, but for now your awesome skills will have to do. =D
Version 1 of the MixPlay Cat Ears has the ears directly attached to the headphones. That being said, the first thing to do is hot glue the ears to the headphones. If you bought cat ears that are attached to a headband, you should probably break it apart nicely so you can attach it directly to the headphones, but that really depends on you.
If you haven’t used a hot glue gun before, check this out for tips.
Once the cat ears have been attached to the headphones, put the Feather M0 behind one of the ears [the side where the headphone cable is coming down on], two LEDs in one cat ear and the other two LEDs in the other ear. If you can’t reach to the 2nd cat ear, replace the jumper wire with a longer one. If you do end up changing the wire, test it to make sure the LEDs still work. Although the photo shows electrical tape, do not do that yet as we are just measuring it out.
After confirming the wire jumper length and placement, we’re ready to solder. If this is your first time soldering I highly recommend checking this video out. Here is another video showing a great angle on how to solder as well.
Once every wire point is soldered, test it again. Slightly move the board around to see if any LEDs turn off too as that is a good indication that more soldering is needed [or that the cable sucks and needs replacing].
If all the LEDs turn on and everything looks good, place the Feather M0 and LEDs back to where you had it before. Use electrical tape and hot glue to keep everything solid, or figure out a better way to make it less ghetto – though it still looks pretty good on stream!
Hopefully at this point you have successfully made your version 1 of MixPlay LED Cat Ears! Hope you had fun creating it. Be sure to upload photos and let me know if you have any questions or need any assistance.
Thanks!
Many thanks to Lychi for soldering and putting together the cat ears [and for being a guinea pig for my experiments], adafruit for their awesome guides and hardware, Mixer for being an awesome site to put unique things on, Mix It Up and Firebot for having the ability to do what we want with ease and all the viewers who contribute to the craziness.
Future…
The next version of the MixPlay LED Cat Ears will have 3D printed parts to hide the cables instead of electrical tape, be able to detach/reattach from headphones, and have servos to be able to move up and down. And perhaps I’ll make one for me. Nah, I’ll let Lychi have all the fun with the ears.
Thanks for reading!
sorryaboutyourcats
Let viewers control your colorful cat ears? Yes please!
Guide on how to create your own @WatchMixer MixPlay LED Cat Ears that work with @MixItUpApp right here: https://t.co/HUQd26Urbq
Have any questions or need help just let me know. 🤖🤙 pic.twitter.com/XdJBQEsU2T
— sorryaboutyourcats ̡̳̙̲̭͞ 😺👍 (@SryAbtYourCats) December 20, 2018
