Controlling Appliances Over WiFi And Ethernet

This a simple tutorial on how to setup your Arduino board with Ethernet shield to control your home appliances like Lights or Fans using any device (Mobile/Tablet/Laptop/Desktop) connected to your WiFi network. It is assumed that the reader has gone through the project how to get started with the arduino.

Components Required

1. Arduino Ethernet Shield

2. Arduino Uno (or any other Arduino board compatible with the shield)

3. Relay Board (Number of Relays depend on how many appliances you want to control)

4. WiFi router

5. Ethernet cables

6. Wires

Block Diagram

Fig. 1: Block Diagram of Arduino based Wi-Fi Controlled Home Automations System

HTML (Hyper Text Markup Language)

Yeah right! HTML! How else do you expect to make your interface accessible in all your WiFi enabled devices then?

We basically create an HTML page from Arduino which can be accessed by the devices connected to the network from their respective internet browsers. So we don’t need to install any specific application in each device you want to control your appliance with.

You just need to know some basics of HTML (which I will cover here) but the better you know, the cooler your web interface would look!

Getting Started

– Open the Notepad and copy paste the following code:

<html>

<head>

<title>My First Page Title</title>

</head>

<body>

Congrats! You have created your first Webpage!

</body>

</html>

– Go to File menu and click Save As. Below the file name you would see save as type:

Click on that and you should see All Files. Select it and give a name to your page like for example myweb.html and save it.

Fig. 2: Screenshot of saving webpage on Windows used for controlling home appliances

– Now close the notepad and open the file again using a browser (Mozilla Firefox/ Google Chrome/ IE). You should see something like this.

Fig. 3: Screenshot of a simple HTML webpage

What we wrote above is the basic code.

HTML Tags Explanation

HTML Tags start with ‘<’ symbol and end with ‘>’ symbol. For example let’s take the tag used for making text to be shown in bold letters, which is .

is the opening tag so it indicates from where the operation should start and its corresponding closing tag is which tells where to end the operation.

For example if we write the following in the text editor:

This is a bold text

We get this:

This is a bold text

Some Frequently Used Tags

Tags	Function
<title></title>	Title of the page which would be shown as the name of the browser window and bookmarks
<body></body>	Whatever you want to display on your webpage would be included in this tag
<b></b>	Bold
<u></u>	Underline
<i></i>	Italics
<strike></strike>	Strike through the text
<center></center>	For displaying text on center of the page

Empty Tags

and <hr/> are called empty tags since they don’t have corresponding closing tag. is used for giving line break (equivalent to hitting enter in a word document) and <hr/> is horizontal rule (shows a visible line when used).

Linking to Other pages

This is the most important part for our project. The syntax for linking is as follows:

<a href=”http://www.engineersgarage.com”>Text to be displayed</a>

Here a stands for anchor and href=”” is where you mention the web address where you desire to go to. </a> is the corresponding closing tag and the text between them is the text which would be displayed on the web page.

Remember: Tags can be used within each other also. For example you want a text to be in bold and at the same time underlined, you can use the tags with each other. This:

Text in bold and underlined

Or this:

Text in bold and underlined

Will give you this:

underlined

Well nothing is good without a good example so let us implement everything we just learned into an example code. Copy paste the following into a notepad, save it as a HTML file and see for yourself in the browser.

<html>

<head>

<title>Example Two</title>

</head>

<body>

Everything on this page would be at the center.

<hr/>

This is a sentence in Bold.

This sentence would be underlined

<strike>This sentence would have multiple formatting</strike>

Click the link below to go the Engineers Garage homepage

<a href=”http://www.engineersgarage.com”>EngineersGarage</a>

</center>

</body>

</html>

This is how the page would look in the browser:

Fig. 4: Screenshot of a simple HTML webpage showing simple text

Now that we have learnt the web interface part, let us move on to the next section.

Hardware Setup -Step by Step

Hardware Setup

1) Gather all the parts shown in the image.

Fig. 5: Image showing components used in design of Wi-Fi controlled Home Automation System

Note 1: The one I used is an Indian made Arduino clone. Depending on from which manufacturer you bought, it would look different.

Note 2: This tutorial will teach you to control a single appliance so a single relay (with transistor and free-wheeling diode) is enough as shown in the circuit diagram. I’ve used a relay board for my convenience.

2) Attach the Ethernet Shield carefully to the Arduino board such that the pins align correctly.

Fig. 6: Image of Ethernet Shield for Arduino Uno

3) Connect one end of the Ethernet cable to a LAN port of the Wi-Fi router and other end of the same cable to the computer.

(You can skip the above step if a. You have already configured your router and b. You don’t want to control the appliance using your desktop)

Fig. 7: Image showing Ethernet Cable connected to PC

Fig. 8: Image showing Ethernet Cable connected to Wi-Fi Modem

4) Power ON the Router and configure it (Assigning a name, password and other parameters to Router) using the instructions/ CD given by the Router’s manufacturer.

(Skip this step if the Router has already been configured)

5) Now take another Ethernet cable and connect one end to another LAN port of the Wi-Fi router and other end of the same cable to the Ethernet port of the Ethernet shield.

Fig. 9: Image showing LAN cable connected to Ethernet Shield

Fig. 10: Image showing LAN Cable connected to Wi-Fi Modem

6) Connect the Arduino to your computer and upload the program given. Once everything is in the right place, open the serial monitor in Arduino and you should see something like this on the monitor:

Fig. 11: Screenshot of Arduino Serial Port showing Local IP Address

7) Switch ON WiFi on your Phone/Tablet/Laptop and locate the name of the Router (which you assigned earlier) and enter the password if necessary to connect to the network.

Note: My WiFi SSID is “Robots Reloaded”

Fig. 12: Screenshot of Android’s Settings for connecting to Wi-Fi Router

8) Open your browser and go to the address “http://192.168.0.108” (which was assigned in the sketch uploaded into it)

You should see this page in few seconds

Fig. 13: Screenshot of webpage loaded from Local Server

When opened from desktop/Laptop:

Fig. 14: Screenshot of Webpage on a desktop computer

9) Connect the rest of the circuit as per the circuit diagram.

10) Now click the links and see if the appliance corresponding to that link is responding or not. You would also see something in the serial monitor of Arduino if everything goes right.

At any point if you didn’t get the output as shown in the above steps, check out the troubleshooting part at the end.

Arduino Code Explanation & Troubleshooting

Arduino Code Explanation

– Initialize all parameters like MAC address (The physical address of the Ethernet shield), IP Address (which would be the address you type in the browser to get the web page), gateway and subnet mask.

– Initialize serial communication and Serial Peripheral Interface with the Ethernet shield and a server.

– Enter an Infinite loop.

– Allow a client (which is the device we used to access the web interface page) when the server becomes ready. Read whatever the client sends and store it in the variable ‘readString’

– When client is connected, print the HTML webpage using ‘client.println()’ function.

– If client sends GET request then take necessary action (i.e. when you click a link on your mobile/tablet/PC, a GET request is sent to the server which is the arduino here).

Troubleshooting

– Problem: Nothing is shown on the serial monitor after implementing step 6

Possible cause:

a. The Ethernet shield is not plugged onto the Arduino board correctly.

b. Ethernet cable connected to the shield/ USB cable connected to Arduino can be loose or faulty.

c. Router is not switched ON

Make sure all the connections are correct and press RESET button on the Arduino board.

-Problem: Web page not loading after implementing step 8

Possible cause:

a. You connected to the wrong WiFi network

b. The IP Address you dialed doesn’t match the one in the serial monitor

Make sure you are connected to the same WiFi network with correct password and that you have entered the correct IP Address.

– Problem: Web page not loading after implementing step 8

While you click the links, check the serial monitor output. If you see something like this:

Fig. 15: Screenshot of Arduino Serial Port sending commands to control relays

Then either the connections from Arduino to relay or relay to bulb is loose or wrong. Also check if the bulb and relay works properly or not.

If you don’t see any output on the serial monitor then you might have gone wrong in one of the previous steps.

Improvements

Although only single appliance control is shown here, you can create code based on this model to control any number of appliances through WiFi.

Project Source Code

###

#include <SPI.h>
#include <Ethernet.h>

int relay = 3;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };   //physical mac address
byte ip[] = { 192, 168, 0, 108 };         // ip in lan (that's what you need to use in your browser.
 ("192.168.0.108")
byte gateway[] = { 192, 168, 1, 1 };                   // internet access via router
byte subnet[] = { 255, 255, 255, 0 };                  //subnet mask
EthernetServer server(80);                             //server port    
String readString;

void setup() {
// Open serial communications and wait for port to open:
  Serial.begin(9600);
   while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only
  }
  pinMode(relay, OUTPUT);
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}


void loop() {
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {  
      if (client.available()) {
        char c = client.read();
    
        //read char by char HTTP request
        if (readString.length() < 100) {
          //store characters to string
          readString += c;
          //Serial.print(c);
         }

         //if HTTP request has ended
         if (c == 'n') {         
           Serial.println(readString); //print to serial monitor for debuging
    
           client.println("HTTP/1.1 200 OK"); //send new page
           client.println("Content-Type: text/html");
           client.println();    
           client.println("<HTML>");
           client.println("<HEAD>");

           client.println("<TITLE>WEB INTERFACE</TITLE>");
           client.println("</HEAD>");
           client.println("<BODY>");
           client.println("<center>");
           client.println("WELCOME TO THE WEB INTERFACE OF APPLIANCE CONTROLLER OVER WIFI");
           client.println("<hr />");
           client.println("<br />"); 
           client.println("<H2>Arduino with Ethernet Shield</H2>");
           client.println("<br />"); 
           client.println("<a href="/?relay1on">Switch ON Relay 1</a>");
           client.println("<a href="/?relay1off">Switch OFF Relay 1</a><br />");  
           client.println("<br />");    
           client.println("<br />");
           
           client.println("<p>Created by GANESH SELVARAJ for EngineersGarage.com</p>"); 
           client.println("<br />");
           client.println("</center>");
           client.println("</BODY>");
           client.println("</HTML>");
    
           delay(1);
           //stopping client
           client.stop();
           //controls the Arduino if you press the buttons
           if (readString.indexOf("?relay1on") >0){
               digitalWrite(relay, HIGH);
           }
           if (readString.indexOf("?relay1off") >0){
               digitalWrite(relay, LOW);
           }
         
            //clearing string for next read
            readString=""; 
          
         }
       }
    }
}
}

###