Introduction: Arduino Web Server LEDs

In this tutorial, you will learn how to use the Arduino and Ethernet shield to serve up a web page that controls two LEDs. This project was used as inspiration, and should be referenced for full details on how the sketch works. I modified this sketch to add some minimal CSS and a second LED that can be controlled separately from the web page served up by the Arduino.

Background

Full disclosure: I am a newbie to the Arduino world! This is the first project that I completed on my own and first time creating an instructable. I think sharing is an important part of the learning process, and hopefully this tutorial can help someone else!

Hardware needed

  • Arduino Uno board (modifications may be needed for other Arduino boards)
  • Standard USB chord (for Arduino power source)
  • Arduino Ethernet Shield (I used the Ethernet Shield 2)
  • Breadboard
  • Breadboard wires
  • 2 LEDs
  • 2 series resistors (470 ohm)

Prerequisites

This tutorial assumes you have at least some beginner knowledge about working with the Arduino.

Step 1: Connect Ethernet Shield to Your Arduino Board and Test Your Connection

If this is your first time using the Ethernet Shield I recommend checking out this tutorial on instructables.com to help you get started. If you run into issues I recommend checking out this post in the Arduino.cc Forum to help you troubleshoot common issues.

Before moving on to the next step, make sure you are able to successfully connect your Arduino to the Internet.

Step 2: Set Up the Breadboard

    1. Connect an LED and series resistor between Arduino pin 2 and GND
    2. Connect a second LED and series resistor between Arduino pin 3 and GND

    See photo above for reference.

    Step 3: Understanding the Set Up

    Together the Arduino board and Ethernet Shield will function as a web server and serves up a page that has a checkbox for LED2 and LED3 (see screenshot above).

    Clicking these check boxes will toggle the corresponding LED light on and off. For a full breakdown of how this works please view the tutorial page for the project that was used for inspiration. Details are also included in the sketch file itself.

    My modifications to the original sketch

    In my version of this project I have included a second LED light that is connected to Arduino Pin 3. This LED is referred to as LED3 throughout the sketch. LED3 functions the same way as LED2. Clicking the checkbox for LED3 you should notice that "/?LED3=2" gets added to the page's URL. Again, for full details on the functionality please see this tutorial page that was used for inspiration.

    I also added minimal CSS to the sketch which is on line 68.

    Step 4: Upload the Arduino Sketch

    Upload the following sketch to your Arduino board (see attachment below).

    Please note: If you are not using the Ethernet Shield 2 then you may need to include the <Ethernet.h> library instead of <Ethernet2.h>


    Attachments

    Step 5: Running the Sketch and Troubleshooting

    After uploading the sketch to your board, you should be able to visit the IP address that is pointing to your device and see the web page. Clicking the first checkbox should light up the LED connected to pin2 and clicking the second one should light up the LED on pin3.

    Troubleshooting

    If your page does not load at all...

    • Start by checking the serial monitor to see if any of the error messages can help you troubleshoot.
    • Make sure that lines 27-28 are pointing to the correct MAC and IP addresses.
    • If you are using an internal IP address make sure the device you are using to load the web page is connected to the same network as your Arduino.
    • Try running another Ethernet Shield sketch to make sure there is not an issue with your connection.

    If the LEDs do not light...

    • Start by making sure that the board is configured correctly.
    • Run the "Blink" sketch to make sure there is not an issue with the Arduino board connection.