Give Your Arduino Project Its Own Mini-Webserver, With An Ethernet Shield

featured arduino webserver   Give Your Arduino Project Its Own Mini Webserver, With An Ethernet ShieldA while ago, I showed you how to setup an internet control system for your Arduino – but it had to stay connected to a computer through USB in order to maintain the internet connection. If you have an Ethernet shield though, that’s not necessary  Today we’re going to look at setting up an Arduino as a basic webserver so we can host our own device control website.

You will need:

  • An Arduino, or Arduino clone as detailed here
  • Ethernet Shield (~$35) – make sure you get a version that matches your Arduino as they aren’t all compatible
  • Spare port on your router or switch, and Ethernet cable
  • The WebServer example provided in the Arduino application

Setting up

The Ethernet shield uses pins 10 through 13 for controlling the network connection, so leave those out of your project; pin 4 is also used for the SD card, but we won’t be using that today.

First things first – open up the File->Examples->Ethernet->WebServer that’s provided within the Arduino IDE. Find the lines referring MAC and IP address.

ip config   Give Your Arduino Project Its Own Mini Webserver, With An Ethernet Shield

The MAC address for mine was found on the box – yours may be on the shield itself. Adjust the first line of values – you need to leave the preceding 0x bit though. Technically speaking, it doesn’t really matter what you put here so long as you don’t have any conflicting values on your subnet – but even so, this was the addressed assigned by the manufacturer, so we should probably stick with that. Just know that if you get it wrong, it will still work.

ehternet sheild box   Give Your Arduino Project Its Own Mini Webserver, With An Ethernet Shield

Next up is the IP address. We want a specific fixed address so we can setup port forwarding properly – the shield is capable of getting an address from DHCP, but that’s only useful if it’s merely going to be used as a client, not a server. Fill in an IP address that’s unused and memorable on your local network, your router IP, and 255.255.255.0 (the subnet). If none of this is making sense to you, go read our free and thorough guide to home networking.

Port Forwarding

Edit the line that says EthernetServer server(number), and change the number to 8081. This will setup our server to listen on port 8081 in case your ISP is blocking web traffic on the traditional port 80.

Upload the demo at this point and test it out from a local machine. You will of course need to plug in the Ethernet cable too. Keep the USB plugged in too, as we need it for power – you can replace that with a 9V power supply later, but we’re still testing.

Noob-tip: if you get this error, it means you’ve mistakenly put a capital O instead of a 0 in the MAC address area. There is no O in hex-values! If you really are new, it may be worthwhile checking out our beginner’s Arduino guide!

zero error   Give Your Arduino Project Its Own Mini Webserver, With An Ethernet Shield

To access the Arduino, type in the address and port number directly from a browser.

arduino internal test   Give Your Arduino Project Its Own Mini Webserver, With An Ethernet Shield

You should see something like that – so far so good. Unfortunately, this is only accessible on the local network right now, so head on into your router’s port configuration page to set up a redirect from port 8081 to the same port on your Arduino’s IP (See: What is port forwarding?)

port forwarding   Give Your Arduino Project Its Own Mini Webserver, With An Ethernet Shield

Test this out from a mobile 3G internet device with Wifi disabled; remember to use your public IP address, not your local network address. Your router should be able to tell you this, or just ask Google “what is my ip“.

arduino from 3g   Give Your Arduino Project Its Own Mini Webserver, With An Ethernet Shield

Understanding the output

The page being served in the demo is reading values from the analog pins – but since there’s nothing connected there, you’re going to get nonsense. Try connecting a light sensor (photo resistor) to port A0 and +5v, with a 10k resistor also on A0 and gnd (this is a voltage divider, since the analog pins can only read voltage, and not resistance) just to confirm the server is actually reading values. Notice that when light intensity changes, the values on the other pins actually change too – this is because they’re all unconnected.

Getting Interactive

Reading these values is all well and good, but making the jump to controlling an Arduino from here is quite a leap, and outside the scope of this tutorial today. Instead of re-inventing the wheel, I’ll point you towards Arduino forum user hari who wrote a basic API for interacting with digital pins. Using this code (I’ve modified it to work with the latest Ethernet library), connect the long lead of an LED (anode) to pin 8, and the short lead to pin 7 (with a suitable resistor). You can then use URLs of the form http://ip:port/digitalWrite/8/1 to turn on the LED, and http://ip:port/digitalWrite/8/0 to turn it off, and read analog values with analogRead/0.

This example from bildr will also teach you how to control a sequence of LEDs by reading the GET request.

You might also like to checkout this example which outputs a form on the page to control a blinkm RGB LED, though you could easily adapt it for an RGB  strip such as the dynamic ambient lighting project we built a while back.

Well, I had fun building these, so I hope you did too. If you’ve made a library which makes serving up pages and controls simple, please do get in touch in the comments.

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

12 Comments -

Oklahoma_Mike

I’m sure that if I ever actually purchase one of these I’ll find out they’re incredibly useful.

Chris Marcoe

Wouldn’t it be easier and cheaper to do this with a a Raspberry Pi? I’m not really sure because I’ve never used a Arduino, but i do have a Pi.

Ben J

My thoughts exactly.

muotechguy

In the context of merely setting up a mini-webserver, certainly. But then you don’t have the Arduino; the power of this is really in integrating a web server to existing Arduino projects. The Pi is great for mini-computing, but not really for electronics prototyping.

Chris Marcoe

As for the addition of a web-server, that makes sense. I was thinking of if you were to start from scratch to make one.

Ben J

I was just thinking to myself that the Raspberry Pi would be a more elegant alternative to this. But this is well worth the read though. Good article.

echantrea

Greate information. Which one is better if compare Arduino with Raspberry Pi?

muotechguy

That’s not a comparison that can be made. What are you wanting to make? For a simple webserver, probably the Pi. For more complex electronic projects, the Arduino by far.

Doc

“Give Your Arduino Project It’s Own Mini-Webserver, With An Ethernet Shield”

*its* #corrections

husin

i need help in this code because when emergency occure by 4(high) i can’t back to previous state …….how can i do this????

//ARDUINO 1.0+ ONLY
//ARDUINO 1.0+ ONLY

#include
#include
boolean reading = false;

////////////////////////////////////////////////////////////////////////
//CONFIGURE
////////////////////////////////////////////////////////////////////////
byte ip[] = { 192, 168, 16, 71 }; //Manual setup only
//byte gateway[] = { 192, 168, 1, 1 }; //Manual setup only
//byte subnet[] = { 255, 255, 255, 0 }; //Manual setup only

// if need to change the MAC address (Very Rare)
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

EthernetServer server = EthernetServer(80); //port 80
////////////////////////////////////////////////////////////////////////

void setup(){
Serial.begin(9600);

//Pins 10,11,12 & 13 are used by the ethernet shield

pinMode(2, INPUT);// SWICH
pinMode(3, OUTPUT); //LAMP
pinMode(4,INPUT);// EMERGANCY
pinMode(6,INPUT);

Ethernet.begin(mac);
//Ethernet.begin(mac, ip, gateway, subnet); //for manual setup

server.begin();
Serial.println(Ethernet.localIP());

}

void loop(){

digitalWrite(6,LOW);
if((digitalRead(4)==LOW)||(digitalRead(6)==HIGH))
{
if(digitalRead(2)==HIGH)
{
digitalWrite(3,HIGH);
delay(5000);
digitalWrite(3,LOW);

}

}

checkForClient(); // listen for incoming clients, and process qequest.

}

void checkForClient(){

EthernetClient client = server.available();

if (client) {

// an http request ends with a blank line
boolean currentLineIsBlank = true;
boolean sentHeader = false;

while (client.connected()) {
if (client.available()) {

if(!sentHeader){
// send a standard http response header
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-Type: text/html”);
client.println();
sentHeader = true;
}

char c = client.read();

if(reading && c == ‘ ‘) reading = false;
if(c == ‘?’) reading = true; //found the ?, begin reading the info

if(reading){
Serial.print(c);

switch (c) {
case ‘4’:
//add code here to trigger on 2
triggerPin(4, client);
break;
case ‘6’:
//add code here to trigger on 3
triggerPin(6, client);
break;

}

}

if (c == ‘\n’ && currentLineIsBlank) break;

if (c == ‘\n’) {
currentLineIsBlank = true;
}else if (c != ‘\r’) {
currentLineIsBlank = false;
}

}
}

delay(1); // give the web browser time to receive the data
client.stop(); // close the connection:

}

}

void triggerPin(int pin, EthernetClient client){
//blink a pin – Client needed just for HTML output purposes.
client.print(“Turning on pin “);
client.println(pin);
client.print(“”);

if( pin, HIGH )
{
digitalWrite(4 , HIGH );
digitalWrite(6, HIGH );}

}

panagiotis

i want to ask how can i make my ip adress public?
in local network it works fine but when i am gonna get in from my phone it returns nothing…
if anyone can help please reply…

James T

Did you read the whole article? The last section on port forwarding specifically addresses this. Basically, you don’t make the IP of your Arduino public – you simply tell your router to forward all public requests to the Arduino, using port forwarding config page from your router.