lots of UI tweaks

pull/25/head
Thorsten von Eicken 10 years ago
parent ec34d9fcc5
commit 49a2d01f97
  1. 2
      BOARDS.md
  2. 6
      Makefile
  3. 6
      espfs/mkespfsimage/main.c
  4. 2
      html/console.tpl
  5. 5
      html/head.tpl
  6. 17
      html/help.tpl
  7. 19
      html/home.tpl
  8. BIN
      html/jl-200x55.png
  9. BIN
      html/jl-400x110.png-
  10. 2
      html/log.tpl
  11. 54
      html/style.css
  12. 4
      html/wifi/wifi.tpl
  13. 3
      user/cgi.c
  14. 2
      user/cgipins.c
  15. 4
      user/log.c

@ -1,4 +1,4 @@
Boards with ESP-Link
Boards with esp-link
====================
This readme provides instructions for PCBs that I've made that are designed for esp-link.

@ -189,7 +189,7 @@ $1/%.o: %.c
$(Q) $(CC) $(INCDIR) $(MODULE_INCDIR) $(EXTRA_INCDIR) $(SDK_INCDIR) $(CFLAGS) -c $$< -o $$@
endef
.PHONY: all checkdirs clean webpages.espfs
.PHONY: all checkdirs clean webpages.espfs wiflash
all: echo_version checkdirs $(FW_BASE) firmware/user1.bin firmware/user2.bin
@ -199,7 +199,8 @@ echo_version:
$(TARGET_OUT): $(APP_AR) $(LD_SCRIPT)
$(vecho) "LD $@"
$(Q) $(LD) -L$(SDK_LIBDIR) -T$(LD_SCRIPT) $(LDFLAGS) -Wl,--start-group $(LIBS) $(APP_AR) -Wl,--end-group -o $@
$(OBJDP) -x $(TARGET_OUT) | egrep '(espfs_img)'
@echo Dump: $(OBJDP) -x $(TARGET_OUT)
# $(OBJDP) -x $(TARGET_OUT) | egrep '(espfs_img)'
$(USER1_OUT): $(APP_AR) $(LD_SCRIPT1)
$(vecho) "LD $@"
@ -269,6 +270,7 @@ ifeq ("$(COMPRESS_W_YUI)","yes")
$(Q) cd html_compressed; find | ../espfs/mkespfsimage/mkespfsimage > ../build/espfs.img; cd ..;
else
$(Q) cd html; find . \! -name \*- | ../espfs/mkespfsimage/mkespfsimage > ../build/espfs.img; cd ..
$(Q) ls -sl build/espfs.img
endif
$(Q) cd build; $(OBJCP) -I binary -O elf32-xtensa-le -B xtensa --rename-section .data=.espfs \
espfs.img espfs_img.o; cd ..

@ -20,7 +20,7 @@
//Gzip
#ifdef ESPFS_GZIP
// If compiler complains about missing header, try running "sudo apt-get install zlib1g-dev"
// If compiler complains about missing header, try running "sudo apt-get install zlib1g-dev"
// to install missing package.
#include <zlib.h>
#endif
@ -229,7 +229,7 @@ int handleFile(int f, char *name, int compression, int level, char **compName) {
h.nameLen=htoxs(h.nameLen);
h.fileLenComp=htoxl(csize);
h.fileLenDecomp=htoxl(size);
write(1, &h, sizeof(EspFsHeader));
write(1, name, nameLen);
while (nameLen&3) {
@ -309,7 +309,7 @@ int main(int argc, char **argv) {
#ifdef ESPFS_GZIP
if (gzipExtensions == NULL) {
parseGzipExtensions(strdup("html,css,js"));
parseGzipExtensions(strdup("html,css,js,ico"));
}
#endif

@ -1,6 +1,6 @@
<div id="main">
<div class="header">
<h1><span class="esp">esp</span> link - Microcontroller Console</h1>
<h1>Microcontroller Console</h1>
</div>
<div class="content">

@ -1,6 +1,6 @@
<!doctype html>
<html><head>
<title>ESP Link</title>
<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">
@ -18,7 +18,8 @@
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="/">esp-link</a>
<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>

@ -1,17 +0,0 @@
<div id="main">
<div class="header">
<h1><span class="esp">esp</span> link - Help</h1>
</div>
<div class="content">
<p>Please refer to
<a href="https://github.com/jeelabs/esp-link/blob/master/README.md">the online README</a>
for up-to-date help.</p>
</div>
</div>
</div>
<script src="ui.js"></script>
</body></html>

@ -1,15 +1,28 @@
<div id="main">
<div class="header">
<h1><span class="esp">esp</span> link</h1>
<div><img src="jl-200x55.png" height="55"></div>
<h1 style="margin-top:0"><span class="esp">esp</span>-link</h1>
<h2 id="version"></h2>
</div>
<div class="content">
<div class="pure-g">
<div class="pure-u-24-24"><div class="card">
<p>The ESP Link bridges the ESP8266 serial port to Wifi and it can
<p>The JeeLabs esp-link firmware bridges the ESP8266 serial port to Wifi and can
program microcontrollers over the serial port, in particular Arduinos, AVRs, and
NXP's LPC800-series ARM processors.</p>
NXP's LPC800 and other ARM processors.</p>
<p style="margin-bottom:0;">Program an Arduino/AVR using avrdude using a command
line similar to:
<div class="tt">/home/arduino-1.0.5/hardware/tools/avrdude \<br>
&nbsp;&nbsp;-DV -patmega328p -Pnet:esp-link.local:23 -carduino -b115200 -U \<br>
&nbsp;&nbsp;-C /home/arduino-1.0.5/hardware/tools/avrdude.conf flash:w:my_sketch.hex:i
</div>
where <tt>-Pnet:esp-link.local:23</tt> tells avrdude to connect to port 23 of esp-link.
You can substitute the IP address of your esp-link for esp-link.local if necessary.</p>
<p>Please refer to
<a href="https://github.com/jeelabs/esp-link/blob/master/README.md">the online README</a>
for up-to-date help and to the forthcoming
<a href="http://jeelabs.org">JeeLabs blog</a> for an intro to the codebase.</p>
</div></div>
</div>
<div class="pure-g">

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

@ -1,6 +1,6 @@
<div id="main">
<div class="header">
<h1><span class="esp">esp</span> link - Debug Log</h1>
<h1>Debug Log</h1>
</div>
<div class="content">

@ -6,6 +6,12 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
body {
color: #777;
}
a:visited, a:link {
color: #009;
}
a:hover {
color: #00c;
}
.card {
background-color: #eee;
@ -74,6 +80,16 @@ fieldset fields {
left: 150px;
}
div.tt {
font-family: monospace;
font-size: 120%;
color: #390;
background-color: #ddd;
padding: 2px;
margin: 2px 0;
line-height: 100%;
}
/* The content `<div>` */
.content {
margin: 0 auto;
@ -133,59 +149,57 @@ pre.console a {
display: inline-block;
}
/* The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
* appears on the left side of the page */
#menu {
margin-left: -150px; /* "#menu" width */
margin-left: -150px;
width: 150px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
z-index: 1000;
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 `<li>` */
#menu .pure-menu-selected, #menu .pure-menu-heading {
background: #c60;
background: #9d1414;
}
/* This styles a link within a selected menu item `<li>` */
#menu .pure-menu-selected a {
color: #fff;
}
/* This styles the menu heading */
#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
text-transform: none;
}
#menu .pure-menu-heading img {
vertical-align: middle;
top: -1px;
position: relative;
}
#menu .pure-menu-item {
@ -194,15 +208,14 @@ pre.console a {
/* -- 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 */
display: block;
top: 0;
left: 0; /* "#menu width" */
left: 0;
background: #000;
background: rgba(0,0,0,0.7);
font-size: 10px; /* change this value to increase/decrease button size */
font-size: 10px;
z-index: 10;
width: 2em;
height: auto;
@ -236,7 +249,6 @@ pre.console a {
/* -- 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;
@ -244,7 +256,7 @@ pre.console a {
}
#layout {
padding-left: 150px; /* left col width "#menu" */
padding-left: 150px;
left: 0;
}
#menu {
@ -263,12 +275,6 @@ pre.console a {
}
@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;

@ -1,6 +1,6 @@
<div id="main">
<div class="header">
<h1><span class="esp">esp</span> link - Wifi Configuration</h1>
<h1>Wifi Configuration</h1>
</div>
<div class="content pure-g">
@ -147,7 +147,7 @@ function getStatus() {
showWifiInfo(data);
blockScan = 0;
var txt2 = "ESP Link will switch to STA-only mode in a few seconds";
var txt2 = "esp-link will switch to STA-only mode in a few seconds";
window.setTimeout(function() { showNotification(txt2); }, 4000);
$("#reconnect").removeAttribute("hidden");

@ -54,8 +54,7 @@ void ICACHE_FLASH_ATTR printGlobalJSON(HttpdConnData *connData) {
httpdSend(connData,
"<script type=\"text/javascript\">\n"
"var menu = [\"Home\", \"/home.tpl\", \"Wifi\", \"/wifi/wifi.tpl\","
"\"\xC2\xB5" "C Console\", \"/console.tpl\", \"Debug log\", \"/log.tpl\", "
"\"Help\", \"/help.tpl\" ];\n", -1);
"\"\xC2\xB5" "C Console\", \"/console.tpl\", \"Debug log\", \"/log.tpl\" ];\n", -1);
# define VERS_STR_STR(V) #V
# define VERS_STR(V) VERS_STR_STR(V)
httpdSend(connData, "version = \"" VERS_STR(VERSION) "\";\n", -1);

@ -11,7 +11,7 @@ static char *map_names[] = {
"esp-bridge", "jn-esp-v2", "esp-01(AVR)", "esp-01(ARM)", "esp-br-rev",
};
static char* map_func[] = { "reset", "isp", "conn_led", "ser_led" };
static int8_t map_asn[][5] = {
static int8_t map_asn[][4] = {
{ 12, 13, 0, 14 }, // esp-bridge
{ 12, 13, 0, 2 }, // jn-esp-v2
{ 0, -1, 2, -1 }, // esp-01(AVR)

@ -18,9 +18,9 @@ static bool log_newline; // at start of a new line
void ICACHE_FLASH_ATTR
log_uart(bool enable) {
if (!enable && !log_no_uart) {
//os_printf("Turning OFF uart log\n");
os_printf("Turning OFF uart log\n");
os_delay_us(4*1000L); // time for uart to flush
//log_no_uart = !enable;
log_no_uart = !enable;
} else if (enable && log_no_uart) {
log_no_uart = !enable;
os_printf("Turning ON uart log\n");

Loading…
Cancel
Save