Make Your Arduino a Web Server

2017-03-03 | By All About Circuits

License: See Original Project Arduino

By using an Ethernet shield, you can turn an Arduino into a web server!

You can turn your Arduino into a simple web server by equipping it with an Ethernet shield. Here are some things you can do if you access your server with a browser running on a computer connected to the network that your Arduino is on:

Use Javascript buttons to control hardware from a webpage.
Use simple HTML to read the state of a switch.
Use simple HTML to read the value of a sensor.

Arduino Ethernet Shield

Hardware required

You need the following in order to use an Arduino as a web server:

Arduino Mega2560
Ethernet Shield
Wired LAN Connection with speed of 10/100Mb

Connect the Arduino to the Internet through the Ethernet shield. The setup is simple: just plug the Ethernet shield’s header pins into your Arduino, then connect an Ethernet cable to the shield. The image below shows this setup:

Image of the correct setup

Experiment

We will read the state of a switch in order to demonstrate how to use the Arduino as a web server.

Hardware Required

1 x Ethernet cable
1 x Wi-Fi Router
1 x Arduino Mega2560
1 x Ethernet Shield
1 x Breadboard
3 x Jumper Wires
1 x 10k Resistor
2 x 9V Adaptor
1 x pushbutton

Wiring Diagram

First, connect the components as shown in the diagram above. Pin 8 on the Arduino is connected to the pushbutton and is configured as INPUT. The Arduino will read a LOW value on this pin when the button is pressed. This will make Arduino set the status of the OUTPUT to ON. When the button is released, the output will be set to OFF. The switch’s status will be sent to the web server.

Ethernet configuration

You will use the Ethernet.h library to control the Ethernet shield.

You will need to assign the shield a MAC and IP address. You can do this by using theEthernet.begin() function. A MAC address is a globally unique identifier for a particular device. Most Ethernet shields come with a sticker that indicates the MAC address. A random MAC address should work for older shields, but you shouldn’t use the same one for multiple boards. An IP address’s validity depends on the configuration of your network. If you’re using DHCP, it can dynamically assign an IP to the shield.

IP ADDRESS

An IP address is a numerical label assigned to each device participating in a computer network that uses the Internet Protocol for communication. You can specify the IP address by writing this line:

Copy Code

byte ip[] = { 192, 168, 0, 112 };

and change it to match your own setup. For example, to assign the Ethernet shield’s IP to 192.168.0.50, write this line:

Copy Code

byte ip[] = { 192, 168, 0, 50 };

MAC ADDRESS

A MAC (media access control) address is a unique identifier that’s assigned to each device in a physical network. Every piece of network equipment has a unique serial number to identify itself over a network. This is normally hard-programmed into the equipment’s firmware. But, with Arduino, we can define the MAC address, ourselves.

Copy Code

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0D, 0x85, 0xD9 };

The following commands will allow you to set the subnet and gateway:

Copy Code

byte subnet[] = { 255, 255, 255, 0 }; //assigning subnet mask
byte gateway[] = { 192, 168, 0, 1 }; //assigning gateway

This block of code below will allow you to set up your Ethernet shield:

Copy Code

/********************ETHERNET SETTINGS ********************/
byte mac[] = { 0x90, 0xA2, 0xDA, 0x0D, 0x85, 0xD9 }; //assigning mac address
byte ip[] ={ 192, 168, 0, 112 }; // ip in lan
byte subnet[] = { 255, 255, 255, 0 }; //assigning subnet mask
byte gateway[] = { 192, 168, 0, 1 }; // assigning default gateway

We have a photo of the system below. This shows how the Arduino connects to the Wi-Fi router. The Ethernet cable connects the shield to the router which then connects wirelessly with a computer.

Image of the system

Program

The code below is a program that loads a simple web page:

Copy Code

client.println("<!DOCTYPE html>"); //web page is made using HTML
client.println("<html>");
client.println("<head>");
client.println("<title>Ethernet Tutorial</title>");
client.println("<meta http-equiv=\"refresh\" content=\"1\">");
client.println("</head>");
client.println("<body>");
client.println("<h1>A Webserver Tutorial </h1>");
client.println("<h2>Observing State Of Switch</h2>");
client.print("<h2>Switch is:  </2>");
if (digitalRead(8))
{
client.println("<h3>ON</h3>");
}
else
{
client.println("<h3>OFF</h3>");
}
client.println("</body>");
client.println("</html>");

This program will display a web page on your browser when the Arduino’s assigned IP address is accessed. See the code below:

Copy Code

client.println("<http-equiv=\"refresh\" content=\"1\">");

This line instructs your browser to refresh the page. When you access the page again, the Arduino will again read the switch’s status and display it.

Remember, you can always view the displayed web page’s source code. When you press the button, you can see the changing state of the switch as demonstrated in the video demo.

You can also set your Arduino up to run without a router. To do this you’ll need to:

Manually assign an IP address to the Arduino's Ethernet. Let’s say 192.168.0.2 and Subnet mask 255.255.255.0 and the default Gateway empty.
Link the computer and the Arduino using a crossover Ethernet cable.
After that, you should be able to get your Arduino site up on http://192.168.0.2 from the computer.

Here’s the code you would load into the Arduino to connect it directly to your computer without a router:

Copy Code

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


/******************** ETHERNET SETTINGS ********************/

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0D, 0x85, 0xD9 };    //physical mac address
byte ip[] = { 192, 168, 0, 112 };                   // ip in lan
byte subnet[] = { 255, 255, 255, 0 };              //subnet mask
byte gateway[] = { 192, 168, 0, 1 };              // default gateway
EthernetServer server(80);                       //server port


void setup()
{
Ethernet.begin(mac,ip,gateway,subnet);       // initialize Ethernet device
server.begin();                                     // start to listen for clients
pinMode(8, INPUT);                                 // input pin for switch
}

void loop()
{
EthernetClient client = server.available();     // look for the client

// send a standard http response header

client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connnection: close");
client.println();

/* 
This portion is the webpage which will be
sent to client web browser one can use html , javascript
and another web markup language to make particular layout 
*/

client.println("<!DOCTYPE html>");          //web page is made using html
client.println("<html>");
client.println("<head>");
client.println("<title>Ethernet Tutorial</title>");
client.println("<meta http-equiv=\"refresh\" content=\"1\">");

/*
The above line is used to refresh the page in every 1 second
This will be sent to the browser as the following HTML code:
<meta http-equiv="refresh" content="1">
content = 1 sec i.e assign time for refresh 
*/

client.println("</head>");
client.println("<body>");
client.println("<h1>A Webserver Tutorial </h1>");
client.println("<h2>Observing State Of Switch</h2>");

client.print("<h2>Switch is:  </2>");

if (digitalRead(8))
{
client.println("<h3>ON</h3>");
}
else
{
client.println("<h3>OFF</h3>");
}

client.println("</body>");
client.println("</html>");

delay(1);                  // giving time to receive the data

/*
The following line is important because it will stop the client
and look for the new connection in the next iteration i.e
EthernetClient client = server.available();
*/
client.stop();

}