mywebsite/New Folder/2015-10-28-wifi-led.html

<div class="blog-post">
	<h2 id="title" class="blog-post-title">Wifi Controlled LED Lights</h2>
	
	<p id="date" class="blog-post-meta">October 28, 2015 by Mitchell</p>

	<p id="intro">LED lights can be used for many different things. I have used LED lights in the past in my computer and even on my desk. They have always been wired to a physical switch. I now have LED lights that I can turn on and off and even change color from a simple web page that I can access with my phone.
	</p>

	<hr>

	<p>For this project I used the ESP8266 microcontroller to connect to my wireless network, run a web server, and control an RGB LED strip based on inputs from a web form. I followed <a href="https://learn.adafruit.com/rgb-led-strips">this guide</a>, but incorporated Wifi to control the LEDs.
	</p>

	<p>Required Components
	</p>

	<p>ESP8266 <br>
		12v Powersupply 1.2 Amps per meter (Keep in mind the ESP8266 can draw 200-400ma) <br>
		Wiring <br>
		<a href="http://www.banggood.com/10-Pcs-TIP120-NPN-TO-220-Darlington-Transistors-p-932779.html">TIP120 Transistors</a> <br>
		12v to 3.3 volt converter

	</p>

	<br>

	<p>Code can be found <a href="https://github.com/mgerb/wifi_leds/blob/master/wifi_RGB_strip.ino">here</a>.</p>

	<div>
		<script src="https://gist.github.com/mgerb/7858a3d20041dd94c841.js"></script>
	</div>

	<br>

	<h3>Code</h3>
	<p>Depending on which version of ESP8266 you have, this might not work. You need at least 3 GPIO pins. I used version ESP-07, which has plenty of usable GPIO pins. The code is fairly simple. Basic functionality includes connecting to my Wifi network and starting up a web server. I was able to log into my router after the ESP connected to assign it a static IP. This way I could always access the web server with the same IP address.
	</p>

	<p>The main program loop listens for an http request on the web server. If the cycle parameter is set to true, the color cycle function will continue to run until the server gets another HTTP request. The color cycle function happens to be a problem because it does not run asynchronously. This means that the whole color cycle must complete before it can respond to another HTTP request. This can cause delays when accessing the web page. Because this is a small personal project I didn't look into fixing this issue.
	</p>

	<p>All data from the web page is passed to the server through get parameters. The program parses through these parameters and checks to see if any of the colors are out of range. If they are out of range it either sets them to a max value of 250 or a min value of 0 (off). The changeColor method is called with paramters from the web form.
	</p>

	<h3>Changing Colors</h3>

	<p>The changeColor function takes in 6 parameters; one for current color and one for each color passed from the web form. This function needs the current color because it implements the changing of colors gradually. Again, it is all synchronous so during the changing of colors the web server will not be able to respond to requests.
	</p>

	<h3>Cycling Colors</h3>
	<p>The color cycle function is a bit more confusing than the changeColor function. This function cycles through each color once. The delay can be adjusted to how fast you would like the cycle to last. This function will continuously get called as long as the cycle boolean is true. After each cycle the server will still check for an http request. Like I mentioned above this function is synchronous so it must complete a full cycle before any other code is executed.
	</p>

	<p>This function is only chaning 2 RGB values at any one time. It contains two loops, one of which is nested. The first loop selects two pins to be cycled at one time: rgbColor[decColor] and rgbColor[incColor]. For example, it will first select Red and Green, then Green and Blue, and finally Blue and Red. During each selection, a nested loop is run, which cycles the color values of selected color pins. Red starts at 250 where Green starts at 0. The nested loop cycles Red to 0 while cycling Green to 250, exits the nested loop, and then proceeds to cycle Green and Blue, and finally Blue and Red.
	</p>

	<h3>Wiring</h3>

	<p>The wiring for this project is fairly straight forward. The image below is from Adafruit's website and it illustrates the wiring for an Arduino. The ESP8266 wiring is fairly similar, but because it runs on 3.3 volts, I have used two regulators to convert 12 volts. I used a 5v and 3.3v regulator because the 3.3v regulator could not take 12v as an input. You could also just get a 12v to 3.3v converter but I used what I had on hand.
	<br>
	<br>
	12v PSU > 5v > 3.3v > ESP8266
	<br>
	<br>
	The power on the LED strip is wired straight to the positive connections on the 12v power supply.

	</p>

	<div>
	<img class="img-responsive" src="https://learn.adafruit.com/system/assets/assets/000/002/692/medium800/led_strips_ledstripfet.gif?1396785823" alt="image">
	</div>

	<br>

	<p>The image below is how I have my ESP8266 wired under my desk to control my led lights. As you can see the power comes in from the top right and the output for each RGB pin is on the left where the black is the 12v.
	</p>


	<div>
	<img class="img-responsive" src="http://i.imgur.com/4p5CKOL.jpg" alt="image2">
	</div>

	<br>

	<p>A picture of the final setup. I have one long LED strip along the back of the desk and two smaller strips on the back of each of the monitors.
	</p>

	<div>
	<img class="img-responsive" src="http://i.imgur.com/aI5clZW.jpg" alt="image2">
	</div>
</div>