Controlling relays is a central piece in any home automation system. With them, you can easily switch on and off any electrical device in your home, like lights. This project is the second part of a series showing you how to use Arduino & the CC3000 WiFi chip for home automation purposes. The first part was dedicated to how to read data wirelessly from a temperature & humidity sensor.

In this project, we are going to see how to wirelessly control a relay from your computer or your smartphone, to build a wireless-controlled light switch for example.  To make things more efficient, we are going to create a small web server running on the Arduino board, that will receive the commands coming from your computer. As usual, the whole code for this project can be found inside our GitHub repository. Let’s dive in !

Hardware Requirements

The whole project is based on the Arduino platform, so of course you will need an Arduino board. I really recommend using the Arduino Uno board for this project, as it is the only board that is currently compatible with the CC3000 library at the time this article was written.

Then, you need the CC3000 chip. As in the previous article, I recommend using the Adafruit CC3000 breakout board, which is the only one I tested that worked without problem. It is nice and compact, has voltage regulators onboard, as well as an onboard antenna:

cc3000

You also need a relay and some components around it. I used a 5V relay for this project, so it can directly be connected to the Arduino Uno board. You also need a standard rectifier diode to protect the relay, and one LED & a 220 Ohm resistor to test if the relay is working correctly.

Finally, you need a breadboard and some jumper wires to make the connections between the different parts.

This is the list of the components that were used in this project:

For this project, you just need the usual Arduino IDE, the Adafruit’s CC3000 library, and the CC3000 MDNS library. We are also going to use the aREST library to send commands to the relay via WiFi. To install a library, just download the required folder, and put it into your /Arduino/libraries/ folder.

Hardware Configuration

The hardware configuration for this project is actually not that complicated, thanks to the good informations that you will find on the CC3000 breakout board. Connect the IRQ pin of the CC3000 board to pin number 3 of the Arduino board, VBAT to pin 5, and CS to pin 10. Then, you need to connect the SPI pins to the Arduino board: MOSI, MISO, and CLK go to pins 11,12, and 13, respectively. Finally, take care of the power supply: Vin goes to the Arduino 5V, and GND to GND.

Let’s now connect the relay. After placing the relay on the breadboard, you can start identifying the two important parts on your relay: the coil part which command the relay, and the switch part where we will attach the LED. First, connect pin number 8 of the Arduino board to one pin of the coil, and the other pin to the ground of the Arduino board. You also have to place the rectifier diode (anode connected to the ground pin) over the pins of the coil to protect your circuit when the relay is switching.

Then, connect the +5V of the Arduino board to the common pin of the relay’s switch. Finally, connect one of the other pin of the switch (usually, the one which is not connected when the relay is off) to the LED in series with the 220 Ohm resistor, and connect the other side of the LED to the ground of the Arduino board.

The following picture summarizes the hardware connections:

cc3000_relay_bb

Testing Individual Components

I detailed the configuration of the CC3000 breakout board in a previous article, so we are simply going to test the relay in this part. But don’t worry, we are going to see the CC3000 & WiFi configuration again when testing the whole system.

You can test the relay with the following sketch:

const int relay_pin = 8; // Relay pin

void setup() {
  Serial.begin(9600);
  pinMode(relay_pin,OUTPUT);
}

void loop() {

  // Activate relay
  digitalWrite(relay_pin, HIGH);

  // Wait for 1 second
  delay(1000);

   // Deactivate relay
  digitalWrite(relay_pin, LOW);

  // Wait for 1 second
  delay(1000);
}

The code is pretty self-explanatory, you can just upload it to the board and the relay should switch states every seconds, and the LED should switch on and off accordingly.

Adding WiFi Connectivity

Let’s now control the relay wirelessly using the CC3000 WiFi chip. The software for this project is based on the TCP protocol, just like the WiFi weather station project I mentioned before. However, for this project, the Arduino board will be running a small web server, so we can “listen” for commands coming from the computer. We will first take care of the Arduino sketch, and then we will see how to write the server-side code and create a nice interface.

First, the Arduino sketch. The goal here is to connect to your WiFi network, create a web server, check if there are incoming TCP connections, and then change the state of the relay accordingly. I will only put the important parts of the code in this article, you can find the whole code here. You need to import the right libraries:

#include <Adafruit_CC3000.h>
#include <SPI.h>
#include <CC3000_MDNS.h>
#include <Ethernet.h>
#include <aREST.h>

Then, you need to define inside the code what is specific to your configuration: WiFi name & password, and the port for the TCP communications (I used 80 here):

// WiFi network (change with your settings !)
#define WLAN_SSID       "yourNetwork"       // cannot be longer than 32 characters!
#define WLAN_PASS       "yourPassword"
#define WLAN_SECURITY   WLAN_SEC_WPA2 // This can be WLAN_SEC_UNSEC, WLAN_SEC_WEP, WLAN_SEC_WPA or WLAN_SEC_WPA2

// The port to listen for incoming TCP connections 
#define LISTEN_PORT 80

We can then create the CC3000 instance, server and aREST instance:

// Server instance
Adafruit_CC3000_Server restServer(LISTEN_PORT);

// DNS responder instance
MDNSResponder mdns;

// Create aREST instance
aREST rest = aREST();

In the setup() part of the sketch, we can now connect the CC3000 chip to the network:

cc3000.connectToAP(WLAN_SSID, WLAN_PASS, WLAN_SECURITY);

Now you can ask, how will the computer know where to send the data ? One way would be to run the sketch once, then get the IP address of the CC3000 board, and modify the server code again. But we can do better, and that’s where the CC3000 MDNS library comes into play. We will basically assign a fixed name to our CC3000 board with this library, so we can write down this name directly into the server code. This is done with this piece of code:

if (!mdns.begin("arduino", cc3000)) {
    while(1);
}

We also need to listen for incoming connections:

restServer.begin();

Now, we will code the loop() function of the sketch that will be continuously executed. We first have to update the mDNS server:

mdns.update();

The server running on the Arduino board will basically wait for incoming connections & handle the requests:

Adafruit_CC3000_ClientRef client = restServer.available();
rest.handle(client);

It’s now quite easy to test the projects via WiFi. Make sure you updated the sketch with your own WiFi name & password, and upload the sketch to your Arduino board. Open your Arduino IDE serial monitor, and look for the IP address of your board. Let’s assume for the rest here that it is something like 192.168.1.103.

Then, simply go to your favorite web browser, and type:

192.168.1.103/digital/8/1

You should see that your relay automatically turns on. For more detail on the aREST library, you can visit the official GitHub repository of the library.

Building the Relay Interface

We will now code the interface of the project. There will be two parts here: an HTML file containing the interface, and a client-side Javascript file to handle the clicks on the interface. The interface here is based on the aREST.js project, which was made to easily control WiFi devices from your computer.

Let’s first see the HTML file, called interface.html. The first part consists in importing all the required libraries for the interface:

<head>
  <meta charset=utf-8 />
  <title>Relay Control</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/Foliotek/AjaxQ/master/ajaxq.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/marcoschwartz/aREST.js/master/aREST.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>

Then, we define two buttons inside the interface, one to turn the relay on, and the other to turn it off again:

<div class='container'>
 <h1>Relay Control</h1>
 <div class='row'>
   <div class="col-md-1">Relay</div>
   <div class="col-md-2">
     <button id='on' class='btn btn-block btn-success'>On</button>
   </div>
  <div class="col-md-2">
    <button id='off' class='btn btn-block btn-danger'>On</button>
  </div>
 </div>
</div>

Now, we also need a client-side Javascript file to handle the clicks on the buttons. We also create a device that we link to the mDNS name of our Arduino device. If you changed this in the Arduino code, you’ll need to modify it here as well:

// Create device
var device = new Device("arduino.local");

// Button
$('#on').click(function() {
  device.digitalWrite(8, 1);
});

$('#off').click(function() {
  device.digitalWrite(8, 0);
});

The complete code for this project can be found on our GitHub repository. Download all the files, go into the interface folder, and simply open the HTML file with your favourite browser. You should see something similar inside your browser:

Screen Shot 2014-11-18 at 10.04.46

Try now to press a button on the web interface: it should change the state of the relay nearly instantly.

If you managed to get it working, bravo, you just built a WiFi-controlled light switch! Of course, you can control much more than lights with this project. Just make sure your relay supports the power required for the device you want to control, and you’re good to go!

Update 26/08/15: The project was updated and is now using the aREST & aREST.js libraries. It greatly simplified the code and made the project works more reliably. Let me know if you encounter any issues with the new code!