mirror of https://github.com/jeelabs/esp-link.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
214 lines
7.2 KiB
214 lines
7.2 KiB
<div id="main">
|
|
<div class="header">
|
|
<h1><span class="esp">esp</span> link - Wifi Configuration</h1>
|
|
</div>
|
|
|
|
<div class="content pure-g">
|
|
<div class="pure-u-12-24"><div class="card">
|
|
<h1>Wifi State</h2>
|
|
<div id="wifi-spinner" class="spinner spinner-small"></div>
|
|
<table id="wifi-table" class="pure-table pure-table-horizontal" hidden><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 address</td><td id="wifi-ip"></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>Wifi MAC</td><td id="wifi-mac"></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>
|
|
<p id="reconnect" style="color: #600" hidden></p>
|
|
<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 class="spinner spinner-small"></div></div>
|
|
<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 type="text/javascript">
|
|
|
|
var currAp = "";
|
|
|
|
function createInputForAp(ap) {
|
|
if (ap.essid=="" && ap.rssi==0) return;
|
|
|
|
var input = document.createElement("input");
|
|
input.type = "radio";
|
|
input.name = "essid";
|
|
input.value=ap.essid;
|
|
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(encrypt);
|
|
div.appendChild(bars);
|
|
div.appendChild(rssi);
|
|
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;
|
|
}
|
|
|
|
var scanTimeout = null;
|
|
|
|
function scanResult() {
|
|
ajaxJson('GET', "scan", function(data) {
|
|
currAp = getSelectedEssid();
|
|
if (data.result.inProgress == "0" && data.result.APs.length > 1) {
|
|
$("#aps").innerHTML = "";
|
|
var n = 0;
|
|
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]));
|
|
n = n+1;
|
|
}
|
|
showNotification("Scan found " + n + " networks");
|
|
var cb = $("#connect-button");
|
|
cb.className = cb.className.replace(" pure-button-disabled", "");
|
|
if (scanTimeout != null) clearTimeout(scanTimeout);
|
|
scanTimeout = window.setTimeout(scanAPs, 20000);
|
|
} else {
|
|
window.setTimeout(scanResult, 1000);
|
|
}
|
|
}, function(s, st) {
|
|
window.setTimeout(scanResult, 5000);
|
|
});
|
|
}
|
|
|
|
function scanAPs() {
|
|
scanTimeout = null;
|
|
ajaxSpin('POST', "scan", function(data) {
|
|
showNotification("Wifi scan started");
|
|
window.setTimeout(scanResult, 1000);
|
|
}, function(s, st) {
|
|
showNotification("Wifi scan may have started?");
|
|
window.setTimeout(scanResult, 1000);
|
|
});
|
|
}
|
|
|
|
function showWifiInfo(data) {
|
|
Object.keys(data).forEach(function(v) {
|
|
el = $("#wifi-" + v);
|
|
if (el != null) el.innerHTML = data[v];
|
|
});
|
|
$("#wifi-spinner").setAttribute("hidden", "");
|
|
$("#wifi-table").removeAttribute("hidden");
|
|
currAp = data.ssid;
|
|
}
|
|
|
|
function getWifiInfo() {
|
|
ajaxJson('GET', "info", showWifiInfo,
|
|
function(s, st) { window.setTimeout(getWifiInfo, 1000); });
|
|
}
|
|
|
|
function getStatus() {
|
|
ajaxJsonSpin("GET", "connstatus", function(data) {
|
|
if (data.status == "idle" || data.status == "connecting") {
|
|
$("#aps").innerHTML = "Connecting...";
|
|
showNotification("Connecting...");
|
|
window.setTimeout(getStatus, 1000);
|
|
} else if (data.status == "got IP address") {
|
|
var txt = "Connected! Got IP "+data.ip;
|
|
showNotification(txt);
|
|
showWifiInfo(data);
|
|
|
|
var txt2 = "ESP Link will switch to STA-only mode in a few seconds";
|
|
window.setTimeout(function() { showNotification(txt2); }, 4000);
|
|
|
|
$("#reconnect").removeAttribute("hidden");
|
|
$("#reconnect").innerHTML =
|
|
"If you are in the same network, go to <a href=\"http://"+data.ip+
|
|
"/\">"+data.ip+"</a>, else connect to network "+data.ssid+" first.";
|
|
} else {
|
|
showWarning("Connection failed: " + data.status + ", " + data.reason);
|
|
$("#aps").innerHTML =
|
|
"Check password and selected AP. <a href=\"wifi.tpl\">Go Back</a>";
|
|
}
|
|
}, function(s, st) {
|
|
//showWarning("Can't get status: " + st);
|
|
window.setTimeout(getStatus, 2000);
|
|
});
|
|
}
|
|
|
|
function changeWifiMode(m) {
|
|
hideWarning();
|
|
ajaxSpin("POST", "setmode?mode=" + m, function(resp) {
|
|
showNotification("Mode changed");
|
|
window.setTimeout(getWifiInfo, 100);
|
|
}, function(s, st) {
|
|
showWarning("Error changing mode: " + st);
|
|
window.setTimeout(getWifiInfo, 100);
|
|
});
|
|
}
|
|
|
|
function changeWifiAp(e) {
|
|
e.preventDefault();
|
|
var passwd = $("#wifi-passwd").value;
|
|
var essid = getSelectedEssid();
|
|
console.log("Posting form", "essid=" + essid, "pwd="+passwd);
|
|
showNotification("Connecting to " + essid);
|
|
var url = "connect?essid="+encodeURIComponent(essid)+"&passwd="+encodeURIComponent(passwd);
|
|
|
|
hideWarning();
|
|
$("#reconnect").setAttribute("hidden", "");
|
|
$("#wifi-passwd").value = "";
|
|
var cb = $("#connect-button");
|
|
var cn = cb.className;
|
|
cb.className += ' pure-button-disabled';
|
|
ajaxSpin("POST", url, function(resp) {
|
|
$("#spinner").removeAttribute('hidden'); // hack
|
|
showNotification("Waiting for network change...");
|
|
window.scrollTo(0, 0);
|
|
window.setTimeout(getStatus, 2000);
|
|
}, function(s, st) {
|
|
showWarning("Error switching network: "+st);
|
|
cb.className = cn;
|
|
window.setTimeout(scanAPs, 1000);
|
|
});
|
|
}
|
|
|
|
window.onload=function(e) {
|
|
getWifiInfo();
|
|
$("#wifiform").onsubmit = changeWifiAp;
|
|
scanTimeout = window.setTimeout(scanAPs, 500);
|
|
};
|
|
</script>
|
|
</body></html>
|
|
|