當我們完成一些Arduino項目后，比如Arduino控制燈的項目或者Arduino控制舵機的項目，等等。這時你或許會思考一個問題，是否可以通過網頁實現對燈或舵機的控制。當然，自帶網絡版本的Arduino是首選，比如Arduino Yun。下面來看看怎么去實現它。首先，我們需要創建一個簡單的網頁，使它可以與Arduino通信。在本文中將逐一討論。

如何從網頁控制arduino

在本文中，我們將通過一塊以太網功能的擴展板和Arduino共同完成，目的是使我們能通過web瀏覽器控制藍色LED的開關(當然，如果你愿意，你可以使用其他顏色的LED)。

首先，當然是將網絡功能擴展板與Arduino UNO連接。在這個項目中使用的是Ethernet W5100 網絡擴展板模塊。

電路連接

對于控制LED這種項目，其實只使用Arduino 引腳13的板載LED也可以實現。但是如果要考慮添加W5100擴展板，這種方法就存在一些問題。首先，由于LED會被擴展板覆蓋住，想看到LED頸椎受不了！第二個更嚴重的問題是，W5100以太網擴展板本身使用了引腳13。所以在本文中，我們將一個藍色LED接一個10K歐姆的電阻后，再將它連接到Arduino的第二個引腳上。

Arduino連接LED

這就是電路的全部內容，是不是超級簡單。當然這里的引腳均需要從W5100擴展板上對應連接，連接OK后，通過USB將Arduino插到PC機上。將以下代碼上傳到Arduino?，F在就可以開始從網頁控制Arduino了!

注意：需要將下面代碼中的IP地址(192.168.1.212)更改為適合你自己家中局域網的IP地址。除此之外，不需要調整其他任何東西。

// Basemu - Controlling an Arduino Pin from a WebPage

// link to www.basemu.com

#include "SPI.h"

#include "Ethernet.h"

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xAD, 0xEE, 0xBE }; //physical mac address

byte ip[] = { 192, 168, 1, 212 }; // IP address in LAN – need to change according to your Network address

byte gateway[] = { 192, 168, 1, 1 }; // internet access via router

byte subnet[] = { 255, 255, 255, 0 }; //subnet mask

EthernetServer server(80); //server port

String controlString; // Captures out URI querystring;;

int blueLEDPin = 2; // pin where our blue LED is connected

void setup(){

pinMode(blueLEDPin, OUTPUT); // change pin 2 to OUTPUT pin

// Initialize the Ethernet

Ethernet.begin(mac, ip, gateway, subnet);

server.begin();

}

void loop(){

// Create a client connection

EthernetClient client = server.available();

if (client) {

while (client.connected()) {

if (client.available()) {

char c = client.read();

//read the HTTP request

if (controlString.length() < 100) {

// write characters to string

controlString += c;

}

//if HTTP request has ended– 0x0D is Carriage Return \n ASCII

if (c == 0x0D) {

client.println("HTTP/1.1 200 OK"); //send new page

client.println("Content-Type: text/html");

client.println();

client.println("

");

client.println("

");

client.println("

");

client.println("");

client.println("

");

client.println("

");

client.println("

LED ON/OFF FROM WEBPAGE

");

client.println("

");

client.println("

);

client.println("");

client.println("");

delay(10);

//stopping client

client.stop();

// control arduino pin

if(controlString.indexOf("?GPLED2ON") > -1) //checks for LEDON

{

digitalWrite(blueLEDPin, HIGH); // set pin high

}

else{

if(controlString.indexOf("?GPLED2OFF") > -1) //checks for LEDOFF

{

digitalWrite(blueLEDPin, LOW); // set pin low

}

}

//clearing string for next read

controlString="";

}

}

}

}

}

下面打開Windows的命令窗口（WIN鍵+R，打開后輸入CMD即可），輸入ping 192.168.1.212(對應你的IP地址)，應該看到以下內容，這里可以驗證你的Arduino是否已正確連接到網絡:

Windows的命令窗口（WIN鍵+R，打開后輸入CMD即可）

如果成功Ping通，下面打開瀏覽器，輸入http://192.168.1.212((對應你的IP地址)，應該看到以下屏幕:

Arduino WEB控制LED

這時，點擊”Turn On The Blue LED”應該會點亮LED，點擊“Turn Off the Blue LED”應該會關閉LED。

代碼解釋

W5100以太網擴展板與Arduino是通過SPI接口進行通信的，因此，使用W5100擴展板需要將“SPI.h”和“Ethernet.h”都include到項目中。

#include "SPI.h"

#include "Ethernet.h"

代碼的下一部分是將MAC地址和IP地址分配給W5100，并配置服務器端口80，這是標準的web服務器端口。

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xAD, 0xEE, 0xBE };

byte ip[] = { 192, 168, 1, 212 };

byte gateway[] = { 192, 168, 1, 1 };

byte subnet[] = { 255, 255, 255, 0 };

EthernetServer server(80);

接下來，需要一個用于藍色LED引腳的變量，以及一個用于捕獲URI查詢字符串數據的“控制”變量。我們將發送“?GPLED2ON”到網頁上來關閉LED，發送“?GPLED2OFF”來關閉LED。controlString將捕獲這些命令。

String controlString;

int blueLEDPin = 2;

代碼的設置部分，設置引腳2為輸出，以便當我們設置引腳2為高電平時，可以為LED供電。Ethernet.begin 啟動W5100并給它分配前面指定的MAC地址和IP地址。server.begin 啟動在端口80上偵聽web服務器。

pinMode(blueLEDPin, OUTPUT);

Ethernet.begin(mac, ip, gateway, subnet);

server.begin();