diff --git a/html/140medley.min.js b/html/140medley.min.js deleted file mode 100644 index 675ed59..0000000 --- a/html/140medley.min.js +++ /dev/null @@ -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){}}; diff --git a/html/console.tpl b/html/console.html similarity index 61% rename from html/console.tpl rename to html/console.html index f45192a..32683a3 100644 --- a/html/console.tpl +++ b/html/console.html @@ -17,36 +17,12 @@ - diff --git a/html/favicon.ico b/html/favicon.ico index 75c5ea0..ea4eca1 100755 Binary files a/html/favicon.ico and b/html/favicon.ico differ diff --git a/html/head- b/html/head- new file mode 100644 index 0000000..12a938f --- /dev/null +++ b/html/head- @@ -0,0 +1,10 @@ + + + esp-link + + + + + + +
diff --git a/html/head.tpl b/html/head.tpl deleted file mode 100644 index f7ceaf9..0000000 --- a/html/head.tpl +++ /dev/null @@ -1,25 +0,0 @@ - - - esp-link - - - - - - -
- -
- - -
- - - - diff --git a/html/home.tpl b/html/home.html similarity index 63% rename from html/home.tpl rename to html/home.html index e9c1e22..e3efe61 100644 --- a/html/home.tpl +++ b/html/home.html @@ -48,60 +48,10 @@
- diff --git a/html/log.tpl b/html/log.html similarity index 93% rename from html/log.tpl rename to html/log.html index 70e5f2b..8dc88fe 100644 --- a/html/log.tpl +++ b/html/log.html @@ -20,17 +20,16 @@ - diff --git a/html/style.css b/html/style.css index ac3ae6a..6539ac2 100644 --- a/html/style.css +++ b/html/style.css @@ -23,11 +23,16 @@ a:hover { border: 0px solid #000000; } +@media screen and (max-width: 1023px) { + .pure-u-12-24 { + width: 100%; + } +} + /* wifi AP selection form */ #aps label div { display: inline-block; margin: 0em 0.2em; - vertical-align: top; } fieldset.radios { border: none; @@ -287,6 +292,8 @@ pre.console a { } } +/*===== spinners and notification messages */ + #messages { position: absolute; left: 25%; diff --git a/html/ui.js b/html/ui.js index 56d2f5f..cc8befe 100644 --- a/html/ui.js +++ b/html/ui.js @@ -1,14 +1,26 @@ -// fill out menu items -(function() { - html = ""; - for (var i=0; i" + menu[i] + ""); +//===== 140medley.min.js with mods + +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){}}; +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) { el.className += ' ' + cl; @@ -26,66 +38,6 @@ function toggleClass(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 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); } +//===== main menu, header spinner and notification boxes + +onLoad(function() { + var l = $("#layout"); + var o = l.childNodes[0]; + // spinner + l.insertBefore(m(''), o); + // notification boxes + l.insertBefore(m( + '
'), o); + // menu hamburger button + var ml = m(''); + l.insertBefore(ml, o); + // menu left-pane + var mm = m( + '\ + '); + 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[i] + ""); + } + $("#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( + ' '+baud+'')); + + $("#"+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('"); + 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 +
+

Wifi Configuration

+
+ +
+
+
+

Wifi State

+ + + + + + + + + + + +
+
+

Wifi Association

+ +
+ To connect to a WiFi network, please select one of the detected networks, + enter the password, and hit the connect button... + +
Scanning...
+ + + +
+
+
+
+
+

Special Settings

+
+ Special settings, use with care! If the Static IP field is empty + then DHCP will be used, else DHCP will be off. + + + + + + + + + +
+
+
+
+ + + + + + + diff --git a/html/wifi/wifi.tpl b/html/wifi/wifi.js similarity index 62% rename from html/wifi/wifi.tpl rename to html/wifi/wifi.js index 8aba69d..9e0cf5c 100644 --- a/html/wifi/wifi.tpl +++ b/html/wifi/wifi.js @@ -1,96 +1,35 @@ -
-
-

Wifi Configuration

-
- -
-
-
-

Wifi State

- - - - - - - - - - - -
-
-

Wifi Association

- -
- To connect to a WiFi network, please select one of the detected networks, - enter the password, and hit the connect button... - -
Scanning...
- - - -
-
-
-
-
-

Special Settings

-
- Special settings, use with care! If the Static IP field is empty - then DHCP will be used, else DHCP will be off. - - - - - - - - - -
-
-
-
-
- - - - - +console.log("wifi.js done");