Introduction: Easier WiFi LED Light Strip Controller

By appideas.com
About: I've been blessed lately to be able to share some of what I've learned and made. I make custom software for a living. I make custom things for myself and others. I make custom gadgets for fun. In my profession…

Last Spring, I began designing custom hardware and software to control two strips of LED lights using one NodeMCU ESP8266-12E development board. During that process, I learned how to make my own Printed Circuit Boards (PCBs) on a CNC router, and I wrote an Instructable going step-by-step through the process. (Instructables link) I followed that up by writing instructions for building your own WiFi controller for LED light strips, including GPL'd Open Source Software for the controller and for a mobile app to use the light controller. (Instructables link) That second instructable was the result of several months of learning, developing, testing and refactoring, and it included my ninth revision of the hardware. This is version 10.

Why make a tenth version, and why write about it? To make a long story short, I needed to make dozens of controllers, so I needed for them to be easier to wire, quicker to produce and more robust. During the process of getting this project advanced to where it is today, I learned a lot. When I wrote the previous Instructable about the controller, I had built the electronics based on my existing knowledge of creating a custom PCB. My first "real" project with a custom PCB was the light controller, and in my path of learning, I created nine versions. The last several were pretty good.

Along the way, I learned a few things in particular that helped elevate this to another level.

  1. I was determined to begin with Open Source Software, and I initially designed my board with Fritzing. I still believe that to be the correct program for a beginner to learn how to design a PCB because you don't have to learn how to create a schematic, but I now believe that one should "graduate" to a more professional CAD tool. The program I chose is Eagle. The board I was able to produce with Eagle is significantly better than what I was able to create with Fritzing.
  2. After a little bit of experience, I am now able to "think outside the box" a little better. The specific thing that I realized is that I could simplify the wiring considerably by rearranging the pin assignments, and by turning it into a double-sided board with a very simple top side. I'm still unable to reliably produce double-sided PCBs with my CNC router, but manually wiring the top side of this new board is easier than wiring the jumpers that were required with the previous design. For those who can only make a one-sided PCB, this project can be achieved by creating a single-sided board and wiring a few connections manually.
  3. Don't own a CNC router? I can now point to several ways to make your own PCB without one.
  4. Still can't make your own PCB (or don't want to)? I've been able to get the PCBs I designed for this project commercially produced in quantities and prices I can afford to stock and sell. This means that this project can be pulled off with no more electronics skills than the ability to solder.

Are you ready to create your own WiFi controller for two strips of LED lights? Good. On to the bill of materials.

Although this began as an Instructable, it has become an ongoing project for APPideas. We update this Instructable from time-to-time, but the latest information is always available at https://appideas.com/wfc

Step 1: Gather Your Materials

This bill of materials assumes that you can either produce your own PCB or you will be purchasing one specifically for this project. There are ways to make this project without a custom PCB. Read step 2 of the following Instructable if you want to try to pull this off without a custom PCB. (Instructables link) Note that I am listing parts that I have personally purchased, and most of the items are sold in quantities larger than you will need. Feel free to shop around.

Consumable, optional and accessory materials and tools:

  1. (1) Soldering iron (Amazon link)
  2. (some) Solder (Amazon link)
  3. (some) Rosin paste flux (Amazon link)
  4. (1) Wire stripper (Amazon link)
  5. (1) Circuit board vise (Amazon link)
  6. (some) Liquid electrical tape (Amazon link)
  7. (some) Super glue (Amazon link)
  8. (5) #4 - 1/2" wood screws (Amazon link)
  9. (some) Hook and loop cable ties or zip ties (Amazon link)

Finally, you will need a PCB. You can make your own (files and instructions below), or order one from us.

If you make your own PCB, you will need to determine the additional materials needed to complete your build, such as router bits and hold-down materials or etching chemicals.

Now that you have your materials together, let's figure out how you will obtain the PCB for the project.

Step 2: Make or Get the PCB

If you cannot produce your own PCB, or do not wish to do so, I have had a small number of boards commercially produced and they are available for sale here (appideas link). Shipping is the most expensive part of getting those into your hands, but you can save money by ordering more than one.

If you have the ability to make your own Printed Circuit Board (PCB), all of the files you need to make the PCB for the custom WiFi LED light strip controller are below.

If you own a CNC router and don’t know how to create PCBs, read my detailed Instructable on the topic. (Instructables link) I have not personally produced a custom PCB by any other means. You can check out this Instructable about how to make a PCB with reasonably benign chemicals, (Instructables link) or do a search for “Custom PCB” at Instructables.com, and you will discover that there are a variety of methods.

Use the links below to download the gerber and excellon files. You can also download the Eagle files below in case you want to make modifications to the design. This is a two-sided PCB, but if you only have the ability to produce one-sided boards, you will only need to cut the bottom side. I will provide instructions for manually wiring the traces from the top side of the board in the electronics assembly information. Doing that is pretty simple, so it’s a good choice if producing a two-sided board is difficult for you.

If you need to buy these PCBs in bulk, they are available in a public project at PCBWay. (PCBWay link)

Attachments

Step 3: Assemble the Electronics

Now that you have your components together and PCB in-hand, it’s time to start soldering! There are a lot of solder points, but the soldering is very simple, as you are about to see. Look at the pictures for reference. Note that the yellow/tan PCBs pictured above were made on a CNC router and the blue PCBs are the commercially manufactured version.

  1. Insert the NodeMCU ESP8266-12E development board into the PCB. It’s possible to accidentally install this board backwards, and it’s difficult to remove once it has been soldered, so make sure that you have the pins oriented correctly. Solder all of the pads that have traces. There are 12 in total – ten along one row of pins and two along the other. You do not need to solder the pads that do not have traces. If you have a difficult time getting solder to flow around these pins, rosin paste flux will help.
  2. Assemble the 5V voltage regulator and heat sync as shown, then solder its three leads to the PCB to the left of the NodeMCU ESP8266-12E development board as seen in the photos.
  3. Install the two capacitors into the pads that are immediately behind the voltage regulator. Pay attention to the order and polarity of the capacitors. The 100µf capacitor needs to be installed closest to the outside edge of the PCB, and the 10µf capacitor will be installed closest to the inside of the PCB. The negative leads of the capacitors should be facing each other.
  4. Solder all eight MOSFETs into the PCB in the pads that are to the right of the NodeMCU development board. When you solder the bottom layer, it is only necessary to solder the leads that have traces. However, there are twenty four leads, and eighteen of them need to be soldered on the bottom side of the PCB, so it helps to avoid confusion if you take a couple extra minutes and solder all of them. You can also avoid having to solder the top layer by flowing solder through the appropriate vias, as described below.
  5. Solder the board's top traces.
    1. If you have a double-sided PCB, solder the eight solder points that are connected to traces on the top side of the PCB. Those traces are connected to each of the eight right-side legs of the MOSFETs. An easy way to solder the top-side connections is to heat the pins a little from the bottom-side with your soldering iron, then use rosin paste flux and apply enough solder from the bottom to allow it to flow through the via. This method will work without rosin paste flux, but the flux will help the solder flow a little more freely and with less heat. When you remove the heat, you should have a solid solder on the top of the board. Be sure to test your work!
      1. If you do not have a double-sided PCB, you will need to connect the right-side leg of each of the MOSFETs to each other. This is a ground connection in the circuit. The lower-left MOSFET in each group of four is already connected to the circuit’s common ground on the bottom side of the PCB, so it is sufficient to connect the right-side leg of the other three MOSFETs in that same group to its ground leg. You can do this by soldering jumper wires directly to the legs of the MOSFETs on the top side of the board, or by soldering jumper wires to the appropriate leads on the bottom of the PCB. I chose to solder on the bottom of the PCB so that I could conceal the wires within the case.
    2. Install the two-pole, 5mm pitch screw-down terminal block on the left side of the NodeMCU development board. Screw-down terminals take quite a lot of abuse, so secure it to the PCB by adding a drop of super glue and pressing it in place against the PCB for 30 seconds. Once it is glued into place, solder its two leads on the bottom of the PCB.
    3. Install the (2) five-pole, 3mm pitch screw-down terminal blocks on the right side of the MOSFETs. Glue these terminal blocks to the PCB in the same way as instructed above, then solder all ten leads on the bottom of the board – five leads for each terminal block.
    4. Everything is soldered, so it’s time to clean up and verify your work. Start by putting on safety glasses, then trimming the excess metal from the leads on the bottom side of the board. I recommend NOT trimming the leads of the NodeMCU ESP8266-12E development board. The pins are very thick and tend to damage wire cutters.
    5. Verify your work by testing the trace end-points with an ohmmeter. Simply connect one lead from your ohmmeter to a solder point on the PCB, then connect the other lead to the solder point that is on the other side of the trace. You should have continuity between all appropriate traces. It is an especially good idea to double-check your top-side solder points. To do so, connect one lead of your ohmmeter to a ground pin on the NodeMCU ESP8266-12E development board, then connect the other lead to the right-side leg of each of the MOSFETs, one at a time. There should be continuity between those pins and the circuit's common ground.

    Step 4: Load the Arduino Code & Connect to WiFi

    For the sake of completeness, I am largely repeating these instructions from my previous Instructable. I intentionally give instructions for loading Arduino code prior to securing the electronics or connecting the 12V power supply to avoid the possibility of accidentally plugging the NodeMCU development board into USB while it is being powered through Vin.

    Getting, installing and setting up Arduino IDE. If you already have Arduino IDE installed and setup to use an ESP8266 board, download the ZIP file below, unzip it, then load the contained sketch onto the ESP. Otherwise, get Arduino IDE from here and install it. There are a few steps in getting the ESP board recognized by the Arduino IDE. I will give them in terse bullet points. If you want a full explanation of what you're doing and why, you can read about it here.

    • Open Arduino IDE and click File > Preferences (on macOS, that'll be Arduino IDE > Preferences)
    • Put this address into the Additional Boards Manager URLs box: http://arduino.esp8266.com/stable/package_esp8266com_index.json
    • Click OK
    • Back in the main Arduino IDE screen, click Tools > Board > Boards Manager...
    • Search for "esp8266" and when you find it, click Install and close the Boards Manager window
    • Click Tools > Board and select NodeMCU 1.0 (ESP8266-12E Module)
    • Click Tools > Port and select the USB port to which the ESP board is connected

    You will need to perform the last two steps any time you develop on a different type of Arduino board and switch back to the ESP8266. The rest of that only needs to be done once.

    To compile this sketch, you will need to get a few libraries loaded into the IDE, so click Sketch > Include Library and click ESP8266WiFi. You'll need to load the following libraries in the same way (Click Sketch > Include Library, then click the library name): ESP8266mDNS, ESP8266WebServer, WiFi, ArduinoJson, EEPROM, ArduinoOTA. If you do not see any of those in the list of libraries, you will find it by clicking Sketch > Include Library > Manage Library and searching for the library name. Once you find it, click Install, then go through the steps again to include it in your sketch.

    Compiling the code and sending it to the board. Before you do this, if you installed a voltage regulator, verify that there is no power to the Vin pin of the ESP board. Download the zip file that is included with this step (below) and unzip it or get it at github. (github link) Plug your ESP board into your computer through USB, select the proper Board and Port through the Tools menu, then click the Upload button. Watch the console, and in a little bit, the code will be loaded. If you want to see what the device is logging, open the Serial Monitor and set the baud rate to 57600. The sketch isn't very chatty, but it does display some status information such as the device's IP address.

    To connect the controller to your network and get it configured:

    1. Power on the controller
    2. On your computer or on a mobile device, connect to the WiFi network that the controller creates. It will create a network with an SSID that begins with “appideas-“
    3. Open a web browser and go to http://192.168.4.1:5050
    4. Provide the credentials to connect to your network, then click the CONNECT button
    5. Get the IP address that was assigned to the controller. I’m sorry that this part isn’t easier yet. If you know how to get to your WiFi router’s DHCP device list, the WiFi controller will appear on it with a device name that contains “esp” and the four characters that were after “appideas-“ in the device's Access Point SSID. The Arduino Serial Monitor will also show the device’s assigned IP address.

    If you want to know how the Arduino code works, you can read about it on step 4 of my previous Instructable. (Instructable link) That Instructable also talks about how to use a web browser to test your lights and the WiFi controller, so if you get impatient getting to the mobile app installation, you can check that out.

    Attachments

    Step 5: Wire the Lights and Power

    Again, I am going to repeat a large part of one of the steps of my previous Instructable.

    If you are only connecting one or two sets of lights, you won’t need to solder onto the light strips. Take a look at the second image above. Simply cut the light strip somewhere in the middle, cut off the connectors that are already connected to the front and back of the roll of lights, strip the ends of the wires, and you’re ready to connect it to your controller. That’s it. Just wire the lights to the appropriate leads on the controller, and you’re done.

    If you need more than two sets of lights, or you’ve already “harvested” the manufacturer’s cable ends, you’ll need to solder wires directly onto the strips, and that can be just a little bit tricky. There is a really good Instructable on that topic already, so I am going to defer to it. But before I do, there are a few notes I’d like you to keep in mind while looking at those instructions:

    1. Once you’re done soldering to the strip, use an ohmmeter to verify that you did not accidentally connect adjacent pads. Just touch the ohmmeter leads to the first and the second soldered pads to verify that there is no continuity between them, then the second and third, the third and fourth... It’s easy to miss (not see) a stray strand of wire, and it only takes a few seconds to verify that something bad didn’t happen.
    2. Pay special attention to his wiring because he appears to have the colors messed up. What’s actually “wrong” is that his light strip has its leads in a different order than what is typical, but the 5-strand wire is normal.
    3. Highly recommended: Instead of using heat shrink tubing to secure the connection (near the end of the Instructable), use Liquid Tape. (Amazon link) Your connections will have significantly better isolation and will be much more secure. I included pictures, but in case you haven't used Liquid Tape before, the process is pretty simple:
      1. "Glob" it onto your bare solder points and allow it to soak into all of the crevices. Keep something disposable (a paper bag, last week's newspaper, a rag, etc.) underneath it. Apply a thick coat. It's OK for a little to drip off of it. That's why something disposable is beneath it. Make sure everything that was soldered is completely covered and is not visible, even a little bit. Put it on thick. It won't stay that way.
      2. Allow for it to dry for at least 3-4 hours. As it dries, it will shrink, and it will form tightly around your wires. This is good! Your solder points are literally being glued into place, and a layer of rubber(-ish substance) is isolating every place the liquid was able to seep in. Nothing but an intentional or violent act or could sever the connections or cause a short circuit.
      3. After the 3-4 hours have passed, add a second coat and allow it to dry. This coat can be much more thin. It doesn't need to seep into anything - it's just sealing and securing the first layer. After the second layer has dried, it's ready to use.

    With all that out of the way, here's the link to the Instructable. (Instructables link)

    Now that wires are coming from your light strips, connect them to the appropriate leads on the 5 pole screw-down terminals. If you purchased our manufactured PCB, they are labeled for you. If not, from top to bottom, they are in this order: white, blue, red, green, black (power).

    Finally, connect power to the PCB by connecting the 12V (or 24V) power supply to the 2 pole screw-down terminal. The positive lead is closest to the voltage regulator, and the negative lead is closest to the outside edge of the PCB. Again, these are labeled on the manufactured PCB.

    Step 6: Secure the Electronics

    With projects like this, you are most likely to have failures if parts are moving, exposed or loose, so it is important to secure the electronics.

    If you have a 3D printer, download the STL files below and print them. One is the base and the other is the lid. The lid is not required. Start by securing the power supply to a small board with double-sided tape. Next, secure the electronics mount base to the board with (2) #4 - 1/2" wood screws. Finally, secure the PCB to the base with (3) #4 - 1/2" wood screws. If you want to modify the case, the Fusion 360 file is also available to download below.

    If you do not have a 3D printer, I recommend following the same basic procedure, only skipping the 3D printed base and lid. It is important to secure the PCB to a non-conducting surface, so screwing it onto a piece of wood will work perfectly.

    Note that the orientation of the base and the PCB are important since they only have screw-down holes in three corners. I prefer to install my PCBs oriented as pictured because it prevents users from plugging the NodeMCU development board into USB while everything is secured. If you prefer easier access to the USB port (and you'll promise to be careful and not plug it in while there's power going to Vin), there's no harm in turning it the other way.

    Attachments

    Step 7: Load and Use the Mobile App

    Now you get to use your lights!

    The easiest way to get the app is to download the current public version from your device's app store.

    Once you've got the app installed, skip ahead to the "Using the mobile app" section

    If you prefer to live life on the edge, you can alternatively install the latest development version of the app from source code.

    You will need to have a React Native development environment setup and working. Instructions are available here. (documentation link) Once React Native is setup for development, open a terminal and run these commands:

    mkdir app
cd app
git clone https://github.com/appideasDOTcom/APPideasLights.git ./
cd mobile-app/react-native/AppideasLights
npm install

    To install for iOS, plug your device into your computer and run this command:

    react-native run-ios

    For Android, plug your phone into your computer and run this command:

    react-native run-android

    If installing the app fails the first time, run the last command a second time.

    Using the mobile app

    The first time you open the app, your only option will be to add controllers, so click the "+" button in the upper right corner to do so. Click "By IP address" and type the IP address of your controller, then click Save. That's all you have to do. If you have more than one controller, you can add more by using the "+" button.

    The app is pretty self-explanatory once the controllers have been added. To control the lights, tap on the button for the controller (it will show the IP address for now). Since each controller can handle two sets of lights, controls are present for two. Each one has a toggle switch to turn all of the lights off and on with one tap, and each of the colors has its own slider to control that color individually.

    You can configure the controller by tapping the Config button in the upper right. On that screen, you can give it a nicer name, which is the name you will see displayed on the button that appears on the controller list. You can also change the IP address, in case your DHCP server assigns it a different address or you typed it incorrectly. Finally, you can delete the controller from the app entirely. This doesn't remove the controller from your network - it just erases the app's knowledge of it.

    Step 8: Make Something Awesome

    That's it! Now it's time to find an application for your lights. I've been making backlit signs, and wrote an Instructable on the topic. (Instructables link)

    There are lots of great things you can do with these lights, so use your imagination and add pictures of your projects in the comments. I've worked on the hardware quite a bit, so now it's time for me to work on making improvements to the mobile app.

    Have fun!

    Although this began as an Instructable, it has become an ongoing project for APPideas. We update this Instructable from time-to-time, but the latest information is always available at https://appideas.com/wfc