智能控制内嵌网页WIFI重置密码及指令调试【原创】
好久没发布了，一直忙不停，测试了很久，功能不断完善，测试已经稳定！故今天写个帖子以分享！高手手下留情，不喜勿喷！违规则删！谢谢指导！
以前都是DIY别人的，由于各种原因，决定全套自力更生！！！纯属自学研究！
准备：
1、智能网络模块（WIFI模块ESP8266-12S/12F）见底图
2、Arduino IDE 最新版 （1.8.13）
目的：
1、通过固件访问内置网页可以进行重置WIFI密码 （见底图）
2、通过固件内嵌网页可以进行指令测试（通过网页模拟串口发送指令）
展示核心代码分享
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函数(当智能配网失败时调用)
* 参数说明：无
* 调用方法 setup()中进行初始化
******************************************************/
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配网，不推荐的暂不讲解）
内嵌网页代码（注意格式 文本较长，耐心修改 调试好后压缩代码注意引号处理）
//写入内置网页配网专用（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\">© JIUAI 2020</div></body></html>";
头文件引用及实例声明
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
ESP8266WebServer server(80);//端口80
实践 效果展示：
点击 一路 发送（就模拟4个功能）
欢迎交流，已实现功能！有时间继续分享！
云监控（萤石云实时画面）
温湿度曲线图（背景随温度变化--自定义颜色，频率10秒）
客户端完全通过h5(websocket)集成到公众号里面进行访问
用户权限认证暂未开通（通过ajax---云服务器认证---取token认证---各种操作）
内部权限认证是有的（注册包和身份必须认证通过才能操作控制）
客户端可以跨平台，随意调用，有WEB经验的可以二次开发！
行业内很多功能的集合，真正可以DIY属于自己的东西！！！
后续固件（约410KB）会更新发布！
Monitor 发表于 2020-8-10 09:16
完整的代码能开源吗？
另外感觉类似这个的吧？https://github.com/bilibilifmk/wifi_link_tool
亲不是这个哦。完全不一样的东西。我这通过内置网页配网的账号密码先保存到闪存里面，掉电记忆。下次直接使用新密码；当然也可以设置提交后立即连接新网络 看怎么使用了。此部分代码已经发布了哦。
且我写的功能 应该找不到同类的，因为这是完全自己独立开发的，多种方法组合，非常方便，web目的，手机模拟直接串口调试发送各种预设的指令 Sync 发表于 2020-8-9 20:15
其实没看懂啊 这个
物联网模块（WIFI模块）内嵌一个网页，通过网页可以配置WIFI账号密码以及通过网页内部的按钮可以实现一些开关控制（和自定义各种指令下发 和串口、网络一样实现的功能） 不明觉厉{:301_979:} 以前自己就实现了一点网络协议，这里直接进行实物化，羡慕。:lol 不错不错，支持一下{:1_921:} 感觉很厉害的 支持一下 其实没看懂啊 这个 不错不错，支持一下 有心了，谢谢分享！
页:
[1]
2