鱼C论坛

 找回密码
 立即注册
查看: 2824|回复: 0

[其他分类] ESP8266:通过网络服务将开发板引脚状态显示在网页中

[复制链接]
发表于 2021-8-13 12:31:31 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 划句顾 于 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");
  }



                               
登录/注册后可看大图

屏幕截图(233).png

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

屏幕截图(234).png



                               
登录/注册后可看大图


以下代码将实现页面的自动刷新:
代码如下:
/**********************************
 * 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");
  }

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

                               
登录/注册后可看大图


网页如下:
屏幕截图(236)_LI.jpg

按下flash键,结果如下:
屏幕截图(237).png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-21 20:01

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表