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.
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.
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.
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.
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.
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.
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.org --------------------------------------------------------------*/ #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) }
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.
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.
This sketch is a modified version of the eth_websrv_page sketch from the Basic Arduino Web Server part of this tutorial.
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).