I started making backlit signs with LED light strips, and I was needing quite a few WiFi controllers for each project. For a single project, it could cost me hundreds of dollars just to buy WiFi controllers, so I decided to make my own.
If you follow this Instructable, you will have a fully-functioning WiFi controller for your LED lights, along with an app for your iOS or Android phone or tablet. Actually, you'll get the equivalent of buying two WiFi controllers when you're done with this. This is a complete, start-to-finish solution. There are videos below (steps 5 and 6) of the controller being used with the app. Skip ahead if you want to see it working before you read about building one for yourself. If you want to see how I have used the controllers, check out my Instructable about making backlit signs. (Instructables link)
Since making signs with these light controllers, my wife and I "fight" over controlling the lights, and my niece and nephew have a blast playing with the app and watching the colors change. The lights are a lot of fun for everyone, and can be applied to a limitless number of projects.
UPDATE: There is a new and improved version of this project in a newer Instructable. The updated version has a simplified PCB, extra pointers on how to produce your own PCB if you don’t have a CNC router, and a commercially produced version of the custom PCB for this project available for purchase (in case you don’t want to make your own at all). That Instructable also has a lot more detail about building the electronics. The Instructable you are currently reading is still useful if you need wiring diagrams or want to build this project without a custom PCB. There are also more pictures and videos showing the controller being used here than there are in the new version’s instructions. Here’s a link to the new version: Instructables link
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
I have seen WiFi controllers for LED light strips for sale between $12 and $80, with good solutions starting at $17. If you need one or two, that’s probably not a bad route to take. If you need a bunch like I did, or you just like making things and owning your projects from start to finish, $17 per unit quickly becomes unreasonable. The WiFi controller you will build from these instructions has a few advantages over commercial light strip controllers:
- Each controller can control two separate strips of lights. If, for example, you need to control fours sets of lights, you would need to purchase four WiFi controllers, or you can make two of these.
- Everything can be modified for your specific needs
- You'll be significantly cooler than your neighbor who bought his controller online, and all of your other neighbors will know it
- You created everything, so you know it and you own it
It might have some disadvantages, but none come to mind. (That's a joke, by the way. Not a good one, admittedly). The bottom line is that you'll have a fully-functional light controller with an easy to get and use app.
Quite frankly, this got a little out of hand. As you're about to find out, I strictly adhere to the old adage, "anything worth doing is worth overdoing." I went through quite a few designs and builds until I came up with something I don't feel compelled to improve further. More importantly, I now have something I can quickly, easily and reliably reproduce.
I will provide step-by-step details for reproducing what I made. However, replicating exactly what I made requires equipment that I know is not available to a lot of people, so I'll also present alternatives. There are lots and lots of options, and I'll try to present them in a way that doesn't make you feel like your life is a choose your own adventure story. Well, there'll be a little bit of that, but not too much.
The wiring for this project isn't terribly difficult, but it will require some soldering skills. I'm not very good at soldering, and none of this has been a problem for me, so you should be OK.
Before we get to it, my legal counsel (wife) told me to say... You'll be playing with electricity and using dangerous tools, and nobody is going to do a pre-check to verify whether or not you’ve been appropriately trained. If you make this, I'm not responsible for any damage or destruction to your property or person. Be smart, and be careful.
Also, have fun.
Step 1: Gather Your Materials
The materials that you need will depend on which variation of the controller you want to build and what build equipment you have available. When I talk about "variations" in the WiFi controller, this is what I mean:
- You can choose to build the controller for either one or two sets of lights. The purchase and wiring requirements are slightly less for the one-set version.
- You can choose to power the electronics with the power supply that came with the lights when you bought them, or you can power the electronics through USB. Using USB saves about $2 (assuming you have a USB power brick and cable sitting around) and simplifies the wiring slightly. Using the power supply from the lights to power the electronics makes it so that you don't have to have a USB power brick near the controller and run another cable to it.
- The screw-down terminal blocks provide no functionality and are totally optional. I personally prefer to have pluggable/unpluggable power and ground, so I use them.
There are other differences in materials depending on whether you have a CNC router or a 3D printer. This project can make use of both of those, but doesn't require either.
One other factor that may affect the price is that it's generally best to buy small electronics parts in semi-bulk, so all of the links I'm providing will give you too many of just about everything. Those small parts tend to be oddly expensive when purchased in singles. It's not uncommon to see a single item cost 25-50% of the price of a 10 pack. Feel free to shop for alternatives if you want to save a few bucks, but I am including links for what I have personally purchased.
This is the full shopping list. The parts you're able to eliminate based on your chosen variation will be obvious when I show how everything is put together, if it isn't already by the time you finish reading the list. If you make the "complete" version of the project, you will need:
- (1) ESP8266-12E (NodeMCU) development board. I buy these in 2 packs for $12. (Amazon link) These things are awesome. You'll want an extra just for fun when this project is over, so order a 2 pack. If you know that you want to use a lot of these boards (perhaps on other projects), it is best to buy them in 10 packs for $43 (Amazon link) or 5 packs for $25. (Amazon link)
- (1) 5V voltage regulator. 15 pack for $8. (Amazon link)
- (1) Heat sink for the voltage regulator. 10 pack for $10 (Amazon link) A heat sink for a voltage regulator is about double the price of a voltage regulator by itself, but don't skip the heat sink or you won't have a project for very long!
- (1) 10µf capacitor. Don't buy individual capacitors. If you need some, find an assortment. (Amazon link)
- (1) 1µf capacitor
- (8) N-channel MOSFETs. 10 pack for $17 (Amazon link)
- (2) Screw-down terminal blocks (optional). 100 pack for $10 (Amazon link)
- A soldering iron (Amazon link) and some solder (Amazon link). If this project interests you, you probably have already these. You may also want to pick up some Rosin Paste Flux (Amazon link). I'll talk more about that further down.
- Wire. I highly recommend the 5-strand cables specifically made for these sets of lights. (Amazon link) 10 meters of that wire is $11. Otherwise, something around #22 gauge will be appropriate. You don’t need a lot of length, but you will need quite a few strands. That’s why the 5-strand cable is ideal for this particular application. It'll get pretty unruly if you're wiring individual strands.
- (1) 12V, 5A (or more) power supply or (1) available USB power outlet and USB micro-B cable. You can use the 12V power supply that came with the light strip to simultaneously power the lights and the WiFi controller. If that power supply isn't available or you need another one, they are about $10 each. (Amazon link) In most cases, the power supply that came with the lights is all you'll need. Any 12V, 5A power supply will do. If your light strip came with a 24V power supply, check the specifications of your voltage regulator to make sure you aren't pushing it beyond its limits. The voltage regulator to which I link above is rated up to 35V, so it will be OK.
- A way to make the electronics permanent
- (2) Blank copper-clad PCBs if you can make a custom PCB (Amazon link) $23 for 50 boards, or
- (2) Small perf boards (Amazon link) $6 for 25, or
- (2) Small strip boards, (Amazon link) $8 for 2, or
- You can do this on a breadboard, but that’s not really permanent. The breadboard images I provide are to effectively show the wiring diagram - not to serve as an example of how the electronics should remain forever.
Super glue (optional). (Amazon link). I use super glue to hold screw-down terminals. I prefer Gorilla Glue Gel, but any "super glue" should work.
As far as getting and using the software is concerned, you will need:
- One of:
- An Android device and access to the Google Play Store, or
- An iOS device and access to the iOS App Store, or
- If you are a React Native developer (or just want to look at the code), you can install the app from source code. Everything you need is on github. (link)
- Arduino IDE installed and properly configured to load sketches onto an ESP8266 development board (I'll cover that)
- A WiFi network with regular password authentication (no open/unsecured access points, and no login gateways)
Hopefully, you’re reasonably well-equipped, so let’s get to wiring the electronics.
Step 2: Wire It Up (the Controller First)
The brains of the WiFi controller is a microcontroller development board, generically referred to as an “ESP8266.” Those that I have been using lately are the specific model ESP8266-12E. (Amazon link)
If you are familiar with Arduino development boards, but not the ESP8266, you’re not alone. That’s because, technically, this isn’t an Arduino board. It’s a “NodeMCU” controller. Although there are slight technical differences between an Arduino development board and a NodeMCU controller, for practical purposes, you can think of the ESP8266-12E as an Arduino development board with built-in WiFi. The important thing is that the Arduino IDE can be coerced into treating it exactly like any other Arduino board, as you will see in a bit. To save words, I will refer to the microcontroller as an "ESP" or "MCU" board throughout this Instructable. Yes, I am aware that this means that I am referring to it in a technically incorrect manner on several occasions.
Why this instead of a “normal” Arduino? When I first started playing with microcontroller development boards, I had fun with pretty much all “the Arduinos.” But there was one painful thing I was having to do with nearly every project I was creating - add WiFi. That’s either somewhat expensive (get a hat/shield) or rather difficult (wire seven connections from an “NRF24” wireless transceiver, plus load a bunch of libraries and implement your own WiFi stack). My favorite board to use for development has been the Arduino Nano, which costs about $4 per unit. I was then adding NRF24 transceivers at about $1 each. Then I was spending hours wiring and getting the software to work. The ESP8266 costs about $6 and has everything you need for WiFi ready to go. As a bonus, when you use an ESP8266, implementing the WiFi stack is only a matter of including the correct library file and adding about 20 lines of code. I can just start writing my application rather than wrestle with WiFi code. That’s a “better in every way” scenario. Except for the extra $1. If you buy your ESP boards in 10 packs, they cost about $4.30 each, so you'll save money if you buy in bulk. (Amazon link)
If I were to go the route of using an Arduino Nano, this Instructable would be about how to wire an NRF24 transceiver and setup a WiFi stack. The “LED light strip” thing would be a minor part of it.
The first breadboard view I show in this step's images is to depict how I wired the controller for one set of lights. I've split the image into multiple breadboards so that you get a more clear picture of the wire paths. To fulfill my OCD needs, I wanted the order of the input/output pins (D0, D1, D2..) to follow the same sequence as the wires and the lights, which is white, blue, red, green. My OCD makes a valid argument, though: If you keep the wires and connections in a consistent and known order throughout all phases of your project, you're much less likely to make mistakes. Since the manufacturer of the lights and cables have both chosen WBRG as the sequence, sticking with that makes things less confusing.
For clarity on how this is to be wired, the first image shows the most basic form of the controller. Specifically:
- No voltage regulator is present, so this must be powered by USB.
- This will control one string of lights
Here's the English version of the wiring in the first image:
- Connect the ground of the light’s power source to the ground of the ESP, creating a “common ground”
- Connect each of the left-side leads of the W, B, R and G MOSFETs to pins D0, D1, D2 and D3 of the ESP, respectively
- Connect each of the right-side leads of the W, B, R and G MOSFETs to the common ground
- Connect the center pins of the W, B, R and G MOSFETs to the appropriate leads on the light strip
- Connect the +12V power source to the appropriate lead on the light strip (usually marked +12V, and often times connected with a black wire - a most unfortunate color choice for a non-ground wire!)
The second image adds a second set of lights. Simply repeat what was done in the first image, except:
- Connect each of the left-side leads of the second set of W, B, R and G MOSFETs to pins D4, D5, D6 and D7, of the ESP, respectively.
- Obviously, the center pins of the MOSFETs are going to a different set of lights.
- The second set of lights needs its own power. Assuming you don't have more than 10 meters of lights in total, you can split the power from the first set of lights to power both of them.
The third image builds on the second. You already have a controller that can handle two strings of lights. Now you’re adding a voltage regulator so that you can use the power provided for the light strips and eliminate the need to have USB power nearby.
- Connect the incoming +12V input to the positive lead of a 10µf capacitor, then to the left-side leg of the voltage regulator
- Connect the incoming ground to the negative lead of the 10µf capacitor and to the negative lead of a 1µf capacitor, then to the center leg of the voltage regulator.
- Connect the right-side leg of the voltage regulator to the positive lead of the 1µf capacitor, then to the Vin pin of the ESP. You’ve got power without USB!
IMPORTANT NOTE: You will need to use the USB port of the ESP8266 board to load the Arduino code onto it, regardless of which version of the electronics you choose to build. If you make the version that has a voltage regulator, you need to know that it is never going to be OK if you power the ESP board through its Vin pin while it is also connected to USB. The ESP board will die immediately, and quite possibly in a very dramatic fashion. Before you plug in the USB port, always verify that power to the Vin pin has been cut. Every time.
As an alternative view of the wiring diagram, the fourth, fifth, sixth and seventh images for this step show the wiring traces that exist on each of the custom PCBs that I produced for this project. The fourth and sixth images are color-coded for easier identification of the purpose of that particular trace.
Now that you have the wiring diagrams, you’ll need to decide how you’re going to actually wire it up. You have two choices, and some notes that apply to both of those choices. The two methods are:
- Custom-made Printed Circuit Boards
- If you have a CNC router, this is the way to go, or
- There are other ways to produce custom PCBs, or
- If you have a CNC router, this is the way to go, or
I also added some notes for prototyping on a breadboard.
Method 1: Make a custom PCB with a CNC router. Download the CNC router zip file at the bottom of this step and unzip the file. Use the contained gerber and excellon files to generate the tool paths for your bits and gcode for your CNC router, and you’ll have PCBs specifically for this project (several are pictured in the images for this step). If you have a CNC router and haven’t cut a PCB before or don't know how to generate your own tool paths, check out my Instructable on the topic. That process really requires its own Instructable, which is why I wrote one. It's also why I can't provide all of those details here. This is, by far, the best way to go if it’s an option for you. If it's not an option for you, skip ahead to method 2.
If you make the PCBs I provide and want to use the cases I made to contain them as well, cut the PCB out of your workpiece along a bounding box, with rounded corners, that has a 3 mm margin. I use FlatCAM to generate the gcode for my router, and full instructions for this specific board cutout are available in step 5 my previous Instructable. FlatCAM settings are covered in step 4. (Instructables link)
You’ll notice in the pictures that I split this into two PCBs - one for the microcontroller and its associated components, and the other for the MOSFETs. I couldn’t figure out non-crossing trace paths for 8 MOSFETs on the same single-layer PCB as the microcontroller, and the easiest solution my limited experience enabled me to imagine was to was to split it into two boards and “jumper” the boards together. If you’re doing this as a perf board/strip board project, crossing wires won’t matter, and you should be able to fit this all onto one PCB. However, it may help you keep things organized if you split it up the same way I have.
There really isn’t much instruction to give for this method of making the electronics for the controller. What you need to do will be pretty obvious. Once you have the PCBs, populate them with components (refer to the fourth through seventh images above), solder the pins to the appropriate pads, then connect the two PCBs to each other with jumpers. I did that by soldering wires directly to the boards.
Note from the sixth image, the order of the wires coming out of the MOSFETs to the lights (indicating which color of light each MOSFET is, um, FETing its MOS upon). Also note the order of the wires coming out of the FET board and going to the MCU board (sixth image), and the order of the wires going into the MCU board and coming from the FET board (fourth image). If you mess those up, you’ll be able to correct the mistake later in software, but it will be a little more straight-forward if you keep them in the order shown. I intended for the MOSFETs and the pins on the ESP to follow the same sequence of colors as the lights - W, B, R, G. In order to make all the traces come out correctly, the jumpers coming out of the FET board are in this order: White, Blue, Black (ground), Green, Red. Refer to the pictures while you're wiring that part.
I have a few final notes for you if you are making PCBs with a CNC router for this project:
One thing I do as the result of “learning from experience” is to super glue the screw-down terminal blocks to the PCB. (Amazon link) A good alternative is to skip the terminal block and solder all those wires directly into the PCB, but I often times regret not having easily pluggable/unpluggable power and ground in my projects. Terminal blocks take a lot of abuse because you often need to really tweak on them to get them to hold everything captive. The pressure required to screw those down often times causes solder points to pop loose. I’ve even had it delaminate copper from (tear the copper from the surface of) a PCB! When I add a drop of super glue to the terminal block while mounting it to the PCB, that particular concern goes away.
For now, I leave the outputs from the MOSFETs that are headed for the strips of lights as bare-ended cables. I find it easier to solder separate cables onto the lights, then join the light cables with the FET board cables using wire nuts (temporarily) or soldering the wires together and protecting the solder points with liquid tape and heat shrink tubing (permanently).
If I'm powering the electronics and the lights with the same power brick, and I am using a standard 5-strand cable going to the lights, I connect the BLACK wire to a +12V connector on one of the PCBs. The black wire leading to the lights is for power, not ground! See the final photograph above.
Method 1b. There are ways to produce custom PCBs without a CNC router, but I have no personal experience with any of them. You should be able to use the files I provide with this step and apply them to any number of methods of PCB production. Search Instructables.com for “custom pcb” and you will see that there are quite a few ways to make a custom PCB, and most do not require a CNC router. This Instructable was particularly interesting to me because it uses relatively benign etching agents: (Instructables link) If you produce a custom PCB in another way (other than using a CNC router), simply follow the steps immediately above, beginning with the second paragraph, after you've made your PCBs.
Method 2: If you cannot produce a custom PCB, perf board or strip board are your options. They aren't bad ones, it’s just going to take a while. As long as you don’t have to do this often, you won’t regret that. It’s a fun Saturday project.
Wiring this project on a strip board (also known as a "solderable breadboard") is going to be easier than doing so on a perf board, but strip boards are significantly more expensive (good ones are, anyway). If you use a strip board, place the ESP8266 somewhere near the middle of the board, be sure to clear the traces that would connect opposing pins, then work around it. Fortunately for my work - but unfortunately for this Instructable - my progression went directly from perf board to custom-made PCBs on a CNC router, so I don't have any strip board examples to show, and I don't have any experience to share. I recommend searching YouTube for examples of using strip boards. There are a lot of videos on the topic.
I don’t have any examples of this particular project executed on a perf board either, and I’m not going to make any. I'm spoiled. Take a look at the pictures at the top of this step for examples of some projects I’ve done on perf boards. You have the wiring diagram, so layout your components on the perf board so that you know where everything will sit, then start soldering.
I have found that wiring on a perf board is easiest when I start with the item that has the most leads. I secure it to the board first by soldering one or two of its legs into the board (without any wires), then add components around it. Once you add a component to the board, figure out where its leads need to go, measure and strip an appropriate length of wire, then solder the leads together. The more excess wire you have, the easier it is going to be to make individual connections (particularly as more wires are added), but longer wires increase the risk of solder points getting knocked loose accidentally. Try to keep the wires as short as you can while being able to work comfortably.
Follow the wiring diagram and the same basic principles as connecting everything for the custom-made PCB, and you’ll have yourself a perf board version of this project. Send me pictures, please!
Some special notes apply to wiring, regardless of your chosen method of construction:
- When you are done, trim the excess metal from the leads that are sticking through the PCB or perf board to clean up your work and reduce the risk of accidental short circuits.
- I recommend NOT trimming the excess metal from the leads of the ESP8266 board because they are really thick and tend to damage wire cutters. Plus, the amount of force required to cut them off has caused solder points to pop loose on me in the past. Just leave them be, and be careful about what’s underneath them if and when you mount them.
- These ESP8266 pins are particularly hard to solder because they are exceptionally thick, and the boards into which they are attached are specifically designed to dissipate heat. Solder simply does not “flow” well around these pins or anything that’s touching them. To solder these well and reduce the risk of causing heat damage to other parts of your project (that weren’t designed to dissipate heat), add some rosin paste flux to your solder. There just isn’t enough rosin in “rosin core solder” to get the job done on these pins. Since the demise of the local Radio Shack, this stuff is a little hard to find locally, but you can get it online. (Amazon link) This isn’t the same thing as plumber’s rosin paste flux. If you find a product marked “Rosin Paste Flux” in a hardware store, it’s probably not the right thing. Read the label. If it is the wrong kind, it will almost definitely say specifically that it is not for electrical use. Although it's not typically necessary, using rosin paste flux while soldering your capacitors gives you Fluxed Capacitors.
- If you want to power the lights, the ESP, or both using the 12V power supply that came with the lights, just cut the barrel off of the end of the cable and strip a small length of wire. The end of the ninth picture shows how I prepared a power supply, and also shows how I mount the power supply to a piece of wood with double sided tape and how I screw down the electronics case. This keeps everything nice and secure. More details about that are just below.
Method 3: Breadboard. Do this to build a prototype, if you want, but don't think of the breadboard as your final build if you want something to keep and use. If you're making a breadboard prototype, just wire it exactly as the images at the top of the step show.
The next thing I like to do is to contain and secure the electronics. If you’ve made the PCBs I provide and have a 3D printer, you can download the STL file below and print the case I designed for those boards. The file is also available at Thingiverse (Thingiverse link). This is the best option if you have a 3D printer (and were able to make the custom PCBs). That case is very sturdy in plastic, and it looks nice. If you have a CNC router but not a 3D printer, you can download the Fusion 360 file below, generate your tool paths, and make the same cases out of wood. That’s pretty cool too, but wood at that thickness is a little more brittle than plastic. Once the case is secured, it's very sturdy, but be careful with it before you have it secured.
The cutouts on the front of the 3D printed (or CNC routed) cases are for hook and loop (velcro) cable ties or zip ties, to keep your wires secure. I highly recommend hook and loop cable ties. (Amazon link). I highly discourage the use of zip ties. Unless you want a rant, we should move on. The holes in the bottom of the case are for #4 wood screws. Custom made PCBs have cutouts in the corners for them to be secured to the case using #4 -1/2" wood screws. (Amazon link)
If you don't have either a 3D printer or a CNC router, I recommend finding a non-conductive surface (wood is great) and mounting the board(s) to it in whatever way you can. On perf boards, I like to drill small mounting holes in the corners with a drill press, then I can screw the board into a piece of wood. It’s best to drill those mounting holes before you populate the board with components, by the way.
You will want to contain the electronics in some way. The things that are most likely to fail in the long-run on these projects are the parts that move, so it is important for the longevity of your work that you secure it as much as possible.
You should have a properly wired WiFi controller now. If you want to test it, feel free to skip ahead to the section about loading Arduino code. It seemed more logical for me to cover wiring the lights first, so that’s the next step.
Step 3: Wire-up the Lights
If you are only connecting one or two sets of lights, you won’t need to solder onto the light strips. That might come as a relief. Soldering those light strips is not difficult, but it does require a fair amount of precision.
If you are only making one or two sets, 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 with this step. Move on.
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:
- 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.
- 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. He’s also got a 24V version of these lights, which I’ve never used or purchased.
- 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:
- "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.
- Allow 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.
- 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 (Link to Instructable)
Once you’ve got wires to the lights, just connect them to the appropriate leads that you have coming out of the FET board, secure the connections (wire nuts, solder + heat shrink, etc.), and you’re finished with wiring.
Now you’re ready to start getting the software loaded up. We’ll begin by loading the Arduino code onto the ESP board. That will enable you to get your lights running and everything tested, even before you have the mobile app installed.
Step 4: Load the Arduino Code
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:
- 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. 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:
- Power on the controller
- 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-“ (fourth image above)
- Open a web browser and go to http://192.168.4.1:5050
- Provide the credentials to connect to your network, then click the CONNECT button (fifth image above)
- Get the IP address that was assigned to the controller
- There are example URLs below that you can use to test the lights from a web browser
Once you have the app installed, you will not need to use a web browser again.
Many Instructables go through code line-by-line and explain what that code is doing. I’m not going to do that. There’s quite a lot of code, and it’s somewhat complicated. It would take a long side-track to break the code down into plain English if it were to be explained in detail. It’s a little more than a typical single-purpose Arduino sketch. For those of you who want to look at the source code, the repository is here (github Link) and Arduino documentation is here (Link). I think it would be more appropriate to explain what it’s doing functionally rather than going line-by-line through source code.
- When the device powers on, it turns on all lights and initializes WiFi.
- If the last network to which it was connected is available, it reconnects and gets the current time from an NTP server
- If the last network it was on is unreachable, or it has never connected to a WiFi network, it turns into a WiFi access point with an SSID that begins with “appideas-“
- While it is in “Access Point mode,” it will have created its own private network. While in Access Point mode, the URL http://192.168.4.1:5050 will display a web page that allows you to enter your network’s connection credentials.
- Once connected to your network, the access point will disappear, and you will most likely reconnect to your home network automatically. At this point, you will need to figure out the IP address of the device on your home network. 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.
- Now that the WiFi controller is on your network, it will leave Access Point mode and listen for commands on a small API service that runs on the ESP board. Once you have the app installed, you won’t need these weird web browser interactions. This is just for testing. Here are some examples (of course, you’ll need to replace “10.0.42.231” with the IP address that was assigned to your WiFi controller when it joined your network):
- All of the commands to which the API server responds are documented on the github page (link)
That covers the Arduino code. Now on to a different kind of fun.
Step 5: Install the Mobile App (optional)
I say that loading the mobile app is optional because, technically, you can control the lights through a web browser like you just did for testing. However, you’re not going to want to do that for long or often, so get and install the mobile app. Fortunately, I've been able to get the app approved for both iOS and Android app store distribution, so installing the app is really simple.
The easiest way to install the app is to get it from the appropriate store for your device. Here are links:
If you install from an app store, skip ahead to the "Now that the app is installed..." section.
If you want to install from source code... If you do not already have a React Native development environment setup on your computer, follow the instructions that are here. Click the "Building Projects with Native Code" tab, then select your development and target Operating Systems. You will need to install Node, Watchman, the React Native CLI (Command Line Interface), and the development tools needed for your device's Operating System.
Once React Native is ready to go, install the app from github. 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
Now that you have the source code, are in a terminal and have changed into the proper directory, plug your phone into your computer and run one of these commands (depending on the platform for which you wish to build the app):
react-native run-ios or react-native run-android
If the application fails to build and install after running this command, run the command a second time. This is expected behavior for a first build in React Native.
Now that the app is installed, it's what you will use to control your lights. That web browser thing was just for testing.
- If you need to connect a controller to your network (you don't need to do this if you followed the web browser steps earlier), connect your phone's WiFi to the Access Point the ESP created before you open the app. When the app opens and you are on a private network created by a light controller, it (the app) will begin with the screen that allows you to input network credentials and get the ESP connected to WiFi. Complete that process, reconnect your phone to your home network, then close and re-open the app.
- If the controller is already connected to your network and your phone is on the same network, the first time you open the app, your only option is going to be to add controllers. Click the "+" button in the upper right. For now, you need to add a controller by IP address (see github issue), so tap that button, type in the IP address of the 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.
To control the lights, tap on the button for the controller (it will show the IP address for now). The controls are self-explanatory. 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 assigned 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.
You're finished with the actual work. Now it's time to play.
Step 6: Find an Application and Play With It
If you're here, it's likely that you already know how you are going to use the lights. I can't offer any instructions for this part because it's your project from here!
I started this project to make backlit signs. If you saw my previous Instructable, you already know that I was originally planning to write about those signs, but I kept finding ways I could improve the project until it turned into three separate Instructables. This is part two, and part three is here now. (Instructables link)
Use your imagination. These lights can be a lot of fun, and can enhance a wide variety of fixtures. I was happily surprised when I finally got several sets of lights installed in my house and several of my family members downloaded the app and began playing with them. Like I mentioned in the introduction, my wife and I have had a lot of fun having wars overriding each other's color choices, and my young nephew was enthralled for the better part of an evening spinning around the room controlling nine sets of lights on three signs (while learning how mixing primary colors creates other colors). We've only started playing with the final product.
I already have an idea for my next application, which is to provide focused lighting for 3D printing photography. After that, the bar room in my house is in need of a makeover, and these lights will provide the perfect ambient lighting for the shelves and under the bar top (where the bartender has to work).
I'd love to see pictures of your projects! Please share in the comments.
Step 7: Wrap It Up
The instructions are done, but I want for this controller to have a future.
Be sure to check out the new and improved version of this controller - now with better instructions, simplified hardware, and a PCB you can purchase (in case you don't want to make your own).Instructables link
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
As you may have read, I am a supporter of Open Source Software. All of the software for this project is available on github (Link). If you are a software developer and have some interest in progressing the software for this project, please head over to the github page and check out the Issues tab. I could particularly use a few hours from someone with "best practices" experience in React Native. (github link)
I believe that it would be amazing for it to become commonplace for products on the market to use Open Source software AND hardware, and this could be a good product to be on the front-end of that trend. If you have experience in successful crowdfunding or in something like working with SparkFun (some entity that aids in the production and distribution of products), please let me know in the comments. I don't have the capital to turn this into a commercial product, and I've never navigated the channels of obtaining funding for manufacturing a physical product. I would like to be able to sell the custom PCBs and the electronics case to hobbyists, and fully-functioning units to everyone else.
Finally (for this Instructable)... I am a software developer by profession, and I play with electronics as a hobby. I believe that there is a way to simplify the electronics (possibly using a shift register?) and/or to make it possible to control more than two sets of lights from a single ESP8266, but I lack the knowledge to make that happen. If you have any ideas that either simplify the electronics or make it possible to add more lights for each controller, please let me know in the comments.
I can see the finish line!
Runner Up in the
Make it Glow Contest 2018