本教程向您展示了如何构建一个网络使能的三色LED，通过Arduino和WIZnet以太网插板，并且用任何网页浏览器都是可控的。

看现场演示：http://try.yaler.net/~arduino/led

因为LED曝光在一个简单的RESTful web service，运行在Arduino上，颜色变化也可以被Pachube或者其他提供Web hooks的平台引发。

通过Yaler中继服务器发布你的Arduino，使Arduino可以无处不在，即使它隐藏在放火墙和NAT下没有一个公共的IP地址。一个单独的Yaler中继器实例可控制许多Arduino（还有带一个TCP Socket 库的任意设备，例如，Sheevaplug 或者一个Arduino电话）也可以用于商业用途，包括全部的资源代码在 http://yaler.org/

材料：

• 三色LED[Ladyada | SparkFun]
• Arduino Duemilanove ATmega 328 [Ladyada | SparkFun]
• Arduino WIZnet 以太网插板 [Ladyada | SparkFun]
• 电阻[1 x 150 欧姆, 2 x 82 欧姆 for the Ladyada LED 或

1 x 180 欧姆, 2 x 100 欧姆 for the SparkFun LED]

• RJ45 电缆

工具：

• 烙铁
• Helping hands
• A/B USB 电缆

基础设施：

• DHCP接入因特网，无需公共IP地址
• （可选：PC机 或者带有公共IP地址的云服务器，来运行Yaler）

第一步：将电阻和电线焊接到LED上

注意：所有的图片都展示出Ladyada LED和其相应的电阻和线的颜色

• 除了最长的LED引线，其余的都要缩短
• 焊接电阻到LED上，如图所示
• 剪短那个剩余的引线
• 如果你使用Ladyada LED，在上面焊接红色线（如图所示）
• 如果你使用SparkFun LED，在上面焊接黑色线

第二步：连接LED到以太网插板

• 堆叠以太网插板到Arduino上
• 连接LED到以太网插板引脚3，5和6（红色）
• 如果你使用Ladyada LED，连接红色的线到以太网插板5V端
• 如果你使用SparkFun LED，连接黑色的线到以太网GND端

第三步：上传Arduino LED测试

为了测试LED你可以上传以下例子到你的Arduino。重置Arduino并确信颜色出现在相同的序列中，像如下循环代码注释描述的那样。如果你使用SparkFun LED，消除相应代码行的注释，删除Ladyada LED的三个analogWrite。如果颜色显示在另一个序列，你可能已经交换了一些引脚。

// 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);

// Ladyada 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
}

第四步：编辑并上传Arduino LED Web service

一旦你确信LED工作了，你就要准备好编辑并上传LED Web service的代码到你的Arduino.

首先，提取并开放 HelloLedYaler.pde （包含在ZIP压缩文件里--Arduino 0018压缩文件&Arduino v1.0或更高版本的压缩文件）如下。请注意源代码有些粗糙，我们不是很精通写Arduino/Processing代码。

然后你必须带着变化去在上一步setColor。如果你确实改变了pin的数字，也要带着这些变化。

>>仅用于Arduino 0018：

你可以从源代码的#includ看到，代码使用gkaindl的 EthernetDHCP Arduino 库。下载这个 EthernetDHCP库，复制这目录到Arduino库的路径(e.g. C:\Program Files\Arduino\arduino-0018\libraries).现在这个代码在编译时应该没有一个错误信息。

<<

你也必须设置你以太网插板的MAC地址。可以使用源码值，但是要知道在你的局域网里的设备也使用了相同的地址，是可能发生地址冲突的。这个MAC地址 在 byte server[] = { 46, 137, 106, 125 }行设置；多数时间可以改变最后的byte到另一个值，例如0xAA.

下一步是修改Yaler ID，以防多个Arduino使用相同的ID。通用ID已经在源代码行const char yalerId[] = "my-arduino"设置了；在http://yaler.net/得到一个免费使用的账户，并修改ID到中继域来显示你的账户，例如yalerId[] = "gsiot-ffmq-ttd5".

（如果你立刻运行你自己的Yaler 中继服务器，你也需要键入相应的IP地址。在源代码行 byte server[] = { 46, 137, 106, 125 };设置这个IP到Yaler项目的demo瞬间。请注意没有正常运行时间或者其他设备保证和访问是理所当然的实验目的。）想了解更多信息，请访问http://yaler.org/ ，阅读http://hg.yaler.org/yaler/src/tip/README.txt）

所以，剩下的就是上传代码并连接你的Arduino到因特网，用RJ45电缆。为了服务的运行，LAN必须提供DHCP。可以使用一个固定的IP，但是这需要改动一些源代码（这超出了本教程的重点）。为了以太网插板没有启动定时问题，一旦Arduino连接到LAN按下复位按钮。

下载：

HelloTriColorLedYalerService_Arduino_v1.0.zip

Hello TriColorLedYalerService_Arduino_v0018.zip

第五步：在网页上访问&控制Arduino

如果Arduino被连接到局域网从而连接到因特网，如果Yaler实例在制定的IP地址启动运行，你应该能够访问Arduino Web LED在http://{Yaler IP}/{Relay Domain}/led，例如http://try.yaler.net/gsiot-ffmq-ttd5

你会得到一个HTTP 504 Gateway Timeout if the Arduino is not running。取决于你的浏览器，这时显示为一个空白页或者“网关超时”。在这种情况下，确保一切都是紧紧插在电源插座上，尝试重置Arduino。

如果一切按预期的方式工作，你应该看到一个简单的HTML页面，带有三个彩色按钮。如果你按下一个按钮，Arduino LED应该让相应颜色的灯亮起来。

在幕后这个作品用一个简单的Javascript，发送一个HTTP PUT请求，例如，把http://try.yaler.net/gsiot-ffmq-ttd5/led/ff0000放到Arduino上去设置LED的颜色。你可以用Firefox的 Firebug插件，设置Net>XHR来看见发送请求。

注意这个URL不依赖于Arduino的当前位置。不管它是否附属于你的家庭网络或者你办公室的局域网 ，这个URL是相同的。只要插上Arduino并控制用你的浏览器控制它。

因为输入URL可能很麻烦，你可以利用一个二维码生成器http://qrcode.kaywa.com/，来得到你的Arduino URL的二维码。

打印出来，贴在你的Arduino上，用一个二维码阅读器来访问它，比如Lynkee（iPhone），Kaywa（Symbian，Java 手机）或者Quickmark（Windows系统移动电话），然后就方便控制Arduino了！

这就是全部内容，谢谢！

翻译自：http://www.instructables.com/id/Arduino-Web-LED/

感谢您的阅读！

与我们更多交流：

WIZnet邮箱：wiznetbj@wiznettechnology.com

WIZnet中文主页：http://www.iwiznet.cn

WIZnet中文博客：http://blog.iwiznet.cn

WIZnet企业微博：http://e.weibo.com/wiznet2012/profile