智能控制内嵌网页WIFI重置密码及指令调试【原创】

X5ZJ · 发表于 2020-8-9 17:52

好久没发布了，一直忙不停，测试了很久，功能不断完善，测试已经稳定！
故今天写个帖子以分享！高手手下留情，不喜勿喷！违规则删！谢谢指导！
以前都是DIY别人的，由于各种原因，决定全套自力更生！！！纯属自学研究！
准备：
1、智能网络模块（WIFI模块ESP8266-12S/12F）见底图
2、Arduino IDE 最新版（1.8.13）

目的：
1、通过固件访问内置网页可以进行重置WIFI密码（见底图）
2、通过固件内嵌网页可以进行指令测试（通过网页模拟串口发送指令）

展示核心代码分享

[C++] 纯文本查看 复制代码

void HandleVal()
{
    handlenum++;
    if(handlenum>1)handlenum=-1;
    if(handlenum==0||handlenum==2)return;
    
    String wifis = server.arg("ssid"); //wifi名称
    String wifip = server.arg("password"); //wifi密码
    String testcmd=server.arg("cmd"); //命令测试
        
    wifis.trim();
    if(wifis!=""&&handlenum==1)
    {      
      Serial.println("Received webServer Config info:");Serial.println(wifis); Serial.println(wifip);
      WiFi.mode(WIFI_STA);
      WiFi.begin(wifis,wifip);//连接成功自动保存
      if((WiFi.status()== WL_CONNECTED))
      {
        strcpy(wifi_ssd,wifis.c_str());//名称复制 wifis       WiFi.SSID().c_str()
        strcpy(wifi_psw,wifip.c_str());//密码复制 wifip        WiFi.psk().c_str()
        rom_save();//保存wifi及模式参数 到EEPROM 断电记忆
        //ESP.reset();//重启
      }
    }
    
    testcmd.trim();//去掉前后空格
    if(testcmd!=""&&handlenum==1)
    {
      Serial.print("Recv Web Commond:");Serial.println(testcmd);
      doAction_local(testcmd);//与串口一致的执行函数（本地，网络，串口等统一到此中执行减少代码量）
      testcmd="";      
    }
}
/*****************************************************
 * 函数名称：handleNotFound()
 * 函数说明：响应失败函数
 * 参数说明：无
******************************************************/
void handleNotFound() {
    digitalWrite(led_PIN, 0);//指示灯LED_BUILTIN
    String message = "File Not Found\n\n";
    message += "URI: ";
    message += server.uri();
    message += "\nMethod: ";
    message += (server.method() == HTTP_GET) ? "GET" : "POST";
    message += "\nArguments: ";
    message += server.args();
    message += "\n";
    for (uint8_t i = 0; i < server.args(); i++) {
      message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
    }
    server.send(404, "text/plain", message);
    led2(500,8);//0.3s-3次循环-余1灭    
}
/*****************************************************
 * 函数名称：htmlConfig() 
 * 函数说明：web配置WiFi函数  (当智能配网失败时调用)
 * 参数说明：无
 * 调用方法 [b]setup[/b]()中进行初始化
******************************************************/
void htmlConfig()
{
    WiFi.mode(WIFI_AP_STA);//设置模式为AP+STA双模式
    digitalWrite(led_PIN, LOW);
    //IPAddress softLocal(192,168,128,1);
    //IPAddress softGateway(192,168,128,1);
    //IPAddress softSubnet(255,255,255,0);
    //WiFi.softAPConfig(softLocal, softGateway, softSubnet);
    String apName = ("9I"+(String)ESP.getChipId());  // 2 设置WIFI名称
    //const char *softAPName = apName.c_str();
    apssid= apName.c_str();
    WiFi.softAP(apssid, appassword);                  //账号密码123456
    //WiFi.softAP(ssid, passphrase, channel, ssid_hidden, max_connection)
    IPAddress myIP = WiFi.softAPIP();
    //Serial.print("AP Server IP:");Serial.println(myIP);
    if (MDNS.begin("esp8266")) {//hostString=esp8266
      Serial.println("web open url:esp8266.local or 192.168.4.1");
    }  
    server.on("/", handleRoot);                   //回调 html,请求
    server.on("/HandleVal", HTTP_GET, HandleVal); //连接
    server.onNotFound(handleNotFound);            //请求失败回调函数  (可选）
    server.begin();//开启服务器
    Serial.println("HTTP server started");
}

在Loop()中循环监听
server.handleClient();//监听
（此模块本身可以实现AP配网，建议airkiss、esptouch配网，不推荐的暂不讲解）

内嵌网页代码（注意格式文本较长，耐心修改调试好后压缩代码注意引号处理）

[C++] 纯文本查看 复制代码

//写入内置网页配网专用（AP热点配网并保存EEPROM)超长字符串写法
String htmlstr = String("") +
"<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><meta name=\"viewport\"content=\"width=device-width, initial-scale=1.0\"><meta http-equiv=\"X-UA-Compatible\"content=\"ie=edge\"><title>久爱物联智能配网</title>"+
"<style>body{background-color:#111;color: #fff;font-size:12px;padding:4px;marign:2px;text-align:center;}form{line-height:35px;min-height:200px;width:100%}.red{color:#f00} .grv{color:#ddd} ul li{text-align:left;line-height:25px;color:#aaa} ul{margin-top:30px} h2{margin-top:15%}  .btn{background-color:#0099CC;color:#fff;height:30px;padding:2px 4px;margin:2px;border:0}  fieldset{border:1px solid #afafaf} .btn2{background-color: #FF9900;color: #FFFFFF;height:30px;padding:2px 4px;margin:2px;border:0;width:60px}</style></head>"+
"<body><h2><span class=\"red\">重置WIFI密码</span>及<i>指令测试</i></h2><form name=\"my\" method=\"get\"><b>WiFi名称</b>: <input type=\"text\" name=\"s\" placeholder=\"输入您WiFi的名称\" id=\"wssid\"><br><b>WiFi密码</b>: <input type=\"text\" name=\"p\" placeholder=\"请输入您WiFi的密码\" id=\"wpwd\"><br><input type=\"button\" class=\"btn\" value=\"连接WIFI\" onclick=\"submitwifi();\"><br><span class=\"red\" id=\"tip\"></span>"+
"<fieldset><legend>模块内置指令测试</legend>指令:<input type=\"input\" name=\"txtcmd\" value=\"55 AA AA AA AA 81 BA 01\" id=\"cmd\"> <input type=\"button\" value=\"发送\" class=\"btn\" onclick=\"testcmd();\">"+
"</form><br><button type=\"button\" class=\"btn2\" value=\"55 AA AA AA AA 81 BA 01\" onclick=\"tov(this.value);\">一路</button><button type=\"button\" class=\"btn2\" value=\"55 AA AA AA AA 81 BA 02\" onclick=\"tov(this.value);\">二路</button>"+
"<button type=\"button\" class=\"btn2\" value=\"55 AA AA AA AA 81 BA 03\" onclick=\"tov(this.value);\">三路</button><button type=\"button\" class=\"btn2\" value=\"55 AA AA AA AA 81 BA 04\" onclick=\"tov(this.value);\">四路</button><br><span class=\"red\" id=\"cmdtip\">请输入模块指令</span></fieldset>"+
"<script language=\"javascript\">var xmlhttp=null;if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else if (window.ActiveXObject){xmlhttp=new ActiveXObject(\"Microsoft.XMLHTTP\");}\r\nfunction submitwifi(){var ssid=document.getElementById(\"wssid\").value;var password=document.getElementById(\"wpwd\").value;if(ssid==''||password==''){document.getElementById('tip').innerHTML='账号和密码均不能为空!';return;}if (xmlhttp!=null){xmlhttp.open(\"GET\",\"/HandleVal?ssid=\"+ssid+\"&password=\"+password,true);xmlhttp.send(null);xmlhttp.onreadystatechange=state_Change;document.getElementById('tip').innerHTML='提交成功,模块自动连接';}}\r\nfunction state_Change(){if (xmlhttp.readyState==4){if (xmlhttp.status==200){document.getElementById('tip').innerHTML='OK';}else{document.getElementById('tip').innerHTML='SORRY...';}}}"+
"\r\nfunction testcmd(){var txtcmd=document.getElementById(\"cmd\").value;if(txtcmd==\"\"){document.getElementById(\"cmdtip\").innerHTML=\"测试指令不能为空!\";return;}if (xmlhttp!=null){xmlhttp.open(\"GET\",\"/HandleVal?cmd=\"+txtcmd,true);xmlhttp.send(null);document.getElementById('cmdtip').innerHTML='指令发送成功';}}"+
"function tov(v){document.getElementById(\"cmd\").value=v;document.getElementById('cmdtip').innerHTML='点击发送按钮';}</script>"+
"<ul><li>手机/电脑连接您的WIFI</li><li>手机/电脑浏览器输入模块IP地址</li><li>输入您的WIFI账号密码点击连接</li><li>连接成功后可以测试内部指令</li></ul>"+
"<div style=\"color:#ddd;text-align:center;width:100%;posiation:absolute;bottom:5px\">&#169; JIUAI 2020</div></body></html>";

头文件引用及实例声明
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

ESP8266WebServer server(80);//端口80

实践效果展示：

手机访问内嵌网页

点击一路发送（就模拟4个功能）

打开一路

欢迎交流，已实现功能！有时间继续分享！

功能

云监控

云监控（萤石云实时画面）

温湿度曲线

温湿度曲线图（背景随温度变化--自定义颜色，频率10秒）

客户端完全通过h5(websocket)集成到公众号里面进行访问
用户权限认证暂未开通（通过ajax---云服务器认证---取token认证---各种操作）
内部权限认证是有的（注册包和身份必须认证通过才能操作控制）

测试设备

客户端可以跨平台，随意调用，有WEB经验的可以二次开发！
行业内很多功能的集合，真正可以DIY属于自己的东西！！！
后续固件（约410KB）会更新发布！

X5ZJ · 发表于 2020-8-10 09:58

Monitor 发表于 2020-8-10 09:16
完整的代码能开源吗？

另外感觉类似这个的吧？https://github.com/bilibilifmk/wifi_link_tool

亲不是这个哦。完全不一样的东西。我这通过内置网页配网的账号密码先保存到闪存里面，掉电记忆。下次直接使用新密码；当然也可以设置提交后立即连接新网络看怎么使用了。此部分代码已经发布了哦。
且我写的功能应该找不到同类的，因为这是完全自己独立开发的，多种方法组合，非常方便，web目的，手机模拟直接串口调试发送各种预设的指令

X5ZJ · 发表于 2020-8-9 23:20

Sync 发表于 2020-8-9 20:15
其实没看懂啊这个

物联网模块（WIFI模块）内嵌一个网页，通过网页可以配置WIFI账号密码以及通过网页内部的按钮可以实现一些开关控制（和自定义各种指令下发和串口、网络一样实现的功能）

BEASTARS · 发表于 2020-8-9 17:59

不明觉厉

liujieboss · 发表于 2020-8-9 18:11

以前自己就实现了一点网络协议，这里直接进行实物化，羡慕。

murrin · 发表于 2020-8-9 18:11

不错不错，支持一下

零度的轻吻 · 发表于 2020-8-9 19:58

感觉很厉害的

大和的风 · 发表于 2020-8-9 20:15

支持一下

Sync · 发表于 2020-8-9 20:15

其实没看懂啊这个

lxzxcvbnmlx · 发表于 2020-8-9 20:20

不错不错，支持一下

canttona · 发表于 2020-8-9 21:28

有心了，谢谢分享！

帐号		自动登录	找回密码
密码			注册[Register]

[C&C++ 原创] 智能控制内嵌网页WIFI重置密码及指令调试【原创】

免费评分

个人中心