Skip to content

Commit

Permalink
switch layout to purecss
Browse files Browse the repository at this point in the history
  • Loading branch information
@tve
tve committed May 26, 2015
1 parent 8bb8e11 commit 7ade39d
Show file tree
Hide file tree
Showing 15 changed files with 486 additions and 187 deletions.
29 changes: 16 additions & 13 deletions Makefile
View file
Original file line number Diff line number Diff line change
@@ -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 -------------
Expand Down
25 changes: 15 additions & 10 deletions html/console.tpl
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
<html><head><title>MCU Console - 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 - Microcontroller Console</h1>
<p>The Microcontroller console shows the last 1024 characters received from UART0, to which
a microcontroller is tpically attached.</p>
<pre class="console">
%head%

<div id="main">
<div class="header">
<h1><span class="esp">esp</span> link - Microcontroller Console</h1>
</div>

<div class="content">
<p>The Microcontroller console shows the last 1024 characters received from UART0, to which
a microcontroller is typically attached.</p>
<pre class="console">
%console%
</pre>
</div>
</div>
</div>

<script src="ui.js"></script>
</body></html>
16 changes: 16 additions & 0 deletions html/head.tpl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<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">
</head>
<body>
<div id="layout">
<a href="#menu" id="menuLink" class="menu-link"><span></span></a>

<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="/">esp-link</a>
<ul class="pure-menu-list">%topnav%</ul>
</div>
</div>
40 changes: 25 additions & 15 deletions html/help.tpl
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<html>
<head><title>Help - 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 - Help</h1>
%head%

The ESP Link functions in two wifi modes: Station+AccessPoint (STA+AP) and Station (STA).
<div id="main">
<div class="header">
<h1><span class="esp">esp</span> link - Help</h1>
</div>

<div class="content">

<p>This text is somewhat out of date, please refer to
<a href="https://github.com/jeelabs/esp-link/blob/master/README.md">the online README</a>
for the time being.</p>
<p>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,
Expand All @@ -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.</p>

<h1>Using your ESP Serial Programmer</h1>
The ESP Programmer can used in several distinct ways:
<h2 class="content-subhead">Using your esp-link</h2>
<p>
The esp-link can used in several distinct ways:
<ul>
<li>as a transparent bridge between TCP port 23 and the serial port</li>
<li>as a web console to see input from the serial port</li>
<li>as an Arduino, AVR, or ARM processor programmer using serial-over-TCP</li>
<li>as an Arduino, AVR, or ARM processor programmer by uploading HEX files (not yet functional)</li>
</ul>
</p>

<h2>Transparent bridge</h2>
<h2 class="content-subhead">Transparent bridge</h2>
<p>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.</p>
<p>When using Linux a simple way to use this is <tt>nc esp8266 23</tt></p>

<h2>Programmer using serial-over-TCP</h2>
<h2 class="content-subhead">Programmer using serial-over-TCP</h2>
<p>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
Expand All @@ -55,16 +60,21 @@ Serial Programmer (an IP address could have been used instead).</p>
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.</p>

<h2>Web Console</h2>
<h2 class="content-subhead">Web Console</h2>
<p>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...)</p>

<h2>Programmer using HEX upload</h2>
<h2 class="content-subhead">Programmer using HEX upload</h2>
<p><i>(Not yet functional)</i> 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.</p>


</div>
</div>
</div>

<script src="ui.js"></script>
</body></html>
27 changes: 15 additions & 12 deletions html/index.tpl
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<html>
<head><title>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</h1>
<p>
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.</p>
%head%

<div id="main">
<div class="header">
<h1><span class="esp">esp</span> link</h1>
</div>

<div class="content">
<p>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.</p>
</div>
</div>
</div>

<script src="ui.js"></script>
</body></html>
25 changes: 15 additions & 10 deletions html/log.tpl
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
<html><head><title>Log - 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 - Debug Log</h1>
<p>The debug log shows the 1024 last characters printed by the esp-link software itself to
its own debug log.</p>
<pre class="console">
%head%

<div id="main">
<div class="header">
<h1><span class="esp">esp</span> link - Debug Log</h1>
</div>

<div class="content">
<p>The debug log shows the 1024 last characters printed by the esp-link software itself to
its own debug log.</p>
<pre class="console">
%log%
</pre>
</div>
</div>
</div>

<script src="ui.js"></script>
</body></html>
11 changes: 11 additions & 0 deletions html/pure-min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 7ade39d

Please sign in to comment.