ArdunioDECK – a DIY OBS streaming solution on the cheap.

OMG ArduinoDECK!

Marketing is an interesting thing; We could say that we've developed a new open-source product called "ArduinoDECK" which is a cheaper solution to the Elgato StreamDeck. Or! Better idea! We could just be honest and tell you that this is a basic boy Ardunio Pro-Micro / Leonardo / Due with a keyboard digital input program that we can learn early on in our micro-controller programming hobby.

Yeah, let us go with the second explanation.

We should throw a disclaimer because we love you. This is our first time playing with the world of Arduino. So if our code sucks or if our terminology is wrong. Drop a comment below. We'll appreciate you telling us and will correct it as best as we can. Read on if you want to know more.

"Note: If you get a black screen but the audio is playing. Or you got a potato PC and it's studdering. We have fallback Links below."

Video tutorial fallback mirrors:

In case you have no-script enabled or for some reason cannot see the title video on this website. We have provided direct links for these videos. For more information about the standards we use on this site click here if you would like to know more.

  
AV1       - Link
MP4/.h264 - Link
OGV       - Link

History time! The Elgato Stream Deck.

Perhaps  a little bit of history is to understand what's all going on:

Here it is in all of its glory. The Elgato Stream Deck. A piece of hardware that is wanted by a lot of streamers within the Twitch community. This hardware allows you to easily program buttons to do fast transitions in a piece of software known as OBS (Open Broadcasting Software) which is used for live streaming. It even has customizable LCD buttons so you can put whatever you want into it giving that extra bling value so when you take a picture of your sweet streaming rig your friends will be in awe at the awesomeness of it all. We feel that after the bling wears off. It's just a keyboard with extra buttons.

Baww! You never tried it! You can't make something you've never tried.. If you had one you'd love it and be glad to pay $200 for it - Elgato sponsored content creator/"StreamCoach"(seriously, what the hell kind of title is that?)

We did have one of these devices on our repair bench as it didn't power up! Turned out to be another wiring issue but we were playing with it to make sure it works before sending it back to the customer. We realized that we looked less and less at the graphics on the Stream Deck and just did transitions by feel and touch. So it begs the question of the overall worth of the Stream Deck. If you are gaming so fast that you're not even looking at the device? If that's true; What's the overall purpose of even having pictures on it?

But it's something that never has been done before! - Pretty much anyone born after Y2K.

History time! - Sony Analog video editing console.

One of Elgato's other markets beyond gaming is video editing. The video editing world has always been an expensive venture. Especially when you have customized hardware to streamline your workflow. There has been a share of many video decks out there throughout time. So to say that it's new is not accurate. But is the Elgato Stream Deck new and revolutionary? Hell no! And here is why.

Extra keys for your keyboard!

 

Amazon's basic boi is basic!

From a mechanical standpoint, it's no different than having a numeric keypad. Except that instead of the keys locked to a particular state for numbers only you could assign them anywhere. We'll be destroying that feature in a moment.

The keys have LCD's in them making the icons unique! Pictures and icons are cool! No one has ever done that before!

Enter the Optimus Maximus keyboard.

 

The LCD portion isn't a new thing either as back in the early 2000s there was a keyboard manufacturer called "Optimus" that sold an all-LCD keyboard which was brutally expensive costing over a thousand dollars. We did have the opportunity to type on one of these at a gaming convention many years ago and frankly. It was not even good to type on. Like Elgato, the marketing approach for Optimus was all about luxury and how badass it looks on your desk. Not necessarily form and function. As a note, these keyboards were also hard to keep in operating shape as you have 100+ LCDs that could fail at any time. To us, we view the Optimus as a complete and catastrophic failure to those ends. If glamour gets in the way of function then you've failed at both.

Screw this! Let's build our own!

 

Special thanks to TheMazelle for bringing this up. His twitch profile is right here if you want to check him out. If you as a reader want to get a shout-out to give me an idea to blog! Pretty simple right? ;)

I initially was not even thinking of doing this type of blog entry until one of my friends on Twitter said something about this. Now, saying that you'll be a millionaire doing it is going a little far! But I decided to go down the road of what it takes to build your Stream Deck out of an Arduino.

 

On a modern keyboard - Press SHIFT+F1 = F13 and so on.

As I was thinking of this. Keyboards had more than 12 function keys. Because of the POS and industrial computing industries, these keyboards are still supported to this very day. So why the hell not use function keys that no modern game in their right mind would map to? Perfect. Let's make an Arduino using F13 through F24 keys. So, how about we build an Arduino-based keyboard that has F13 through F24 so we can map them whatever we want? Let's get those parts together. Let's begin.

The ArduinoDECK build - Design.

This is the design we are going with. We're essentially going to use every data port the pro-micro gives us. D2 through D10 and D14 through D16 gave us 12 pins. The reason we're designing this way is we want it as simple as possible for anyone to build.

It is based on the very first Arduino digital input tutorials that you learn. That Pin 5 which is Digital Pin 2 goes to a switch which then goes to the ground. When the switch is pressed digital input will read "0". When the switch is released then digital input will read "1" This is repeated twelve times with ground being shared between all switches. But each switch going to its on the digital register. Since you're not multiplexing or anything this would be the fastest input your chip can receive. More complex/optimized designs will come as I learn more about Arduino and general electronics.

 

About pull-up resistors and other types of Arduino's.

One of the cool features of the Arduino Pro-mini/Leonardo is the fact that the ATMEGA32U has internal pull-up resistors. Meaning, that with a simple command, you can bring a pin into a "HIGH" state or "1." If you use another type of Arduino; Then a 1k resistor tied to 5v VCC will be required to prevent what is known as "pin-float".  Pin-Float is what happens when you have a digital pin tied to absolutely nothing. And "float" in a circuit is bad. It means it'll jump between "0" and "1" whenever it feels like it! So by adding a pull-up resistor, it keeps it stable and the pin is set for "HIGH" or "1" and when the button is pressed it then changes this pin to ground or "0".  If you bought a Pro-Mini or Leonardo you don't have to worry about this whole resistor mess.

 

The ArduinoDECK build - Hardware Assembly.

Since this is going to be a bit of a hardware DIY; We're of course going to need parts. I should note to anyone that these are parts that we used in our blog and thus you don't have to follow these instructions to the letter. Meaning, that if we use say, mechanical switches for our buttons. And you do happen to have a lot of HAPP arcade buttons laying about. Go ahead and use them! Whatever makes it the most comfortable to work with and ultimately makes it look cool for you.

Here are some of the parts that I have used:

• 1x Ardunio Pro-Micro - The model we got was a Chinese variant of the Arduino Leonardo. As long as the chip you get has ATMEGA32U4 on it! Only that chip has USB support for keyboard emulation to work. Atmega328P's are great for controlling LED Circuits and the like but won't give us USB support. - Cost: $3-5 (USD) eBay
• Header Pins - We'll be soldering these onto our Arduino and ideally you should also get female header pins as well so you can remove them from your PCB. In most cases, these will come with your Arduino upon purchase. Cost: Less than $1 (USD)
• Single-Sided Perf PCB Board - Ideally the bigger the better as you can always clip off the excess you don't want. We got ours (without terrible hole drilling) for about $1.75 (USD)
• Mechanical Switches - We picked up some knock-off cherry brown switches for $4.70 for a pack of 30!! You can order just 20 to cover the 12 switches you need for about $3 (USD)
• USB-Mini to USB-Male-A cable - This will probably be the most expensive part of the project (sad but true!) Now if you're handy with a soldering iron you could probably desolder the old connector off of of the Arduino and put your cable on. But for this experiment. Now if you want to play around on the Chinese market you do so at your own risk from a few pennies to 1(USD). Otherwise, a quality branded cable will set you back $4-5 (USD)
• Some wire - we salvaged wire off of an old printer. but if you were to buy this on eBay then you can get some Dupont grade rainbow wire for about $1 (USD)
• Key Caps - Since we did a giant review of the Red Dragon keyboards we had a bunch of those shitty typewriter key-caps left over. Recycling is the best but key-caps brand-new can be a little pricey. about $5-10 (USD) We personally would recommend finding either broken mechanical keyboards or finding some membrane keyboards that work at goodwill. just take one of your mechanical keys to size fit.

Total?

About $11 (USD) on the cheap and about $27 if you buy in higher-numbered bulk or go with more quality cabling. Which is still financially better than a StreamDECK mini or StreamDECK regular costing between $50-200 bucks! The best part of a project like this is you're going to learn a little about how micro-controllers work.

What about tools?

The biggest tools you'll need are as follows:

• Soldering Iron - Solder sucker, Soldering Lead - Kind of important to get everything together.
• Rotary tool - great for drilling holes (even when drunk) and also it's great for cutting/shaping your PCB.
• Snips/Stripper hand tools - for the extra wire.

I don't factor tools into the price of a DIY because tools are sort of permanent in any hacker's toolbox. Once you buy them you use them for any/every project you get your hands on. in other words, tools eventually make their money back if you use them enough!

Ahhhhhhh!!! I hate soldering! I suck at it!

Well, practice! Get better at it cupcake!!! Keep melting metal until you can make little animals out of it! AAAAAH!

Terminal Wiring Alternative.

They do make such beasts as "Terminal Breakout Boards" where you plug your Arduino into a board like this and simply strip wires on one side, screw them down into each of the terminal pins and string them over to your buttons (especially if you have arcade buttons that use alligator clips.) this is a highly versatile way of working with an Arduino because if you fuck up you can simply re-wire and try again (provided of course no smoke came out of your chip!) If you can only find breakout boards for the Arduino ATMEGA328P. Don't worry; It will still work! You just have to remove those pesky numbers off of the board as they won't represent the pin-outs of your ATMEGA32U chip! The extra cost is anywhere from $2-8 (USD).

Breadboard for prototyping circuits.

 

Later on, in this build, we're going to be soldering the Arduino directly to the PCB. This isn't a good idea to do first try as you could damage your chip or burn out something bad! You should probably use something like a breadboard to test out your circuit before breaking out soldering or building custom PCB boards. Breadboards are super-great for prototyping a circuit without having to solder anything.

Holes and sizing your parts.

 

NewGiant knock-off Cherry Brown Switches. Because we're not feeling up to paying $2-3 apiece for legit Cherry.

The first thing we're going to have to do is size up our buttons. This will be important if you make PC boards or if you decide to have arcade buttons on how you want to drill out that external casing. In our case, we have a stem that drops into the PCB that normally gives the key-cap structural support. Also, the copper legs are off by a few millimeters which will make it more fun to use a perf-board like what we're doing. When we size up our holes we need to take a file to a few of the holes to make them bigger so the pins fit into our perf board. I should also note the little 2mm-6mm window on the bottom of the key-cap frame. That is in case you have surface-mounted LEDs on your board so you can shine some RGB lighting action up to your keycaps. Perhaps in the future, we'll try to tackle that. For now, it's function over form!

 

Oh, dear God.

Now, a normal person would've measured and sketched all of this out. NOT US! Nope! The moment we received the tweet we reached into our bin of parts and started pressing them into the perf-board! Drilling and sizing up again. Until we came up with a half-assed design of how we're going to cram 12 keys onto such as tiny perf-board!

We think it's important to document this because even when you screw up hard as we did you can still assemble and win at the end of the day! You just have to think about how you're going to fix those mistakes later. For now, we're just out to make it work. We can re-enforce it with hot glue or hell start over and make a legit PCB later.

So the first step and probably the hardest step of planning and inserting the keys into the perf-board is now complete. let's move along!

Next, we solder the header pins to our Arduino.

Whoa Whoa WHOA!!! There was clearly a hole in the corner of  your PCB "S"! What are you trying to pull here?!?

You're right! We initially thought it was going to make a sub-board underneath the keyboard buttons and have wires go back and forth. But ultimately it was decided to chop 4 pins off of the Arduino (VCC 5volts, Reset, Ground, RAW) and mount it right to the edge of the board. In another scary move, I soldered the header pins right to the perf-board. The reason why we did this is to give the Arduino a super-low clearance so the F17 key cap doesn't go smashing into our board. Looking at the layout we decided at the last minute to do 180 degrees the board. So that F13-F14 is our start-stream / Start Record. F15-F16-F17 is our previous track, pause, and next track in WinAMP. Or a music player of choice! F18-F19-F20-F21 is our scene transitions within OBS. Last but not least F22 is mute main audio, F23 mute microphone, and F24 mute Discord.

The first thing that we do with the extra bits of wire that we have (Reds and Oranges) is we're going to wire up "Common" which is what every button in this circuit connects to. In our case, the common connection is to Ground pin 14 which you probably have seen us connect on the top of the Arduino in the picture prior. It's a bit tricky doing it with a dotted perfboard because you have to splice a lot of wires together on each solder point. You've probably noticed there's a jumper on this board that breaks the connection to common. We did this so that no interference to the Arduino would come into play in case we wired it up badly. Luckily everything was totally fine! If you are doing this in a non-soldering fashion you would probably want your common wire wrapped into an electrical screw-on cap.

Next, we got the yellow and white wires coming into play and mapping each key to a digital pin on the Arduino Pro-Micro. 12 Digital-Pins = 12 function keys. Lovely! Although that Soldering job isn't anything to write home about. ;) Without getting too carried away with making a custom case or keycaps. We're done with the hardware portion. It's just a bunch of wires and switches. Now we're going to need to tell the Arduino what the hell to do!

Programming your ArduinoDECK!

Now that the hardware is all taken care of we move on to the software section. The guys at Arduino made it incredibly simple to work with micro-controllers in respect that you don't have to memorize hex addressing or the EEPROM itself. Nor do you have to know your peek or poke addressing to store values. You don't even have to fight with a limited set of registers for your value handling. Everything is handled like a script. Which makes this program awesome. Head over to the Arduino homepage and go to software > downloads and download the latest Arduino IDE. If it asks you to install any extra libraries or device drivers permit it to do so.

After you install the program this would be the time you'd plug in your Arduino. Our Pro-Micro shows up as an Arduino Leonardo by default which is kind of awesome. If you purchase one from SparkFun it may show up a little differently. But the thing about how you program your first Arduino is that it opens up a virtual COM serial port of sorts for you to dump data down into it. This COM port will shift depending on what state it is in so do not be alarmed if after you program it that COM port jumps around. Your COM port jumps because your Arduino is changing its state from being just an Arduino to a virtual keyboard or whatever else you want. Keep your device manager open as you are programming as it will help you during this process.

Next, we will select the chip we are programming. This is crazy important to do! If you choose the wrong chip it may not program or worse it'll show up as an unknown device afterward. Trust us we found out the hard way!:) The way to recover from it is by jumpering the GND (ground) and RST (reset) pins on the Arduino. What this does is it'll reset the Arduino and put it into a default state for 5 seconds before loading its program. During this default state, you can blast another program down via IDE to recover your Arduino.

Our program.

I have provided a link to our Sketch file so that you may download it and slam this onto your own pro-micro. But, we're going to go through everything in our script.

#include <Keyboard.h>

void setup() {
                pinMode(2,INPUT_PULLUP);
                pinMode(3,INPUT_PULLUP);
                pinMode(4,INPUT_PULLUP);
                pinMode(5,INPUT_PULLUP);
                pinMode(6,INPUT_PULLUP);
                pinMode(7,INPUT_PULLUP);
                pinMode(8,INPUT_PULLUP);
                pinMode(9,INPUT_PULLUP);
                pinMode(10,INPUT_PULLUP);
                pinMode(14,INPUT_PULLUP);
                pinMode(15,INPUT_PULLUP);
                pinMode(16,INPUT_PULLUP);
}

void loop() {
                       Keyboard.begin();
                       if (digitalRead(2) == 0) 
                      {
                                        Keyboard.press(KEY_F13); 
                      }
                       else if (digitalRead(2) == 1) { 
                                        Keyboard.release(KEY_F13);
                      }


                       if (digitalRead(3) == 0){
                                        Keyboard.press(KEY_F14);
                      }
                      else if (digitalRead(3) == 1){
                                        Keyboard.release(KEY_F14);
                      }


                      if (digitalRead(4) == 0){
                                     Keyboard.press(KEY_F15);
                      }
                      else if (digitalRead(4) == 1){
                                     Keyboard.release(KEY_F15);
                      }

                      if (digitalRead(5) == 0){
                                     Keyboard.press(KEY_F16);
                      }
                      else if (digitalRead(5) == 1){
                                     Keyboard.release(KEY_F16);
                      }

                      if (digitalRead(6) == 0)
                     {
                                     Keyboard.press(KEY_F17);
                     }
                     else if (digitalRead(6) == 1) {
                                     Keyboard.release(KEY_F17);
                    }

                    if (digitalRead(7) == 0){
                                     Keyboard.press(KEY_F18);
                    }
                    else if (digitalRead(7) == 1){
                                     Keyboard.release(KEY_F18);
                    }

                    if (digitalRead(8) == 0){
                                     Keyboard.press(KEY_F19);
                    }
                    else if (digitalRead(8) == 1){
                                     Keyboard.release(KEY_F19);
                    }

                    if (digitalRead(9) == 0){
                                     Keyboard.press(KEY_F20);
                    }
                    else if (digitalRead(9) == 1){
                                     Keyboard.release(KEY_F20);
                    }

                    if (digitalRead(10) == 0)
                    {
                                    Keyboard.press(KEY_F21);
                    }
                    else if (digitalRead(10) == 1) {
                                    Keyboard.release(KEY_F21);
                    }

                    if (digitalRead(14) == 0){
                                    Keyboard.press(KEY_F22);
                    }
                    else if (digitalRead(14) == 1){
                                    Keyboard.release(KEY_F22);
                    }

                    if (digitalRead(15) == 0){
                                   Keyboard.press(KEY_F23);
                    }
                    else if (digitalRead(15) == 1){
                                   Keyboard.release(KEY_F23);
                    }

                    if (digitalRead(16) == 0){
                                   Keyboard.press(KEY_F24);
                    }
                    else if (digitalRead(16) == 1){
                                   Keyboard.release(KEY_F24);
                    }
                    Keyboard.end();
}

 

Holy shit that looks confusing!

Alright! I've commented as much as I could within the sketch file but we're going to break down what is all happening here. Starting from the very top.

Header files.

#include <Keyboard.h>

Including header files allows us to bring in code that is commonly used for Arduino sketches. In this scenario, I've called upon the Keyboard.h file which is required to tell our Arduino to give us the libraries capable of turning our little chip into a keyboard. If this is your first time programming header files; These files keep programmers from having to reinvent the wheel on every program.

The setup.

void setup() {
 *DATA GOES HERE*
             }

We are now going to tell our program to enter setup mode. Instructing what exactly the Arduino will be doing with its I/O. In our case, we want a lot of digital inputs.

pinMode(2,INPUT_PULLUP);

We're going to define pinMode on pin 2 (Clearly marked on our chip) to be an INPUT and not only be an INPUT but to INPUT_PULLUP activating the pull-up resistor built into our chip so we don't have to deal with adding 1k resistors to +5vdc like other Arduino chips out there. This process repeats itself over and over again for pins 2-10 and pins 14-16 and we finally close the setup loop with a "}" indicating we're all done with the setup.

The MAIN loop.

void loop() {
   *EVEN MORE DATA GOES HERE*
      }

We've set up our headers. And we've defined what our pins do. Now we enter the main loop that our chip will process as fast as 16Mhz will let us which is hella fast!

Keyboard.begin();

Pulling from the keyboard.h file. We're going to now initialize keyboard control. Now, we could place this into our setup loop. But that can get a little dangerous as it could accidentally take over which we do not want to have to happen. It's better to start and stop keyboard processing within the main loop itself.

if (digitalRead(2) == 0)

We're going to check to see if pin 2. A.K.A "F13" button is pressed or connected to the ground.

{
        Keyboard.press(KEY_F13); 
}

If the statement of "0" for the ground is true. We issue the command to press KEY_F13 on our keyboard.  mind the brackets as they begin and terminate that if statement.

 else if (digitalRead(2) == 1)

But what if the key is not pressed? What if it's HIGH or "1"?

{ 
       Keyboard.release(KEY_F13);
}

Then we let go of the key on the keyboard. There are plenty of ways of writing this statement as we could document later in this blog. But this if/else statement allows us to press as few or as many keys as we want AND sustain that key in the event we're using it for chatting. Just like our void setup statement this also cycles 12 times for each pin and represents each key.

Keyboard.end();

After all of our digital pins are processed we end our keyboard connection gracefully at the end of our main loop. Once again, this is to keep the Arduino from completely taking over your keyboard.

I want to press multiple keys. Like a kill program ctrl+f4

Referencing Arduino's Keyboard Modifiers :

 if (digitalRead(2) == 0) 
    {
                  Keyboard.press(KEY_LEFT_CTRL); 
                  Keyboard.press(KEY_F4); 
    }
    else if (digitalRead(2) == 1) { 
                  Keyboard.press(KEY_LEFT_CTRL); 
                  Keyboard.press(KEY_F4); 
    }

 

What if I want a key that isn't on the keyboard to be mapped?

Using AsciiTables you can call upon the hex code of a key you are pressing.

Keyboard.press(0x41);

For the hex version of the letter "A" or:

Keyboard.press(65);

For the decimal version of the letter "A" or:

Keyboard.press(0b01000001);

If you want to get all binary!

Other notes of programming.

Now, in many situations, you should probably put a:

delay(50);

In each If/Else statement after you press a key to eliminate potential de-bouncing (false pressing of a key due to static electricity or wiring issues). But we didn't see a need for it.

Sending that program to your Arduino.

 

Once you've programmed everything you can smash that upload button to send your program down the COM port to your Arduino. Provided you didn't screw anything up as we did such as missing semi-colons or placing a statement bracket in the wrong place it should write to that COM port and reboot the Arduino. This, of course, will make Device Manager go little nuts as the COM port reconfigured itself and if all goes well you should see an HID-Compliant keyboard appear as well. At this stage, you should be able to test your program and see if it works to your liking.

Bonus round: Adding a case to your ArduinoDECK!

It's just a circuit board for $12! That's hardly a Finished product! - Anonymous

We got a lot of crap when we published this article the first time around. Because we only showed a circuit board and nothing else.

 

We tend to view a project similar to Raspberry Pi. Especially since this too is a board that you can hack and DIY however you want. Now, for those wondering we did make a case for our ArduinoDeck using 8x 4mm plates of black plexiglass sandwiching the PCB and stabilizing it while the two fasteners lock everything in place. Also, we decided to recycle the rounded keycaps off of our RedDragon K556-R as they were just sitting in a box doing nothing! Perhaps down the road we'll polish the keys and re-label them with vinyl. We may publish the SVG file of our case layout for those who also have a CNC Router. But for now, pictures will have to make due!

 

A few of the layers in the back are open allowing us to hook our Mini-USB cable to the Arduino Board as if this is just another device.

 

This is detailed with the IBM font vectored spelling out "ARDUINODECK" and etched into the black acrylic with a tapered router blade. This is just a demonstration as to how nicely you can encase a bunch of scrap PCB perf board and wire and it still looks like a consumer-grade product.

06/29/2020 - Damage Report!

We're not sure if we call ourselves respectable bloggers. But we wanted to show you something that happened to our ArduinoDECK.

We only plugged this in a few times before this happened. The Mini-USB port off of our Arduino Pro-Micro is falling right off. Now, the good news is with a little bit of desoldering and cleaning of the pins it's as good as new. But the major takeaway on this project is in the future if we are forced to use the Micro-USB connector of an Arduino to at the very least solder the grounding pads on either side of the connector. You see, one side gave way and with how little solder china was placed down on the board it was very easy for all of the pins to simply pop away resulting in the damage that you see in the picture.

We now soldered the hell out of the grounding pins as well as re-tinned the contacts below and that connector is going nowhere.

 

Final thoughts.

This is one of our very first Arduino projects. And coming from an era of 4-8-bit computing where you had to learn how to PEEK and POKE you're addressing to access I/O or hell even get a certain color to appear on your screen. This is phenomenal. If you found this project useful DO NOT DONATE TO ME! Instead, you should donate to the Arduino project so they can continue to update their IDE and make even better open-source projects for the world. However, it lacks aesthetics because it doesn't have a highly polished case or beautiful LED key sets. It's fully programmable and made for under $12 US dollars in our case. Most importantly, as demonstrated in the video. It serves its function of being a transitional system for our OBS whenever we stream.

 

Until next time, don't die. And may the server protect you.

 

+++ END OF LINE.