This project uses the ESP 8266 running Arduino code and it allows you to control an AC outlet and a DC 12 volt output over WIFI. These can be controlled from any web browser on the same network. You can use your cell phone, tablet, or computer to turn on or off the outputs. If you are not comfortable working with AC do not attempt.
Step 1: Parts List
Most of the parts I used were salvaged from old electronics, however I will provide current prices and titles from ebay USA for equivalent electronic components. Its not economical to make a 12 volt dc power supply unless you have the components on hand, so the transformer, bridge rectifier, fuse, fuse holder, and capacitor for it are omitted and wall power supply added. This list does not include tools required, enclosure and pcb layout board.
$2.06 ESP8266 WIFI Wireless Transceiver Module Send Receive LWIP AP+STA for Arduino BE
$1.00 3 Pins Black Plastic AC 125V 15A Panel Mount US Outlet Power Socket
$1.00 6ft 3 PRONG AC POWER CORD FOR TV/PRINTER/DESKTOP PC/LCD/LAPTOP
$1.29 5Pcs Mini Round Black 2 Pin SPST ON-OFF Rocker Switch Button
$1.19 100Pcs 6x6x4.5mm Panel PCB Momentary Tactile Tact Push Button Switch
$1.39 500pcs 50 value 1/4W 0.25W ±1% Metal Film Resistor Assortment Kit
$0.98 50Pcs NPN Transistor TO-92 2N2222A 2N2222
$0.98 30pcs 5mm White Round Superbright LED Light LED
$1.10 100 Pcs 50V Metal Multilayer Monolithic Ceramic Capacitors 0.1uF±10％ Kit
$1.80 10PCS 400V 15uF 400Volt 15MFD Electrolytic Capacitor 10mm×16mm Radial
$1.90 1PCS SMIH-12VDC-SL-C DC 12V 16A 250VAC Power Relay
$0.84 5Pcs LM317T LM317 Voltage Regulator IC 1.2V to 37V 1.5 GM
$0.98 50PCS 1A 1000V Diode 1N4007 IN4007 DO-41 NEW
$2.50 US Power Supply Adapter AC100-240V To DC12V 2A
Step 2: Program the ESP 8266
This time around I had nothing to do with writing custom code, because i found a great tutorial online and just followed it. I recommend first following one of many basic tutorials showing how to setup the esp 8266 with arduino ide and then write a simple code to blink an led to it to confirm everything is working properly. Then head over to www.randomnerdtutorials.com and find the tutorial labeled "esp 8266 web server with arduino ide" and follow it. A big thanks to Rui Santos from randomnerdtutorials for this awesome tutorial.
Step 3: Breadboard the Circuit
If you don't have loose power supply parts laying around follow the the minimum AC wiring diagram for the AC part of this circuit. Then use a separate 12 volt DC wall adapter to power the lm317. This is also easier as it eliminates the power supply AC to DC section on the main diagram. Also keep in mind that when testing the circuit you don't have to use AC because you can hear the relay click on and off. I recommend building the DC half of this circuit first and checking functionality of the relay, led's, and web server. The led's are configured so they light up if the transistor 12 volt DC output is live. When connecting the relay to one of the outputs make sure its used with the diode across it as shown. If you are not sure what you are doing stop and ask, working with AC is extremely dangerous. You may have noticed the momentary push buttons that have to be pushed to pull up the gpio pins during boot up, one of the quirks of the esp 8266. I find it to be very stable when configured in the way shown. For the board to boot correctly you have to push the buttons for around 1 second while powering on.
Step 4: Etch a PCB
I recommend the toner transfer method using hydrogen peroxide, salt, and vinegar to etch the copper clad board. Follow a tutorial online if your unsure of the steps involved. I decided on a separate perf board for the power supply which had no traces on it to isolate it from the main copper clad board.
Step 5: Pull Up Switches
I 3d printed 2 parts one to hold the board while the other was used to press both of the push button switches at once when installed in 1/4" plywood. For the enclosure I used a small 1/4" plywood box that had been glued together previously and it worked out perfectly for this project.