如何通过网页控制Arduino

  • 内容
  • ....
  • 相关

当我们完成一些Arduino项目后,比如Arduino控制灯的项目或者Arduino控制舵机的项目,等等。这时你或许会思考一个问题,是否可以通过网页实现对灯或舵机的控制。当然,自带网络版本的Arduino是首选,比如Arduino Yun。下面来看看怎么去实现它。首先,我们需要创建一个简单的网页,使它可以与Arduino通信。在本文中将逐一讨论。

如何从网页控制arduino

在本文中,我们将通过一块以太网功能的扩展板和Arduino共同完成,目的是使我们能通过web浏览器控制蓝色LED的开关(当然,如果你愿意,你可以使用其他颜色的LED)。

首先,当然是将网络功能扩展板与Arduino UNO连接。在这个项目中使用的是Ethernet W5100 网络扩展板模块

将网络功能扩展板Ethernet W5100与Arduino UNO连接
将网络功能扩展板Ethernet W5100与Arduino UNO连接

电路连接

对于控制LED这种项目,其实只使用Arduino 引脚13的板载LED也可以实现。但是如果要考虑添加W5100扩展板,这种方法就存在一些问题。首先,由于LED会被扩展板覆盖住,想看到LED颈椎受不了!第二个更严重的问题是,W5100以太网扩展板本身使用了引脚13。所以在本文中,我们将一个蓝色LED接一个10K欧姆的电阻后,再将它连接到Arduino的第二个引脚上。

Arduino连接LED
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("<html>"); 
                    client.println("<head>"); 
                    client.println("<title>Basemu Arduino Ethernet Test Page</title>"); 
                    client.println("</head>"); 
                    client.println("<body>");                     
                    client.println(" 
<h1 style=\"color: blue; font-family: arial; text-align: center;\"><a href="https://www.basemu.com/"> Basemu </a> ARDUINO ETHERNET TEST PAGE</h1> 
"); 
                    client.println(" 
<h2 style=\"color: green; font-family: arial; text-align: center;\">LED ON/OFF FROM WEBPAGE</h2> 
 
"); 
                    client.println(" 
<hr>
 
 
"); 
                    client.println(" 
<h2 style=\"color: blue; font-family: arial; text-align: center;\"><a href=\"/?GPLED2ON\"\">Turn On The Blue LED</a> - <a href=\"/?GPLED2OFF\"\">Turn Off the Blue LED</a>
</h2> 
");
                    client.println("</body>"); 
                    client.println("</html>");
 
                    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即可)
Windows的命令窗口(WIN键+R,打开后输入CMD即可)

如果成功Ping通,下面打开浏览器,输入http://192.168.1.212((对应你的IP地址),应该看到以下屏幕:

Arduino WEB控制LED
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();

后续的代码基本是关于网页构建的,不再进行详细介绍。有兴趣的可以自己修改外观。