diff --git a/Makefile b/Makefile
index 1930098..8c9c450 100644
--- a/Makefile
+++ b/Makefile
@@ -1,30 +1,33 @@
# --------------- esphttpd config options ---------------
-# If GZIP_COMPRESSION is set to "yes" then the static css, js, and html files will be compressed with gzip before added to the espfs image
-# and will be served with gzip Content-Encoding header.
-# This could speed up the downloading of these files, but might break compatibility with older web browsers not supporting gzip encoding
-# because Accept-Encoding is simply ignored. Enable this option if you have large static files to serve (for e.g. JQuery, Twitter bootstrap)
-# By default only js, css and html files are compressed.
-# If you have text based static files with different extensions what you want to serve compressed then you will need to add the extension to the following places:
+# If GZIP_COMPRESSION is set to "yes" then the static css, js, and html files will be compressed
+# with gzip before added to the espfs image and will be served with gzip Content-Encoding header.
+# This could speed up the downloading of these files, but might break compatibility with older
+# web browsers not supporting gzip encoding because Accept-Encoding is simply ignored.
+# Enable this option if you have large static files to serve (for e.g. JQuery, Twitter bootstrap)
+# By default only js, css and html files are compressed using heatshrink.
+# If you have text based static files with different extensions what you want to serve compressed
+# then you will need to add the extension to the following places:
# - Add the extension to this Makefile at the webpages.espfs target to the find command
# - Add the extension to the gzippedFileTypes array in the user/httpd.c file
#
-# Adding JPG or PNG files (and any other compressed formats) is not recommended, because GZIP compression does not works effectively on compressed files.
+# Adding JPG or PNG files (and any other compressed formats) is not recommended, because GZIP
+# compression does not work effectively on compressed files.
#Static gzipping is disabled by default.
-GZIP_COMPRESSION ?= no
+GZIP_COMPRESSION ?= yes
-# If COMPRESS_W_YUI is set to "yes" then the static css and js files will be compressed with yui-compressor
-# This option works only when GZIP_COMPRESSION is set to "yes"
+# If COMPRESS_W_YUI is set to "yes" then the static css and js files will be compressed with
+# yui-compressor. This option works only when GZIP_COMPRESSION is set to "yes".
# http://yui.github.io/yuicompressor/
#Disabled by default.
COMPRESS_W_YUI ?= no
YUI-COMPRESSOR ?= /usr/bin/yui-compressor
-#If USE_HEATSHRINK is set to "yes" then the espfs files will be compressed with Heatshrink and decompressed
-#on the fly while reading the file. Because the decompression is done in the esp8266, it does not require
-#any support in the browser.
+# If USE_HEATSHRINK is set to "yes" then the espfs files will be compressed with Heatshrink and
+# decompressed on the fly while reading the file.
+# Because the decompression is done in the esp8266, it does not require any support in the browser.
USE_HEATSHRINK ?= yes
# -------------- End of esphttpd config options -------------
diff --git a/html/console.tpl b/html/console.tpl
index 57f8aa8..029f800 100644
--- a/html/console.tpl
+++ b/html/console.tpl
@@ -1,14 +1,19 @@
-MCU Console - ESP Link
-
-
-
-
-
%topnav%
-
esp link - Microcontroller Console
-
The Microcontroller console shows the last 1024 characters received from UART0, to which
-a microcontroller is tpically attached.
-
+%head%
+
+
+
+
esp link - Microcontroller Console
+
+
+
+
The Microcontroller console shows the last 1024 characters received from UART0, to which
+ a microcontroller is typically attached.
+
%console%
+
+
+
+
diff --git a/html/head.tpl b/html/head.tpl
new file mode 100644
index 0000000..e781653
--- /dev/null
+++ b/html/head.tpl
@@ -0,0 +1,16 @@
+
+ ESP Link
+
+
+
+
+
+
+%head%
-The ESP Link functions in two wifi modes: Station+AccessPoint (STA+AP) and Station (STA).
+
+
+
esp link - Help
+
+
+
+
+
This text is somewhat out of date, please refer to
+the online README
+for the time being.
+
The ESP Link functions in two wifi modes: Station+AccessPoint (STA+AP) and Station (STA).
In the STA+AP mode it presents a network called esp8266 that you can connect to using the
password jeelabs8266. This mode is intended for initial configuration, but it is
fully functional. Typically the easiest way to connect to the esp8266 network is using a phone,
@@ -27,23 +30,25 @@ fresh IP the next time it starts up. On many Wifi routers you can enter a fixed
the ESP Link's hardware MAC address to a static IP address so it always gets the same IP
address. This is the recommended method of operation.
-
Using your ESP Serial Programmer
-The ESP Programmer can used in several distinct ways:
+
Using your esp-link
+
+The esp-link can used in several distinct ways:
as a transparent bridge between TCP port 23 and the serial port
as a web console to see input from the serial port
as an Arduino, AVR, or ARM processor programmer using serial-over-TCP
as an Arduino, AVR, or ARM processor programmer by uploading HEX files (not yet functional)
+
-
Transparent bridge
+
Transparent bridge
The ESP accepts TCP connections to port 23 and "connects" through to the serial port.
Up to 5 simultaneous TCP connections are supported and characters coming in on the serial
port get passed through to all connections. Characters coming in on a connection get copied
through to the serial port.
When using Linux a simple way to use this is nc esp8266 23
-
Programmer using serial-over-TCP
+
Programmer using serial-over-TCP
By hooking up the ESP's GPIO lines to the reset line of an Arduino (or AVR in general) that is
preloaded with the Optiboot bootloader/flasher it is possible to reprogram these processors over
Wifi. The way is works is that the ESP toggles the reset line each time a connection is established
@@ -55,16 +60,21 @@ Serial Programmer (an IP address could have been used instead).
ARM's reset and ISP lines. The ESP Serial Programmer issues the correct reset/isp pulses to put
the ARM chip into firmware programming mode.
-
Web Console
+
Web Console
The output of an attached Arduino/AVR/ARM can also be monitored via the console web page.
When connecting, it shows the most recent 10KB of characters received on the serial port and
then continues to print everything that comes in on the serial port. Eventually the page refreshes
when it gets very long. (Yes, this could be improved with some javascript...)
-
Programmer using HEX upload
+
Programmer using HEX upload
(Not yet functional) Instead of using the wifi-to-serial bridge to program
microcontrollers it is often faster to upload the HEX file to the ESP Serial Programmer and
have it perform the actual programming protocol.
-The ESP Link connects the ESP's serial port to Wifi and it can
-program microcontrollers over the serial port, in particular Arduinos, AVRs, and
-NXP's LPC800-series ARM processors.
+%head%
+
+
+
+
esp link
+
+
+
+
The ESP Link connects the ESP's serial port to Wifi and it can
+ program microcontrollers over the serial port, in particular Arduinos, AVRs, and
+ NXP's LPC800-series ARM processors.
` that contains the `.pure-menu` that
+ * appears on the left side of the page */
+#menu {
+ margin-left: -150px; /* "#menu" width */
+ width: 150px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ z-index: 1000; /* so the menu or its navicon stays above all content */
+ background: #191818;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+/* All anchors inside the menu should be styled like this */
+#menu a {
+ color: #999;
+ border: none;
+ padding: 0.6em 0 0.6em 0.6em;
+}
+
+/* Remove all background/borders, since we are applying them to #menu */
+#menu .pure-menu, #menu .pure-menu ul {
+ border: none;
+ background: transparent;
+}
+
+/* Add that light border to separate items into groups */
+#menu .pure-menu ul, #menu .pure-menu .menu-item-divided {
+ border-top: 1px solid #333;
+}
+
+/* Change color of the anchor links on hover/focus */
+#menu .pure-menu li a:hover, #menu .pure-menu li a:focus {
+ background: #333;
+}
+
+/* This styles the selected menu item `
` */
+#menu .pure-menu-selected, #menu .pure-menu-heading {
+ background: #c60;
+}
+
+/* This styles a link within a selected menu item `
` */
+#menu .pure-menu-selected a {
+ color: #fff;
+}
+
+/* This styles the menu heading */
+#menu .pure-menu-heading {
+ font-size: 110%;
+ color: #fff;
+ margin: 0;
+}
+
+#menu .pure-menu-item {
+ height:2em;
+}
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
+/* `.menu-link` represents the responsive menu toggle that shows/hides on small screens */
+.menu-link {
+ position: fixed;
+ display: block; /* show this only on small screens */
+ top: 0;
+ left: 0; /* "#menu width" */
+ background: #000;
+ background: rgba(0,0,0,0.7);
+ font-size: 10px; /* change this value to increase/decrease button size */
+ z-index: 10;
+ width: 2em;
+ height: auto;
+ padding: 2.1em 1.6em;
+}
+
+.menu-link:hover, .menu-link:focus {
+ background: #000;
+}
+
+.menu-link span {
+ position: relative;
+ display: block;
+}
+
+.menu-link span, .menu-link span:before, .menu-link span:after {
+ background-color: #fff;
+ width: 100%;
+ height: 0.2em;
+}
+
+.menu-link span:before, .menu-link span:after {
+ position: absolute;
+ margin-top: -0.6em;
+ content: " ";
+}
+
+.menu-link span:after {
+ margin-top: 0.6em;
+}
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+/* Hides the menu at `48em`, but modify this based on your app's needs */
+@media (min-width: 48em) {
+ .header, .content {
+ padding-left: 2em;
+ padding-right: 2em;
+ }
+
+ #layout {
+ padding-left: 150px; /* left col width "#menu" */
+ left: 0;
+ }
+ #menu {
+ left: 150px;
+ }
+
+ .menu-link {
+ position: fixed;
+ left: 150px;
+ display: none;
+ }
+
+ #layout.active .menu-link {
+ left: 150px;
+ }
+}
+
+@media (max-width: 48em) {
+ /* Only apply this when the window is small. Otherwise, the following
+ case results in extra padding on the left:
+ * Make the window small.
+ * Tap the menu to trigger the active state.
+ * Make the window large again.
+ */
+ #layout.active {
+ position: relative;
+ left: 150px;
+ }
+}
+
diff --git a/html/ui.js b/html/ui.js
new file mode 100644
index 0000000..acc38a0
--- /dev/null
+++ b/html/ui.js
@@ -0,0 +1,35 @@
+(function (window, document) {
+
+ var layout = document.getElementById('layout'),
+ menu = document.getElementById('menu'),
+ menuLink = document.getElementById('menuLink');
+
+ function toggleClass(element, className) {
+ var classes = element.className.split(/\s+/),
+ length = classes.length,
+ i = 0;
+
+ for(; i < length; i++) {
+ if (classes[i] === className) {
+ classes.splice(i, 1);
+ break;
+ }
+ }
+ // The className is not found
+ if (length === classes.length) {
+ classes.push(className);
+ }
+
+ element.className = classes.join(' ');
+ }
+
+ menuLink.onclick = function (e) {
+ var active = 'active';
+
+ e.preventDefault();
+ toggleClass(layout, active);
+ toggleClass(menu, active);
+ toggleClass(menuLink, active);
+ };
+
+}(this, this.document));
diff --git a/html/wifi/wifi.tpl b/html/wifi/wifi.tpl
index a230371..03fcb8b 100644
--- a/html/wifi/wifi.tpl
+++ b/html/wifi/wifi.tpl
@@ -1,97 +1,103 @@
-WiFi connection - ESP Link
-
-
+%head%
+
+