Target Amount: $143 / $2000

Amount Raised will be updated once daily.

Thanks to those who have donated.

Starting Electronics Fund Raiser

It is that time of the year again when our annual web hosting subscription must be paid.
We also need to upgrade our lab equipment which is outdated (including test equipment).
Please consider giving a donation to Starting Electronics and help to fund this site.

Donate to Starting Electronics




Arduino SD Card Web Server

Created on: 28 January 2013

Part 4 of the Arduino Ethernet Shield Web Server Tutorial

The Arduino, Arduino Ethernet shield and micro SD card are used to make a web server that hosts a web page on the SD card. When a browser requests a web page from the Arduino web server, the Arduino will fetch the web page from the SD card.

Creating the Web Page

Because the web page is to be stored on the SD card, it must first be created using a text editor and then copied to the SD card.

Web Page Editor

A text editor such as Geany can be used – it is available to download for Windows and will be in the repositories for most Ubuntu based Linux distributions. Geany has syntax highlighting and will automatically close HTML tags for you which makes web page editing easier. It is possible to use any other text editor, even Windows Notepad.

Web Page

Create the following web page in a text editor. When you save the text file, give it the name: index.htm

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino SD Card Web Page</title>
    </head>
    <body>
        <h1>Hello from the Arduino SD Card!</h1>
        <p>A web page from the Arduino SD card server.</p>
    </body>
</html>

Nothing new here, it is the same as the web page from the first web server in this tutorial with just the text changed. Test this web page by opening it in a web browser.

Copying the Web Page

You will need a micro SD card slot on your computer or a card reader that is capable of reading and writing a micro SD card.

Insert the micro SD card into the slot on the computer or card reader that is plugged into the computer and copy the index.htm file to the micro SD card.

Now plug the SD card into the micro SD card slot on the Ethernet shield.

SD Card Web Server

Hardware

You should now have the micro SD card with web page copied to it inserted into the card slot on the Arduino Ethernet shield. The Ethernet shield should be plugged into a compatible Arduino and into an Ethernet cable connected to your network. The Arduino / Ethernet shield should be powered from a USB cable.

Arduino Sketch

The Arduino sketch that fetches the web page from the SD card and sends it to the browser is shown below.

/*--------------------------------------------------------------
  Program:      eth_websrv_SD

  Description:  Arduino web server that serves up a basic web
                page. The web page is stored on the SD card.
  
  Hardware:     Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                2Gb micro SD card formatted FAT16
                
  Software:     Developed using Arduino 1.0.3 software
                Should be compatible with Arduino 1.0 +
                SD card contains web page called index.htm
  
  References:   - WebServer example by David A. Mellis and 
                  modified by Tom Igoe
                - SD card examples by David A. Mellis and
                  Tom Igoe
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - SD Card library documentation:
                  http://arduino.cc/en/Reference/SD

  Date:         10 January 2013
 
  Author:       W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

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

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 0, 0, 20); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

File webFile;

void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for debugging
    
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;    // init failed
    }
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");
}

void loop()
{
    EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c = client.read(); // read 1 byte (character) from client
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    client.println();
                    // send web page
                    webFile = SD.open("index.htm");        // open web page file
                    if (webFile) {
                        while(webFile.available()) {
                            client.write(webFile.read()); // send web page to client
                        }
                        webFile.close();
                    }
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
    } // end if (client)
}

Using the Sketch

Copy the above sketch and paste it into the Arduino IDE. Load the sketch to the Arduino and then surf to the IP address set in the sketch with your web browser. The web page that you created should be displayed in the browser as it is served up by the Arduino SD card web server.

Fault Finding

If the previous sketch in this tutorial worked, then the only thing that can go wrong is with initializing the SD card and finding the index.htm file on the card. If the file is not on the card or does not have the exact name index.htm, then the server will not be able to display the web page.

Open up the Arduino serial monitor window to see SD card diagnostic information.

Sketch Explanation

This sketch is a modified version of the eth_websrv_page sketch from the Basic Arduino Web Server part of this tutorial.

Additional Code

The sketch now initializes the SD card in the setup() function and sends diagnostic information out of the serial port that can be viewed in the Arduino serial monitor window.

Instead of sending the web page line by line from within the code as in the eth_websrv_page sketch, this new sketch now opens the index.htm file from the SD card and sends the contents to the web client (the web browser).



← Go back to Part 3Go to Part 5 →

© 2012 – 2014, Starting Electronics