ESP8266:通过网络服务将开发板引脚状态显示在网页中

划句顾

  NodeMCU开发板上的FLASH按键可以控制D3引脚的电平。当我们没有按下改按键时，D3引脚将会保持高电平状态。当按下该按键后，D3引脚会变为低电平。

代码如下：

1. /**********************************
   
2. * Purpose: 使用NodeMCU建立基本服务器。该页面将会自动刷新并且显示NodeMCU
   
3.             的D3引脚状态。NodeMCU开发板上的FLASH按键可以控制D3引脚的电平。
   
4.             没有按下该按键时D3引脚将会保持高电平状态。当按下该按键后，
   
5.             D3引脚会变为低电平
   
6. * Author : LAOGU
   
7. * Time   : 2021/8/12
   
8. */
   
9. #include<ESP8266WiFi.h>
   
10. #include<ESP8266WiFiMulti.h>
    
11. #include<ESP8266WebServer.h>
    
12. 
    
13. #define buttonPin D3  //按钮引脚D3
    
14. 
    
15. ESP8266WiFiMulti wifiMulti; //建立ESP8266WiFiMulti对象，对象名称是“wifiMulti”
    
16. 
    
17. ESP8266WebServer esp8266_server(80);  //建立网络服务对象，该对象用于响应http请求。监听端口（80）
    
18. 
    
19. bool pinState; //存储引脚状态用变量
    
20. 
    
21. void setup()
    
22. {
    
23.   Serial.begin(9600); //启动串口通讯
    
24. 
    
25.   pinMode(buttonPin,INPUT_PULLUP);  //将按键引脚设置为输入上拉模式
    
26. 
    
27.   //通过addAP函数存储 WiFi名称   WiFi密码
    
28.   wifiMulti.addAP("八嘎","123456789");
    
29.   wifiMulti.addAP("胶几人","11223344");
    
30. 
    
31.   Serial.println("Connecting...");
    
32.   int i = 0;
    
33.   while(wifiMulti.run()!=WL_CONNECTED)
    
34.   {
    
35.     delay(1000);
    
36.     Serial.print(i++);
    
37.     Serial.print(" ");
    
38.     }
    
39. 
    
40.    Serial.println('\n');
    
41.    Serial.print("Connected to ");
    
42.    Serial.println(WiFi.SSID());
    
43.    Serial.print("IP address:");
    
44.    Serial.println(WiFi.localIP());
    
45. 
    
46.    esp8266_server.begin(); //启动网站服务
    
47.    esp8266_server.on("/",handleRoot);
    
48.    esp8266_server.onNotFound(handleNotFound);
    
49. 
    
50.    Serial.println("HTTP esp8266_server started");  //告知用户ESP8266网络服务功能已经启动
    
51. 
    
52. }
    
53. 
    
54. void loop()
    
55. {
    
56.   esp8266_server.handleClient(); //处理http服务器访问
    
57.   pinState = digitalRead(buttonPin); //获取引脚状态
    
58. }
    
59. 
    
60. void handleRoot()
    
61. {
    
62.   String displayPinState;  //存储按键状态的字符串变量
    
63. 
    
64.   if(pinState == HIGH)
    
65.   {
    
66.     displayPinState = "Button State : HIGH";
    
67.   }
    
68.   else
    
69.   {
    
70.     displayPinState = "Button State : LOW";
    
71.     }
    
72. 
    
73.    esp8266_server.send(200,"text/plain",displayPinState);  //向浏览器发送按键状态信息
    
74.   }
    
75. 
    
76. void handleNotFound()
    
77. {
    
78.   esp8266_server.send(404,"text/plain","404: Not Found");
    
79.   }

复制代码

                               
登录/注册后可看大图

长按FLASH键并刷新页面，会发现引脚的状态变了

                               
登录/注册后可看大图

以下代码将实现页面的自动刷新：
代码如下：

1. /**********************************
   
2. * Purpose: 使用NodeMCU建立基本服务器。该网页将显示引脚D3状态。同时状态会
   
3.             每隔5秒钟更新一次。
   
4. * Author : LAOGU
   
5. * Time   : 2021/8/13
   
6. */
   
7. #include<ESP8266WiFi.h>
   
8. #include<ESP8266WiFiMulti.h>
   
9. #include<ESP8266WebServer.h>
   
10. 
    
11. #define buttonPin D3  //按钮引脚D3
    
12. 
    
13. ESP8266WiFiMulti wifiMulti; //建立ESP8266WiFiMulti对象，对象名称是“wifiMulti”
    
14. 
    
15. ESP8266WebServer esp8266_server(80);  //建立网络服务对象，该对象用于响应http请求。监听端口（80）
    
16. 
    
17. bool pinState; //存储引脚状态用变量
    
18. 
    
19. void setup()
    
20. {
    
21.   Serial.begin(9600); //启动串口通讯
    
22. 
    
23.   pinMode(buttonPin,INPUT_PULLUP);  //将按键引脚设置为输入上拉模式
    
24. 
    
25.   //通过addAP函数存储 WiFi名称   WiFi密码
    
26.   wifiMulti.addAP("八嘎","123456789");
    
27.   wifiMulti.addAP("胶几人","11223344");
    
28. 
    
29.   Serial.println("Connecting...");
    
30.   int i = 0;
    
31.   while(wifiMulti.run()!=WL_CONNECTED)
    
32.   {
    
33.     delay(1000);
    
34.     Serial.print(i++);
    
35.     Serial.print(" ");
    
36.     }
    
37. 
    
38.    Serial.println('\n');
    
39.    Serial.print("Connected to ");
    
40.    Serial.println(WiFi.SSID());
    
41.    Serial.print("IP address:");
    
42.    Serial.println(WiFi.localIP());
    
43. 
    
44.    esp8266_server.begin(); //启动网站服务
    
45.    esp8266_server.on("/",handleRoot);
    
46.    esp8266_server.onNotFound(handleNotFound);
    
47. 
    
48.    Serial.println("HTTP esp8266_server started");  //告知用户ESP8266网络服务功能已经启动
    
49. 
    
50. }
    
51. 
    
52. void loop()
    
53. {
    
54.   esp8266_server.handleClient(); //处理http服务器访问
    
55.   pinState = digitalRead(buttonPin); //获取引脚状态
    
56. }
    
57. 
    
58. void handleRoot()
    
59. {
    
60.   esp8266_server.send(200,"text/html",sendHTML(pinState));  
    
61.   }
    
62. 
    
63. String sendHTML(bool buttonState)
    
64. {
    
65.   String htmlCode="<!DOCTYPE html><html>\n";
    
66.   htmlCode += "<head><meta http-equiv='refresh' content = '5'/>\n";  //每5秒刷新一下浏览器
    
67.   htmlCode += "<title>ESP8266 Button State</title>\n";
    
68.   htmlCode += "<style>html{font-family: Helvetica; display: inline-block; margin: 0px auto;text-align: center;}\n";
    
69.   htmlCode += "body{margin-top: 50px;}h1{color: #444444; margin:50px auto 30px;}h3{color;#444444;margin-bottom:50px;}\n";
    
70.   htmlCode += "</style>\n";
    
71.   htmlCode += "</head>\n";
    
72.   htmlCode += "<body>\n";
    
73.   htmlCode += "<h1>ESP8266 BUTTON STATE</h1>\n";
    
74. 
    
75.   if(buttonState)
    
76.   {
    
77.     htmlCode += "<p>Button Status : HIGH</p>\n";
    
78.     }
    
79.    else
    
80.   {
    
81.     htmlCode += "<p>Button Status : LOW</p>\n";
    
82.     }
    
83.     htmlCode += "</body>\n";
    
84.     htmlCode += "</html>\n";
    
85. 
    
86.     return htmlCode;
    
87.   }
    
88. 
    
89. void handleNotFound()
    
90. {
    
91.   esp8266_server.send(404,"text/plain","404: Not Found");
    
92.   }

复制代码

代码中的“+=”是叠加的意思。

                               
登录/注册后可看大图

网页如下：


按下flash键，结果如下：