After I had the Youtube/Twitch/MongoDB components working, I moved onto sending the data to my Arduino Uno via Serial. This was accomplished using the NodeJS Serial library. Initially I was sending a hex string, then validating on the Arduino, splitting it into RGB values and then setting the data. This caused a lot of issues though, first it was slow, second it caused the arduino to run out of memory if too many messages were sent at once ( I didn’t find this out until I could test with the leds).

Architecture Status:

Building the circuit board:

To control analogue RGB lights, I based my circuit on this circuit guide by Adafruit. However, because I was dealing with 24v LEDs, I needed a mosfet that could handle it. I sourced the parts from 3 places: Arrow, Sparkfun, and Amazon. The power supply I used is a MEAN WELL LRS-350-24 350.4W 24V 14.6 Amp PSU. After breadboarding the circuit and confirming it works I drew out what I wanted the final circuit board design to be. From there, I built it. I used terminal blocks for the ground wires and LED connections. Because I was using perfboard, I had to create my own solder traces by connecting each hole individually with solder.    

Fast – forward video of soldering the circuit: 

Circuit drawing on paper: 

Circuit schematic: 

Another data source I wanted was YouTube chat, but found a big issue with it. You are only given 10,000 credits to use on the API for every 24 hours. With each read of the polling based API (not a modern real-time streaming API like Twitch) it costs 1 credit. After running the numbers I would burn through that API limit in ~2.5 hours. So I moved to using Selenium with Chrome webdriver to load the chat data. This posed some issues that can be read about here. The best part about this method is it loads the site once, queries the DOM elements, and streams the data to my internal router. All of the hashing of usernames that happens on the Twitch Bot happens here, as well*. Also, due to Python using “False” for boolean false which differs from JavaScripts “false”, I had to add code on the nodejs side to deal with this. * Note this would change dramatically by the end of the program. The hashing is moved to the individual components.

Initial website development

In addition to Twitch I wanted to have a website to allow users who don’t have a Twitch account to be able to interact with the project. To get started with this, I started making the project on Glitch.com, a site that lets you easily host your NodeJS site and edit it in the browser. I started with a proof of concept site:   The quick color choices were manually-created form buttons, and the color picker was made using “a-color-picker”. Once I got the buttons and color picker sending data to the backend server via a POST request to the “colorsubmit” endpoint, I implemented some security measures: CORs, origin checks and input validation. The website blocks POST requests made to it from outside sources. After receiving the data successfully I needed to send it to my computer. I did this using the library SocketIO, a websocket implementation, to make dealing with websockets easier. To secure the socket I passed it a key from my desktop client and checked for a match.  At this point the site looks like this:   

Making a better website: 

After learning how to implement SocketIO on Express for the web server, I implemented it into my localhost program. I pushed the data to a local SocketIO room, and created a MongoDB listener for it that inserted the data being sent to a database.    After working on the internals of the program more, I moved back to working on the website with the goal of redesigning it and learning ReactJS along the way. I created a mockup of the site in Figma:   

The architecture now looks like this:

A Twitch Bot is a program that hangs out in your Twitch chat waiting for a command whether that be deleting spam comments or responding to someone asking how long you’ve been streaming. In my case, it was going to listen for color commands. 

Building the color commands:

I wanted people to be able to easily change the colors of the lights. After trying to find a Pantone color list with hex values, I moved onto a well known list of colors: HTML Web Safe colors (I modified this list). Using this list allowed me to have a nice hex color code reference for all of the named colors.  Example: Chartreuse is #7fff00. In order to easily decipher between normal chat and a color command I went with a text format I’ve seen used of adding an “!” before the command. I also wanted to give the user a choice of a custom color, so I also added “#” to signify a custom hex color. This basis around hex would become the core of the application.   

Messages: 

Building the Twitch bot was straight forward using the TMI library. I checked if the message started with a “!” or “#”, then checked if the “!” command was in my list of colors, if not the program moves on. If the command starts with a “#” the program checks it is a valid hex.   Once this was working, I built out a class to send data internally, and used it to send data to the Express Server. At this point, I decided to establish a data schema that would persist throughout the application and hashing using MD5 usernames, so I could determine the number of unique users while not storing their names. 

Schema: source, msgUsername, validColor, hex, “#HEXVALUE”.  Eventually this would be updated to:

{ source: source, username: MD5(“username”), validColor: True/False, hex: True/False, color:  ‘#000000”, red: RedValue, green:  GreenValue, blue:  BlueValue dateTime: new Date()   };  

Architecture Status:

At this point, the local Express server is sending the color messages it received to a MongoDb database directly. I knew this would become an issue but moved onto the website component.

By May I knew I wanted to break up the project into components or loosely coupled classes that would allow as many data inputs as I wanted and as many outputs. To do this I initially used ExpressJS and SocketIO to build a router to push data around my system. I now know Express is one of the slowest web servers for NodeJS and is not made for this. I had it setup to accept a Post request to the “sendcolordata” endpoint running on my machine. The internal components, like the eventual MongoDB component and Arduino component, would connect to the SocketIO server running on the “internalcolordata” room. Going with this architecture, Message Oriented Middleware, allowed me to build individual components like a website to control it, and easily test each component. Another benefit to this architecture was it allowed the files to act as microservices, so if the Twitch component failed or the Mongo component failed, the whole program would stay up. This also allowed me to implement a queue system, initially using Bull, later Redis for color commands.

For the first half of the project this was the architecture:

Then this: 

Then finally this: