Let’s build a functional Arduino webserver with the Ethernet/SD Card shield

It’s that time of the week! We’ve been playing around with the Ethernet shield again and this time we’ve come up with an article about creating a webserver from scratch; using the Arduino SD/Ethernet Shield.

This article will show you how to serve files from the SD Card file system and use Javascript to get sensor/variable values via AJAX.

This would be ideal for people looking to add a basic web system to their projects.

 

So, what do we need?

  • 1x Arduino
  • 1x SD/Ethernet Shield (eBay, Sparkfun, Adafruit etc.)
  • 1x Micro-SD Card (or Micro SDHC, same as above, anywhere online)
  • Our code!

Before running any code below; run one of the SD Card examples such as CardInfo so that you can verify that the SD Card is fully working. If you are using the Ethernet Shield version you MUST set pin 10 to HIGH (using digitalWrite(10, HIGH); ) in the setup function; if you don’t then the SD will not initialise properly.

What will this project do?

  1. Serve files from the SD Card via a Web Browser
  2. Provide Javascript code to get any sort of values from the Arduino anywhere on the page.
  3. Give you a base to easily add web functionality to your projects.

First things first, insert the SD Card into a Card Reader and the card should be formatted to a FAT file system – You can do this easily on any Windows based PC by right clicking the drive in Computer and selecting Format. We have tested this on a Sandisk 2GB SDHC Micro Card – These are extremely cheap from any online retailer.

Let me start by saying that this was based on the example code from Adafruit and modified to add features/functionality.

The first thing you’ll need to do is make sure that the network settings match your network. The following code should be altered to suit your setup:

 

Leave a Comment