前言:
当前各位老铁们对“led服务器使用教程”大致比较看重,看官们都想要了解一些“led服务器使用教程”的相关知识。那么小编也在网上搜集了一些有关“led服务器使用教程””的相关文章,希望朋友们能喜欢,兄弟们一起来学习一下吧!在这个项目中,您将创建一个带有ESP32的独立Web服务器,该服务器使用Arduino IDE编程环境控制输出(两个LED)。Web服务器具有移动响应能力,可以使用任何作为本地网络浏览器的设备进行访问。我们将向您展示如何创建Web服务器以及代码如何逐步运行。
项目概况
在继续进行该项目之前,重要的一点是概述我们的Web服务器将要执行的操作,以便以后更容易执行这些步骤。
您将构建的Web服务器控制连接到ESP32 GPIO 26和GPIO 27的两个LED ;您可以通过在局域网中的浏览器中键入ESP32 IP地址来访问ESP32 Web服务器。通过单击Web服务器上的按钮,您可以立即更改每个LED的状态。
这只是一个简单的示例,用于说明如何构建用于控制输出的Web服务器,其思想是用继电器或您想要的任何其他电子组件替换这些LED 。
所需零件
对于本教程,您将需要以下部分:
ESP32开发板2个5毫米LED2个330欧姆电阻面包板跳线原理图
首先构建电路。如下图所示,将两个LED连接到ESP32。一个LED连接到GPIO 26,另一个LED连接到GPIO 27。
注意:我们使用的ESP32 DEVKIT DOIT开发板,有36个引脚。在组装电路之前,请确保检查所用电路板的引脚排列。
ESP32 Web服务器代码
在这里,我们提供了创建ESP32 Web服务器的代码。将以下代码复制到您的Arduino IDE。
#include <WiFi.h>
const char* ssid = "";
const char* password = "";
WiFiServer server(80);
String header;
String output26State = "off";
String output27State = "off";
const int output26 = 26;
const int output27 = 27;
void setup() {
Serial.begin(115200);
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop(){
WiFiClient client = server.available();
if (client) {
Serial.println("New Client.");
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
if (header.indexOf("GET /26/on") >= 0) {
Serial.println("GPIO 26 on");
output26State = "on";
digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
Serial.println("GPIO 26 off");
output26State = "off";
digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
Serial.println("GPIO 27 on");
output27State = "on";
digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
Serial.println("GPIO 27 off");
output27State = "off";
digitalWrite(output27, LOW);
}
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");
client.println("<body><h1>ESP32 Web Server</h1>");
client.println("<p>GPIO 26 - State " + output26State + "</p>");
if (output26State=="off") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("<p>GPIO 27 - State " + output27State + "</p>");
if (output27State=="off") {
client.println("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/27/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
client.println();
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
header = "";
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
程序代码讲解
1、设置您的用户名和密码
您需要使用网络凭据修改以下几行:SSID和密码。
const char* ssid = "你的用户名";
const char* password = "你的密码";
2、上传代码
现在,您可以上传代码,Web服务器将立即运行。请按照以下步骤将代码上传到ESP32:
1)将ESP32板插入计算机;
2) 在Arduino IDE中,在Tools > Board中选择您的开发板 (在本例中,我们使用ESP32 DEVKIT DOIT开发板);
3)在工具 > 端口中选择COM端口 。
4)按下Arduino IDE中的Upload按钮,等待几秒钟,直到代码编译并上传到您的开发板上。
5)等待" 完成上传 "消息。
3、查找ESP IP地址
上载代码后,以115200的波特率打开串口监视器。
按下ESP32 EN按钮(重置)。ESP32连接到Wi-Fi,并在串行监视器上输出ESP IP地址。复制该IP地址,因为您需要它来访问ESP32 Web服务器。
4、访问Web服务器
要访问Web服务器,请打开浏览器,粘贴ESP32 IP地址,您将看到以下页面。在我们的例子中是192.168.1.135。
如果您看一下"串口监视器",您可以看到后台发生了什么。ESP从新客户端(在本例中为您的浏览器)接收HTTP请求。
您还可以查看有关HTTP请求的其他信息。
5、测试Web服务器
现在,您可以测试您的Web服务器是否正常运行。单击按钮以控制LED。
同时,您可以查看串口监视器以了解后台发生的情况。例如,当您单击按钮打开GPIO 26时,ESP32在/ 26 / on URL 上收到请求。
ESP32收到该请求后,会将连接到GPIO 26的LED 点亮,并在网页上更新其状态。
GPIO 27的按钮以类似的方式工作。测试它是否正常工作。
下面讲解代码如何工作
在本节中,将详细讲解代码以了解其工作原理。
您需要做的第一件事就是包括WiFi库。
#include <WiFi.h>
如前所述,您需要在双引号内的以下行中插入您的用户名和密码。
const char* ssid = "";
const char* password = "";
然后,将Web服务器设置为端口80。
WiFiServer server(80);
以下行创建一个变量来存储HTTP请求的标头:
String header;
接下来,创建辅助变量以存储输出的当前状态。如果要添加更多输出并保存其状态,则需要创建更多变量。
String output26State = "off";
String output27State = "off";
您还需要为每个输出分配一个GPIO。在这里,我们使用GPIO 26和GPIO 27。您可以使用任何其他合适的GPIO。
const int output26 = 26;
const int output27 = 27;
设定()
现在,让我们进入setup()。首先,出于调试目的,我们以115200的波特率开始串行通信。
Serial.begin(115200);
您还可以将GPIO定义为OUTPUT,并将它们设置为LOW。
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);
以下几行以WiFi.begin(ssid,password)开始Wi-Fi连接,等待连接成功并在串行监视器中打印ESP IP地址。
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
循环()
在loop()中,我们对新客户端与Web服务器建立连接时发生的情况进行编程。
ESP32始终通过以下一行监听传入的客户端:
WiFiClient client = server.available();
收到客户的请求后,我们将保存传入的数据。只要客户端保持连接,随后的while循环将一直运行。除非您确切地知道自己在做什么,否则我们不建议更改代码的以下部分。
if (client) {
Serial.println("New Client.");
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
if和else语句的下一部分检查在网页中按下了哪个按钮,并相应地控制输出。如前所述,根据所按下的按钮,我们会在不同的URL上发出请求。
if (header.indexOf("GET /26/on") >= 0) {
Serial.println("GPIO 26 on");
output26State = "on";
digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
Serial.println("GPIO 26 off");
output26State = "off";
digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
Serial.println("GPIO 27 on");
output27State = "on";
digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
Serial.println("GPIO 27 off");
output27State = "off";
digitalWrite(output27, LOW);
}
例如,如果您按下GPIO 26 ON按钮,ESP32会在/ 26 / ON URL上收到请求(我们可以在Serial Monitor的HTTP标头上看到该信息)。因此,我们可以检查标题是否包含表达式GET / 26 / on。如果包含,则将output26state变量更改为ON,然后ESP32点亮LED。
其他按钮也是如此。因此,如果要添加更多输出,则应修改代码的这一部分以包括它们。
显示HTML网页
您需要做的下一步是创建网页。ESP32将使用一些HTML代码向您的浏览器发送响应以构建网页。
使用此表示形式的client.println()将网页发送给客户端。您应该输入要发送给客户端的内容作为参数。
我们应该发送的第一件事始终是以下一行,这表明我们正在发送HTML。
<!DOCTYPE HTML><html>
然后,以下一行使网页在任何Web浏览器中都响应。
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
并且以下内容用于防止在收藏夹图标上发出请求。
client.println("<link rel=\"icon\" href=\"data:,\">");
网页样式
接下来,我们有一些CSS文本来设置按钮样式和网页外观。我们选择Helvetica字体,定义要显示为块并在中心对齐的内容。
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
我们使用#4CAF50颜色(无边框),白色文本和以下填充为按钮设置样式:16px 40px。我们还将文本装饰设置为none,定义字体大小,边距和指针的指针。
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
我们还定义了第二个按钮的样式,具有我们先前定义的按钮的所有属性,但是具有不同的颜色。这将是关闭按钮的样式。
client.println(".button2 {background-color: #555555;}</style></head>");
设置网页第一个标题
在下一行中,您可以设置网页的第一个标题。这里有" ESP32 Web Server ",但是您可以将文本更改为任何您喜欢的文本。
client.println("<h1>ESP32 Web Server</h1>");
显示按钮及其对应状态
然后,编写一段以显示GPIO 26当前状态。如您所见,我们使用output26State变量,以便在此变量更改时状态立即更新。
client.println("<p>GPIO 26 - State " + output26State + "</p>");
然后,根据GPIO的当前状态,显示开或关按钮。如果GPIO的当前状态为关闭,则显示" ON"按钮,否则显示" OFF"按钮。
if (output26State=="off") {
client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
}
我们对GPIO 27使用相同的过程。
断开连接
最后,当响应结束时,我们清除header变量,并使用client.stop()停止与客户端的连接。
header = "";
client.stop();
写到最后
在本例程中,我们向您展示了如何使用ESP32来构建Web服务器。我们已经向您展示了一个控制两个LED的简单示例,但其目的是用继电器或您要控制的任何其他输出替换这些LED。
标签: #led服务器使用教程