Add libesphttpd to extras and supporting example (#458)
* libesphttpd: added extras and example * Added "heatshrink" as a submodule * Updated libesphttpd * Updated libesphttpd * Trying to fix the commit id * Updated libesphttpd * Added zlib1g-dev package * Use native gcc to build mkespfsimage and mkupgimg * Added NS and GW for DHCP server configuration
This commit is contained in:
Sashka
Johan Kanflo
parent
d36e9d65a0
commit
09b8b8087c
30 changed files with 1192 additions and 0 deletions
BIN
examples/esphttpd/html/cats/cross-eyed-cat.jpg
Normal file
BIN
examples/esphttpd/html/cats/cross-eyed-cat.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
examples/esphttpd/html/cats/junge-katze-iv.jpg
Normal file
BIN
examples/esphttpd/html/cats/junge-katze-iv.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
examples/esphttpd/html/cats/kitten-loves-toy.jpg
Normal file
BIN
examples/esphttpd/html/cats/kitten-loves-toy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
2
examples/esphttpd/html/flash/140medley.min.js
vendored
Normal file
2
examples/esphttpd/html/flash/140medley.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
var t=function(a,b){return function(c,d){return a.replace(/#{([^}]*)}/g,function(a,f){return Function("x","with(x)return "+f).call(c,d||b||{})})}},s=function(a,b){return b?{get:function(c){return a[c]&&b.parse(a[c])},set:function(c,d){a[c]=b.stringify(d)}}:{}}(this.localStorage||{},JSON),p=function(a,b,c,d){c=c||document;d=c[b="on"+b];a=c[b]=function(e){d=d&&d(e=e||c.event);return(a=a&&b(e))?b:d};c=this},m=function(a,b,c){b=document;c=b.createElement("p");c.innerHTML=a;for(a=b.createDocumentFragment();b=
|
||||
c.firstChild;)a.appendChild(b);return a},$=function(a,b){a=a.match(/^(\W)?(.*)/);return(b||document)["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2])},j=function(a){for(a=0;a<4;a++)try{return a?new ActiveXObject([,"Msxml2","Msxml3","Microsoft"][a]+".XMLHTTP"):new XMLHttpRequest}catch(b){}};
|
||||
75
examples/esphttpd/html/flash/index.html
Normal file
75
examples/esphttpd/html/flash/index.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<html>
|
||||
<head><title>Upgrade firmware</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script type="text/javascript" src="140medley.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var xhr=j();
|
||||
|
||||
function doReboot() {
|
||||
xhr.open("GET", "reboot");
|
||||
xhr.onreadystatechange=function() {
|
||||
if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
|
||||
window.setTimeout(function() {
|
||||
location.reload(true);
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
//ToDo: set timer to
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function setProgress(amt) {
|
||||
$("#progressbarinner").style.width=String(amt*200)+"px";
|
||||
}
|
||||
|
||||
function doUpgrade() {
|
||||
var f=$("#file").files[0];
|
||||
if (typeof f=='undefined') {
|
||||
$("#remark").innerHTML="Can't read file!";
|
||||
return
|
||||
}
|
||||
xhr.open("POST", "upload");
|
||||
xhr.onreadystatechange=function() {
|
||||
if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
|
||||
setProgress(1);
|
||||
if (xhr.responseText!="") {
|
||||
$("#remark").innerHTML="Error: "+xhr.responseText;
|
||||
} else {
|
||||
$("#remark").innerHTML="Uploading done. Rebooting.";
|
||||
doReboot();
|
||||
}
|
||||
}
|
||||
}
|
||||
if (typeof xhr.upload.onprogress != 'undefined') {
|
||||
xhr.upload.onprogress=function(e) {
|
||||
setProgress(e.loaded / e.total);
|
||||
}
|
||||
}
|
||||
xhr.send(f);
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
window.onload=function(e) {
|
||||
xhr.open("GET", "next");
|
||||
xhr.onreadystatechange=function() {
|
||||
if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
|
||||
var txt="Please upload "+xhr.responseText+" or ota file.";
|
||||
$("#remark").innerHTML=txt;
|
||||
setProgress(0);
|
||||
}
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1>Update firmware</h1>
|
||||
<div id="remark">Loading...</div>
|
||||
<input type="file" id="file" />
|
||||
<input type="submit" value="Upgrade!" onclick="doUpgrade()" />
|
||||
<div id="progressbar"><div id="progressbarinner"></div></div>
|
||||
</body>
|
||||
34
examples/esphttpd/html/flash/style.css
Normal file
34
examples/esphttpd/html/flash/style.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
|
||||
body {
|
||||
background-color: #404040;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#main {
|
||||
background-color: #d0d0FF;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #000000;
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
#progressbar {
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
border: 1px solid #000000;
|
||||
height: 20px;
|
||||
width: 200px;
|
||||
background-color: #808080;
|
||||
}
|
||||
|
||||
#progressbarinner {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
background-color: #00ff00;
|
||||
}
|
||||
|
||||
|
||||
26
examples/esphttpd/html/index.tpl
Normal file
26
examples/esphttpd/html/index.tpl
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<html>
|
||||
<head><title>Esp8266 web server</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1>It Works</h1>
|
||||
<p>
|
||||
If you see this, it means the tiny li'l website in your ESP8266 does actually work. Fyi, this page has
|
||||
been loaded <b>%counter%</b> times.
|
||||
<ul>
|
||||
<li>If you haven't connected this device to your WLAN network now, you can <a href="/wifi">do so.</a></li>
|
||||
<li>You can also control the <a href="led.tpl">LED</a>.</li>
|
||||
<li>Esphttpd now also supports <a href="websocket/index.html">websockets</a>.</li>
|
||||
<li>Test esphttpd using the built-in <a href="test/">test suite</a></li>
|
||||
<li>And because I can, here's a link to my <a href="http://spritesmods.com/?f=esphttpd">website</a></ul>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<p>And because we're on the Internets now, here are the required pictures of cats:<br />
|
||||
<img src="cats/cross-eyed-cat.jpg"><br />
|
||||
<img src="cats/junge-katze-iv.jpg"><br />
|
||||
<img src="cats/kitten-loves-toy.jpg"><br />
|
||||
</p>
|
||||
</div>
|
||||
</body></html>
|
||||
15
examples/esphttpd/html/led.tpl
Normal file
15
examples/esphttpd/html/led.tpl
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<html><head><title>Test</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1>The LED</h1>
|
||||
<p>
|
||||
If there's a LED connected to GPIO2, it's now %ledstate%. You can change that using the buttons below.
|
||||
</p>
|
||||
<form method="post" action="led.cgi">
|
||||
<input type="submit" name="led" value="1">
|
||||
<input type="submit" name="led" value="0">
|
||||
</form>
|
||||
</div>
|
||||
</body></html>
|
||||
17
examples/esphttpd/html/style.css
Normal file
17
examples/esphttpd/html/style.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
body {
|
||||
background-color: #404040;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#main {
|
||||
background-color: #d0d0FF;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #000000;
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
9
examples/esphttpd/html/test/index.html
Normal file
9
examples/esphttpd/html/test/index.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html><head><title>Webserver test</title></head>
|
||||
<link rel="stylesheet" type="text/css" href="../wifi/style.css">
|
||||
<script type="text/javascript" src="../wifi/140medley.min.js"></script>
|
||||
<script type="text/javascript" src="test.js"></script>
|
||||
<body>
|
||||
<div id="main">
|
||||
<div id="log">Initializing test...</div>
|
||||
</div>
|
||||
</body>
|
||||
205
examples/esphttpd/html/test/test.js
Normal file
205
examples/esphttpd/html/test/test.js
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
|
||||
/*
|
||||
Code to test the webserver. This depends on:
|
||||
- The cat images being available, for concurrent espfs testing
|
||||
- the test.cgi script available, for generic data mangling tests
|
||||
|
||||
|
||||
This test does a max of 4 requests in parallel. The nonos SDK supports a max of
|
||||
5 connections; the default libesphttpd setting is 4 sockets at a time. Unfortunately,
|
||||
the nonos sdk just closes all sockets opened after the available sockets are opened,
|
||||
instead of queueing them until a socket frees up.
|
||||
*/
|
||||
|
||||
|
||||
function log(line) {
|
||||
$("#log").insertAdjacentHTML('beforeend', line+'<br />');
|
||||
}
|
||||
|
||||
|
||||
//Load an image multiple times in parallel
|
||||
function testParLdImg(url, ct, doneFn) {
|
||||
var im=[];
|
||||
var state={"loaded":0, "count":ct, "doneFn": doneFn, "error":false};
|
||||
for (var x=0; x<ct; x++) {
|
||||
im[x]=new Image();
|
||||
im[x].onload=function(no) {
|
||||
log("File "+no+" loaded successfully.");
|
||||
this.loaded++;
|
||||
if (this.loaded==this.count) this.doneFn(!this.error);
|
||||
}.bind(state, x);
|
||||
im[x].onerror=function(no) {
|
||||
log("Error loading image "+no+"!");
|
||||
this.loaded++;
|
||||
this.error++;
|
||||
if (this.loaded==this.count) this.doneFn(!this.error);
|
||||
}.bind(state, x);
|
||||
im[x].src=url+"?"+Math.floor(Math.random()*100000).toString();
|
||||
}
|
||||
}
|
||||
|
||||
function testDownloadCgi(len, doneFn) {
|
||||
var xhr=j();
|
||||
var state={"len":len, "doneFn":doneFn, "ts": Date.now()};
|
||||
xhr.open("GET", "test.cgi?len="+len+"&nocache="+Math.floor(Math.random()*100000).toString());
|
||||
xhr.onreadystatechange=function() {
|
||||
if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
|
||||
if (xhr.response.length==this.len) {
|
||||
log("Downloaded "+this.len+" bytes successfully.");
|
||||
this.doneFn(true);
|
||||
} else {
|
||||
log("Downloaded "+xhr.response.length+" bytes successfully, but needed "+this.len+"!");
|
||||
this.doneFn(false);
|
||||
}
|
||||
} else if (xhr.readyState==4) {
|
||||
log("Failed! Error "+xhr.status);
|
||||
this.doneFn(false);
|
||||
}
|
||||
}.bind(state);
|
||||
//If the webbrowser enables it, show progress.
|
||||
if (typeof xhr.onprogress != 'undefined') {
|
||||
xhr.onprogress=function(e) {
|
||||
if (Date.now()>this.ts+2000) {
|
||||
log("..."+Math.floor(e.loaded*100/this.len).toString()+"%");
|
||||
this.ts=Date.now();
|
||||
}
|
||||
}.bind(state);
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
|
||||
function testUploadCgi(len, doneFn) {
|
||||
var xhr=j();
|
||||
var state={"len":len, "doneFn":doneFn, "ts": Date.now()};
|
||||
var data="";
|
||||
for (var x=0; x<len; x++) data+="X";
|
||||
xhr.open("POST", "test.cgi");
|
||||
xhr.onreadystatechange=function() {
|
||||
if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
|
||||
var ulen=parseInt(xhr.responseText);
|
||||
if (ulen==this.len) {
|
||||
log("Uploaded "+this.len+" bytes successfully.");
|
||||
this.doneFn(true);
|
||||
} else {
|
||||
log("Webserver received "+ulen+" bytes successfully, but sent "+this.len+"!");
|
||||
this.doneFn(false);
|
||||
}
|
||||
} else if (xhr.readyState==4) {
|
||||
log("Failed! Error "+xhr.status);
|
||||
this.doneFn(false);
|
||||
}
|
||||
}.bind(state);
|
||||
//If the webbrowser enables it, show progress.
|
||||
if (typeof xhr.upload.onprogress != 'undefined') {
|
||||
xhr.upload.onprogress=function(e) {
|
||||
if (Date.now()>this.ts+2000) {
|
||||
log("..."+Math.floor(e.loaded*100/e.total).toString()+"%");
|
||||
this.ts=Date.now();
|
||||
}
|
||||
}.bind(state);
|
||||
}
|
||||
//Upload the file
|
||||
xhr.send(data);
|
||||
}
|
||||
|
||||
function hammerNext(state, xhr) {
|
||||
if (state.done==state.count) {
|
||||
state.doneFn(!state.error);
|
||||
}
|
||||
if (state.started==state.count) return;
|
||||
xhr.open("GET", "test.cgi?len="+state.len+"&nocache="+Math.floor(Math.random()*100000).toString());
|
||||
xhr.onreadystatechange=function(xhr) {
|
||||
if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
|
||||
if (xhr.response.length==this.len) {
|
||||
state.done++;
|
||||
hammerNext(this, xhr);
|
||||
} else {
|
||||
log("Downloaded "+xhr.response.length+" bytes successfully, but needed "+this.len+"!");
|
||||
state.done++;
|
||||
hammerNext(this, xhr);
|
||||
}
|
||||
} else if (xhr.readyState==4) {
|
||||
log("Failed! Error "+xhr.status);
|
||||
state.done++;
|
||||
hammerNext(this, xhr);
|
||||
}
|
||||
}.bind(state, xhr);
|
||||
//If the webbrowser enables it, show progress.
|
||||
if (typeof xhr.onprogress != 'undefined') {
|
||||
xhr.onprogress=function(e) {
|
||||
if (Date.now()>this.ts+2000) {
|
||||
log("..."+state.done+"/"+state.count);
|
||||
this.ts=Date.now();
|
||||
}
|
||||
}.bind(state);
|
||||
}
|
||||
state.started++;
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
function testHammer(count, par, len, doneFn) {
|
||||
var state={"count":count, "started":0, "done":0, "par":par, "len":len, "doneFn":doneFn, "ts": Date.now(), "error":false};
|
||||
var xhr=[];
|
||||
for (var i=0; i<par; i++) {
|
||||
xhr[i]=j();
|
||||
hammerNext(state, xhr[i]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
var tstState=0;
|
||||
var successCnt=0;
|
||||
|
||||
function nextTest(lastOk) {
|
||||
if (tstState!=0) {
|
||||
if (lastOk) {
|
||||
log("<b>Success!</b>");
|
||||
successCnt++;
|
||||
} else {
|
||||
log("<b>Test failed!</b>");
|
||||
}
|
||||
}
|
||||
tstState++;
|
||||
if (tstState==1) {
|
||||
log("Testing parallel load of espfs files...");
|
||||
testParLdImg("../cats/kitten-loves-toy.jpg", 3, nextTest);
|
||||
} else if (tstState==2) {
|
||||
log("Testing GET request of 32K...");
|
||||
testDownloadCgi(32*1024, nextTest);
|
||||
} else if (tstState==3) {
|
||||
log("Testing GET request of 128K...");
|
||||
testDownloadCgi(128*1024, nextTest);
|
||||
} else if (tstState==4) {
|
||||
log("Testing GET request of 512K...");
|
||||
testDownloadCgi(512*1024, nextTest);
|
||||
} else if (tstState==5) {
|
||||
log("Testing POST request of 512 bytes...");
|
||||
testUploadCgi(512, nextTest);
|
||||
} else if (tstState==6) {
|
||||
log("Testing POST request of 16K bytes...");
|
||||
testUploadCgi(16*1024, nextTest);
|
||||
} else if (tstState==7) {
|
||||
log("Testing POST request of 512K bytes...");
|
||||
testUploadCgi(512*1024, nextTest);
|
||||
} else if (tstState==8) {
|
||||
log("Hammering webserver with 500 requests of size 512...");
|
||||
testHammer(500, 3, 512, nextTest);
|
||||
} else if (tstState==9) {
|
||||
log("Hammering webserver with 500 requests of size 2048...");
|
||||
testHammer(500, 3, 2048, nextTest);
|
||||
} else {
|
||||
log("Tests done! "+successCnt+" out of "+(tstState-1)+" tests were successful.");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
window.onload=function(e) {
|
||||
log("Starting tests.");
|
||||
nextTest(false);
|
||||
}
|
||||
|
||||
|
||||
|
||||
69
examples/esphttpd/html/websocket/index.html
Normal file
69
examples/esphttpd/html/websocket/index.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>WebSocket Test</title>
|
||||
|
||||
<script language="javascript" type="text/javascript">
|
||||
|
||||
var wsUri = "ws://"+window.location.host+"/websocket/ws.cgi";
|
||||
var output;
|
||||
|
||||
function init()
|
||||
{
|
||||
output = document.getElementById("output");
|
||||
testWebSocket();
|
||||
}
|
||||
|
||||
function testWebSocket()
|
||||
{
|
||||
websocket = new WebSocket(wsUri);
|
||||
websocket.onopen = function(evt) { onOpen(evt) };
|
||||
websocket.onclose = function(evt) { onClose(evt) };
|
||||
websocket.onmessage = function(evt) { onMessage(evt) };
|
||||
websocket.onerror = function(evt) { onError(evt) };
|
||||
}
|
||||
|
||||
function onOpen(evt)
|
||||
{
|
||||
writeToScreen("CONNECTED");
|
||||
doSend("WebSocket rocks");
|
||||
}
|
||||
|
||||
function onClose(evt)
|
||||
{
|
||||
writeToScreen("DISCONNECTED");
|
||||
}
|
||||
|
||||
function onMessage(evt)
|
||||
{
|
||||
writeToScreen('<span style="color: blue;">RECEIVED: ' + evt.data+'</span>');
|
||||
// websocket.close();
|
||||
}
|
||||
|
||||
function onError(evt)
|
||||
{
|
||||
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
|
||||
}
|
||||
|
||||
function doSend(message)
|
||||
{
|
||||
writeToScreen("SENT: " + message);
|
||||
websocket.send(message);
|
||||
}
|
||||
|
||||
function writeToScreen(message)
|
||||
{
|
||||
var pre = document.createElement("p");
|
||||
pre.style.wordWrap = "break-word";
|
||||
pre.innerHTML = message;
|
||||
output.appendChild(pre);
|
||||
}
|
||||
|
||||
window.addEventListener("load", init, false);
|
||||
|
||||
</script>
|
||||
|
||||
<h2>WebSocket Test</h2>
|
||||
|
||||
<div id="output"></div>
|
||||
2
examples/esphttpd/html/wifi/140medley.min.js
vendored
Normal file
2
examples/esphttpd/html/wifi/140medley.min.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
var t=function(a,b){return function(c,d){return a.replace(/#{([^}]*)}/g,function(a,f){return Function("x","with(x)return "+f).call(c,d||b||{})})}},s=function(a,b){return b?{get:function(c){return a[c]&&b.parse(a[c])},set:function(c,d){a[c]=b.stringify(d)}}:{}}(this.localStorage||{},JSON),p=function(a,b,c,d){c=c||document;d=c[b="on"+b];a=c[b]=function(e){d=d&&d(e=e||c.event);return(a=a&&b(e))?b:d};c=this},m=function(a,b,c){b=document;c=b.createElement("p");c.innerHTML=a;for(a=b.createDocumentFragment();b=
|
||||
c.firstChild;)a.appendChild(b);return a},$=function(a,b){a=a.match(/^(\W)?(.*)/);return(b||document)["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2])},j=function(a){for(a=0;a<4;a++)try{return a?new ActiveXObject([,"Msxml2","Msxml3","Microsoft"][a]+".XMLHTTP"):new XMLHttpRequest}catch(b){}};
|
||||
43
examples/esphttpd/html/wifi/connecting.html
Normal file
43
examples/esphttpd/html/wifi/connecting.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<html><head><title>Connecting...</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script type="text/javascript" src="140medley.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var xhr=j();
|
||||
|
||||
|
||||
function getStatus() {
|
||||
xhr.open("GET", "connstatus.cgi");
|
||||
xhr.onreadystatechange=function() {
|
||||
if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
|
||||
var data=JSON.parse(xhr.responseText);
|
||||
if (data.status=="idle") {
|
||||
$("#status").innerHTML="Preparing to connect...";
|
||||
window.setTimeout(getStatus, 1000);
|
||||
} else if (data.status=="success") {
|
||||
$("#status").innerHTML="Connected! Got IP "+data.ip+". If you're in the same network, you can access it <a href=\"http://"+data.ip+"/\">here</a>.";
|
||||
} else if (data.status=="working") {
|
||||
$("#status").innerHTML="Trying to connect to selected access point...";
|
||||
window.setTimeout(getStatus, 1000);
|
||||
} else if (data.status=="fail") {
|
||||
$("#status").innerHTML="Connection failed. Check password and selected AP.<br /><a href=\"wifi.tpl\">Go Back</a>";
|
||||
}
|
||||
}
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
window.onload=function(e) {
|
||||
getStatus();
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<h2>Connecting to AP...</h2>
|
||||
<p>Status:<br />
|
||||
<div id="status">...</div>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
examples/esphttpd/html/wifi/icons.png
Normal file
BIN
examples/esphttpd/html/wifi/icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 914 B |
24
examples/esphttpd/html/wifi/style.css
Normal file
24
examples/esphttpd/html/wifi/style.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
body {
|
||||
background-color: #404040;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#main {
|
||||
background-color: #d0d0FF;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #000000;
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.icon {
|
||||
background-image: url("icons.png");
|
||||
background-color: transparent;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
}
|
||||
94
examples/esphttpd/html/wifi/wifi.tpl
Normal file
94
examples/esphttpd/html/wifi/wifi.tpl
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<html><head><title>WiFi connection</title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script type="text/javascript" src="140medley.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var xhr=j();
|
||||
var currAp="%currSsid%";
|
||||
|
||||
function createInputForAp(ap) {
|
||||
if (ap.essid=="" && ap.rssi==0) return;
|
||||
var div=document.createElement("div");
|
||||
div.id="apdiv";
|
||||
var rssi=document.createElement("div");
|
||||
var rssiVal=-Math.floor(ap.rssi/51)*32;
|
||||
rssi.className="icon";
|
||||
rssi.style.backgroundPosition="0px "+rssiVal+"px";
|
||||
var encrypt=document.createElement("div");
|
||||
var encVal="-64"; //assume wpa/wpa2
|
||||
if (ap.enc=="0") encVal="0"; //open
|
||||
if (ap.enc=="1") encVal="-32"; //wep
|
||||
encrypt.className="icon";
|
||||
encrypt.style.backgroundPosition="-32px "+encVal+"px";
|
||||
var input=document.createElement("input");
|
||||
input.type="radio";
|
||||
input.name="essid";
|
||||
input.value=ap.essid;
|
||||
if (currAp==ap.essid) input.checked="1";
|
||||
input.id="opt-"+ap.essid;
|
||||
var label=document.createElement("label");
|
||||
label.htmlFor="opt-"+ap.essid;
|
||||
label.textContent=ap.essid;
|
||||
div.appendChild(input);
|
||||
div.appendChild(rssi);
|
||||
div.appendChild(encrypt);
|
||||
div.appendChild(label);
|
||||
return div;
|
||||
}
|
||||
|
||||
function getSelectedEssid() {
|
||||
var e=document.forms.wifiform.elements;
|
||||
for (var i=0; i<e.length; i++) {
|
||||
if (e[i].type=="radio" && e[i].checked) return e[i].value;
|
||||
}
|
||||
return currAp;
|
||||
}
|
||||
|
||||
|
||||
function scanAPs() {
|
||||
xhr.open("GET", "wifiscan.cgi");
|
||||
xhr.onreadystatechange=function() {
|
||||
if (xhr.readyState==4 && xhr.status>=200 && xhr.status<300) {
|
||||
var data=JSON.parse(xhr.responseText);
|
||||
currAp=getSelectedEssid();
|
||||
if (data.result.inProgress=="0" && data.result.APs.length>1) {
|
||||
$("#aps").innerHTML="";
|
||||
for (var i=0; i<data.result.APs.length; i++) {
|
||||
if (data.result.APs[i].essid=="" && data.result.APs[i].rssi==0) continue;
|
||||
$("#aps").appendChild(createInputForAp(data.result.APs[i]));
|
||||
}
|
||||
window.setTimeout(scanAPs, 20000);
|
||||
} else {
|
||||
window.setTimeout(scanAPs, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
|
||||
window.onload=function(e) {
|
||||
scanAPs();
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<p>
|
||||
Current WiFi mode: %WiFiMode%
|
||||
</p>
|
||||
<p>
|
||||
Note: %WiFiapwarn%
|
||||
</p>
|
||||
<form name="wifiform" action="connect.cgi" method="post">
|
||||
<p>
|
||||
To connect to a WiFi network, please select one of the detected networks...<br>
|
||||
<div id="aps">Scanning...</div>
|
||||
<br>
|
||||
WiFi password, if applicable: <br />
|
||||
<input type="text" name="passwd" val="%WiFiPasswd%"> <br />
|
||||
<input type="submit" name="connect" value="Connect!">
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue