Project

How to Use an Arduino as a Web Server

June 06, 2015 by Tim Youngblood

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 perform a variety of tasks.

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:

Read the state of a switch (using simple HTML).

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

 

 

Arduino Web Server Project Hardware

 

 

 

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

Arduino Web Server Board Connections

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:

Setup for Using an Arduino as a Web Server

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

 

Arduino as a Web Server Circuit 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 for Arduinos

 

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.

 

Specifying the 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 };

 

Specifying the 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

Final Setup for Using an Arduino as a Web Server

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.

 

Arduino as a Web Server Program File

 

Below is a program that loads a simple Web page.

 

Arduino as a Web Server Project Code

client.println(""); //web page is made using HTML

client.println("

"); client.println(""); client.println("Ethernet Tutorial"); client.println(""); client.println(""); client.println("

"); client.println("

A Webserver Tutorial

"); client.println("

Observing State Of Switch

"); client.print("

Switch is: <!--2-->"); if (digitalRead(8)) { client.println("

ON

"); } else { client.println("

OFF

"); client.println("");

Arduino_Web_page.zip

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

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.

Connecting Arduino to a PC without a Router

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

 

 

#include 
#include 


/******************** 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("");  		//web page is made using html
client.println("");
client.println("");
client.println("Ethernet Tutorial");
client.println("");

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

content = 1 sec i.e assign time for refresh 
*/

client.println("");
client.println("");
client.println("

A Webserver Tutorial

"); client.println("

Observing State Of Switch

"); client.print("

Switch is: <!--2-->"); if (digitalRead(8)) { client.println("

ON

"); } else { client.println("

OFF

"); } client.println(""); client.println(""); 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(); }

Arduino_Web_Page2.zip

Videos

Give this project a try for yourself! Get the BOM.

6 Comments
  • 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

    Like. Reply
  • H
    hanstakani July 24, 2017

    Hi,
    I can’t make it run it without router…
    Does my computor should be directly linked to the shield with ethernet wire ?
    About the skecth setup:
    byte mac[] = { 0x90, 0xA2, 0xDA, 0x10, 0xDC, 0xBC };  //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);   

    And when i try to connect with browser at 192.168.0.1, it displays page not found.
    What’s going wrong?

    Like. Reply
  • K
    kmw03 September 01, 2017