ESP8266:通过网络服务将开发板引脚状态显示在网页中
本帖最后由 划句顾 于 2021-8-13 12:33 编辑NodeMCU开发板上的FLASH按键可以控制D3引脚的电平。当我们没有按下改按键时，D3引脚将会保持高电平状态。当按下该按键后，D3引脚会变为低电平。
代码如下：
/**********************************
* Purpose: 使用NodeMCU建立基本服务器。该页面将会自动刷新并且显示NodeMCU
的D3引脚状态。NodeMCU开发板上的FLASH按键可以控制D3引脚的电平。
没有按下该按键时D3引脚将会保持高电平状态。当按下该按键后，
D3引脚会变为低电平
* Author : LAOGU
* Time : 2021/8/12
*/
#include<ESP8266WiFi.h>
#include<ESP8266WiFiMulti.h>
#include<ESP8266WebServer.h>
#define buttonPin D3//按钮引脚D3
ESP8266WiFiMulti wifiMulti; //建立ESP8266WiFiMulti对象，对象名称是“wifiMulti”
ESP8266WebServer esp8266_server(80);//建立网络服务对象，该对象用于响应http请求。监听端口（80）
bool pinState; //存储引脚状态用变量
void setup()
{
Serial.begin(9600); //启动串口通讯
pinMode(buttonPin,INPUT_PULLUP);//将按键引脚设置为输入上拉模式
//通过addAP函数存储 WiFi名称 WiFi密码
wifiMulti.addAP("八嘎","123456789");
wifiMulti.addAP("胶几人","11223344");
Serial.println("Connecting...");
int i = 0;
while(wifiMulti.run()!=WL_CONNECTED)
{
delay(1000);
Serial.print(i++);
Serial.print(" ");
}
Serial.println('\n');
Serial.print("Connected to ");
Serial.println(WiFi.SSID());
Serial.print("IP address:");
Serial.println(WiFi.localIP());
esp8266_server.begin(); //启动网站服务
esp8266_server.on("/",handleRoot);
esp8266_server.onNotFound(handleNotFound);
Serial.println("HTTP esp8266_server started");//告知用户ESP8266网络服务功能已经启动
}
void loop()
{
esp8266_server.handleClient(); //处理http服务器访问
pinState = digitalRead(buttonPin); //获取引脚状态
}
void handleRoot()
{
String displayPinState;//存储按键状态的字符串变量
if(pinState == HIGH)
{
displayPinState = "Button State : HIGH";
}
else
{
displayPinState = "Button State : LOW";
}
esp8266_server.send(200,"text/plain",displayPinState);//向浏览器发送按键状态信息
}
void handleNotFound()
{
esp8266_server.send(404,"text/plain","404: Not Found");
}
static/image/hrline/5.gif
长按FLASH键并刷新页面，会发现引脚的状态变了
static/image/hrline/5.gif
以下代码将实现页面的自动刷新：
代码如下：
/**********************************
* Purpose: 使用NodeMCU建立基本服务器。该网页将显示引脚D3状态。同时状态会
每隔5秒钟更新一次。
* Author : LAOGU
* Time : 2021/8/13
*/
#include<ESP8266WiFi.h>
#include<ESP8266WiFiMulti.h>
#include<ESP8266WebServer.h>
#define buttonPin D3//按钮引脚D3
ESP8266WiFiMulti wifiMulti; //建立ESP8266WiFiMulti对象，对象名称是“wifiMulti”
ESP8266WebServer esp8266_server(80);//建立网络服务对象，该对象用于响应http请求。监听端口（80）
bool pinState; //存储引脚状态用变量
void setup()
{
Serial.begin(9600); //启动串口通讯
pinMode(buttonPin,INPUT_PULLUP);//将按键引脚设置为输入上拉模式
//通过addAP函数存储 WiFi名称 WiFi密码
wifiMulti.addAP("八嘎","123456789");
wifiMulti.addAP("胶几人","11223344");
Serial.println("Connecting...");
int i = 0;
while(wifiMulti.run()!=WL_CONNECTED)
{
delay(1000);
Serial.print(i++);
Serial.print(" ");
}
Serial.println('\n');
Serial.print("Connected to ");
Serial.println(WiFi.SSID());
Serial.print("IP address:");
Serial.println(WiFi.localIP());
esp8266_server.begin(); //启动网站服务
esp8266_server.on("/",handleRoot);
esp8266_server.onNotFound(handleNotFound);
Serial.println("HTTP esp8266_server started");//告知用户ESP8266网络服务功能已经启动
}
void loop()
{
esp8266_server.handleClient(); //处理http服务器访问
pinState = digitalRead(buttonPin); //获取引脚状态
}
void handleRoot()
{
esp8266_server.send(200,"text/html",sendHTML(pinState));
}
String sendHTML(bool buttonState)
{
String htmlCode="<!DOCTYPE html><html>\n";
htmlCode += "<head><meta http-equiv='refresh' content = '5'/>\n";//每5秒刷新一下浏览器
htmlCode += "<title>ESP8266 Button State</title>\n";
htmlCode += "<style>html{font-family: Helvetica; display: inline-block; margin: 0px auto;text-align: center;}\n";
htmlCode += "body{margin-top: 50px;}h1{color: #444444; margin:50px auto 30px;}h3{color;#444444;margin-bottom:50px;}\n";
htmlCode += "</style>\n";
htmlCode += "</head>\n";
htmlCode += "<body>\n";
htmlCode += "<h1>ESP8266 BUTTON STATE</h1>\n";
if(buttonState)
{
htmlCode += "<p>Button Status : HIGH</p>\n";
}
else
{
htmlCode += "<p>Button Status : LOW</p>\n";
}
htmlCode += "</body>\n";
htmlCode += "</html>\n";
return htmlCode;
}
void handleNotFound()
{
esp8266_server.send(404,"text/plain","404: Not Found");
}
代码中的“+=”是叠加的意思。
static/image/hrline/5.gif
网页如下：
按下flash键，结果如下：
页:
[1]