The Arduino can produce web pages from within the Arduino sketch or host web pages that are stored on the SD card (there is a micro SD card socket on the Arduino Ethernet shield). These web pages can be configured to control and monitor hardware from a web browser on any Ethernet network that the Arduino is connected to.
This multi-part tutorial explains how to use the Arduino as a web server step-by-step. The tutorial starts with the basics and then introduces the technologies needed by using easy to understand practical examples.
The tutorial consists of the following parts:
- Part 1: Arduino Ethernet Shield Web Server Tutorial – get the hardware needed to follow the tutorial and then configure and test it.
- Part 2: Basic Arduino Web Server – configures the Arduino with Ethernet shield to serve up a simple web page. Introduces the technologies needed for creating a web server, namely HTTP and HTML.
- Part 3: HTML Web Page Structure – what the web pages consist of that the Arduino web server hosts.
- Part 4: Arduino SD Card Web Server – the Arduino / Ethernet shield hosts a web page that is stored on a micro SD card. The Ethernet shield contains a micro SD card socket for connecting the SD card to the system.
- Part 5: Arduino Web Server LED Control – switch an LED on and off using a checkbox on a web page. Also read the blog entry on switching two individual LEDs on and off from the web page.
- Part 6: Reading a Switch – the state of a push-button switch (on or off) is read by the Arduino and displayed on a web page.
- Part 7: Manually Reading a Switch using AJAX – an easy example that shows the use of AJAX to update the status of the switch on a web page. Also read the blog entry on changing the button text colour in addition to showing the switch status.
- Part 8: Automatically Reading a Switch using AJAX – a switch is interfaced to the Arduino. An AJAX call is made periodically which updates the status of a switch and displays it on a web page.
- Part 9: Reading Switches and an Analog Input using AJAX – flicker free updating of an analog value and the status of two switches. Updates are displayed on a web page using Ajax.
- Part 10: Arduino SD Card Web Server – Linking Pages – a web page hosted on the SD card of the Arduino web server contains a link to a second page on the SD card. The Arduino sketch determines which page is requested by the web browser and then sends the correct page.
- Part 11: Arduino SD Card Web Server – Displaying Images – a web page that contains an image is hosted by the Arduino web server.
- Part 12: CSS Introduction – a very brief introduction to CSS.
- Part 13: Arduino SD Card Ajax Web Server – display the status of a switch, this time the web page is hosted on the Ethernet shield micro SD card.
- Part 14: Arduino Inputs using Ajax with XML on the Arduino Web Server – Ajax and an XML file are used to get input values (analog and digital) from an Arduino.
- Part 15: Arduino Web Server Gauge Displaying Analog Value – a dial gauge component displays an analogue value from the Arduino on a web page. The gauge displays the value with a needle as well as digitally.
- Part 16: SD Card Web Server I/O – Arduino inputs and outputs on a web page hosted on the SD card using Ajax to refresh input and output states.
- Part 18: CSS for Positioning, Sizing and Spacing – an explanation of the CSS used to size, position and space HTML elements used in part 16 of this tutorial.
- Summary and Conclusion – summary of the technologies used in the tutorial.