设置vmware vsphere web client_Arduino+前端高级应用-通过WEB网页控制Arduino开发板上的LED灯...

在本教程中，让我们继续学习如何控制GPIO 引脚，不过这次进入高级阶段，我们将从一个可以访问的WEB网页中开关led灯。超详细代码解读，前端工程师也可以轻松玩起嵌入式。听起来是不很酷，Let’s go ,让我们开始吧！

项目概述

在本文中，我将向你展示如何控制GPIO引脚。在本教程中，我们从可以用一个网页中来控制led灯的开关，这个网页可以从任何连接互联网的设备访问。

但首先，让我们回顾一下一些基本术语:

Web服务器——软件、硬件或两者的组合，包含处理和传递Web页面所需的文件

Web客户端-可以向Web服务器发送HTTP/ Web请求的任何设备

本地服务器-只能在你的局域网内访问的网络服务器

全球服务器-一个网络服务器，可以通过互联网在任何地方进行访问

HTTP POST—将数据传输到服务器的web请求

HTTP GET—从web浏览器检索数据的web请求

端口转发-一种路由器设置，它将流量从一个广域网路端口导向你局域网内的一个特定设备

组件和供应

Arduino UNO和Genuino UNO开发板 1块

Espressif ESP8266 ESP-01模块 1块

实验面包板 1块

电阻器1 k欧姆 1只

电阻器10 k欧姆 1只

跳线(通用) 1包

LED灯 1只

2.21 k欧姆电阻 1只

app和在线服务

Arduino IDE
WEB浏览器

硬件连接

用跳线将各部件按下图所示连接:

和以前一样，我们将使用Arduino UNO来对ESP-01模块编程。为此，我们将通过将RESET 引脚连接到GND来禁用UNO的板载芯片。然后，在Arduino IDE中将通用ESP8266模块设置为您的板。

将GPIO0引脚连接到GND，将ESP-01模块设置为程序模式。同样，在上传前连接并断开ESP-01的复位引脚到GND。

故障排除技巧

千万不要忘记将Arduino RESET pin连接到GND。
确保上传速率为115200。
检查分压器电路的电压读数。它必须给你的RX引脚输出3.3V电压。
果你在上传程序到ESP-01时经常出错，把你的ESP8266板库降级到2.5.0版。
如果上传后程序没有运行，短暂连接然后再断开ESP-01复位引脚至GND。

代码解读

我们这次只需要esp8266wifi .h这个文件。这是包含在ESP8266板的库中，所以不需要安装它。

#include <ESP8266WiFi.h>

在这里输入您的家庭网络密码。

const char* ssid = "WiFi name";
const char* password = "WiFi password";

将webserver端口号设置为80。

WiFiServer server(80);

Setup()函数部分，将LED引脚设置为输出，并将其初始化为LOW。

有趣的是，ESP-01内置的LED连接到GPIO2上，但低电平有效。如果你将GPIO2引脚设置为低，连接到GPIO2的LED就会关闭，而内置的LED则会亮起。

Setup()函数中还初始化串口监视器。串口监视器用于显示诸如ESP-01的IP地址等信息。它还有助于识别错误。

最后，安装程序使用server.begin()启动web服务器。

void setup()
{
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW);
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
delay(100);
Serial.print(".");
}
Serial.println("");
Serial.println("Connected to WiFi");
Serial.print("IP: "); Serial.println(WiFi.localIP());
server.begin();
}

接下来，在循环部分中，我们有server.available()。这个函数检测新的web客户端。当没有时，它总是返回false。相反，如果检测到新客户端接入，代码将继续执行到下一行。

WiFiClient client = server.available();
if (!client) {
return;
}

它一直等待，直到客户端发送一个请求。

while(!client.available()){
}

并读取请求，然后将其打印到串口监视器上。flush()函数确保所有传出字符都已发送。

读取请求，然后在串口监视器上打印。这个客户端.flush（）函数确保所有输出字符都已经发送。

String request = client.readStringUntil('r');
Serial.println(request);
client.flush();

LED=ON和LED=OFF是我们将用于开关LED的请求的名称。我们将在后面的HTML代码中看到它们。基本上，如果前一行读取LED=ON，程序发送一个高到LED引脚，反之亦然。

int value = LOW;
if (request.indexOf("/LED=ON") != -1) {
digitalWrite(ledPin, HIGH);
value = HIGH;
}
if (request.indexOf("/LED=OFF") != -1){
digitalWrite(ledPin, LOW);
value = LOW;
}

最后，我们使用client.println()创建一个web页面。

client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("");
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.print("LED status: ");
if(value == HIGH)
{
client.print("ON");
}
else
{
client.print("OFF");
}
client.println(" ");
client.println("Turn <a href="/LED=ON">ON</a> ");
client.println("Turn <a href="/LED=OFF">OFF</a> ");
client.println("</html>");
Serial.println("");

在这里，我们将看到如何将请求命名为LED=ON和LED=OFF。

client.println("Turn <a href="/LED=ON">ON</a> ");
client.println("Turn <a href="/LED=OFF">OFF</a> ");

演示

上传程序，打开串口监视器。会出现串行监视器显示乱码，而ESP-01拒绝连接的情况。一个简单的处理方法是连接和断开ESP-01复位引脚到地。

从任何web浏览器输入串行监视器给定的IP地址。第一行指示LED当前是打开还是关闭。要更改它，只需单击链接。

代码

#include <ESP8266WiFi.h>

const char* ssid = "WiFi name";

const char* password = "WiFi password";

int ledPin = 2;

WiFiServer server(80);

void setup()

{

Serial.begin(115200);

pinMode(ledPin, OUTPUT);

digitalWrite(ledPin, LOW);

Serial.print("Connecting to ");

Serial.println(ssid);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED)

{

delay(100);

Serial.print(".");

}

Serial.println("");

Serial.println("Connected to WiFi");

Serial.print("IP: "); Serial.println(WiFi.localIP());

server.begin();

}

void loop()

{

WiFiClient client = server.available();

if (!client) {

return;

}

while(!client.available()){

}

String request = client.readStringUntil('r');

Serial.println(request);

client.flush();

int value = LOW;

if (request.indexOf("/LED=ON") != -1)

{

digitalWrite(ledPin, HIGH);

value = HIGH;

}

if (request.indexOf("/LED=OFF") != -1)

{

digitalWrite(ledPin, LOW);

value = LOW;

}

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

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

client.println(""); // do not forget this one

client.println("<!DOCTYPE HTML>");

client.println("<html>");

client.print("LED status: ");

if(value == HIGH)

{

client.print("ON");

}

else

{

client.print("OFF");

}

client.println(" ");

client.println("Turn <a href="/LED=ON">ON</a> ");

client.println("Turn <a href="/LED=OFF">OFF</a> ");

client.println("</html>");

Serial.println("");

}

原理图