如何从网页控制arduino？

当我们完成一些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。现在就可以开始从网页控制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();