Using an Ethernet shield, you can use an Arduino as a Web server.

By equipping an Arduino with an Ethernet shield you can turn it into a simple web server, and by accessing that server with a browser running on any computer connected to the same network as the Arduino, you can:

  • Control hardware from the webpage (using Javascript buttons).
  • Read the state of a switch (using simple HTML).
  • Read value of a sensor (using simple HTML).


Hardware required

To use an Arduino as a Web server, you need the following:

  • Arduino Mega2560 (or Arduino UNO)
  • Ethernet shield
  • Wired LAN Connection with speed of 10/100Mb
The Ethernet shield connects the Arduino to the Internet. The setup is very simple: just plug the header pins of the shield into your Arduino, then connect an Ethernet cable to the shield.  The image below shows this setup:

Experiment

To demonstrate how to use the Arduino as a Web server, we will read the state of a switch.


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

Connect the components as shown above. Arduino's pin 8 is connected to the pushbutton and is configured as INPUT. When the button is pushed, the Arduino will read a LOW value on this pin. The Arduino will then set the status of the OUTPUT to ON. When it is released, the output will be set to OFF. The status of the switch will be sent to the Web server.


Ethernet configuration

To control the Ethernet shield, you use the Ethernet.h library. 

The shield must be assigned a MAC and IP address using the Ethernet.begin() function. For a particular device, a MAC address is a globally unique identifier. Current Ethernet shields come with a sticker indicating the MAC address. For older shields, a random one should work, but one should not use the same one for many boards. Validity of IP addresses depends on the configuration of one’s network. If DHCP is used, it may dynamically assign an IP to the shield.


IP ADDRESS

IP address (Internet Protocol address) is a numerical label assigned to each device participating in a computer network that uses the Internet Protocol for communication. Specifying the IP address is done by writing the line:

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

and change it to match one own setup. For example, to assign the IP of Ethernet shield to 192.168.0.50, write the line:

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

MAC ADDRESS

MAC address (media access control address) is a unique identifier assigned to each device participating in a physical network. Each piece of networking equipment has a unique serial number to identify itself over a network and this is normal hard-programmed into the equipment’s firmware. However, with Arduino, we can define the MAC address ourself.

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

You can set the subnet and gateway with the help of following commands:

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

So, to setup Ethernet Shield, the block of code is given bellow: 

/********************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

Below is a photo of the system, showing how the Arduino connects to the Wi-Fi router. The Ethernet cable connects shield with the router and router then connects wirelessly with the laptop.


Program

Below is a program that loads a simple Web page.


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>");


                  

  Download Code  


This program will display a web page on a Web browser when the IP address assigned to the Arduino is accessed. The line:

 

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

Instructs the browser to refresh the page. When the page is accessed again, the Arduino will again read the status of the switch and display it.

Remember, you can always view the source of the displayed web page. On pushing the button, you can observe the changing state of the switch as demonstrated in video demo. 

You can also set this up to run without the router. To do this you need to:

  1. Assign a manual IP address to the Arduino's Ethernet say 192.168.0.2 and Subnet mask 255.255.255.0 default Gateway empty.
  2. Use a cross-over Ethernet cable to link the two (laptop and Arduino). 
  3. We should then be able to get your Arduino site up on http://192.168.0.2 from the laptop.

Below is the code that you would load into the Arduino to connect it directly to the PC without the router:


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();

}
                  

  Download Code  


Videos



Comments

1 Comment


  • Saludo, El proyecto esta interesante. Es posible por medio de javascript activar el botton desde el navegador y prender una luz o producir una salida. La siguiente pregunta seria, como es posible obtener o configurar entras y salidas con este dispositivo