Introduction: Control Your Lights Through a Webpage!

After playing with RF controllers for a while, I realized one major downside is the need to always have a transmitter to send a signal to the receiver. Wouldn't it be nice if I could use my phone as a transmitter? Well, that is exactly what I have done.

This tutorial will explain how I used Wi-Fi and a webpage to wirelessly control my Christmas lights!

Step 1: Things You Will Need

  1. Microcontroller: Huzzah ESP8266 breakout board (9.99) *
  2. Hook up wire
  3. breadboard ($4)
  4. extension cord ($2)**
  5. Battery pack
  6. 3-5V Arduino Control relay ($4 on ebay)
  7. FTDI Cable ($5 on ebay)
  8. LED
  9. 220 ohm resistor
  10. Your own web-hosting server

*If you've never used the huzzah ESP8266 breakout module before don't worry, as long as you are familiar with the Arduino IDE then you'll be able to use this.You can program the chip inside the huzzah directly using the Arduino IDE. The reason we use this module instead of an Arduino is because we also need Wifi. The board comes with no pins soldered on, so you will have to have some soldering skills!

Step 2: Preparing Your Extension Cord and Control Relay


While you are working on the extension cord, do not plug the extension cord in. The control relay I bought from eBay had exposed pins underneath, if you touch the pins while the extension cord is plugged in you will get shocked and seriously injured. For demonstration purposes I've removed the box I built around it. I cannot stress enough the importance of not plugging the extension cord in while you are working on it!

1. You will want to cut the insulation on the extension cord very carefully making sure you do not cut the insulation on the other wires.

2. Once you've successfully removed the outermost insulation, you will want to cut the black wire and strip the ends.

3. One end should be inserted into the normally open input of your control relay and the other end should be inserted into the common of the control relay. Screw both wires down snugly and refer to the schematic diagram if you are unsure about this step

5. You'll want to hook up the control relay to the Huzzah ESP8266 as laid out in my diagram.

Step 3: Setting Up Your Web Server

I thought it would be neat to be able to remotely control my Christmas lights even when I was not at home. Consequently, I used a web server (It also helps that I had a server lying around).

The setup for this part is fairly simply. You will want to log into your host and find your cPanel. From there you will want to upload my php code to your domain root folder and rename it as index.htm - thats it.

I've coded a really simple user interface consisting of: two radio buttons, a submission button, and text to let you know what the current state of the light is. By selecting a radio button and submitting the value, you an change the state of the light.

The code works by reading in your selected value and then writing that selection to a text file on your server. In this case, I have written it to the file called value.txt. Each time you submit a new choice, the value inside value.txt is overwritten with the new value. For example, if the current state is off, the text inside value.txt will be "Off". If you change the state to on, the text file is changed and the only text inside the file is "On".

You may be interested to know that value.txt can be accessed through your browser, if your domain name is "" you can access the text file by typing "" into your browser. This is an important fact we use in the next step to read the value of the radio button into our ESP8266.

Step 4: Code for the HUZZAH ESP8266

To start, you will need to install ESP8266WiFi.h library, you can find this on adafruit website. Afterwards, you will need to edit some sections of the code to tailor it to your home network and your domain. Specifically, you will need to insert your network name, password, and host name. Change the following lines of code below:

const char *ssid = "Your_network_name";
const char *password ="Your_Network_Password";
const char* host ="";

How does the code work?

The code logs into your home network and then navigates to your Afterwards, it reads in all the characters on the page and carries out separate instructions depending on what was read. If the text "On" was found, pin 16 is turned high and the control relay is energized thus turning on our lamp. If the text "Off" was read, the control relay is de-energized and the lamp turns off. There is a delay of 500ms in between checks.

Step 5: Additional Info

I was curious to see how many milliamps my whole device used during operation. It turns out while the coils are de-energized the MCU uses roughly 74mA. When the coils are energized, the MCU and control relay combo use a total of 130mA.

Since I am currently running it on a battery, I would revise my Huzzah code in the future to implement the esp.deepSleep function to lower the power consumption while the MCU is not checking for changes. I hope my tutorial was helpful!