Arduino Ethernet Web Server with Relay

This post shows how to build an Arduino Ethernet web server that controls a relay that is attached to a lamp.

You can access your web server with any device that has a browser and it’s connected to the same network.

Recommended resources:

• Guide for Relay Module with Arduino
• Arduino – Webserver with an Arduino + Ethernet Shield
• ESP8266 Web Server with Arduino IDE
• ESP8266 Web Server Tutorial

If you like Arduino projects and you want to build more, I recommend getting my Arduino Step-by-step Projects – Build 25 Projects course.

Ethernet shield

The Arduino Ethernet shield connects your Arduino to the internet in a simple way. Just mount this module onto your Arduino board, connect it to your network with an RJ45 cable and follow a few simple steps to start controlling your projects through the web.

Note: you must connect an Ethernet cable from your router to your Ethernet shield as shown in the following figure.

Pin usage

When the Arduino is connected to an Ethernet shield, you can’t use Digital pins from 10 to 13, because they are being used in order to establish a communication between the Arduino and the Ethernet shield.

Relay module

A relay is an electrically operated switch. It means that it can be turned on or off, letting the current going through or not. The relay module is the one in the figure below.

This particular relay module comes with two relays (those blue cubes).

About mains voltage, relays have 3 possible connections:

• COM: common pin
• NO: normally open – there is no contact between the common pin and the normally open pin. So, when you trigger the relay, it connects to the COM pin and power is provided to the load (a lamp, in our case).
• NC: normally closed – there is contact between the common pin and the normally closed pin. There is always contact between the COM and NC pins, even when the relay is turned off. When you trigger the relay, the circuit is opened and there is no power provided to the load.

Relating this project, it is better to use a normally open circuit, because we want to light up the lamp occasionally. Read this tutorial to learn more about using a relay module with the Arduino board.

The connections between the relay and the Arduino are really simple:

• GND: goes to ground
• IN1: controls the first relay. Should be connected to an Arduino digital pin
• IN2: controls the second relay. Should be connected to an Arduino digital pin
• VCC: goes to 5V

Parts required

Here’s a complete list of the components you need for this project:

• Arduino UNO – read Best Arduino Starter Kits
• Ethernet Shield
• Relay module
• Lamp cord set (view on eBay)
• Breadboard
• Jumper Wires 

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

Code

Copy the following code to your Arduino IDE and before uploading it to your Arduino board read the “Configuring your network” section below.

/*
 * Rui Santos 
 * Complete Project Details https://randomnerdtutorials.com
*/

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

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1, 111);

// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);

// Relay state and pin
String relay1State = "Off";
const int relay = 7;

// Client variables 
char linebuf[80];
int charcount=0;

void setup() { 
  // Relay module prepared 
  pinMode(relay, OUTPUT);
  digitalWrite(relay, HIGH);
  
  // Open serial communication at a baud rate of 9600
  Serial.begin(9600);
  
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}

// Display dashboard page with on/off button for relay
// It also print Temperature in C and F
void dashboardPage(EthernetClient &client) {
  client.println("<!DOCTYPE HTML><html><head>");
  client.println("<meta name="viewport" content="width=device-width, initial-scale=1"></head><body>");                                                             
  client.println("<h3>Arduino Web Server - <a href="/">Refresh</a></h3>");
  // Generates buttons to control the relay
  client.println("<h4>Relay 1 - State: " + relay1State + "</h4>");
  // If relay is off, it shows the button to turn the output on          
  if(relay1State == "Off"){
    client.println("<a href="/relay1on"><button>ON</button></a>");
  }
  // If relay is on, it shows the button to turn the output off         
  else if(relay1State == "On"){
    client.println("<a href="/relay1off"><button>OFF</button></a>");                                                                    
  }
  client.println("</body></html>"); 
}


void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    memset(linebuf,0,sizeof(linebuf));
    charcount=0;
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
       char c = client.read();
       //read char by char HTTP request
        linebuf[charcount]=c;
        if (charcount<sizeof(linebuf)-1) charcount++;
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == 'n' && currentLineIsBlank) {
          dashboardPage(client);
          break;
        }
        if (c == 'n') {
          if (strstr(linebuf,"GET /relay1off") > 0){
            digitalWrite(relay, HIGH);
            relay1State = "Off";
          }
          else if (strstr(linebuf,"GET /relay1on") > 0){
            digitalWrite(relay, LOW);
            relay1State = "On";
          }
          // you're starting a new line
          currentLineIsBlank = true;
          memset(linebuf,0,sizeof(linebuf));
          charcount=0;          
        } 
        else if (c != 'r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
    Serial.println("client disonnected");
  }
}

View raw code

Configuring your network

Take a look at the configuring your network code snippet:

byte mac[] = {
0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,XXX);

Important: you actually might need to replace that variable highlighted in red with appropriate values that are suitable for your network, otherwise your Arduino will not establish a connection with your network.

Replace the following line with an IP that is available and suitable for your network:

IPAddress ip(X, X, X, X);

In my case, my IP range is 192.168.1.X and with the software Angry IP Scanner I know that the IP 192.168.1.111 is available in my network, because it doesn’t have any active device in my network with that exact same IP address:

IPAddress ip(192, 168, 1, 111);

Schematics

Wire you circuit accordingly to the schematic below:

Demonstration

Your Arduino Web Sever looks like the figure below:

Here’s a demonstration showing what you have at the end of this project:

Wrapping up

With this project you built an Arduino web server that turns a relay on and off.

Now, you can use this project to control any electronics appliance you want.

This project is a simplified version of one of my projects in the  Arduino Step-by-step Projects. If you liked this project make sure you check out the course that includes 23 Arduino projects.