Arduino: Display data over local network

Arduino can gather and display all sorts of data from its sensors (or whatever you connect to it),
but the real power from the data comes when you can monitor it over network.

There are 2 ways you can connect Arduino to your home network: over Wi-Fi, or through a
network (UTP) cable. The simplest way of achieving any of the two is by using Arduino
“shields”.

Wikipedia: Arduino and Arduino-compatible boards make use of shields—printed circuit

expansion boards that plug into the normally supplied Arduino pin-headers. Shields can provide
motor controls, GPS, ethernet, LCD, or breadboarding (prototyping). A number of shields can
also be made DIY.

So, using simple words, a shield is a sort of expansion for the Arduino which is plugged into the
Arduino. It is usually the same size as the Arduino, and stacks on top of it.

In this article I will cover the basics on connecting Arduino to your home network and creating a
web page on which it displays data from the light sensor. I will be using an Ethernet shield due to
its lower price and my paranoid mind not believing a non-wire approach.

So for this project you will need:

– Arduino

– Ethernet Shield (I bought one like this over eBay, price about 7-8$)
– Light sensor (same as used in the first article)

– 3 x jumper wire

– network cable (any type)

Step 1
Stacking Ethernet shield on Arduino and connecting the sensor

1. Stack the Ethernet shield on Arduino so that the end pins connect (you can’t miss it)

2. Connect the “female” end of jumper wires to the sensor, in my case: green wire to
GND, purple wire to VCC, yellow wire to SIG
3. Connect the “male” end of jumper wire to the Ethernet Shield stacked on top of Arduino
accordingly: green wire to GND, purple wire to 5V, yellow wire to A0 analog input port.

4. Connect USB and network (ethernet) cable – USB goes into Arduino, and network cable into
the Shield stacked on top of Arduino.

If everything is ok, Shield LEDs and ethernet port will light up.
Step 2
Writing the code

For the purpose of assigning the IP address for Arduino (as all devices connecting to a network
have an IP address), find out what is your networks IP address range. You can do so by going
into Command Prompt in Windows and in the command line write “ipconfig”. Its output will tell
you what is the range of your network.

This is a standard output of the command “ipconfig” in Windows. Here you see that my IPv4
Address is 192.168.0.11, so for Arduino I can pick any address between 192.168.0.2
(192.168.0.1 – is my default gateway so this address is reserved) and 192.168.0.254 that isn’t
192.168.0.11 (which is the address of my computer). So, for example I will pick the address
192.168.0.16 (completely random).

Be advised: If you have more devices on your network (like smartphones, laptops, etc) you
might end up picking an address that is being used, so just use an address far in the range like
192.168.0.154 or something like that.

Now that we know what IP address we will appoint to our Arduino, let’s write the code:

#include <SPI.h>
#include <Ethernet.h>

byte mac[] = {
0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

// Enter the IP address for Arduino, as mentioned we will use 192.168.0.16

// Be careful to use , insetead of . when you enter the address here
IPAddress ip(192,168,0,16);

int photocellPin = 0; // Analog input pin on Arduino we connected the SIG pin
from sensor
int photocellReading; // Here we will place our reading

// Initialize the Ethernet server library

EthernetServer server(80);

void setup() {
 // Serial.begin starts the serial connection between computer and Arduino
Serial.begin(9600);

// start the Ethernet connection and the server:

Ethernet.begin(mac, ip);
server.begin();
Serial.print("Arduino server IP address: ");
Serial.println(Ethernet.localIP());
}

void loop() {

photocellReading = analogRead(photocellPin); // Fill the sensorReading with

the information from sensor

EthernetClient client = server.available(); // Listen for incoming clients

if (client) {

// When a client sends a request to a webserver, that request ends with a

blank line
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();

// This line is used to send communication information between Arduino

and your browser over Serial Monitor
Serial.write(c);

// When the request has ended send the client a reply

if (c == '\n' && currentLineIsBlank) {

// We send the HTTP response code to the client so it knows that we

will send him HTML data
// and to refresh the webpage every 5 seconds
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println("Refresh: 5");
client.println();
// Here we write HTML data (for the page itself) which will be sent
to the client.
// The HTML includes Javascript which fills the data
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<title>Arduino sensor data</title>");
client.println("<script>");
client.println("window.onload=function rfsh(){");
client.println("document.getElementById('value').innerHTML =");
client.print(photocellReading);
client.println(";}");
client.println("</script>");
client.println("</head>");
client.println("<body>");
client.println("<br>");
client.println("<h1>Light measured from the sensor is:</h1> ");
client.println("<p id='value'></p>");
client.println("</body>");
client.println("</html>");
break;
}
 if (c == '\n') {
// Check if a new line is started
currentLineIsBlank = true;
}
else if (c != '\r') {
// If a new line was not strated
currentLineIsBlank = false;
}
}
}
// Give the client some time to recieve the data (1ms)
delay(100);
// In the end close the connection
client.stop();
}
}

If you did everything according to this instructions, when you open your browser and enter the
IP address of Arduino (in my case 192.168.0.16), you should get this webpage as a result which
will refresh every 5 seconds with new data.

While it being not much of an advantage if you open it from your computer, this gives you the
possibility to view this data from any device connected to your local network. And with the idea
that Arduino doesn’t have to be powered through USB port on your computer, but rather from an
separate power source (which I will describe in the next article), you can place it where you want
to measure something and access its data from any computer or smartphone in your network.