Web Controlled Arduino LED

Intro: Web Controlled Arduino LED

This instructable shows you how to build a Web-enabled tri-color LED based on an Arduino and the WIZnet Ethernet shield, controllable from any Web browser .

Because the LED is exposed through a simple RESTful web service running on the Arduino color changes can also be triggered by Pachube or other platforms offering Web hooks. Welcome to theWeb of Things ! The LED can of course be replaced by a motor or a high voltage switching relay to enable more interesting browser controlled applications, e.g. for home automation.

Publishing your Arduino through the Yaler relay server makes the Arduino accessible from everywhere even if it is hidden behind a firewall or a NAT and does not have a public IP address. A single Yaler relay server instance can host many Arduinos (and any other device with a TCP Socket library, e.g. a Sheevaplug or an Android phone) and is available at https://yaler.net/ (Disclosure: I'm a founder of Yaler)

Material

• Tri color LED [Adafruit | SparkFun]
• Arduino Duemilanove ATmega 328 [Adafruit | SparkFun]
• Arduino WIZnet Ethernet Shield [Adafruit | SparkFun]
• Resistors [1 x 150 Ohm, 2 x 82 Ohm for the Adafruit LED or
  1 x 180 Ohm, 2 x 100 Ohm for the SparkFun LED]
• RJ45 cable

Tools

• Soldering iron
• Helping hands
• A / B USB cable

Infrastructure

• Internet access with DHCP, no public IP address needed for Arduino
• (Optional: PC or Cloud Server with a public IP address, to run Yaler)

STEP 1: Soldering Resistors and Wire to the Tri-color LED

(Note: All images show the Adafruit LED with the corresponding resistors and wire color)

• Shorten all except for the longest leg of the LED
• Solder the resistors to the LED legs as shown below
• Shorten the remaining long leg
• If you use the Adafruit LED, solder the red wire to it [as shown below]
• If you use the SparkFun LED, solder the black wire to it

STEP 2: Connecting the LED to the Ethernet Shield

• Stack the Ethernet shield onto the Arduino
• Connect the LED to the pins 3, 5 and 6 (red) of the Ethernet shield
• If you use the Adafruit LED, connect the red wire with the 5V pin of the Ethernet shield
• If you use the SparkFun LED, connect the black wire with the GND pin of the Ethernet shield

STEP 3: Uploading the Arduino LED Test

To test the LED you can upload the following sketch to your Arduino. Reset the Arduino and make sure the colors show up in the exact same sequence as described in the code comments of the loop statement below. If you use the SparkFun LED uncomment the corresponding lines of code and delete the three analogWrites of the Adafruit LED. If the colors show up in another sequence you might have swapped some pins.

// HelloLed.pde

int redPin = 6;
int greenPin = 5;
int bluePin = 3;

void setColor (int red, int green, int blue) {
// SparkFun LED: write value for each color
//analogWrite(redPin, red);
//analogWrite(greenPin, green);
//analogWrite(bluePin, blue);

// Adafruit LED: write inverted value for each color
analogWrite(redPin, 255 - red);
analogWrite(greenPin, 255 - green);
analogWrite(bluePin, 255 - blue);

delay(1000);
}

void setup () {
pinMode(redPin, OUTPUT);
pinMode(greenPin, OUTPUT);
pinMode(bluePin, OUTPUT);
}

void loop () {
setColor(0, 0, 0); // Off
setColor(255, 0, 0); // Red
setColor(0, 255, 0); // Green
setColor(0, 0, 255); // Blue
setColor(0, 255, 255); // Aqua
setColor(255, 255, 0); // Yellow
setColor(255, 0, 255); // Fuchsia
setColor(255, 255, 255); // White
}

STEP 4: Editing and Uploading the Arduino LED Web Service

Once you made sure the LED works, you're ready to edit and upload the sketch for the LED Web service to your Arduino.

First, install the YalerEthernetServer.zip Arduino library (for details please see https://yaler.net/arduino) then download the YalerLedWebService.inosketch and open it in your Arduino IDE.

Then you have to carry over the changes made to setColor in the previous step. If you did change the pin numbers, carry those changes over as well.

You also have to set the MAC address of your Ethernet shield. It is possible to use the value from the source code, but be aware that address conflicts might arise if a device in your LAN is already using this same address. The MAC address is set in the line byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; and most of the time it is sufficient to change the last byte to another value, e.g. 0xAA.

The next step is to set your Yaler relay domain. You can get a free trial account at https://yaler.net/.

(If you run your own Yaler relay server instance, you'll also have to enter the appropriate host name.)

So, all that's left is to upload the sketch and connect your Arduino to the Internet with an RJ45 cable. In order for the service to run, the LAN must provide DHCP. It's possible to use a fixed IP, but this requires a few changes to the source code that go beyond the focus of this tutorial. To make sure there are no start up timing issues with the Ethernet shield, press the reset button once the Arduino is connected to the LAN.

STEP 5: Accessing and Controlling the Arduino From the Web

If the Arduino is connected to the LAN and thereby to the Internet, and if the Yaler instance at the specified IP address is up and running, you should now be able to access the Arduino Web LED at http://{Yaler IP}/{Relay Domain}/led, e.g. http://gsiot-ffmq-ttd5.try.yaler.io/

You'll get an HTTP 504 Gateway Timeout if the Arduino is not running . Depending on your browser this is shown as a blank page or as "Gateway Timeout". In this case, make sure everything is tightly plugged in and try resetting the Arduino.

If everything works as intended, you should see a simple HTML page with three colored buttons . If you press a button, the Arduino LED should light up in the corresponding color.

Behind the scenes this works with a simple Javascript that sends an HTTP PUT request , e.g. PUT http://gsiot-ffmq-ttd5.try.yaler.io/led/ff0000 to the Arduino to set the LED's color. You can use Firefox with the Firebug add-on set to Net > XHR to see the PUT requests.

Note that the URL does not depend on the current location of the Arduino. No matter if it's attached to your home network or to the LAN at your office, the URL remains the same. Just plug in the Arduino and control it with your browser.

Because typing the URL can be cumbersome, you can make use of a QR-Code generator like http://qrcode.kaywa.com/ to get a QR-Code of your Arduino's URL (example below).

Print it, stick it to your Arduino, access it with a QR-Code reader like Lynkee (iPhone), Kaywa (Symbian, Java phones) or Quickmark (Windows Mobile) and there you have a switch-less, yet conveniently controllable Arduino.

That's it! Thanks for your time.

If you got any questions or trouble debugging your setup, please let me know in the comments.

Comments

[oalharbi3]

have any one make it as a wifi instead of ethernet

[tamberg]

Which WiFi shield / module are you using?

[mhachem]

I know this was posted very long ago but I'm trying it and I need some help. I connected everything as said and I pasted the code into the arduino sketch. I put the mac address of my arduino and its connected directly to my router through ethernet. When I uploaded the sketch and ran the serial monitor, it seems that it keeps timing out while everything is connected perfectly because it worked on the example code. This is what it says :

setup

connected

timeout

connected

timeout

Can someone please help me because I really want it to work! Thank you

[tamberg]

Hi mhachem, the output looks fine. Did you try to access the URL? (Please reply to [e-mail]) Kind regards, Thomas

[mhachem]

Hey Thomas, Thank you for replying!

I tried accessing the URL and it just shows me a blank page.

Everything is connected correctly because your example sketch worked the way it's supposed to. I really don't know what I could be doing wrong that is causing it to time out.

Please help =[

[tamberg]

Sent you an email reply. Kind regards, Thomas

[brian.fox.505523]

I am trying a project and ran into NAT'd IP shutting me down. So, I like the idea of the yaler.org relay. what is an email address where I can reach someone about the service? The prices quoted are yearly? Is the 1GB of data for the maker plan yearly as well?

Thanks

[tamberg]

For info, please see https://yaler.net/ or contact [e-mail]

[nedhallett2]

hi I was wondering if this tutorial is doable with an uno or leonardo board ?

[tamberg]

Yes, those should work as well.

[KobusK]

Hi, I notice nedhallett2 already asked but got no reply. I would like to know if this would work with the Arduino Uno R3 ?

[tamberg]

Yes, it would. Cheers, Thomas

[egwillfriedel]

Works great!! best internet controled arduino tutorial I have seen thus far.

[tamberg]

Thanks!

[Milen]

Hi, I am trying to reproduce the project using ARDUINO MEGA. I have created an yaler account and I am able to see the webpage with the 3 colored buttons. The problem is that nothing happens pressing the buttons. I added the following lines inside the code:

if (yalerState == YALER_UPGRADED) {
      //Serial.println("upgraded");
      receiveRequest(client);
      if (state == DONE) {
        if (isPut) {
Serial.print("    led0="); 
        Serial.print(led[0]);
        Serial.print("    led1="); 
        Serial.print(led[1]);
        Serial.print("    led2="); 
        Serial.println(led[2]);       
          setColor(led[0], led[1], led[2]);
          sendPutResponse(client);
        } else {
          sendGetResponse(client);
        }
      }
    } else {
      //Serial.println("timeout");
    }

 I want to see what data is send to the PWM channels. The result from the Serial monitor is:

    led0=0    led1=0    led2=0
    led0=0    led1=0    led2=0
    led0=0    led1=0    led2=0
    led0=0    led1=0    led2=0
    led0=0    led1=0    led2=0
    led0=0    led1=0    led2=0
    led0=0    led1=0    led2=0
    led0=0    led1=0    led2=0
    led0=0    led1=0    led2=0

 That means - pressing the buttons does not effect the values for the LED intensity. Please suggest where the problem could be...

[tamberg]

Hi, the parsing of the incoming HTTP request in this example is not very robust. There might be a broken offset or something similar in receiveRequest. Unfortunately I don't have an Arduino at hand to test anything before mid January. Regards, Thomas

[btan3]

Hi,

I made changes to the code and everything. Now I'm trying to access the website but I can't. I tried http://46.137.106.125/{Relay Domain}/led and http://try.yaler.net/{Relay Domain}/led. Both of the lead to server error page. Am I missing something here?

[tamberg]

Hi,

the server error page is likely HTTP Status 504 (Gateway Timeout). This is Yaler's response if no device is available at the given Relay Domain.

Reasons might vary from typos to memory overflow. Can you add some Serial output to your Arduino program to see if the program is running and if it get's the request from your browser?

Kind regards,
Thomas

[btan3]

Hi,

Thanks for the reply. I uncommented all serial print commands in the code. It prints setup on the serial monitor which means it goes through void setup but nothing after that and I can't access the website. Am I using the correct web address here? I'm using arduino nano with ethernet shield btw if that makes any difference.

Thank you.

[tamberg]

If the shield works fine with other examples, maybe the Nano runs out of memory?