Skip to content

Commit

Permalink
v1.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@bilibilifmk
bilibilifmk authored Jun 5, 2020
1 parent dd97792 commit a7b690f
Show file tree
Hide file tree
Showing 13 changed files with 661 additions and 0 deletions.
97 changes: 97 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
# wifi_link_tool
这是一个为esp8266设计的通用配网库
该库免费提供 使用请注明出处 允许毕业设计使用本库
## 当前版本v1.0.1 开源协议：GPL3.0
****
# 配套视频：https://www.bilibili.com/video/BV1ye411x7Xr/
![img](/img/index.jpg)
****
## 普通配网流程 1.链接WiFi 2.自动弹出配网或打开浏览器访问6.6.6.6 3.输入WiFi密码
## 微信小程序配网 使用微信扫描二维码 打开小程序 点击通用设备配网 输入WiFi密码
****
# 关于配网操作
* 默认情况下 下拉gpio0(nodemcu D3可以按flash按键)5秒 重置已有配网 第一次使用该库请重置一次或用官方工具擦除flash
* 默认情况下 状态指示灯gpio02（nodemcu D4） 也就是12f的板载led
* 指示灯常亮 未链接网络 处于未配置 或 无法链接网络
* 指示灯闪烁 正在抹除配置
* 指示灯熄灭 联网正常

# 微信小程序配网
## 使用微信扫一扫进行加载小程序

![image](/img/wxxcx.jpg)

## 小程页面
![image](/img/wx1.jpg)
![image](/img/wx2.jpg)
点击通用设备配网 即可弹出配网 如未弹出请检查文件系统是否上传成功！
点击设备列表可搜索局域网中可被搜索的设备

# 普通配网
## 扫描二维码直接链接或手动链接 SSID：wifi_link_tool
### 该二维码支持国内大部分手机相机 （例如使用miui相机）
![image](/img/ptlink.png)
链接成功后 会弹出配网web 如为弹出 请检查设备支持性（安卓4.4.4以上大部分支持 ios 11+）和文件系统是否上传成功！

# 安装库wif link tool 库
## 安装库本身
* 请保证已经安装了 arduino esp8266 sdk （已在V2.5.0测试）
* 在github上下载本库
* 打开arduino 项目—>加载库—>添加.zip库 —>选择刚才下载的zip导入 (手动库安装目录Arduino\libraries\WiFi_link_tool)

## 安装文件系统
* 下载文件系统上传工具 [工具地址](https://github.com/esp8266/arduino-esp8266fs-plugin/releases)
* 导入工具参考目录 ******/tools/ESP8266FS/tool/esp8266fs.jar
* 重启arduino

## 测试库
* 打开测试demo 文件—>示例—>wifi_link_tool—>demo
* 选择串口及波特率
* 选择合适的flash size
![image](/img/flash.jpj)
* 点击验证 验证库是否能正常编译
* 检查文件系统上传工具 工具下会显示 ESP8266 sketch Data Upload 证明安装成功
* 上传文件系统 工具 —>ESP8266 sketch Data Upload

# 库基础配置及api
* 配置设备
在setup中配置设备io名称
rstb=D3;
//重置io
stateled=D4;
//指示灯io
Hostname = "ESP8266";
//设备名称 允许中文名称 不建议太长
wxscan=true;
//是否被小程序发现设备 开启意味该设备具有后台 true开启 false关闭
* load()函数 加载启动等 必须存在

* pant()函数 维持系统正常运行 请保证在loop 函数的第一行 保证系统稳定性

* 局域网中获得设备名称API(用来配合网关或设备通信)
该api以集成进库中
作用 获得设备设备名称 方便设备联动
请求方法 http get 返回类型 String
地址 http://x.x.x.x/opera?opera=sb

* 自定义http get请求
语法： webServer.on("/<请求地址>", <处理函数>);
请写在setup函数中 load函数之后
处理函数请自定义一个新函数
请参考demo中get请求处理

* 自定义添加web
默认情况 库自动添加 config.html(配网web) index.html(设备主页)
将自定义的html 放入Data目录下（将demo另存为 在另存目录就会出现data目录）
语法： webServer.on("/<请求地址>", <加载函数>);
请写在setup函数中 load函数之后
加载函数 语法 void <加载函数>(){File file = SPIFFS.open("/<自定义html文件名>", "r"); webServer.streamFile(file, "text/html");file.close(); }
请参考demo中加载多个web






## 测试环境 sdk版本：2.5.0 arduino版本1.8.8

1 change: 1 addition & 0 deletions examples/demo/data/config.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!DOCTYPE html><html><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width,initial-scale=1'><style>.spinner { position:fixed; display:none; width:55px; height:55px; top:calc(50% - 25px); left:calc(50% - 25px); background-color:#2ECC71; border-radius:100%; -webkit-animation:sk-scaleout 0.8s infinite ease-in-out; animation:sk-scaleout 1.0s infinite ease-in-out;}@-webkit-keyframes sk-scaleout { 0% { -webkit-transform:scale(0) } 100% { -webkit-transform:scale(1.0); opacity:0; }}@keyframes sk-scaleout { 0% { -webkit-transform:scale(0); transform:scale(0); } 100% { -webkit-transform:scale(1.0); transform:scale(1.0); opacity:0; }}body { color:#434343; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:14px; line-height:1.42857142857143; padding:20px}a { text-decoration:none; color:#434343}.container { margin:0 auto; max-width:350px}#field-group { opacity:0; transition:opacity 0.5s,top 0.5s; box-sizing:border-box; clear:both; padding:4px 0; position:relative; top:0px; margin:0 auto; padding:0 20px; width:100%}#field-group>label { color:#757575; display:block; margin:0 0 5px 0; padding:5px 0 0; position:relative; word-wrap:break-word}input[type=text] { background:#fff; border:1px solid #d0d0d0; border-radius:2px; box-sizing:border-box; color:#434343; font-family:inherit; font-size:inherit; height:2.5em; line-height:1.4285714285714; padding:4px 5px; margin:0; width:100%}@media all and(orientation:portrait) { .container { padding-top:0px }}input[type=text]:focus { border-color:#2ECC71; outline:0}.button-container { box-sizing:border-box; clear:both; margin:-20px 0 0; padding:4px 0; position:relative; width:100%; text-align:center}button { outline:none; box-sizing:border-box; background:#f5f5f5; border:1px solid#bdbdbd; border-radius:18px; color:#434343; cursor:pointer; display:block; font-family:inherit; font-size:16px; font-variant:normal; font-weight:400; height:2.14285714em; line-height:1.42857143; margin:18px auto; padding:4px 30px; text-decoration:none; vertical-align:baseline; white-space:nowrap}#sub { transition:top 0.5s,opacity 0.5s; position:relative; top:-10px; opacity:0}#right-div { position:fixed; bottom:3%; left:calc(50% - 100px); width:200px; font-size:12px; line-height:1; color:#999}.right { text-align:center}@media(max-height:400px) { #right-div { display:none }}#ssid-list { border:1px solid #d0d0d0; border-radius:5px; width:100%}#ssid-list>li { height:22px; line-height:22px; transition:height 0.5s, background 0.2s; position:relative; cursor:pointer; color:#434343; display:block; padding:8px 15px; border-top:1px solid#d0d0d0}#ssid-list-ani { animation:ssid-list-ani 0.5s; -moz-animation:ssid-list-ani 0.5s; -webkit-animation:ssid-list-ani 0.5s;}#ssid-list-li-ani { animation:ssid-list-li-ani 0.5s; -moz-animation:ssid-list-li-ani 0.5s; -webkit-animation:ssid-list-li-ani 0.5s;}@keyframes ssid-list-ani { 0% { opacity:0 } 100% { opacity:1 }}@keyframes ssid-list-li-ani { 0% { height:30 } 100% { height:22 }}#ssid-list>li:first-child { border-top:0; border-top-left-radius:5px; border-top-right-radius:5px}#ssid-list>li:last-child { border-bottom-left-radius:5px; border-bottom-right-radius:5px}#ssid-list>li:hover { background:#f5f5f5}.encrytype { color:#999; display:inline-block; z-index:1; position:absolute; right:15px}#passwordDIV { width:100%; height:0px; background:#f5f5f5}#connecting { display:none; position:fixed; left:0; top:0; z-index:-1; width:100%; height:100%; background:#fff;}#connect-state { font-size:40px; margin-top:10%; text-align:center;}</style></head><body> <div id='connecting'> <p id='connect-state'>&#x6B63;&#x5728;&#x8FDE;&#x63A5;</p> </div> <div class='spinner' id='load'> </div> <div class='container'> <h1 style='text-align:center;font-size:40px;'>WiFi&#x914D;&#x7F6E;</h1> <div class='button-container'> <button onclick="scan()" id='scan-btn'>&#x626B;&#x63CF;&#x70ED;&#x70B9;</button> <span style='color:#999'>&#20179;&#24211;&#22320;&#22336; :github.com/bilibilifmk/wifi_link_tool</span> <br> <span style='color:#999'>&#24403;&#21069;&#35774;&#22791;&#31867;&#22411; :ESP8266EX &#x4EC5;&#x652F;&#x6301;2.4G</span> <h1></h1> </div> <div id='ssid-list' style='display: none;'> </div> </div> </body><script>var scanState = 0;function getid(id) { return document.getElementById(id);};function scan() { getid('ssid-list').className=''; getid('load').style.display='block'; getid('ssid-list').innerHTML = ''; getid('ssid-list').style.display='none'; if(scanState == 1) { return; }else { scanState = 1; getid('scan-btn').style.borderColor='#2ECC71'; getid('scan-btn').style.color='#888'; getid('scan-btn').innerHTML='&#x6B63;&#x5728;&#x626B;&#x63CF;'; var xmlhttp=new XMLHttpRequest(); var requestString='./wifiscan'; xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4&&xmlhttp.status==200) { getid('load').style.display='none'; getid('scan-btn').style.borderColor='#bdbdbd'; getid('scan-btn').style.color='#434343'; getid('scan-btn').innerHTML='&#x91CD;&#x65B0;&#x626B;&#x63CF;'; getid('ssid-list').style.display='block'; getid('ssid-list').classList.add('ssid-list-ani'); var req=xmlhttp.responseText; req=JSON.parse(req); for(var i=0;i<req.req.length;i++) { var para=document.createElement('li'); para.setAttribute('onclick',"ssidFocus('ssid_name"+i+"')"); para.id='ssid'+i; para.innerHTML="<span class='encrytype'>"+req.req[i].encryptionType+'</span>'+"<span id='ssid_name"+i+"'>"+req.req[i].ssid+'</span>'; var node=document.createTextNode(''); var ssidElement=getid('ssid-list'); ssidElement.appendChild(para); }; req=''; scanState=0; }; }; xmlhttp.open('GET',requestString,true); xmlhttp.send(null); };};var lastSSID='';function ssidFocus(num) { var ssidElement=document.getElementById(num); var passs=prompt(ssidElement.innerText); if((passs!=null)&&(passs!='')) { getid('connecting').style.display='block'; getid('connecting').style.zIndex='2'; getid('load').style.display='block'; getid('load').style.zIndex='3'; var xmlhttp=new XMLHttpRequest(); var requestString='./wificonfig?ssid='+ssidElement.innerHTML+'&password='+passs; xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4&&xmlhttp.status==200) { var req=xmlhttp.responseText; if(req=='1') { getid('connecting').innerHTML='<h1>&#x8FDE;&#x63A5;&#x6210;&#x529F;</h1><h1>&#x70ED;&#x70B9;&#x5373;&#x5C06;&#x5173;&#x95ED</h1><h1>&#37197;&#32593;&#25104;&#21151;&#35831;&#20851;&#38381;&#39029;&#38754;</h1><h1>&#20132;&#27969;&#32676;:624114361</h1><h1>&#20179;&#24211;&#22320;&#22336; :github.com/bilibilifmk/wifi_link_tool</h1>' } else { getid('connecting').innerHTML='<h1>&#x8FDE;&#x63A5;&#x5931;&#x8D25;</h1><h1>&#20132;&#27969;&#32676;:624114361</h1><h1>&#20179;&#24211;&#22320;&#22336; :github.com/bilibilifmk/wifi_link_tool</h1>' } getid('load').style.zIndex='-1'; getid('load').style.display='none' } } }; xmlhttp.open('GET',requestString,true); xmlhttp.send(null); lastSSID=num};</script></html>
179 changes: 179 additions & 0 deletions examples/demo/data/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<!DOCTYPE html>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<html lang="cn">
<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>index-主页</title>
<style>
body{text-align:center}
h1{
color:#ff8eb3;
text-align:center;
font-size: 70px;

}
h2{
color:green;
font-size: 50px;


}
span{
color:#ff8eb3;
font-size: 75px;


}


.af {
width: 100%;
height: 200px;
border: none;
border-radius: 5px;
cursor: pointer;
display: inline-block;
margin: 20px;
text-align: center;
font-size: 50px;
color: #fff;
background: #ff8eb3;
margin: 0 100px;
margin-top: 150px;
}
/*.af:hover{
opacity: 0.8;
}*/
.title {
font-size: 60px;
color: #ff8eb3;
margin-bottom: 30px;
}

input {
width: 100%;
height: 100px;
font-size: 50px;
margin-top: 100px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #ff8eb3;
color: #ff8eb3;
}
#touch {
width: 60px;
height: 60px;
position: absolute;
left: 300px;
top: 79px;
margin-left: -30px;
margin-top: -30px;
z-index: 999999;
}




#simple-menu {
width: 60px;
height: 60px;
cursor: move;
}
</style>
<style lang="scss" scoped>

.wave-mask {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 55%;
border-radius: 40%;
background-color: rgba(212, 24, 24, 0.9);
transform: translate(-50%, -70%) rotate(0);
animation: toRotate 10s linear -5s infinite;
z-index: 20;
}

@keyframes toRotate {
50% {
transform: translate(-50%, -70%) rotate(180deg);
}

100% {
transform: translate(-50%, -70%) rotate(360deg);
}
}

.container {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #67c23a;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 5px;
}

.wave {
position: relative;
width: 100px;
height: 100px;
background-image: linear-gradient(-180deg, #aaff80 13%, #67c23a 91%);
border-radius: 50%;
}

.container {
overflow: hidden;
}

.wave-mask {
background-color: rgba(255, 255, 255, 0.9);
}
</style>


</head>
<body>

<h1>这里是主页</h1>
<p></p>
<input class="af" type="button" value="GET请求测试" onclick="opera('call')">






</body>
<script>






function opera(n) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function () {

}
xmlhttp.open("GET", "/gettool?gettool=" + n);
xmlhttp.send();
}




</script>

</html>
56 changes: 56 additions & 0 deletions examples/demo/demo.ino
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/*
项目地址：https://github.com/bilibilifmk/wifi_link_tool by:发明控
sdk版本：2.5.0 arduino版本1.8.8
默认重置 D3（gpio 0） 默认状态led gpio2
D3---------/ --------gnd
*/
//普通配网流程 1.链接WiFi 2.自动弹出配网或打开浏览器访问6.6.6.6 3.输入WiFi密码
//微信小程序配网 使用微信扫描二维码 打开小程序 点击通用设备配网 输入WiFi密码
//引入wifilinktool头文件
#include <wifi_link_tool.h>
void setup() {
Serial.begin(115200);
//开启串口
/////////////////////////////////////////////////////////基础设置//////////////////////////////////////////////////////////
rstb=D3;
//重置io
stateled=D4;
//指示灯io
Hostname = "ESP8266";
//设备名称 允许中文名称 不建议太长
wxscan=true;
//是否被小程序发现设备 开启意味该设备具有后台 true开启 false关闭
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//此处请勿添加代码
load();
//初始化WiFi link tool
//在下面添加代码
//get请求示例（配合index.html）
webServer.on("/gettool", gettool);
//对应请求方法就是 ip/gettool?gettool=xxx
//加载多个web 按照这种写法 以此类推
//webServer.on("/lodweb", lodweb);
}
////加载多个web 按照这种写法 以此类推
//void lodweb(){File file = SPIFFS.open("/xxxx.html", "r"); webServer.streamFile(file, "text/html");file.close(); }




//get请求识别处理
void gettool() {
if(webServer.arg("gettool") == "call") {
//当有请求gettool参数是call激活请求返回ojbk
Serial.println("get");
//串口输出
webServer.send(200, "text/plain", "ojbk");
}
}


void loop() {
//请勿此处添加代码
pant();
//WiFi link tool 服务维持函数 请勿修改位置
//请在下面添加自己的代码
}
Binary file added img/flash.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/index.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/ptlink.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/wx1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/wx2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/wxxcx.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions keywords.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
Hostname LITERAL1
load KEYWORD2
pant KEYWORD2
rstb KEYWORD2
stateled KEYWORD2
wxscan KEYWORD2
9 changes: 9 additions & 0 deletions library.properties
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
name=wifi_link_tool
version=1.0.1
author=发明控
maintainer=blblfmk
sentence=wifi_link_tool
paragraph=wifi_link_tool
category=tool
url=https://github.com/bilibilifmk/wifi_link_tool
architectures=*
Loading

0 comments on commit a7b690f

Please sign in to comment.