mirror of https://github.com/jeelabs/esp-link.git
Thorsten von Eicken
10 years ago
parent
955f9fc29b
commit
ccd91bd150
@ -1,2 +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= |
||||
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),b=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){}}; |
||||
@ -0,0 +1,30 @@ |
||||
function fetchText(delay) { |
||||
el = $("#console"); |
||||
if (el.textEnd == undefined) { |
||||
el.textEnd = 0; |
||||
el.innerHTML = ""; |
||||
} |
||||
window.setTimeout(function() { |
||||
ajaxJson('GET', console_url + "?start=" + el.textEnd, updateText, retryLoad); |
||||
}, delay); |
||||
} |
||||
|
||||
function updateText(resp) { |
||||
el = $("#console"); |
||||
|
||||
delay = 3000; |
||||
if (resp != null && resp.len > 0) { |
||||
console.log("updateText got", resp.len, "chars at", resp.start); |
||||
if (resp.start > el.textEnd) { |
||||
el.innerHTML = el.innerHTML.concat("\r\n<missing lines\r\n"); |
||||
} |
||||
el.innerHTML = el.innerHTML.concat(resp.text); |
||||
el.textEnd = resp.start + resp.len; |
||||
delay = 500; |
||||
} |
||||
fetchText(delay); |
||||
} |
||||
|
||||
function retryLoad() { |
||||
fetchText(1000); |
||||
} |
||||
@ -1,13 +1,11 @@ |
||||
%head% |
||||
|
||||
<div id="main"> |
||||
<div class="header"> |
||||
<h1><span class="esp">esp</span> link</h1> |
||||
<h2>%version%</h2> |
||||
<h2 id="version"></h2> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<p>The ESP Link connects the ESP's serial port to Wifi and it can |
||||
<p>The ESP Link bridges the ESP8266 serial port to Wifi and it can |
||||
program microcontrollers over the serial port, in particular Arduinos, AVRs, and |
||||
NXP's LPC800-series ARM processors.</p> |
||||
</div> |
||||
@ -1,16 +0,0 @@ |
||||
<html><head><title>LED test - ESP Link</title> |
||||
<link rel="stylesheet" type="text/css" href="style.css"> |
||||
</head> |
||||
<body> |
||||
<div id="main"> |
||||
<div id="topnav">%topnav%</div> |
||||
<h1><span class="esp">esp</span> link - LED test</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> |
||||
@ -1,44 +0,0 @@ |
||||
<html><head><title>Connecting... - ESP Link</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" || data.status=="connecting") { |
||||
$("#status").innerHTML="Connecting..."; |
||||
window.setTimeout(getStatus, 1000); |
||||
} else if (data.status=="got IP address") { |
||||
$("#status").innerHTML="Connected! Got IP "+data.ip+ ".<br/>" + |
||||
"If you're in the same network, you can access it <a href=\"http://"+data.ip+ |
||||
"/\">here</a>.<br/>ESP Link will switch to STA-only mode in a few seconds."; |
||||
} else { |
||||
$("#status").innerHTML="Oops: " + data.status + ". Reason: " + data.reason + |
||||
"<br/>Check password and selected AP.<br/><a href=\"wifi.tpl\">Go Back</a>"; |
||||
} |
||||
} |
||||
} |
||||
xhr.send(); |
||||
} |
||||
|
||||
window.onload=function(e) { |
||||
window.setTimeout(getStatus, 2000); |
||||
}; |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<div id="main"> |
||||
<h1>ESP Link - Connecting</h1> |
||||
<h2>Connecting to AP...</h2> |
||||
<p>Status: |
||||
<span id="status">...</span> |
||||
</p> |
||||
</div> |
||||
</body> |
||||
</html> |
||||
@ -1,103 +1,177 @@ |
||||
%head% |
||||
|
||||
<div id="main"> |
||||
<div class="header"> |
||||
<h1><span class="esp">esp</span> link - Wifi Configuration</h1> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<h2 class="content-subhead">Current Wifi State</h2> |
||||
<p> |
||||
WiFi mode: %WiFiMode%<br> |
||||
Configured network: %currSsid% Status: %currStatus% Phy:%currPhy% |
||||
</p> |
||||
<p>%WiFiapwarn%</p> |
||||
|
||||
<h2 class="content-subhead">Change Wifi association</h2> |
||||
<form name="wifiform" action="connect.cgi" method="post"> |
||||
<p>To connect to a WiFi network, please select one of the detected networks, |
||||
enter the password, and hit the connect button...<p> |
||||
<div class="content pure-g"> |
||||
<div class="pure-u-12-24"><div class="card"> |
||||
<h1>Wifi State</h2> |
||||
<table class="pure-table pure-table-horizontal"><tbody> |
||||
<tr><td>WiFi mode</td><td id="wifi-mode"></td></tr> |
||||
<tr><td>Configured network</td><td id="wifi-ssid"></td></tr> |
||||
<tr><td>Wifi status</td><td id="wifi-status"></td></tr> |
||||
<tr><td>Wifi rssi</td><td id="wifi-rssi"></td></tr> |
||||
<tr><td>Wifi phy</td><td id="wifi-phy"></td></tr> |
||||
<tr><td colspan="2" id="wifi-warn"></td></tr> |
||||
</tbody> </table> |
||||
</div></div> |
||||
<div class="pure-u-12-24"><div class="card"> |
||||
<h1>Wifi Association</h2> |
||||
<form action="#" id="wifiform" class="pure-form pure-form-stacked"> |
||||
<!--form name="wifiform" action="connect.cgi" method="post"--> |
||||
<legend>To connect to a WiFi network, please select one of the detected networks, |
||||
enter the password, and hit the connect button...</legend> |
||||
<label>Network SSID</label> |
||||
<div id="aps">Scanning...</div> |
||||
<p>WiFi password, if applicable: <br /> |
||||
<input type="text" name="passwd" val="%WiFiPasswd%"> |
||||
<input type="submit" name="connect" value="Connect!"> |
||||
</p> |
||||
<label>WiFi password, if applicable:</label> |
||||
<input id="wifi-passwd" type="text" name="passwd" placeholder="password"> |
||||
<button id="connect-button" type="submit" class="pure-button button-primary">Connect!</button> |
||||
</form> |
||||
|
||||
</div></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<script src="ui.js"></script> |
||||
<script src="140medley.min.js"></script> |
||||
<script src="/ui.js"></script> |
||||
<script type="text/javascript"> |
||||
|
||||
var xhr=j(); |
||||
var currAp="%currSsid%"; |
||||
var currAp = ""; |
||||
|
||||
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="lock-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="lock-icon"; |
||||
encrypt.style.backgroundPosition="-32px "+encVal+"px"; |
||||
var input=document.createElement("input"); |
||||
input.type="radio"; |
||||
input.name="essid"; |
||||
|
||||
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+" ("+ap.rssi+")"; |
||||
input.id = "opt-" + ap.essid; |
||||
if (currAp == ap.essid) input.checked = "1"; |
||||
|
||||
var bars = document.createElement("div"); |
||||
var rssiVal = -Math.floor(ap.rssi/51)*32; |
||||
bars.className = "lock-icon"; |
||||
bars.style.backgroundPosition = "0px "+rssiVal+"px"; |
||||
|
||||
var rssi = document.createElement("div"); |
||||
rssi.innerHTML = "" + ap.rssi +"dB"; |
||||
|
||||
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 = "lock-icon"; |
||||
encrypt.style.backgroundPosition = "-32px "+encVal+"px"; |
||||
|
||||
var label = document.createElement("div"); |
||||
label.innerHTML = ap.essid; |
||||
|
||||
var div = document.createElement("label"); |
||||
div.for = "opt-" + ap.essid; |
||||
div.appendChild(input); |
||||
div.appendChild(rssi); |
||||
div.appendChild(encrypt); |
||||
div.appendChild(bars); |
||||
div.appendChild(rssi); |
||||
div.appendChild(label); |
||||
return div; |
||||
} |
||||
|
||||
function getSelectedEssid() { |
||||
var e=document.forms.wifiform.elements; |
||||
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; |
||||
if (e[i].type == "radio" && e[i].checked) return e[i].value; |
||||
} |
||||
return currAp; |
||||
} |
||||
|
||||
|
||||
var scan_xhr = j(); |
||||
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=""; |
||||
scan_xhr.open("GET", "wifiscan"); |
||||
scan_xhr.onreadystatechange = function() { |
||||
if (scan_xhr.readyState == 4 && scan_xhr.status >= 200 && scan_xhr.status < 300) { |
||||
var data = JSON.parse(scan_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; |
||||
if (data.result.APs[i].essid == "" && data.result.APs[i].rssi == 0) continue; |
||||
$("#aps").appendChild(createInputForAp(data.result.APs[i])); |
||||
} |
||||
window.setTimeout(scanAPs, 20000); |
||||
//window.setTimeout(scanAPs, 10000); |
||||
} else { |
||||
window.setTimeout(scanAPs, 1000); |
||||
} |
||||
} |
||||
} |
||||
scan_xhr.send(); |
||||
} |
||||
|
||||
function getWifiInfo() { |
||||
var xhr = j(); |
||||
xhr.open("GET", "info"); |
||||
xhr.onreadystatechange = function() { |
||||
if (xhr.readyState != 4) { return; } |
||||
if (xhr.status >= 200 && xhr.status < 300) { |
||||
var data = JSON.parse(xhr.responseText); |
||||
Object.keys(data).forEach(function(v) { |
||||
el = document.getElementById("wifi-" + v); |
||||
if (el != null) el.innerHTML = data[v]; |
||||
}); |
||||
currAp = data.ssid; |
||||
} else { |
||||
window.setTimeout(getWifiInfo, 1000); |
||||
} |
||||
} |
||||
xhr.send(); |
||||
} |
||||
|
||||
function getStatus() { |
||||
var xhr = j(); |
||||
xhr.open("GET", "connstatus"); |
||||
xhr.onreadystatechange = function() { |
||||
if (xhr.readyState != 4) { return; } |
||||
if (xhr.status >= 200 && xhr.status < 300) { |
||||
var data = JSON.parse(xhr.responseText); |
||||
if (data.status == "idle" || data.status == "connecting") { |
||||
$("#aps").innerHTML = "Connecting..."; |
||||
window.setTimeout(getStatus, 1000); |
||||
} else if (data.status == "got IP address") { |
||||
$("#aps").innerHTML="Connected! Got IP "+data.ip+ ".<br/>" + |
||||
"If you're in the same network, you can access it <a href=\"http://"+data.ip+ |
||||
"/\">here</a>.<br/>ESP Link will switch to STA-only mode in a few seconds."; |
||||
} else { |
||||
$("#aps").innerHTML="Oops: " + data.status + ". Reason: " + data.reason + |
||||
"<br/>Check password and selected AP.<br/><a href=\"wifi.tpl\">Go Back</a>"; |
||||
} |
||||
} else { |
||||
window.setTimeout(getStatus, 2000); |
||||
} |
||||
} |
||||
xhr.send(); |
||||
} |
||||
|
||||
function changeWifiAp(e) { |
||||
e.preventDefault(); |
||||
var xhr = j(); |
||||
var passwd = $("#wifi-passwd").value; |
||||
var essid = getSelectedEssid(); |
||||
console.log("Posting form", "essid=" + essid, "pwd="+passwd); |
||||
xhr.open("POST", "connect"); |
||||
xhr.onreadystatechange = function() { |
||||
if (xhr.readyState != 4) { return; } |
||||
if (xhr.status >= 200 && xhr.status < 300) { |
||||
window.setTimeout(getStatus, 2000); |
||||
} else { |
||||
window.setTimeout(scanAPs, 1000); |
||||
} |
||||
} |
||||
xhr.setRequestHeader("Content-type", "application/x-form-urlencoded"); |
||||
xhr.send("essid="+encodeURIComponent(essid)+"&passwd="+encodeURIComponent(passwd)); |
||||
} |
||||
|
||||
window.onload=function(e) { |
||||
scanAPs(); |
||||
getWifiInfo(); |
||||
$("#wifiform").onsubmit = changeWifiAp; |
||||
window.setTimeout(scanAPs, 500); |
||||
}; |
||||
</script> |
||||
</body></html> |
||||
|
||||
Loading…
Reference in new issue