removed all templating and heatshrink, only use gzip

pull/30/head
Thorsten von Eicken 10 years ago
parent ab434dfc12
commit 4147496132
  1. 5
      html/140medley.min.js
  2. 28
      html/console.html
  3. BIN
      html/favicon.ico
  4. 10
      html/head-
  5. 25
      html/head.tpl
  6. 54
      html/home.html
  7. 5
      html/log.html
  8. 9
      html/style.css
  9. 258
      html/ui.js
  10. 73
      html/wifi/wifi.html
  11. 86
      html/wifi/wifi.js

@ -1,5 +0,0 @@
var 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){}};

@ -17,36 +17,12 @@
</div> </div>
</div> </div>
<script src="ui.js"></script>
<script type="text/javascript">console_url = "/console/text"</script> <script type="text/javascript">console_url = "/console/text"</script>
<script src="console.js"></script> <script src="console.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var rates = [57600, 115200, 230400, 460800]; var rates = [57600, 115200, 230400, 460800];
function showRate(rate) { onLoad(function() {
rates.forEach(function(r) {
var el = $("#"+r+"-button");
el.className = el.className.replace(" button-selected", "");
});
var el = $("#"+rate+"-button");
if (el != null) el.className += " button-selected";
}
function baudButton(baud) {
$("#baud-btns").appendChild(m(
' <a id="'+baud+'-button" href="#" class="pure-button">'+baud+'</a>'));
$("#"+baud+"-button").addEventListener("click", function(e) {
e.preventDefault();
ajaxSpin('POST', "/console/baud?rate="+baud,
function(resp) { showNotification("" + baud + " baud set"); showRate(baud); },
function(s, st) { showWarning("Error setting baud rate: ", st); }
);
});
}
window.onload = function() {
fetchText(100, true); fetchText(100, true);
$("#reset-button").addEventListener("click", function(e) { $("#reset-button").addEventListener("click", function(e) {
@ -64,6 +40,6 @@
function(data) { showRate(data.rate); }, function(data) { showRate(data.rate); },
function(s, st) { showNotification(st); } function(s, st) { showNotification(st); }
); );
} });
</script> </script>
</body></html> </body></html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 766 B

After

Width:  |  Height:  |  Size: 622 B

@ -0,0 +1,10 @@
<!doctype html>
<html><head>
<title>esp-link</title>
<link rel="stylesheet" href="/pure-min.css">
<link rel="stylesheet" href="/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/ui.js"></script>
</head>
<body>
<div id="layout">

@ -1,25 +0,0 @@
<!doctype html>
<html><head>
<title>esp-link</title>
<link rel="stylesheet" href="/pure-min.css">
<link rel="stylesheet" href="/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/140medley.min.js"></script>
</head>
<body>
<div id="layout">
<div id="spinner" class="spinner" hidden></div>
<div id="messages">
<div id="warning" hidden>Warning message</div>
<div id="notification" hidden>Notification</div>
</div>
<a href="#menu" id="menuLink" class="menu-link"><span></span></a>
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="https://github.com/jeelabs/esp-link">
<img src="/favicon.ico">&nbsp;esp-link</a>
<ul id="menu-list" class="pure-menu-list"></ul>
</div>
</div>

@ -48,60 +48,10 @@
</div> </div>
</div> </div>
<script src="ui.js"></script>
<script type="text/javascript"> <script type="text/javascript">
onLoad(function() {
var currPin;
// pin={reset:12, isp:13, LED_conn:0, LED_ser:2}
function createInputForPin(pin) {
var input = document.createElement("input");
input.type = "radio";
input.name = "pins";
input.data = pin.name;
input.className = "pin-input";
input.value= pin.value;
input.id = "opt-" + pin.value;
if (currPin == pin.name) input.checked = "1";
var descr = m('<label for="opt-'+pin.value+'"><b>'+pin.name+":</b>"+pin.descr+"</label>");
descr.for = "opt-" + pin.value;
var div = document.createElement("div");
div.appendChild(input);
div.appendChild(descr);
return div;
}
function displayPins(resp) {
var po = $("#pin-mux");
po.innerHTML = "";
currPin = resp.curr;
resp.map.forEach(function(v) {
po.appendChild(createInputForPin(v));
});
var i, inputs = $(".pin-input");
for (i=0; i<inputs.length; i++) {
inputs[i].onclick = function() { setPins(this.value, this.data) };
};
}
function fetchPins() {
ajaxJson("GET", "/pins", displayPins, function() {
window.setTimeout(fetchPins, 1000);
});
}
function setPins(v, name) {
ajaxSpin("POST", "/pins?map="+v, function() {
showNotification("Pin assignment changed to " + name);
}, function() {
showNotification("Pin assignment change failed");
window.setTimeout(fetchPins, 100);
});
}
window.onload=function(e) {
fetchPins(); fetchPins();
getWifiInfo(); getWifiInfo();
}; });
</script> </script>
</body></html> </body></html>

@ -20,17 +20,16 @@
</div> </div>
</div> </div>
<script src="ui.js"></script>
<script type="text/javascript">console_url = "/log/text"</script> <script type="text/javascript">console_url = "/log/text"</script>
<script src="console.js"></script> <script src="console.js"></script>
<script type="text/javascript"> <script type="text/javascript">
window.onload = function() { onLoad(function() {
fetchText(100, false); fetchText(100, false);
$("#refresh-button").addEventListener("click", function(e) { $("#refresh-button").addEventListener("click", function(e) {
e.preventDefault(); e.preventDefault();
fetchText(100, false); fetchText(100, false);
}); });
} });
</script> </script>
</body></html> </body></html>

@ -23,11 +23,16 @@ a:hover {
border: 0px solid #000000; border: 0px solid #000000;
} }
@media screen and (max-width: 1023px) {
.pure-u-12-24 {
width: 100%;
}
}
/* wifi AP selection form */ /* wifi AP selection form */
#aps label div { #aps label div {
display: inline-block; display: inline-block;
margin: 0em 0.2em; margin: 0em 0.2em;
vertical-align: top;
} }
fieldset.radios { fieldset.radios {
border: none; border: none;
@ -287,6 +292,8 @@ pre.console a {
} }
} }
/*===== spinners and notification messages */
#messages { #messages {
position: absolute; position: absolute;
left: 25%; left: 25%;

@ -1,14 +1,26 @@
// fill out menu items //===== 140medley.min.js with mods
(function() {
html = ""; var 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},
for (var i=0; i<menu.length; i+=2) { m=function(a,b,c){b=document;c=b.createElement("p");c.innerHTML=a;for(a=b.createDocumentFragment();b=
html = html.concat(" <li class=\"pure-menu-item\"><a href=\"" + menu[i+1] + c.firstChild;)a.appendChild(b);return a},
"\" class=\"pure-menu-link\">" + menu[i] + "</a></li>"); $=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){}};
e=function(a){return document.createElement(a);}
// chain onload handlers
function onLoad(f) {
var old = window.onload;
if (typeof old != 'function') {
window.onload = f;
} else {
window.onload = function() {
old();
f();
} }
document.getElementById("menu-list").innerHTML = html; }
v = document.getElementById("version"); }
if (v != null) { v.innerHTML = version; }
}()); //===== helpers to add/remove/toggle HTML element classes
function addClass(el, cl) { function addClass(el, cl) {
el.className += ' ' + cl; el.className += ' ' + cl;
@ -26,66 +38,6 @@ function toggleClass(el, cl) {
if (!removeClass(el, cl)) addClass(el, cl); if (!removeClass(el, cl)) addClass(el, cl);
} }
(function (window, document) {
var layout = document.getElementById('layout'),
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink');
menuLink.onclick = function (e) {
var active = 'active';
e.preventDefault();
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
};
}(this, this.document));
//===== Wifi info
function showWifiInfo(data) {
Object.keys(data).forEach(function(v) {
el = $("#wifi-" + v);
if (el != null) {
if (el.nodeName === "INPUT") el.value = data[v];
else el.innerHTML = data[v];
}
});
$("#wifi-spinner").setAttribute("hidden", "");
$("#wifi-table").removeAttribute("hidden");
currAp = data.ssid;
}
function getWifiInfo() {
ajaxJson('GET', "/wifi/info", showWifiInfo,
function(s, st) { window.setTimeout(getWifiInfo, 1000); });
}
//===== Notifications
function showWarning(text) {
var el = $("#warning");
el.innerHTML = text;
el.removeAttribute('hidden');
}
function hideWarning() {
el = $("#warning").setAttribute('hidden', '');
}
var notifTimeout = null;
function showNotification(text) {
var el = $("#notification");
el.innerHTML = text;
el.removeAttribute('hidden');
if (notifTimeout != null) clearTimeout(notifTimeout);
notifTimout = setTimeout(function() {
el.setAttribute('hidden', '');
notifTimout = null;
}, 4000);
}
//===== AJAX //===== AJAX
function ajaxReq(method, url, ok_cb, err_cb) { function ajaxReq(method, url, ok_cb, err_cb) {
@ -148,4 +100,170 @@ function ajaxJsonSpin(method, url, ok_cb, err_cb) {
ajaxSpin(method, url, function(resp) { dispatchJson(resp, ok_cb, err_cb); }, err_cb); ajaxSpin(method, url, function(resp) { dispatchJson(resp, ok_cb, err_cb); }, err_cb);
} }
//===== main menu, header spinner and notification boxes
onLoad(function() {
var l = $("#layout");
var o = l.childNodes[0];
// spinner
l.insertBefore(m('<div id="spinner" class="spinner" hidden></div>'), o);
// notification boxes
l.insertBefore(m(
'<div id="messages"><div id="warning" hidden></div><div id="notification" hidden></div></div>'), o);
// menu hamburger button
var ml = m('<a href="#menu" id="menuLink" class="menu-link"><span></span></a>');
l.insertBefore(ml, o);
// menu left-pane
var mm = m(
'<div id="menu">\
<div class="pure-menu">\
<a class="pure-menu-heading" href="https://github.com/jeelabs/esp-link">\
<img src="/favicon.ico">&nbsp;esp-link</a>\
<ul id="menu-list" class="pure-menu-list"></ul>\
</div>\
</div>\
');
l.insertBefore(mm, o);
// make hamburger button pull out menu
ml.onclick = function (e) {
var active = 'active';
e.preventDefault();
toggleClass(l, active);
toggleClass(mm, active);
toggleClass(ml, active);
};
// populate menu via ajax call
var getMenu = function() {
ajaxJson("GET", "/menu", function(data) {
var html = "";
for (var i=0; i<data.menu.length; i+=2) {
html = html.concat(" <li class=\"pure-menu-item\"><a href=\"" + data.menu[i+1] +
"\" class=\"pure-menu-link\">" + data.menu[i] + "</a></li>");
}
$("#menu-list").innerHTML = html;
v = $("#version");
if (v != null) { v.innerHTML = data.version; }
}, function() { setTimeout(getMenu, 1000); });
};
getMenu();
});
//===== Console page
function showRate(rate) {
rates.forEach(function(r) {
var el = $("#"+r+"-button");
el.className = el.className.replace(" button-selected", "");
});
var el = $("#"+rate+"-button");
if (el != null) el.className += " button-selected";
}
function baudButton(baud) {
$("#baud-btns").appendChild(m(
' <a id="'+baud+'-button" href="#" class="pure-button">'+baud+'</a>'));
$("#"+baud+"-button").addEventListener("click", function(e) {
e.preventDefault();
ajaxSpin('POST', "/console/baud?rate="+baud,
function(resp) { showNotification("" + baud + " baud set"); showRate(baud); },
function(s, st) { showWarning("Error setting baud rate: ", st); }
);
});
}
//===== Wifi info
function showWifiInfo(data) {
Object.keys(data).forEach(function(v) {
el = $("#wifi-" + v);
if (el != null) {
if (el.nodeName === "INPUT") el.value = data[v];
else el.innerHTML = data[v];
}
});
$("#wifi-spinner").setAttribute("hidden", "");
$("#wifi-table").removeAttribute("hidden");
currAp = data.ssid;
}
function getWifiInfo() {
ajaxJson('GET', "/wifi/info", showWifiInfo,
function(s, st) { window.setTimeout(getWifiInfo, 1000); });
}
//===== Notifications
function showWarning(text) {
var el = $("#warning");
el.innerHTML = text;
el.removeAttribute('hidden');
}
function hideWarning() {
el = $("#warning").setAttribute('hidden', '');
}
var notifTimeout = null;
function showNotification(text) {
var el = $("#notification");
el.innerHTML = text;
el.removeAttribute('hidden');
if (notifTimeout != null) clearTimeout(notifTimeout);
notifTimout = setTimeout(function() {
el.setAttribute('hidden', '');
notifTimout = null;
}, 4000);
}
//===== GPIO Pin mux card
var currPin;
// pin={reset:12, isp:13, LED_conn:0, LED_ser:2}
function createInputForPin(pin) {
var input = document.createElement("input");
input.type = "radio";
input.name = "pins";
input.data = pin.name;
input.className = "pin-input";
input.value= pin.value;
input.id = "opt-" + pin.value;
if (currPin == pin.name) input.checked = "1";
var descr = m('<label for="opt-'+pin.value+'"><b>'+pin.name+":</b>"+pin.descr+"</label>");
var div = document.createElement("div");
div.appendChild(input);
div.appendChild(descr);
return div;
}
function displayPins(resp) {
var po = $("#pin-mux");
po.innerHTML = "";
currPin = resp.curr;
resp.map.forEach(function(v) {
po.appendChild(createInputForPin(v));
});
var i, inputs = $(".pin-input");
for (i=0; i<inputs.length; i++) {
inputs[i].onclick = function() { setPins(this.value, this.data) };
};
}
function fetchPins() {
ajaxJson("GET", "/pins", displayPins, function() {
window.setTimeout(fetchPins, 1000);
});
}
function setPins(v, name) {
ajaxSpin("POST", "/pins?map="+v, function() {
showNotification("Pin assignment changed to " + name);
}, function() {
showNotification("Pin assignment change failed");
window.setTimeout(fetchPins, 100);
});
}

@ -0,0 +1,73 @@
<div id="main">
<div class="header">
<h1>Wifi Configuration</h1>
</div>
<div class="content">
<div class="pure-g">
<div class="pure-u-12-24"><div class="card">
<h1>Wifi State</h1>
<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</h1>
<p id="reconnect" style="color: #600" hidden></p>
<form action="#" id="wifiform" class="pure-form pure-form-stacked">
<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="password" name="passwd" placeholder="password">
<button id="connect-button" type="submit" class="pure-button button-primary">Connect!</button>
</form>
</div></div>
</div>
<div class="pure-g">
<div class="pure-u-12-24"><div class="card">
<h1>Special Settings</h1>
<form action="#" id="specform" class="pure-form pure-form-stacked">
<legend>Special settings, use with care! If the Static IP field is empty
then DHCP will be used, else DHCP will be off.</legend>
<label>Hostname used when requesting DHCP lease</label>
<input id="wifi-hostname" type="text" name="hostname">
<label>Static IP address, blank to use DHCP</label>
<input id="wifi-staticip" type="text" name="staticip">
<label>Netmask (for static IP)</label>
<input id="wifi-netmask" type="text" name="netmask">
<label>Gateway (for static IP)</label>
<input id="wifi-gateway" type="text" name="gateway">
<button id="special-button" type="submit" class="pure-button button-primary">Change!</button>
</form>
</div></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
console.log("before wifi.js");
</script>
<script src="wifi.js"></script>
<script type="text/javascript">
console.log("wifi html");
onLoad(function() {
console.log("wifi html onload");
getWifiInfo();
$("#wifiform").onsubmit = changeWifiAp;
$("#specform").onsubmit = changeSpecial;
console.log("scanning in 500ms");
scanTimeout = window.setTimeout(scanAPs, 500);
});
</script>
</body></html>

@ -1,96 +1,35 @@
<div id="main">
<div class="header">
<h1>Wifi Configuration</h1>
</div>
<div class="content">
<div class="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">
<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 class="pure-g">
<div class="pure-u-12-24"><div class="card">
<h1>Special Settings</h2>
<form action="#" id="specform" class="pure-form pure-form-stacked">
<legend>Special settings, use with care! If the Static IP field is empty
then DHCP will be used, else DHCP will be off.</legend>
<label>Hostname used when requesting DHCP lease</label>
<input id="wifi-hostname" type="text" name="hostname">
<label>Static IP address, blank to use DHCP</label>
<input id="wifi-staticip" type="text" name="staticip">
<label>Netmask (for static IP)</label>
<input id="wifi-netmask" type="text" name="netmask">
<label>Gateway (for static IP)</label>
<input id="wifi-gateway" type="text" name="gateway">
<button id="special-button" type="submit" class="pure-button button-primary">Change!</button>
</form>
</div></div>
</div>
</div>
</div>
</div>
<script src="/ui.js"></script>
<script type="text/javascript">
var currAp = ""; var currAp = "";
var blockScan = 0; var blockScan = 0;
function createInputForAp(ap) { function createInputForAp(ap) {
if (ap.essid=="" && ap.rssi==0) return; if (ap.essid=="" && ap.rssi==0) return;
var input = document.createElement("input"); var input = e("input");
input.type = "radio"; input.type = "radio";
input.name = "essid"; input.name = "essid";
input.value=ap.essid; input.value=ap.essid;
input.id = "opt-" + ap.essid; input.id = "opt-" + ap.essid;
if (currAp == ap.essid) input.checked = "1"; if (currAp == ap.essid) input.checked = "1";
var bars = document.createElement("div"); var bars = e("div");
var rssiVal = -Math.floor(ap.rssi/51)*32; var rssiVal = -Math.floor(ap.rssi/51)*32;
bars.className = "lock-icon"; bars.className = "lock-icon";
bars.style.backgroundPosition = "0px "+rssiVal+"px"; bars.style.backgroundPosition = "0px "+rssiVal+"px";
var rssi = document.createElement("div"); var rssi = e("div");
rssi.innerHTML = "" + ap.rssi +"dB"; rssi.innerHTML = "" + ap.rssi +"dB";
var encrypt = document.createElement("div"); var encrypt = e("div");
var encVal = "-64"; //assume wpa/wpa2 var encVal = "-64"; //assume wpa/wpa2
if (ap.enc == "0") encVal = "0"; //open if (ap.enc == "0") encVal = "0"; //open
if (ap.enc == "1") encVal = "-32"; //wep if (ap.enc == "1") encVal = "-32"; //wep
encrypt.className = "lock-icon"; encrypt.className = "lock-icon";
encrypt.style.backgroundPosition = "-32px "+encVal+"px"; encrypt.style.backgroundPosition = "-32px "+encVal+"px";
var label = document.createElement("div"); var label = e("div");
label.innerHTML = ap.essid; label.innerHTML = ap.essid;
var div = document.createElement("label"); var div = m('<label for=\"opt-' + ap.essid + '"></label>').children[0];
div.for = "opt-" + ap.essid;
div.appendChild(input); div.appendChild(input);
div.appendChild(encrypt); div.appendChild(encrypt);
div.appendChild(bars); div.appendChild(bars);
@ -139,6 +78,7 @@ function scanResult() {
} }
function scanAPs() { function scanAPs() {
console.log("scanning now");
if (blockScan) { if (blockScan) {
scanTimeout = window.setTimeout(scanAPs, 1000); scanTimeout = window.setTimeout(scanAPs, 1000);
return; return;
@ -176,7 +116,7 @@ function getStatus() {
} else { } else {
blockScan = 0; blockScan = 0;
showWarning("Connection failed: " + data.status + ", " + data.reason); showWarning("Connection failed: " + data.status + ", " + data.reason);
$("#aps").innerHTML = $("#aps").innerHTML =
"Check password and selected AP. <a href=\"wifi.tpl\">Go Back</a>"; "Check password and selected AP. <a href=\"wifi.tpl\">Go Back</a>";
} }
}, function(s, st) { }, function(s, st) {
@ -245,12 +185,4 @@ function changeSpecial(e) {
getWifiInfo(); getWifiInfo();
}); });
} }
console.log("wifi.js done");
window.onload=function(e) {
getWifiInfo();
$("#wifiform").onsubmit = changeWifiAp;
$("#specform").onsubmit = changeSpecial;
scanTimeout = window.setTimeout(scanAPs, 500);
};
</script>
</body></html>
Loading…
Cancel
Save