ESP8266 实战二 web显示io口状态

最新推荐文章于 2024-03-31 15:12:56 发布

*星里

最新推荐文章于 2024-03-31 15:12:56 发布

阅读量569

点赞数 1

文章标签： java 开发语言

本文链接：https://blog.csdn.net/qq_52785624/article/details/127161212

版权

#include <ESP8266WiFi.h>        // 本程序使用 ESP8266WiFi库
#include <ESP8266WiFiMulti.h>   //  ESP8266WiFiMulti库
#include <ESP8266WebServer.h>   //  ESP8266WebServer库
 
#define buttonPin 0            // 按钮引脚D3
 
ESP8266WiFiMulti wifiMulti;     // 建立ESP8266WiFiMulti对象,对象名称是'wifiMulti'
 
ESP8266WebServer esp8266_server(80);// 建立网络服务器对象，该对象用于响应HTTP请求。监听端口（80）
 
bool pinState;  // 存储引脚状态用变量
 
void setup(){
  Serial.begin(9600);   // 启动串口通讯
 
  pinMode(buttonPin, INPUT_PULLUP); // 将按键引脚设置为输入上拉模式
 
 wifiMulti.addAP("TP-LINK_7AAD", "LKQ123456+");  // 这三条语句通过调用函数addAP来记录3个不同的WiFi网络信息。
 wifiMulti.addAP("CMCC-3289", "15208883289"); // 这3个WiFi网络名称分别是taichi-maker, taichi-maker2, taichi-maker3。
 wifiMulti.addAP("CMCC-3289-5G", "15208883289"); // 这3个网络的密码分别是123456789，87654321，13572468。
 Serial.println("Connecting ...");                           // 则尝试使用此处存储的密码进行连接。
  int i = 0;                                 
  while (wifiMulti.run() != WL_CONNECTED) {  // 此处的wifiMulti.run()是重点。通过wifiMulti.run()，NodeMCU将会在当前
    delay(1000);                             // 环境中搜索addAP函数所存储的WiFi。如果搜到多个存储的WiFi那么NodeMCU
    Serial.print(i++); Serial.print(' ');    // 将会连接信号最强的那一个WiFi信号。
  }                                          // 一旦连接WiFI成功，wifiMulti.run()将会返回“WL_CONNECTED”。这也是
                                             // 此处while循环判断是否跳出循环的条件。
  // WiFi连接成功后将通过串口监视器输出连接成功信息 
  Serial.println('\n');                     // WiFi连接成功后
  Serial.print("Connected to ");            // NodeMCU将通过串口监视器输出。
  Serial.println(WiFi.SSID());              // 连接的WiFI名称
  Serial.print("IP address:\t");            // 以及
  Serial.println(WiFi.localIP());           // NodeMCU的IP地址
  
  esp8266_server.begin();                   // 启动网站服务                
  esp8266_server.on("/", handleRoot);       // 设置服务器根目录即'/'的函数'handleRoot'
  esp8266_server.onNotFound(handleNotFound);// 设置处理404情况的函数'handleNotFound'        
 
  Serial.println("HTTP esp8266_server started");//  告知用户ESP8266网络服务功能已经启动
}
 
void loop(){
  esp8266_server.handleClient();     // 处理http服务器访问
  pinState = digitalRead(buttonPin); // 获取引脚状态
}
 
/* 以下函数处理网站首页的访问请求。此函数为本示例程序重点1
详细讲解请参见太极创客网站《零基础入门学用物联网》
第3章-第2节“通过网络服务将开发板引脚状态显示在网页中”的说明讲解。*/                                                                       
void handleRoot() {   
  String displayPinState;                   // 存储按键状态的字符串变量
  
  if(pinState == HIGH){                     // 当按键引脚D3为高电平
    displayPinState = "Button State: HIGH"; // 字符串赋值高电平信息
  } else {                                  // 当按键引脚D3为低电平
    displayPinState = "Button State: LOW";  // 字符串赋值低电平信息
  }
  
  esp8266_server.send(200, "text/plain", displayPinState); 
                                            // 向浏览器发送按键状态信息  
}
 
// 设置处理404情况的函数'handleNotFound'
void handleNotFound(){                                        // 当浏览器请求的网络资源无法在服务器找到时，
  esp8266_server.send(404, "text/plain", "404: Not found");   // NodeMCU将调用此函数。
}

error：

D:\ESP32 软件\esp8266_wireless_station5.0\esp8266_wireless_station5.0.ino:49:26: note: in expansion of macro 'buttonPin' exit status 'D3' was not declared in this scope
方法一：将原有的D3改为0 参照原理图D3其实也是GPIO0 出错原因太极创客的开发版芯片为ESP8266而我自己手里的是ESP32-12E出现了不匹配的情况方法二：在Arduino IED的工具-开发板中选择“NodeMCU 1.0 (ESP-12E Moudle)”即可（我切换后发现浏览器的访问等待时间明显变长，刚开始几次还出现了无法访问的情况）。
-----------------------------------------------------------------------------------------------------------------------------
电路逻辑，将flash按键作为检测标识按下按键后D3脚电平就会变为低电平
代码 5.0
编译提示如下错误
D:\ESP32 软件\esp8266_wireless_station5.0\esp8266_wireless_station5.0.ino:49:26: note: in expansion of macro 'buttonPin' exit status 1
'D3' was not declared in this scope
方法一：将原有的D3改为0 参照原理图D3其实也是GPIO0 出错原因太极创客的开发版芯片为ESP8266而我自己手里的是ESP32-12E出现了不匹配的情况方法二：在Arduino IED的工具-开发板中选择“NodeMCU 1.0 (ESP-12E Moudle)”即可（我切换后发现浏览器的访问等待时间明显变长，刚开始几次还出现了无法访问的情况）。
上传之后可以看见D3 GPIO0处引脚的变化但是此时的io口信息需要手动刷新因此还需要进行改进
加入网页自动刷新功能
- 代码详解：在以上示例程序中的handleRoot函数中，esp8266_server.send(200, "text/html", sendHTML(pinState))语句的的3个参数 sendHTML(pinState)调用了sendHTML函数。该函数的作用是建立一个可以定时刷新的HTML网页代码。通过定时刷新网页，开发板的引脚状态将会不断地在页面中进行更新。图二为核心代码
- 此HTML网页代码是由sendHTML函数产生的。该函数建立了一个字符串变量，该字符串变量所存储的信息正是网页HTML代码。值得注意的是，该HTML代码会不断地检查变量pinState状态，并且根据pinState的状态改变HTML代码的信息，从而实现在网页上显示引脚状态。
- 此HTML代码中真正实现定时刷新网页功能的语句是代码中的第79行语句。这条语句是告诉网页需要定时刷新，刷新频率5秒钟，即每5秒钟刷新一次页面。您可以通过改变此行语句中的数值5来调整页面刷新频率。
- 每一次页面刷新，浏览器都会向NodeMCU发送HTTP请求。NodeMCU在收到浏览器请求后，将会把最新的HTML代码信息返回给浏览器。浏览器收到最新的HTML代码后将会在页面中显示引脚的状态。
- 以下是没有按下按键时的页面显示信息。
- 重点：主要思路是了解到可以用字符串发送的形式进行较为复杂的HTML代码的访问但是比较占用内存