Introduction: How To: Connect Your Arduino to the Internet As a Web Server

The INTERNET OF THINGS...< queue lightning and thunder >

It's what all the cool kids are doing these days. Why should they have all the fun? Let's setup an Arduino as a Web Server that anyone, anywhere can view. Why would we do such a thing? Possible projects include collecting data from a sensor and posting it to the Web or controlling an actuator remotely. Think internet connected fart sensor that logs realtime how awesome your roommate's flatulence is, or perhaps, a robot that hides in the bushes and pokes pedestrians sauntering by.

Above is a quick video detailing the setup that I will take you through. We have a servo and an LED that are controlled via a Web page. The control page is accessible from both the private and public networks (aka: internet accessible for anyone). The video shows me turning both the servo and LED on and off from my computer and iPhone (with the wireless network turned off so as to force it to access the Arduino from the public network). I also have a live video feed coming from a wireless IP camera so that you can view what is happening remotely in the case you were to use this functionality for a remote control application that required monitoring of the system.

Awesome, so let's start tinkering on Al Gore's interweb. Here's what you'll need...

Materials:

1) Internet connection

2) Internet router and associated information (LAN IP address, WAN IP Address... don't panic more on this soon)

3) Arduino

4) Arduino compatible Ethernet shield (I am using the shield by Seeed Studio)

5) Ethernet cable

6) Computer with ability to program the Arduino (arduino IDE)

Lingo:

1) LAN = Local Area Network

2) WAN = Wide Area Network

3) IP Address = Internet Protocol Address

4) ISP = Internet Service Provider

Lets get going!

Step 1: Collect Information About Your Home Network

First things first, you need to find the following information about your home network:

a) The login name and password for your router. My login credentials were listed on the back of my router on a sticker. They were super complex credentials... Login = "admin", Password = "password".

b) Your LAN IP address (aka: Private IP address) and/or your router manager login site. I have a NetGear router and it listed the router manager login site on the back sticker as http://www.routerlogin.net. If you do not have something similar on your router try entering these standard LAN IP addresses into your web browser 192.168.2.1, 192.168.0.1, 192.168.1.1 . You will know it works if you land on a page that requests a login and password (which should be provided on the back of your router or in documentation from your internet service provider). If you connected via a router login site, you can then find your LAN IP by browsing around and finding a page that details your LAN. The IP address will generally be of the form xxx.xxx.x.x.

c) Your WAN IP address (aka: Public IP address). This one is easy. Just google "what's my ip address". Google returns your WAN/Public IP address. This information will also be listed once you login to your router.

Step 2: PLUG N' CHUG!

a) Plug the Ethernet shield into your Arduino.

b) Plug your Arduino into your computer via the USB cable.

c) Plug your Ethernet cable into the Ethernet shield and the other end into an open Ethernet plug on your router.

Step 3: Setup Port Forwarding

If we want anyone, anywhere to have access to the Arduino Web Server we need to setup something called port forwarding. This is an option you can set within your Internet router manager. To make a long story short, port forwarding will allow interactions between the WAN and the LAN, aka: It exposes your Arduino to the Public network as opposed to keeping it isolated in the Private network. Thus, anyone, anywhere with Internet access can interact with your Arduino.

a) Find the IP address of your Arduino. To do this login to your router manager (see Step 1 parts a & b). Once logged into your router, find a page titled something similar to "Attached Devices". Once here, you will be able to see the LAN IP address unique to your Arduino, commonly 192.168.1.177.

b) Once you have the Arduino LAN IP, find a page within your router called "Port Forwarding". From here you will have to find the option to "add custom service" or something similar. To setup a new custom service, enter the LAN IP address of your Arduino, choose TCP/UDP for protocol, choose an open port, how about 8081 - use this number for both the starting port and ending port, and a name for the new service. Once created, your new custom service (port forwarding for your Arduino) it will show up in the port forwarding list.

Step 4: Code and Test

Now that all the network bogusness is taken care of we can focus on making widgets whirl. This code creates a Web Server that can be accessed by entering "http://xx.xxx.xx.xx:8081/" where, xx.xxx.xx.xx is your WAN IP address into an internet browser. If you used a different port other than 8081, just change the last digits following the ":" to the port you used. The web page has 5 buttons that control an LED on pin 9 and a servo on pin 6.

a) Save this code down to your Arduino

Note, this is modified code relying heavily on code from the following source:Arduino Cookbook, Second Edition, by Michael Margolis with Nick Weldin (O'Reilly). Copyright 2012 Michael Margolis, Nicholas Weldin, 978-1-4493-1387-6.

b) In a Web browser navigat to "http://xx.xxx.xx.xx:8081/" or whatever is appropriate relative to how you set things up.

Hopefully at this point you see a pretty basic Web page that has buttons for turning on and off the LED and making the servo go forward, backward, or stop. The code I supplied also imports a live video feed from an IP camera but this functionality is commented out. Perhaps in the future I will detail how to set that up in another post.

Step 5: Build the Circuit

The circuit I built is shown here. This circuit depiction was drawn using a great tool called Fritzing. This is pretty self explanatory. The resistor is a 220ohm resistor.

Comments

author
TomHoag made it!(author)2016-06-22

On my local network, everything works fine. But from outside the network, no luck.

My Arduino is set to 192.168.0.111 using Port 222. Port forwarding in my router is set for this IP and Port number. When I use my WAN:222 I get an error page in my browser that is outside my network. What else should I check?

Thank you!

author
ImagineN4tion made it!(author)2017-06-26

Hi Tom,

Better late than never here! :)

The first things I would try are:

1) Try using a different port other than 222. (perhaps there's something setup specific to that port that's blocking you)

2) Double check your WAN IP address is correct.

A screenshot of your port forwarding setup might be helpful in debugging too.

Good luck!

author
MithunM19 made it!(author)2017-06-26

You are a legend. Thanks a lot for such detailed instructions and helping us out. My respect :)

author
thom123 made it!(author)2015-11-07

'whats my ip' my ip 78.63.***.* so i put this external ip to this line ?

byte ip[] = { 192,168,1,177 };

cause when i put my 78.63.***.*:8081 wont open , yes i try to open in same connection but it should open anyway

author
thom123 made it!(author)2015-11-07

on ethernal sheld PWR led is red almost all yelow, when i go to my external ip with :8081 its trying to conect but nothink happening after 5 minutes , 'problem loading page' i download 'port fowarding' to check ports its ok, i put php server with xampp on my computer and i can conect throw internet, but to make arduino a server not happening

author
LostinAsia made it!(author)2015-11-01

Thank you, very interesting instructable.
One thing that I enjoyed in the youtube video was your webcam showing the led and servo movemet.

I have tried the same thing on my local net work with poor results.

Would you be so kind as to detail the webcam portion.

I have tried several different methods but all seem to be missing features.

Thank you.

Charlie

I

author
ImagineN4tion made it!(author)2015-11-02
Hi Charlie, I just went back through embedding an ip cam into a webpage that is accessible to anyone yesterday. The process will vary based on the ip camera and router that you own so it is difficult to give a one size fits all instructional. However, here are the main pieces that you will have to accomplish.
  1. Login to your router.  Generally you can find the information to do this on a sticker on the bottom of your routher.  If you can't find that try typing in 192.168.1.1 into a web browser.
  2. Setup your IP camera to work within your Local Area Network (LAN).  Generally an IP camera comes with instructions on how to do this.  Your router will likely assign the camera a LOCAL IP address and there will be a place that you can tell the IP camera what port to use within it's setup software.  Thus, when you are acessing your camera from your home network, it is like you will type something like XXX.XXX.X.XX:PPPP into a web browser to see the camera feed (the X's are part of the local IP address and the P's are what port it is on).
  3. Find "Port Forwarding" on  your router and tell it to forward the port that you setup your IP camera on.
  4. Find your Wide Area Network (WAN) IP address.  This is the IP address that someone outside of your network would have to use to access your camera.  Sometimes you can find it under a section of your router called "Remote Management".  Outside of your network, you would type this IP address followed by ":PPPP" for the port you setup the camera on.
  5. User your IP camera setup software to create a visitor login with username and password.
  6. Depending on the type of camera you have you might be able to use this website (that I used) for the final piece of the puzzle:  http://www.themadhermit.net/how-to-embed-video-from-your-foscam-fi8918w-wireless-camera-into-your-web-page/
  7. Embed the code that the above website generates into your webpage.
If don't have a foscam ip camera and have something else perhaps you can glean what to do from the code the above webpage generates, or, find something similar via google.  Good luck!


Bob
author
irinak1 made it!(author)2015-09-20

Hi,

I’m irinakim and I’m work in the WIZnet.

Thank you for using our product.

We are collecting so much data using our
product.

And I will post the this project on our
Web site.( http://wiznetmuseum.com)

Can I post your product on our Web site?

author
ImagineN4tion made it!(author)2015-09-22

Hello Irinak1. Yes feel free to link this project to your website.

About This Instructable

16,863views

34favorites

License:

Bio: Guided by Whim; Promoting collaboration and innovation; Startups to kick start the economy; Gonzo builds; follow along via Twitter: @ImagineN4tion; http://imaginen4tion.blogspot.com/
More by ImagineN4tion:How to: Connect your Arduino to the Internet as a Web ServerInexpensive Soft Metal Bending Tool
Add instructable to: