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

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

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

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

展示核心代码分享

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

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

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++] 纯文本查看 复制代码

01

02

03

04

05

06

07

08

09

10

11

12

13

//写入内置网页配网专用（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重置密码及指令调试【原创】

免费评分

浏览过的版块