Create a Web Server with Arduino!

DSC_1057-e1407334746110

Last time, we displayed the brightness data from the light sensor using analog input on the Arduino. Now, we know how to process both input and output with the Arduino! Today, I’d like to take it a step further and connect the Arduino to a network. By enabling network capabilities on the Arduino, the project possibilities open up. Despite its small size, it can become a web server! This time, I’d like to make a program that turns the Arduino into a web server using a module called the Ethernet shield. This will allow us to connect a LAN cable, and enable networking on the Arduino.

What Can We Do When a Light Sensor Is Hooked up to a Network?

I explained last time that if the light sensor is put in a dark space, its resistance goes up, and if it’s put in a bright place, the resistance goes down.
If a light sensor is connected to a network, you can transmit the measurements of the light sensor over the network! By integrating this Arduino web server with a PHP or Ruby program, it becomes possible to develop simple programs that measure the length of daytime for each day or determine whether someone’s still at the office based on the office lighting, or program bots that interact with the Twitter API to regularly tweet the current brightness.

Today’s Electronics Recipe

What is an Arduino Shield module?

There are many modules called shields for the Arduino, which can be used to easily extend the available set of features. In addition to the Ethernet Shield that we’ll use today, there’s an accelerometer as well as many other shields you can use without having to build a circuit from scratch.

Arduino Shield Module
Google search for “Arduino shield”

Today, we’ll use Ethernet Shield R3. The Ethernet shield lets you connect your Arduino to a network. There’re several samples using the Ethernet shield included in the Arduino sketchbook. So, we will use them to run Arduino as a server.

Prepare the Ethernet shield

First, let’s connect the Ethernet shield to the Arduino.

1. Unboxing

Arduino Unboxing
(Arduino products are always in such cool-looking box…)

Arduino
It looks like this once it’s been unboxed.

2. Connect to the Arduino

Let’s get connect the Arduino.

Place the Arduino body on the bottom, and connect the Ethernet shield’s feet to the appropriate slots.

DSC_1051-e1407365145628

The Arduino with the Ethernet shield connected. Some of the legs stick out, but that’s okay.

We’re now done connecting the Arduino unit to the Ethernet shield. You may have connecting issues if you bend any of the feet when you’re removing or inserting the shield, so be careful.

3. Open the sample program

Now we’ll get into the development of the program. The development isn’t hard. For this one, we’ll use the WebServer sample program for the Ethernet section of the sketchbook.

Arduino Ethernet webserver

[File]-[Examples]-[Ethernet]-[WebServer]

4. Modify the program

This is a sample program that allows us to use the Arduino as a server. Once we access the Arduino’s server, we will find the analog pin input data displayed in HTML.

There’s two places where you need to modify the program:

  • MAC address
  • IP address

MAC address

A MAC address is like a unique product number that differs among each piece of hardware. The Ethernet shield that we’re using today should have the MAC address written on the shield itself or on the box that it came in. Refer to it and modify the code, prefixing the address with “0x”.

Arduino Shield

Here it’s written on the back of the Ethernet shield.

IP address

Set the IP address based on the network configuration of the current computer that you’re using. Usually there’s a router when you’re running a network at home, in which case you can find out what the computer’s IP address by using the method below, then assign an IP address to the Arduino by picking one that doesn’t clash with other devices on the network. On a Mac, you can check the [Network] section of the [System Preferences], or enter “ifconfig” in the [Terminal].

Mac IP address

On Windows, open a [command prompt] and enter “ipconfig”.

Windows IP config

Today, I have the computer and Arduino connected to the router by LAN cable as shown below. There can be various differences in network setups, so please make sure to check your own environment setup.

Connect Arduino to Router

Finally, the program is running, and the server is working!

Once you configured the MAC and IP address, let’s compile the program and upload it.

Once you’ve uploaded the program to your Arduino unit, let’s go ahead and enter the URL based on the IP address that you configured earlier in your browser. Since I set it to 192.168.0.177, I entered “http://192.168.0.177/” on the browser. And the values of the analog input were displayed.

0c157b5d6c660bbf2e150ac1943cc552

This program is designed to refresh the browser every 5 seconds and display the analog input value, but since there’s nothing else connected to the Arduino, the input value is going up and down. By linking here the circuit to the light input sensor that we created last time, we can monitor the data from the light sensor every time we access the server.

Arduino

Here the circuit with the analog input that we made last time

Arduino & Breadboard

Once the circuit is done, we connect it to the Arduino. We only want to use the analog input #0 this time, so let’s modify our program. In the part of the code beginning with “for” around line 36, the input value is monitored by specifying the analog input number. This block starting with “for” is called a “for statement,” and it’s used whenever we want to evaluate something repeatedly.

for (initial value ; condition for looping ; action done after every loop){ what’s done if the condition is true }

Here, it is obtaining the input values by looping through analog channels 0 through 5 in order. Today, we’re only interested in #0, so we can either remove the “for” loop, or have it complete after one cycle.

Pattern 1: Since we only want the value of channel 0, modify the “for” loop’s condition

Pattern 2: Write out the code without a “for” statement

Modify the program using one of the two patterns above and run it.

4bbe2e7570a1e99eef02a1ffd01412c2

Now the brightness value from the light sensor is displayed on the server. After that, you can run a different program on a separate PC that periodically access the server, reads the brightness data, and uses it as input. By using these Arduino external module “shields,” you are able to come closer to making what you want to create sooner, without having to create a circuit from scratch. Next time, we’ll try to make an even more practical project using the Arduino and its Ethernet shield! Don’t miss it!