Arduino Web controlled switch/relay over WiFi using arduino Ethernet shield

In this arduino tutorial i am going to teach you how one can control a home appliance with arduino over WiFi. Its a beginner tutorial for getting started with arduino Ethernet shield. After successfully building and implementing this arduino project you can control your home appliances with your cell phones/mobiles, laptops, mac books, desktop computers or i would say with every electronic device on which internet browser can be opened and we can surf over internet.

Arduino Ethernet Shield

Stand alone arduino board/microcontroller can not communicate with devices present on a network. Arduino uno does not have a proper hardware and software to communicate with devices present on network. In order to make arduino to communicate with devices presents on a network we need to attach an external module with arduino which could work as an intermediate between arduino and network. External module/peripheral must contain all the network configuration protocols(MAC, IP etc) and translators which can translate the network commands interpret-able by arduino.

Arduino Ethernet shield is an external board which can be mounted on arduino female headers and this Ethernet shield can now bring arduino over network. Arduino with Ethernet shield can talk/communicate with the devices/peripherals present not only on a home or office network but can go further over internet.

Arduino Ethernet Shield

On Arduino Ethernet shield resides an intelligent unit which contains all the network configuration protocols(TCP, UDP etc) and IP stack. Arduino Ethernet shield has a RJ45 port to communicate with the switches and routers connected to a network. It also has a SD card slot. Data can be read and write to SD card. So arduino Ethernet shield not only provides internet access to arduino it also ads up an external portable EEPROM to arduino in the form of SD card.

Arduino communicates with the Ethernet shield on SPI protocol. Arduino SPI pins 10, 11, 12 and 13 make connection and talks with the arduino Ethernet shield. Many arduino Ethernet libraries are present on internet which can be utilized to work with arduino and Ethernet shield. Arduino Ethernet Libraries are a great path to start with. Libraries contain arduino Ethernet board initialization and startup functions. We only need to write our main code rest of initialization and controlling part is done by the library(Thanks to arduino open source community).

Arduino Ethernet shield Web controlled Fan

Now lets put all the above in practical form and switch On/Off a fan using arduino uno and arduino Ethernet shield. We will connect our arduino with our home network and try to toggle arduino gpio(general purpose input output pin) using our laptop, cell phone or computer.

Every device on a network is identified by an IP and mac address. So if we want our arduino to connect with our home network we must first identify what IP our router is assigning to clients. The best and easiest way is to open from your computer and laptop Command Prompt. You can find cmd by pressing windows button on keyboard and then in search type cmd. Open cmd and enter ipconfig /all command. This command will display the IP that router assigned to your system. See the below picture.

Arduino Ethernet shield IP assignment

Your router is assigning the IP to clients in series 192.168.56.x. X represents the client. So now you know which IP address series your router is working on. How to use this IP? In the project code i will explain it.

Arduino Web control switch using arduino Ethernet shield – Circuit diagram

First mount your arduino Ethernet shield on arduino uno. Then connect your arduino Ethernet shield with router using LAN cable. Connection circuit is shown below.

Arduino Ethernet Shield connection with home router

Next to control the fan we must connect it to digital pin of arduino uno. Fans normally consumes about 500 mA of current. Arduino digital pins can only source out 5 volts at 40 mA max. So we need an extra external circuit to full fill fan power requirements. Relays are great intermediate components which can switch heavy loads by input of of small current. A small input voltage/current can switch heavy loads using relays. I used a pre-assembled arduino relay module for this task. Input of arduino relay board is connected with arduino uno and out put to fan. I hope you people know how to make relay connections. If no just see the below arduino circuit diagram.

Arduino Ethernet shield web controlled fan

Arduino Ethernet shield web controlled fan – Project code

Lets start the project code. First i included the two libraries in the code. These two libraries are required to initialize and communicate with the arduino Ethernet shield.
#include <SPI.h>
#include <Ethernet.h>
After libraries i defined the arduino pin to which i am going to connect the fan. Pin#4 of arduino is used to control the fan.
int fan = 4;
So now our fan controlling arduino gpio is also defined. Now we need to assign MAC and IP to our arduino board or arduino Ethernet shield. Mac is an address which is assigned to every physical device by the manufacturer and user also has control to change the mac address. To arduino Ethernet shield we also need to assign a mac address. Mac address is 48-bit wide. On every private network each device must have a unique and different IP address. I also assigned a mac address to my arduino Ethernet shield. Since i am in my home network to which only 3 to 4 devices are connected normally so i can put mac address which i hope is not conflicting. You can also use the mac which i use when implementing the same project by your self. After mac its time for the real address which is IP address. In the previous picture we identified the IP series our router is assigning to clients which are connected to it. Arduino also needs to request the router for an IP assignment. But we have a small advantage here we can request the router to assign the arduino IP which we need. Like we now our router is working on 192.168.56.x. We can request router to assign us the IP 192.168.56.100. Almost all the time router accepts this request and assign the IP which is requested if this IP is available. In the arduino code i included the below instructions for mac and IP assignment.
byte mac[] = { 0xDE, 0xAD, 0xBE, 0x3F, 0xFE, 0xED };
byte ip[] = { 192.168.56.100 };
I selected .100 because its too far from 1 which is the first client so 100 clients in a home network is not normal.

We want our arduino Ethernet shield to control the fan connected to its pin and we want to control it using a web browser. In web browser we want to load a page which contains the fan control button. Pressing the button generates an event at arduino and arduino switches the fan On or Off. This web page is served by the arduino Ethernet shield and we have to write its code. But before writing code we need to tell the router that our Ethernet shield will serve web pages or technically we need to tell the router that our Ethernet shield will work as a server and it will serve pages to clients. This is done by starting a server with the simple instruction/code statement below.
EthernetServer server(80);

In the setup() function i initialized the serial monitor at 9600 bps. Serial monitor is initialized only for debugging purposes you can comment or delete it if you want. Arduino fan controlling GPIO is made an output pin. Ethernet shield is passed the IP and mac address also the server is started in setup() function.
Ethernet.begin(mac, ip, gateway, subnet);
server.begin();

To check the IP address assigned by the router the instruction Serial.println(Ethernet.localIP()); is included in the code. Its sure that the above 192.168.56.100 will be assigned but its better to check if any error occurred during assignment.

In the loop function arduino server is checking if any client requested web page. The statement EthernetClient client = server.available(); is checking if any request arrived. If so it serves the web page.

Download the code and flash it in your arduino. Now open a web browser in your PC(personal computer). Type the address or IP of arduino web server. The same IP which we requested to router to allot our arduino server. Press enter after typing the IP address in browser. You will see a web page loading ans depending on the speed of network it will load. The size of web page is small for me it loads in less than a second. The web page interface is below.

Arduino Ethernet shield Web Page Control

First a H1 heading “FAN Control” then a small message about the arduino server “Fan control with arduino Ethernet shield“. Next two links Turn On FAN and Turn Off FAN. Both links are working as clickable buttons pressing either of one will toggle the state of fan connected to arduino.

Important: Both the client(your device through which you are accessing arduino fan server) and arduino server must be connected to same network in order for successful shake hand and communication. If any one of them is not present on the same network communication between them is not possible. Web page will not load in your browser.

What happens when you press the toggle link or button in web page? Well the statements in arduino code which defines the link button are
client.println(“<a href=\”/?button1on\”\”>Turn On FAN</a>”);
client.println(“<a href=\”/?button1off\”\”>Turn Off FAN</a><br />”);

Now when you press the link/button web page tries to load the link present in the above HTML statements. In simple words client makes an another request to load the page. At server side when server receives request it decodes it and save the data present in request and instead of offering new page to client it loads the same web page again.

Data present in the link which server decoded is ?button1on and ?button1off.

Next statements which toggles the state of fan are if statements.

if (readString.indexOf(“?button1on”) >0){
digitalWrite(fan, HIGH);
}
if (readString.indexOf(“?button1off”) >0){
digitalWrite(fan, LOW);
}

Download the project code. Code is written in arduino ide. Download folder contains arduino ide .ino project. You just need to change the IP in the code and enter one which your router is sourcing. Provide us your feed back on the project.

Project files