用8266学习单片机-11-实现手机连上WiFi后自动弹出页面控制板载LED与外接LED颜色-CaptivePortal

最新推荐文章于 2024-02-07 15:57:23 发布

Kearney form An idea

最新推荐文章于 2024-02-07 15:57:23 发布

阅读量1k

点赞数 1

分类专栏： Node MCU 文章标签：单片机 nodemcu

本文链接：https://blog.csdn.net/weixin_43031092/article/details/106851048

版权

Node MCU 专栏收录该内容

46 篇文章

订阅专栏

简介

参考一中已经把原理讲的很简单，这里不在赘述，大体意思就是在web服务器的基础上加上一个DNS服务器。
参考二中的wifi有时连接不稳定、而且需要自己打开浏览器，这里实现实在参考二的基础上自动弹出控制页面

有图有真相

在这里插入图片描述

简单测试弹窗效果

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DNSServer.h>

const char *ssid = "DNS Portal";


const byte DNS_PORT = 53;
IPAddress apIP(172,217,28,1);
DNSServer dnsServer;
ESP8266WebServer server(80);

String responseHTML = "HELLO";

void setup() {
 WiFi.mode(WIFI_AP);
 WiFi.softAPConfig(apIP,apIP,IPAddress(255,255,255,0));
  WiFi.softAP(ssid);
  dnsServer.start(DNS_PORT,"*",apIP);
  server.onNotFound([]() {
    server.send(200,"text/html",responseHTML);
    });
  server.begin();
}

void loop() {
  dnsServer.processNextRequest();
  server.handleClient();
}

控制板载LED的例子

// 手机wifi控制ESP8266板载LED
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DNSServer.h>

const char *ssid = "Built-in LED";
const byte DNS_PORT = 53;
IPAddress apIP(192,168,4,1);
DNSServer dnsServer;
ESP8266WebServer WebServer(80);

void handleRoot() {
    String html = "<body style='text-align: center;'><br><br><br><form action=\"/on\" method=\"POST\"><input type=\"submit\" value=\"ON\" style='height: 50%;width: 50%;'></form>";
    html = html + "<br><br><br><form action=\"/off\" method=\"POST\"><input type=\"submit\" value=\"OFF\" style='height: 50%;width: 50%;'></form>";
    WebServer.send(200, "text/html", html);
}

void handleNotFound(){                                        
    WebServer.sendHeader("Location","/");
    WebServer.send(303);  
}

void handleOn(){ 
    digitalWrite(LED_BUILTIN, LOW);
    WebServer.sendHeader("Location","/");
    WebServer.send(303);
}
void handleOff(){ 
    digitalWrite(LED_BUILTIN, HIGH);
    WebServer.sendHeader("Location","/");
    WebServer.send(303);
}

void setup() {
  Serial.begin(9600);
  pinMode(LED_BUILTIN, OUTPUT);
  digitalWrite(LED_BUILTIN, HIGH);
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP,apIP,IPAddress(255,255,255,0));
  WiFi.softAP(ssid);
  
  
  WebServer.onNotFound( handleRoot);
  WebServer.on("/on", HTTP_POST,handleOn); 
  WebServer.on("/off", HTTP_POST,handleOff); 
  dnsServer.start(DNS_PORT,"*",apIP);
  WebServer.begin(); 
}

void loop() {
  dnsServer.processNextRequest();
  WebServer.handleClient();
}

最终代码

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DNSServer.h>

int ledRed = D0;
int ledGreen = D1;
int ledBlue = D2;

const char *ssid = "LED";
//const char *password = "123789";	//设置密码无效，需要写一个密码验证页面

const byte DNS_PORT = 53;
IPAddress apIP(192,168,4,1);
DNSServer dnsServer;
ESP8266WebServer WebServer(80);

//控制页面
void handleRoot() {
    WebServer.send(200, "text/html", "<br><br><br><form action=\"/ledred\" method=\"POST\" style='text-align: center;'><input type=\"submit\" value=\"RED LED\"></form><br><br><br><form action=\"/ledgreen\" method=\"POST\" style='text-align: center;'><input type=\"submit\" value=\"Green LED\"></form><br><br><br><form action=\"/ledblue\" method=\"POST\" style='text-align: center;'><input type=\"submit\" value=\"BLUE LED\"></form>");
}

/*	//失效，具体原因后面说
void handleNotFound(){                                        
    WebServer.sendHeader("Location","/");
    WebServer.send(303);  
}
*/
void handleLedRed(){
    digitalWrite(ledRed,!digitalRead(ledRed));  
    WebServer.sendHeader("Location","/");
    WebServer.send(303);
}

void handleLedGreen(){
    digitalWrite(ledGreen,!digitalRead(ledGreen));  
    WebServer.sendHeader("Location","/");
    WebServer.send(303);
}

void handleLedBlue(){
    digitalWrite(ledBlue,!digitalRead(ledBlue));  
    WebServer.sendHeader("Location","/");
    WebServer.send(303);
}

void setup() {
  pinMode(ledRed, OUTPUT);
  pinMode(ledGreen, OUTPUT);
  pinMode(ledBlue, OUTPUT);
  
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP,apIP,IPAddress(255,255,255,0));
 // WiFi.softAP(ssid,password);	//设置密码试验无效。。。不知道原因
 WiFi.softAP(ssid);
  
  /* 实验结果：设置on/就不能自动弹出
  只注释第一行留第二行也不行（尽管第二行最后还是跳到了个目录。。。未知原因）
  WebServer.on("/", handleRoot);	
  WebServer.onNotFound(handleNotFound);   
  */ 
  WebServer.onNotFound( handleRoot);
  WebServer.on("/ledred", HTTP_POST,handleLedRed); 
  WebServer.on("/ledgreen", HTTP_POST,handleLedGreen); 
  WebServer.on("/ledblue", HTTP_POST,handleLedBlue); 
  
  dnsServer.start(DNS_PORT,"*",apIP);
  WebServer.begin();
  
}

void loop() {
  dnsServer.processNextRequest();
  WebServer.handleClient();
}