Create a Web Server with Arduino!

Published by Device Plus Editorial Team at October 30, 2015

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

Arduino base (Arduino Uno R3) https://www.adafruit.com/products/50
Ethernet Shield R3 https://www.adafruit.com/products/201
Breadboard https://www.adafruit.com/products/64
CDS sensor (light sensor) https://www.adafruit.com/products/161
Resistor

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.

#include <SPI.h>
#include <Ethernet.h>
byte mac[] = {
0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //Specify the MAC address that's on the Ethernet shield
IPAddress ip( 192,168,0,177); //Specify the IP address to assign to the Arduino server
EthernetServer server(80); //Specify the port that the server will use (Since it will be HTTP, you can leave it as 80)
void setup() {
// Open serial communications and wait for port to open:
Serial.begin(9600);
while (!Serial) {
; // wait for serial port to connect. Needed for Leonardo only
}
Ethernet.begin(mac, ip); //Here we attempt to connect by Ethernet shield
server.begin();
Serial.print("server is at ");
Serial.println(Ethernet.localIP());
}
void loop() {
EthernetClient client = server.available(); //Monitor whether there is an external connection to the server
if (client) {
Serial.println("new client");
// an http request ends with a blank line
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
// if you've gotten to the end of the line (received a newline
// character) and the line is blank, the http request has ended,
// so you can send a reply
if (c == 'n' &amp;amp;&amp;amp; currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // the connection will be closed after completion of the response
client.println("Refresh: 5"); // refresh the page automatically every 5 sec
client.println();
client.println("");
client.println("");
// output the value of each analog input pin
for (int analogChannel = 0; analogChannel &amp;lt; 6; analogChannel++) {
int sensorReading = analogRead(analogChannel);
client.print("analog input ");
client.print(analogChannel);
client.print(" is ");
client.print(sensorReading);
client.println("");
}
client.println("");
break;
}
if (c == 'n') {
// you're starting a new line
currentLineIsBlank = true;
}
else if (c != 'r') {
// you've gotten a character on the current line
currentLineIsBlank = false;
}
}
}
// give the web browser time to receive the data
delay(1);
// close the connection:
client.stop();
Serial.println("client disonnected");
}
}

#include <SPI.h>

#include <Ethernet.h>

byte mac[] = {

0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //Specify the MAC address that's on the Ethernet shield

IPAddress ip( 192,168,0,177); //Specify the IP address to assign to the Arduino server

EthernetServer server(80); //Specify the port that the server will use (Since it will be HTTP, you can leave it as 80)

void setup() {

// Open serial communications and wait for port to open:

Serial.begin(9600);

while (!Serial) {

; // wait for serial port to connect. Needed for Leonardo only

}

Ethernet.begin(mac, ip); //Here we attempt to connect by Ethernet shield

server.begin();

Serial.print("server is at ");

Serial.println(Ethernet.localIP());

}

void loop() {

EthernetClient client = server.available(); //Monitor whether there is an external connection to the server

if (client) {

Serial.println("new client");

// an http request ends with a blank line

boolean currentLineIsBlank = true;

while (client.connected()) {

if (client.available()) {

char c = client.read();

Serial.write(c);

// if you've gotten to the end of the line (received a newline

// character) and the line is blank, the http request has ended,

// so you can send a reply

if (c == 'n' &amp;&amp; currentLineIsBlank) {

// send a standard http response header

client.println("HTTP/1.1 200 OK");

client.println("Content-Type: text/html");

client.println("Connection: close"); // the connection will be closed after completion of the response

client.println("Refresh: 5"); // refresh the page automatically every 5 sec

client.println();

client.println("");

// output the value of each analog input pin

for (int analogChannel = 0; analogChannel &lt; 6; analogChannel++) {

int sensorReading = analogRead(analogChannel);

client.print("analog input ");

client.print(analogChannel);

client.print(" is ");

client.print(sensorReading);

client.println("");

}

client.println("");

break;

}

if (c == 'n') {

// you're starting a new line

currentLineIsBlank = true;

}

else if (c != 'r') {

// you've gotten a character on the current line

currentLineIsBlank = false;

}

// give the web browser time to receive the data

delay(1);

// close the connection:

client.stop();

Serial.println("client disonnected");

}

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.

//Run the contents of the loop whenever the variable analogChannel(initial value set to 0) is below 6. At the end of each loop, add 1 to analogChannel
for (int analogChannel = 0; analogChannel &lt; 6; analogChannel++) {
int sensorReading = analogRead(analogChannel);
client.print("analog input ");
client.print(analogChannel);
client.print(" is ");
client.print(sensorReading);
client.println("
");
}

//Run the contents of the loop whenever the variable analogChannel(initial value set to 0) is below 6. At the end of each loop, add 1 to analogChannel

for (int analogChannel = 0; analogChannel < 6; analogChannel++) {

int sensorReading = analogRead(analogChannel);

client.print("analog input ");

client.print(analogChannel);

client.print(" is ");

client.print(sensorReading);

client.println("

");

}

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

for (int analogChannel = 0; analogChannel &lt; 1; analogChannel++) {
int sensorReading = analogRead(analogChannel);
client.print("analog input ");
client.print(analogChannel);
client.print(" is ");
client.print(sensorReading);
client.println("
");
}

for (int analogChannel = 0; analogChannel < 1; analogChannel++) {

int sensorReading = analogRead(analogChannel);

client.print("analog input ");

client.print(analogChannel);

client.print(" is ");

client.print(sensorReading);

client.println("

");

}

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

int sensorReading = analogRead(0); //Specify 0 in analogRead
client.print("analog input ");
client.print(analogChannel);
client.print(" is ");
client.print(sensorReading);
client.println("
");

int sensorReading = analogRead(0); //Specify 0 in analogRead

client.print("analog input ");

client.print(analogChannel);

client.print(" is ");

client.print(sensorReading);

client.println("

");

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!