Make 3D Printed DIY Stream Deck with Arduino Microcontroller Board

Make 3D Printed DIY Stream Deck with Arduino Microcontroller Board

The Elgato Stream Deck is a control key pad with an LCD display behind the buttons, which allows users to program custom shortcuts to their livestream software, games and various other applications. It’s very convenient for users to quick switch among different applications.

 

Now more and more people are engaged into online live streaming on various social medial platforms and thus increasing demand for Elgato Stream Deck occurs. But it’s a little expensive and sometimes difficult to buy one from online stores especially at this hardest time of corona virus pandemic broke out. Today we’re going to learn with Alex from the YouTube channel named Super Make Something, how to use Arduino microcontroller boards and 3D printed parts by Anet ET4 Pro 3D printer to build open source version stream deck at home.

 

I - Design Concept

 

As the idea comes for saving money and easy making, the design will follow some basic rules.

 

  1. All electronics parts can be easily purchased at low prices from online stores like Amazon or AliExpress.

 

  1. The design should use pre-made electronics assemblies wherever possible, meaning no individual chips.

 

  1. Common parts like resistors and LEDs should be through-hole instead of surface mount for easier soldering.

 

  1. The total price of all components in the bill of materials should cost no more than the price of an official Stream deck.

 

II – List for the Making

 

Necessary

3.5in TFT LCD Screen *1

Arduino Pro Micro *1

Arduino Nano *1

SD Card Breakout Board *1

6mm Push-Buttons *1

Rotary Encoder with push button *1

Male/Female Header Kit *1

Ribbon Cable *1

4GB Micro SD Card *1

M2 / M3 Screw Kit

20x20mm Acrylic Squares *1

Anet ET4 Pro 3D Printer *1

 

Optional

Resistor Kit *1

Slow Flash RGB LEDs *1

 

III - Design DIY Stream Deck

 

To follow the rules of reducing the cost, Alex decided to design a stream deck with 6 programmable keys and 2 rotary encoders, which the official Stream Deck does not have.

 

The smaller size will allow us to use an Arduino Pro Micro microcontroller boards and a 3.5 inch color LCD screen is enough for the design. And the Arduino microcontroller using an ATmega32u4 chip can emulate a USB keyboard.

To full use the function of the encoders, mounting push buttons on will help for handy video editing, quick scrubbing through videos and adjusting audio levels.

 

To go further into the design, Alex started his project with the electronics.

 

Because the LCD screen has no internal memory, icons for the Stream Deck are stored on an SD card, which interfaces with the LCD screen and microcontroller through an SD card reader.

 

Unfortunately, the Pro Micro does not have enough input-output pins to connect to both of these components and sense button inputs, so he added another microcontroller, an Arduino Pro Nano, to the design in order to handle loading icon images and displaying them on the LCD screen.

This essentially separates the hardware for this project into two parts: one which is responsible for handling all of the display tasks, and one which simply senses button inputs and sends USB keyboard commands.

To enable the DIY Stream Deck to store more shortcuts than the number of physical keys on the device, both microcontrollers need to be able to coordinate when a "folder" button is pressed, which both loads a new set of icons and changes the keyboard commands that are sent by each button.

 

To accomplish this, one input/output pin of each Arduino is connected together, which can be used to send signals back and forth between the microcontrollers to coordinate what keyboard shortcuts and button icons should currently be active.

 

This project has a lot of interconnected components, so it would be impractical to wire everything by hand.

 

To make the project more robust and more easily reproducible, therefore Alex decided to create a set of printed circuit boards for the Stream Deck using the PCB design software EAGLE.

                                                

While the details of using Eagle are outside of the scope of this video, the PCB design process essentially boils down to placing the components that you would like to use into a schematic and connecting them together appropriately using virtual wires.

 

After the schematic is wired up, it's then necessary to physically lay out the components on a virtual circuit board to describe how the boards should be manufactured.

 

In this design, the Arduinos, SD card reader, and LCD screen mount to a "motherboard PCB," and the components to sense all of the inputs are connected to a second "button PCB," which has square windows milled into it in order to be able to see the icons displayed on the LCD screen.

During the final assembly, these circuit boards are then connected together using a wire ribbon cable.

 

Once the physical layout of the boards was complete, it was time to create a set of Gerber files, which would let a circuit board fabricator know how to manufacture each board.

After zipping everything up, Alex went straight ahead to PCBWay.com and uploaded the files to their online system to make the circuit board.

 

PCBWay offers DIY circuit board making service in various types of PCB fabrication services for any budget depending on the options you choose when you upload your file.

 

 

In less than a week, Alex received the circuit boards and the quality was awesome.

 

After about 30 minutes for soldering, Alex got two awesome looking circuit boards that were ready for programming.

 

IV – Mechanical Component Making

 

 

While waiting for the circuit boards to arrive, Alex designed and printed the Stream Deck's mechanical components with Anet ET4 Pro 3D printer.

 

The cool thing about EAGLE is that it's made by Autodesk, who also make the Fusion 360 3D modeling software.

 

Because of this, full 3D models of the assembled circuit boards can be imported into Fusion

 360, which made it incredibly easy to design an enclosure around the project's electronics.

 In this design, an LCD screen is located underneath the button PCB.

 

Each Stream Deck key is made up of a 3D printed button frame with a clear acrylic insert.

 

These keys sit on top of four pushbuttons on the button PCB, which creates a rugged, simple mechanical button mechanism without needing to purchase other components like springs.

 

The four buttons underneath each key are wired in parallel to ensure that input will register no matter how a Stream Deck key is pressed.

 

To make the Stream Deck look a little cooler, Alex used Fusion 360's Voronoi Sketch Generator to cut a cool pattern into all of the surfaces of the enclosure which not only saved some material, but also made everything print a little faster.

 

Once the mechanical components design was finished, Alex exported STL files and opened them in Cura.  After configuration of all the print options, Alex sliced each model and generated G-Codes, and printed them out on an ET4 Pro, a desktop FDM 3D printer made by Anet.

The printer comes as a kit that is mostly pre-assembled, which can be out of the box and up and running in less than 10 minutes.

 

The printer has a 220x220x250mm build volume, and includes multiple advanced features like silent stepper motor driver, automatic bed leveling, filament runout detection, and power loss resume functionality.

 

Sticking with the open source nature of this project, the printer can now also run the open source Marlin printer firmware, which is awesome for advanced users to further customize their machine.

 

Best of all, the printer is often available online for about $200.

 

For those looking for a machine with a larger build volume, Anet also makes the ET5 Pro, which has the same features as its smaller sibling, but can print models up to 300x300x400mm.

After about 19 hours, the printer made 11 parts including 1 Stream Deck base, 1 Stream Deck spacer insert, 1 Stream Deck top cover, 2 encoder knobs, and 6 button frames.

 

V - Programming

With all of the parts done printing, it was now time to program the electronics.

 

First, we can head to Arduino.cc to download and install the Arduino programming environment.

 

Next, go to the Super Make Something Github site and download all of the project code as a ZIP file on the open source Stream Deck page which was created for the project by Alex.

 

Extract contents from the ZIP folder and copy 'LCDWIKI_GUI' and 'LCDWIKI_KBV' folders into the directory shown on-screen.

Then Alex copied the 'arduino TFT_icons' and 'Stream Deck Keyboard' folders onto his hard-drive, where he could easily find them later.

 

As stated earlier, the stream deck uses separate Arduinos to emulate a keyboard and display icons on the LCD screen, so they must be programmed separately.

 

Plugging the Arduino Nano into his computer with a mini-USB connector, Alex first opened the `Arduino TFT_icons.ino' file to program the Arduino driving the LCD screen.

 

In the Arduino IDE, Alex headed to 'Tools' -> 'Board' and made sure that the 'Arduino Nano' option was selected, and then went to 'Tools' -> 'Processor' and made sure that the 'ATmega328P (Old Bootloader)' option was checked.

 

After verifying that the right COM port was selected, we should click the 'Upload' button, which compiled the code and upload it to the Arduino Nano.

 

The next is to program the Arduino Pro Micro.

 

Connecting the microcontroller to a computer using a micro-USB cable, we open up the 'stream Deck Keyboard.ino' file.

 

Next, heading to 'Tools' -> 'Board' and we select the 'Arduino Leonardo" option.

 

After verifying that Alex had selected the correct COM port an again clicked upload, which compiled the code and uploaded it to the Arduino Pro Micro.

 

One thing to note is that the power lines of both Arduinos are connected together, so it's only necessary to plug in the micro USB cable into the Arduino Pro Micro to connect the Stream Deck to the computer after assembly.

 

VI – Final Assembly

 

 

Now that the Arduinos were fully programmed and we can put everything together.

 

1.With two M2 screws we attach the SD card reader to the 3D printed base together first.

 

2.Insert the motherboard PCB into the base and attach it with three M3 screws.

 

3.Carefully insert the pins of the LCD screen into the female header pins on the motherboard PCB in the orientation shown on-screen.

4.Insert the spacer into the matching recess in the base, and then attach the keyboard PCB to it using four more M3 screws.

 

5.Gently press the 20x20 mm square acrylic pieces purchased online into each button frame, and then lay them over each of the button slots as shown.

 

6.Place the top cover over the buttons to keep everything together, which attached to the 3D printed base with four more M3 screws and finally pressed the two 3D printed knobs onto the encoders, after which the Stream Deck assembly was complete!

 

7.The final step is to create icons that would be displayed on the LCD screen.

 

We can follow on Alex’s the Super Make Something Github page to create your own PhotoShop icon templates.

 

Icon requirements:

Each icon is 120x120 pixels and can be filled however you want, as long as the icon files are saved as 24-bit BMP files.

 

Because of the screen orientation inside of the Stream Deck, the icons also need to be rotated onto their side.

 

The file name of each icon corresponds to which Stream Deck key they will display under, with numbers larger than six indicating that this icon will be displayed on a second page.

 

To add more pages, simply modify the Arduino code by copying the corresponding. If statements and changing the file names and desired keyboard shortcuts.

 

Be sure to check out the Arduino code for an example of how to do this.

 

8.Save all created icon files to an SD card and insert it into the SD card reader on the bottom of the Stream decks base,

 

9.The left to do is to map the keyboard strokes sent by the device into OBS, Stream labs, or any other software that you want to use with.

 

Actually Alex used the DIY Stream Deck he made to edit the tutoring video of this article in Sony Vegas and it worked extremely well, because the encoders were handy for quickly and precisely scrubbing through my editing timeline.

 

According to Alex, the final price for this DIY project also came in at less than an official Stream Deck, while adding more functionality, so this project was a huge success. And he used the DIY stream Deck as a permanent fixture for streaming, video editing, and gaming.

 

All of the design files for this project are available for free at the links below Alex’s original video of the DIY stream deck making. Welcome to visit his channel and give a like on his videos.

 

Article original video:

Thanks again to Alex and his marvelous video about the DIY making of a stream deck. And also he is hoping others will use these files to create enhanced design of the DIY Stream Deck and grow into an open source project that is widely supported by the electronics community.

 

 

 

If you have any questions, please feel free to leave comments down below, our guys are waiting to help you. Joining our community is also a good idea, you can get information, model files, g-code files, tutorials and find the enthusiasts as you are. It's a place where creative people gathered, just hit the link: https://forum.anet3d.com/

Previous article Comparisons for Three Different 3D Printer Leveling Sensors
Next article 11 Online Makers to Turn Images into 3D Printable Lithophane Lamps

Leave a comment

Comments must be approved before appearing

* Required fields