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.

 

 

8 thoughts on “Arduino: Display data over local network

  1. Arduino: 1.5.3-Intel.1.0.4 (Windows NT (unknown)), Board: “Intel® Galileo Gen2”

    test.ino:24:3: error: stray ‘\’ in program
    test.ino:24:3: error: stray ‘\’ in program
    test.ino:47:9: error: stray ‘\’ in program
    test.ino:47:9: error: stray ‘\’ in program
    test.ino:51:11: error: stray ‘\’ in program
    test.ino:51:11: error: stray ‘\’ in program
    test.ino:52:11: error: stray ‘\’ in program
    test.ino:52:11: error: stray ‘\’ in program
    test.ino:53:11: error: stray ‘\’ in program
    test.ino:53:11: error: stray ‘\’ in program
    test.ino:54:11: error: stray ‘\’ in program
    test.ino:54:11: error: stray ‘\’ in program
    test.ino:77:9: error: stray ‘\’ in program
    test.ino:77:9: error: stray ‘\’ in program
    test.ino:81:9: error: stray ‘\’ in program
    test.ino:81:9: error: stray ‘\’ in program
    test.ino: In function ‘void setup()’:
    test.ino:24:17: error: ‘u201cArduino’ was not declared in this scope
    test.ino: In function ‘void loop()’:
    test.ino:47:19: error: ‘u2018n’ was not declared in this scope
    test.ino:47:26: error: expected ‘)’ before ‘u2019’
    test.ino:51:27: error: ‘u201cHTTP’ was not declared in this scope
    test.ino:52:27: error: ‘u201cContent’ was not declared in this scope
    test.ino:52:44: error: found ‘:’ in nested-name-specifier, expected ‘::’
    test.ino:52:40: error: ‘Type’ has not been declared
    test.ino:52:51: error: ‘html’ was not declared in this scope
    test.ino:53:42: error: found ‘:’ in nested-name-specifier, expected ‘::’
    test.ino:53:27: error: ‘u201cConnection’ has not been declared
    test.ino:54:27: error: ‘u201cRefresh’ was not declared in this scope
    test.ino:77:19: error: ‘u2018n’ was not declared in this scope
    test.ino:77:26: error: expected ‘)’ before ‘u2019’
    test.ino:81:24: error: ‘u2018r’ was not declared in this scope
    test.ino:81:31: error: expected ‘)’ before ‘u2019’

    This report would have more information with
    “Show verbose output during compilation”
    enabled in File > Preferences.

    these many errors how am i suppose to work them out

    1. Hi, sorry for a late reply. Regarding your error, it was due to bad formatting on the page, so if you copied the code directly into your IDE the quotation marks (” and ‘) would have some sort of formatting and the IDE would not regard them as quotations, but rather some characters and the code wouldn’t compile. I have repaired all the code snippets on the page so there should be no more errors.

  2. Hi there, was just wondering if this code will work for an Arduino Yun. I want to connect via ethernet using my Yun instead of wifi?

    thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *