Arduino: Display data over local network

Arduino can gather and display all sorts of data from its sensors (or what ever 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.

 

More information about mentioned shields can be found on the official Arduino webpage: WiFi Shield, Ethernet shield

 

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

arduino display data over local network

– Ethernet Shield (I bought one like this over eBay, price about 7-8$)

arduino display data over local network

– Light sensor (same as used in the first article)

arduino display data over local network

– 3 x jumper wire

arduino display data over local network

– network cable (any type)

arduino display data over local network

 

 

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)

arduino display data over local network arduino display data over local network arduino display data over local network

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

arduino display data over local network

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.

arduino display data over local network

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

arduino display data over local network

 

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.

arduino display data over local 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.

arduino display data over local network

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.