The part of this project that will bring this sign to life is of course, the LEDs. Having the 3D printed sign itself will look pretty good, I think. The contrast of black and white plastic really makes my logo stand out. But to take it over the top and give that extra wow factor, I needed LEDs. As you’ve already read in prior posts, the goal is to have LEDs that will allow me to light up the sign to any color I want and display colorful animations.
The first order of business was to select what type of LEDs to use. I chose to go with WS2812Bs, which are addressable RGB LEDs. Addressable LEDs essentially turn the strip into an array of N LEDs, allowing you to control any LED on the strip by accessing its location. So, if you have a strip of 10 LEDs, you can directly control the second LED on the strip by accessing position 1 (arrays in programming start with address position 0).
Since they are RGB (Red Blue Green) LEDs, I’ll be able to produce any color I want. I purchased two strips with different LED densities. The first strip had 30 LEDs per meter and the second had 60. I wasn’t completely sure which would be better for my needs, but I figured I could use a mix of both if I needed to. These LEDs were reasonably priced (another reason I chose the WS2812B) and are commonly among makers and hobbyists alike. There is an upgraded version WS2813 that has additional features, but I didn’t think it was worth the added cost for this particular project. The ones I purchased were made by BTF Lighting in 60 LED/meter and 30 LED/meter strips.
This will be my first foray into the world of addressable RGB LEDs, designing and wiring a circuit, and programming them. As I said before, this sign project is a learning project for me and I hope to gain plenty of knowledge to aid in my next LED project (such as a large LED matrix board). I learned a lot researching various maker sites and watching Youtube videos.
One of the most important things I learned while researching addressable LEDs is determining just how much power I needed to provide them. Depending on how bright I wanted the LEDs to be and what colors I wanted to display, the LEDs would draw a certain amount of power. To decrease an LEDs brightness through the ESP32, it’s commonplace to use a method called Pulse Width Modulation (PWM). Instead of sending a constant, lower amount of power through the LEDs to decrease their brightness, PWM sends pulses at a width that corresponds to the amount of brightness you want. It essentially turns the LED on and off at a speed that is makes the human eye perceive a lower brightness. Pretty neat! PWM is actually used in a lot of electronics to control all sorts of things.
In my case, I knew that I didn’t want to set the LEDs to 100% brightness. The visual difference between 50% and 100% was negligible. Each LED of the strips I purchased utilize 6mA per LED when displaying white (i.e., all three diodes are on and at full brightness). My sign design utilizes 50 LEDs. Therefore, at 50% brightness and displaying white, the sign should draw 50 x 0.03A = 1.5 A. This is actually low enough to allow the sign to be powered from a USB 3.0/3.1 port. However, I will be using an Anker PowerCore 10,000mAh Power Bank. This powerbank outputs 5V at up to 2.5A. The sign at most will draw 1.5A, which means on a full charge, the sign should last just under 7 hours if it were constantly showing white. So, I was confident the Anker power bank would be plenty to keep this sign lit for hours before a recharge was necessary.
The power bank uses a USB-A for output. In order to have it power the LEDs and the ESP32, I needed to turn a standard USB-A to USB-C cable into a power cable. This was as easy as stripping off the insulation and isolating the positive and ground (negative) wires. The cable I happened to have didn’t have a dedicated ground wire and instead, used the shielding as its ground. So, I twisted the shielding together to act as a ground wire, soldering on solid wiring to make testing easier, and tidied it all up with some heat shrink.
To program the LEDs to create the effects I want, I will be using an ESP32 controller. At about $7 or less per board, it’s a steal because it includes WiFi and bluetooth support. It even has a hall sensor built in (though most people won’t really use this). To program the ESP32, I installed the appropriate libraries into my Arduino IDE.
There are multiple libraries that exist to control LEDs, but the one I wanted to use was the FastLED library. Looking at the documentation, it looked to be very easy to use and provided a lot of features that would make controlling the LEDs very easy. In addition to controlling the LEDs, I needed a way to control them with a phone app and through Google Assistant. In comes IFTTT, AdaFruit, and the MIT App Inventor.
IFTTT and AdaFruit IO
If you are into smart products and are a bit of a tinkerer, you’ll likely already know all about IFTTT. If not, IFTTT stands for IF THIS THEN THAT. It is a free service that allows you to interface with other free services to make your smart products do customized things that aren’t built in out of the box. For example, you can set up an applet (this is what they are called on IFTTT) that sends an email to whoever you wish when your phone location indicates you are leaving work.
IFTTT provides access to a service from AdaFruit, which gives you the ability to use AdaFruit IO and MQTT. All these services are free and make it easy to control your smart products. In this case, my smart product is the sign and the ESP32 will be responsible for reading data from an AdaFruit IO Feed I configured. Using IFTTT, I created an applet that would write data to my AdaFruit Feed. This data would be read by the ESP32 (which is constantly polling to receive data) and used to make the LEDs display whatever the command is. More information can be found at IFTTT.com and IO.AdaFruit.com.
That takes care of how I will control the sign with Google Assistant. But how about a phone app? I could set up Android Studio and write an app the old fashioned way, but I knew this would be a simple app. Writing an app from scratch might be too complicated for this situation. Enter the MIT App Inventor.
MIT App Inventor
MIT App Inventor is a web based, graphical app development platform. It allows you to create Android apps using blocks and design the interface using components via a drag and drop interface. While a basic level of programming knowledge is still required, the blocks allow you to forget about the syntax for the most part. Below is a picture of all the blocks I used to create the app you see further below. It looks like a lot, but it’s a lot of repetition more than anything since each button required its own set of instructions.
With the App Inventor, I designed a simple interface to easily control my sign. I wanted to be able to select any color I wanted, turn the sign on and off, change the brightness, and command any of the animations I programmed. After a few iterations, I came up with the interface you see below. The color picker makes it easy to get the color I want and the large buttons make selecting an animation quick and easy.
The app would control the sign via WiFi. The ESP32 has the ability to start a web server with which you can interact by essentially sending it form data. In this case, the app sends the web server GET data. The ESP32 parses the GET data for the command and tells the LEDs to act accordingly. For example, a command of “http://192.168.1.52/rainbow” would tell the ESP32 to make the sign display rainbow colors. The “192.168.1.52” is an internal IP address for your WIFI network.
With the programming out of the way, it was time to do some testing. I needed to build a simple version of the circuit I designed using a breadboard. I wouldn’t be testing all the LEDs right now, but I would test a short portion to see how the animations worked. Using a breadboard is easy once you understand how it is laid out. Then it’s just a matter of ensuring your pins or wires are inserted in the correct position. Below is a picture of a small breadboard with the basic circuit before attaching the LEDs.
In the picture above, you can see the ESP32 board, some wires, and a capacitor. The red and black wires connect the VCC and Ground pins to the power rail, which the green wires extend to the next section. The capacitor bridges across the positive and negative rails to protect against power spikes. While I don’t think the power bank is a large enough power supply to require a capacitor, it surely doesn’t hurt.
Connecting the LEDs, I let them light up to white, which is the initial display I programmed. I then tested each of the animations to see how it worked and how they transitioned from one to the other. I tested using both Google Assistant and the Android app and everything seemed to work pretty well after working out a few bugs here and there. If you are wondering why there isn’t a resistor in the circuit, it’s because these LEDs already have resistors for each LED. It wouldn’t hurt to add another one, but I did not in this case.
With the programming and testing done, all that’s left is to print the sign and do all the wiring and soldering, which will be tedious! But, the final product will hopefully be worth it. Stay tuned!
Disclaimer: Links to products above are affiliate links. If you enjoy my posts and would like to help support all the things I do, please consider using the affiliate links to make your purchase.