version bump

Implemented cursor wrap control codes e[?7h and l
send code 0x18 on restart
2017-03-02 00:52:31 +01:00 · 2017-03-02 00:06:45 +01:00 · 2017-03-01 23:57:07 +01:00 · 2017-01-30 01:22:16 +01:00 · 2017-01-30 01:10:10 +01:00 · 2017-01-29 20:08:58 +01:00
37 changed files with 899 additions and 2355 deletions
@@ -1,3 +1,4 @@
+html/
 build/
 firmware/
 espfs/mkespfsimage/*.o
@@ -65,7 +65,7 @@ LIBS += esphttpd
 # compiler flags using during compilation of source files
 CFLAGS		= -Os -ggdb -std=gnu99 -Werror -Wpointer-arith -Wundef -Wall -Wl,-EL -fno-inline-functions \
 		-nostdlib -mlongcalls -mtext-section-literals  -D__ets__ -DICACHE_FLASH \
-		-Wno-address -Wno-unused
+		-Wno-address -Wno-unused -DHTTPD_MAX_BACKLOG_SIZE=8192

 # linker flags used to generate the main object file
 LDFLAGS		= -nostdlib -Wl,--no-check-sections -u call_user_start -Wl,-static
@@ -44,12 +44,9 @@ The screen size is adjustable up to 25x80 (via a special control sequence) and u
  
 - To resize the screen, send `\e]W<rows>;<cols>\a` (it's an OSC code, terminated by ST).

- Buttons pressed in the browser UI send ASCII codes 1..5. Mouse clicks also send events to the server, 
-  but currently don't generate any output in the terminal, I still hadn't decided on the best encoding.
+- Buttons pressed in the browser UI send ASCII codes 1..5. Mouse clicks are sent as `\e[<row>;<col>M`.

- By tapping the header on the terminal page, you'll open the WiFi config page. It's in essence the 
-  esphttpd's wifi config page, but re-styled and much improved. You can set AP SSID, channel, see the IP
-  address etc right there.
+- There's a built-in WiFi config page and a Help page with a list of all supported ANSI sequences etc.

 ## Development

@@ -2,6 +2,11 @@

 echo "-- Preparing WWW files --"

+[[ -e html ]] && rm -r html
+mkdir -p html/img
+mkdir -p html/js
+mkdir -p html/css
+
 # Join scripts
 DD=html_orig/jssrc
 cat $DD/chibi.js \
@@ -17,6 +22,9 @@ sass --sourcemap=none html_orig/sass/app.scss html_orig/css/app.css
 cp html_orig/css/app.css    html/css/app.css
 cp html_orig/term.html      html/term.tpl
 cp html_orig/wifi.html      html/wifi.tpl
+cp html_orig/about.html     html/about.tpl
+cp html_orig/help.html      html/help.tpl
 cp html_orig/wifi_conn.html html/wifi_conn.tpl
 cp html_orig/img/loader.gif html/img/loader.gif
+cp html_orig/img/cvut.svg    html/img/cvut.svg
 cp html_orig/favicon.ico    html/favicon.ico
@@ -1,703 +0,0 @@
-/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS and IE text size adjust after device orientation change,
- *    without disabling user zoom.
- */
-*, *:before, *:after {
-  box-sizing: border-box; }
-
-html {
-  font-family: sans-serif;
-  /* 1 */
-  -ms-text-size-adjust: 100%;
-  /* 2 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */ }
-
-/**
- * Remove default margin.
- */
-body {
-  margin: 0; }
-
-/* HTML5 display definitions
-   ========================================================================== */
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-figure,
-nav
- {
-  display: block; }
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-canvas,
-progress
- {
-  display: inline-block;
-  /* 1 */
-  vertical-align: baseline;
-  /* 2 */ }
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
- */
-[hidden]
- {
-  display: none; }
-
-/* Links
-   ========================================================================== */
-/**
- * Remove the gray background color from active links in IE 10.
- */
-a {
-  background-color: transparent; }
-
-/**
- * Improve readability of focused elements when they are also in an
- * active/hover state.
- */
-a:active,
-a:hover {
-  outline: 0; }
-
-/* Text-level semantics
-   ========================================================================== */
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-b
- {
-  font-weight: bold; }
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0; }
-
-h2 {
-  font-size: 2em;
-  margin: 0.67em 0; }
-
-/**
- * Address styling not present in IE 8/9.
- */
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-small {
-  font-size: 80%; }
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline; }
-
-sup {
-  top: -0.5em; }
-
-sub {
-  bottom: -0.25em; }
-
-/* Embedded content
-   ========================================================================== */
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-img {
-  border: 0; }
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-svg:not(:root) {
-  overflow: hidden; }
-
-/* Grouping content
-   ========================================================================== */
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-/**
- * Address differences between Firefox and other browsers.
- */
-hr {
-  box-sizing: content-box;
-  height: 0; }
-
-/**
- * Contain overflow in all browsers.
- */
-pre {
-  overflow: auto; }
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-code,
-pre
- {
-  font-family: monospace;
-  font-size: 1em; }
-
-/* Forms
-   ========================================================================== */
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-button,
-input,
-select,
-textarea {
-  color: inherit;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-  margin: 0;
-  /* 3 */ }
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-button {
-  overflow: visible; }
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-button,
-select {
-  text-transform: none; }
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-button,
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  /* 2 */
-  cursor: pointer;
-  /* 3 */ }
-
-/**
- * Re-set default cursor for disabled elements.
- */
-button[disabled],
-html input[disabled] {
-  cursor: default; }
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0; }
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-input {
-  line-height: normal; }
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  /* 1 */
-  padding: 0;
-  /* 2 */ }
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
- */
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-/**
- * Define consistent border, margin, and padding.
- */
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-legend {
-  border: 0;
-  /* 1 */
-  padding: 0;
-  /* 2 */ }
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-textarea {
-  overflow: auto; }
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-/* Tables
-   ========================================================================== */
-/**
- * Remove most spacing between table cells.
- */
-table {
-  border-collapse: collapse;
-  border-spacing: 0; }
-
-td,
-th {
-  padding: 0; }
-
-html {
-  box-sizing: border-box; }
-
-*, *::after, *::before {
-  box-sizing: inherit; }
-
-.hidden {
-  display: none !important; }
-
-[onclick] {
-  cursor: pointer; }
-
-.Modal {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: opacity .5s;
-  background: rgba(0, 0, 0, 0.65);
-  opacity: 0; }
-  .Modal.visible {
-    opacity: 1; }
-  .Modal.hidden {
-    display: none; }
-
-.Dialog {
-  margin: 0.61805rem;
-  padding: 1rem;
-  overflow: hidden;
-  max-width: 100%;
-  max-height: 100%;
-  flex: 0 1 30rem;
-  background: #1c1c1e;
-  border-left: 6px solid #2972ba;
-  border-right: 6px solid #2972ba;
-  box-shadow: 0 0 2px 0 #434349, 0 0 6px 0 black;
-  border-radius: 6px; }
-  .Dialog h1, .Dialog h2 {
-    margin-top: 0; }
-  .Dialog p:last-child {
-    margin-bottom: 0; }
-
-/*
-// "toast"
-.NotifyMsg {
-	position: fixed;
-	bottom: dist(2);
-	padding: dist(-1) dist(0);
-
-	// center horizontally
-	left: 50%;
-	@include translate(-50%,0);
-	// hack to remove blur in chrome
-	-webkit-font-smoothing: subpixel-antialiased;
-	-webkit-transform: translateZ(0) scale(1.0, 1.0);
-
-	background: #37a349;
-	&.error {
-		background: #d03e42;
-	}
-
-	color: white;
-	text-shadow: 0 0 2px black;
-	box-shadow: 0 0 6px 0 rgba(black, .6);
-	border-radius: 5px;
-
-	max-width: 80%;
-
-	@include media($phone) {
-		width: calc(100% - 1rem);
-	}
-
-	transition: opacity .5s;
-	opacity: 0;
-	&.visible { opacity: 1 }
-	&.hidden { display: none }
-}
-*/
-html {
-  font-family: Arial, sans-serif;
-  color: #D0D0D0;
-  background: #131315; }
-
-html, body {
-  border: 0 none;
-  margin: 0;
-  padding: 0;
-  text-decoration: none;
-  width: 100%;
-  height: 100%;
-  overflow: hidden; }
-
-a, a:visited, a:link {
-  cursor: pointer;
-  color: #5abfff;
-  text-decoration: none; }
-
-a:hover {
-  color: #5abfff;
-  text-decoration: underline; }
-
-.Box {
-  display: block;
-  max-width: 900px;
-  margin-top: 1rem;
-  padding: 0.61805rem 1rem;
-  border-radius: 3px;
-  background-color: rgba(255, 255, 255, 0.07); }
-  @media screen and (max-width: 544px) {
-    .Box {
-      margin-top: 0.61805rem;
-      padding: 0.23608rem 0.38198rem; } }
-  .Box p:first-child {
-    margin-top: 0; }
-
-body {
-  position: relative;
-  padding: 1rem;
-  overflow-y: auto; }
-  @media screen and (max-width: 544px) {
-    body {
-      padding: 0.61805rem; } }
-  body > * {
-    margin-left: auto;
-    margin-right: auto; }
-
-h1, h2 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none; }
-
-h1 {
-  text-align: center;
-  font-size: 2.02729em;
-  margin-top: 0;
-  margin-bottom: 1rem; }
-  @media screen and (max-width: 544px) {
-    h1 {
-      font-size: 1.42383em;
-      margin-bottom: 0.61805rem; } }
-  @media screen and (min-width: 545px) and (max-width: 1000px) {
-    h1 {
-      font-size: 1.80203em; } }
-
-h2 {
-  font-size: 1.26563em;
-  margin-bottom: 0.61805rem; }
-  h2:first-child {
-    margin-top: 0; }
-
-td, th {
-  padding: 0.38198rem;
-  white-space: nowrap; }
-  @media screen and (max-width: 544px) {
-    td, th {
-      padding: 0.23608rem; } }
-
-tbody th {
-  text-align: right;
-  width: 130px;
-  color: white; }
-  @media screen and (max-width: 544px) {
-    tbody th {
-      width: auto; } }
-
-tbody td input[type="text"], tbody td input[type="number"] {
-  width: 10em; }
-  @media screen and (max-width: 544px) {
-    tbody td input[type="text"], tbody td input[type="number"] {
-      width: 8em; } }
-
-#loader {
-  position: absolute;
-  right: 1.618rem;
-  top: 1.618rem;
-  transition: opacity .2s;
-  opacity: 0; }
-  @media screen and (max-width: 544px) {
-    #loader {
-      top: 1rem;
-      right: 1rem; } }
-  #loader.show {
-    opacity: 1; }
-
-button, input[type=submit], .button {
-  text-align: center;
-  cursor: pointer;
-  display: inline-block;
-  border-radius: 2px;
-  padding: 0 0.6em;
-  border: 0 none;
-  outline: 0 none !important;
-  line-height: 1.8em;
-  font-size: 1.1em;
-  margin-bottom: 3px;
-  min-width: 5em;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.6);
-  background-color: #3983cd;
-  box-shadow: 0 3px 0 #265f98;
-  text-decoration: none !important; }
-  button:active, input[type=submit]:active, .button:active {
-    position: relative;
-    top: 2px; }
-  button.narrow, input[type=submit].narrow, .button.narrow {
-    min-width: initial; }
-  button, button:link, button:visited, input[type=submit], input[type=submit]:link, input[type=submit]:visited, .button, .button:link, .button:visited {
-    color: #FEFEFE; }
-  button:hover, button:active, button.active, button.selected, input[type=submit]:hover, input[type=submit]:active, input[type=submit].active, input[type=submit].selected, .button:hover, .button:active, .button.active, .button.selected {
-    background-color: #2076C6;
-    color: #FEFEFE; }
-  button:hover, button.selected, button.active, input[type=submit]:hover, input[type=submit].selected, input[type=submit].active, .button:hover, .button.selected, .button.active {
-    box-shadow: 0 3px 0 #154c80; }
-  button:active, input[type=submit]:active, .button:active {
-    box-shadow: 0 1px 0 #154c80; }
-
-button, input[type=submit], .button {
-  text-align: center;
-  cursor: pointer;
-  display: inline-block;
-  border-radius: 2px;
-  padding: 0 0.6em;
-  border: 0 none;
-  outline: 0 none !important;
-  line-height: 1.8em;
-  font-size: 1.1em;
-  margin-bottom: 3px;
-  min-width: 5em;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  text-shadow: 1.5px 1.5px 2px rgba(0, 0, 0, 0.6);
-  background-color: #3983cd;
-  box-shadow: 0 3px 0 #265f98;
-  text-decoration: none !important; }
-  button:active, input[type=submit]:active, .button:active {
-    position: relative;
-    top: 2px; }
-  button.narrow, input[type=submit].narrow, .button.narrow {
-    min-width: initial; }
-  button, button:link, button:visited, input[type=submit], input[type=submit]:link, input[type=submit]:visited, .button, .button:link, .button:visited {
-    color: #FEFEFE; }
-  button:hover, button:active, button.active, button.selected, input[type=submit]:hover, input[type=submit]:active, input[type=submit].active, input[type=submit].selected, .button:hover, .button:active, .button.active, .button.selected {
-    background-color: #2076C6;
-    color: #FEFEFE; }
-  button:hover, button.selected, button.active, input[type=submit]:hover, input[type=submit].selected, input[type=submit].active, .button:hover, .button.selected, .button.active {
-    box-shadow: 0 3px 0 #154c80; }
-  button:active, input[type=submit]:active, .button:active {
-    box-shadow: 0 1px 0 #154c80; }
-
-input[type="number"], input[type="password"], input[type="text"], textarea, select {
-  border: 0 none;
-  border-bottom: 2px solid #214e7a;
-  background-color: #303030;
-  color: white;
-  padding: 6px;
-  line-height: 1em;
-  outline: 0 none !important;
-  -moz-outline: 0 none !important;
-  font-weight: normal; }
-  input[type="number"]:focus, input[type="number"]:hover, input[type="password"]:focus, input[type="password"]:hover, input[type="text"]:focus, input[type="text"]:hover, textarea:focus, textarea:hover, select:focus, select:hover {
-    border-bottom-color: #2972ba; }
-
-#psk-modal form > *, #wificonfbox form > * {
-  margin-right: 0.38198rem; }
-  #psk-modal form > *:last-child, #wificonfbox form > *:last-child {
-    margin-right: 0; }
-
-#ap-list {
-  column-count: 3;
-  column-gap: 0;
-  margin: 0 -0.23608rem; }
-  @media screen and (min-width: 545px) and (max-width: 1000px) {
-    #ap-list {
-      column-count: 2; } }
-  @media screen and (max-width: 544px) {
-    #ap-list {
-      column-count: 1; } }
-
-#ap-loader, #ap-noscan {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 5px;
-  padding: 0.38198rem;
-  margin-bottom: 0.38198rem; }
-
-#ap-noscan {
-  font-weight: bold; }
-
-#ap-box {
-  padding-bottom: 0.38198rem; }
-
-#psk-modal form {
-  display: flex;
-  align-items: center;
-  margin: 0.38198rem; }
-  #psk-modal form input[type=password] {
-    min-width: 5rem; }
-
-.AP {
-  break-inside: avoid-column;
-  max-width: 500px;
-  padding: 0.23608rem; }
-  .AP.selected .inner {
-    background: #42a6f9 !important;
-    cursor: default;
-    top: 0 !important; }
-  .AP .inner {
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    position: relative;
-    border-radius: 3px;
-    color: #222;
-    background: #afafaf;
-    transition: background-color 0.5s;
-    display: flex; }
-    .AP .inner:active {
-      left: 0;
-      top: 1px; }
-    .AP .inner:hover {
-      background: white; }
-    .AP .inner > * {
-      padding: 0.61805rem;
-      white-space: nowrap;
-      word-wrap: normal; }
-    .AP .inner .rssi {
-      min-width: 2.5rem;
-      flex: 0 0 15%;
-      text-align: right; }
-      .AP .inner .rssi:after {
-        padding-left: 0.09018rem;
-        content: '%';
-        font-size: 0.88889em; }
-    .AP .inner .essid {
-      flex: 1 1 70%;
-      min-width: 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      font-weight: bold; }
-    .AP .inner .auth {
-      flex: 0 0 15%; }
-
-.page-term h1 {
-  font-size: 1.80203em; }
-  @media screen and (max-width: 544px) {
-    .page-term h1 {
-      font-size: 1.42383em; } }
-.page-term #screen {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  font-family: monospace;
-  font-size: 16pt;
-  white-space: nowrap;
-  background: #111213;
-  padding: 6px;
-  display: inline-block;
-  border: 2px solid #3983CD; }
-  .page-term #screen span {
-    white-space: pre;
-    cursor: pointer; }
-    .page-term #screen span:hover {
-      outline: 1px solid rgba(255, 255, 255, 0.4); }
-      @media screen and (max-width: 544px) {
-        .page-term #screen span:hover {
-          outline: 0 none; } }
-.page-term #buttons {
-  margin-top: 10px;
-  white-space: nowrap; }
-  .page-term #buttons button {
-    margin: 0 3px;
-    padding: 10px 0;
-    width: 18%;
-    max-width: 65px;
-    min-width: initial;
-    cursor: pointer;
-    font-weight: bold; }
-
-#termwrap {
-  text-align: center; }
@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="UTF-8">
-	<title>ESP8266 Remote Terminal</title>
-	<meta name="viewport" content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
-
-	<link rel="stylesheet" href="/css/app.css">
-	<script src="/js/app.js"></script>
-</head>
-<body class="page-term">
-
-<h1 onclick="location.href='/wifi'">ESP8266 Remote Terminal</h1>
-
-<div id="termwrap">
-	<div id="screen"></div>
-
-	<div id="buttons">
-		<button data-n="1" class="btn-blue">1</button><!--
-		--><button data-n="2" class="btn-blue">2</button><!--
-		--><button data-n="3" class="btn-blue">3</button><!--
-		--><button data-n="4" class="btn-blue">4</button><!--
-		--><button data-n="5" class="btn-blue">5</button>
-	</div>
-</div>
-
-<script>
-	_root = window.location.host;
-	termInit(%screenData%);
-</script>
-
-</body>
-</html>
@@ -1,83 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
-
-	<title>WiFi Settings - ESP8266 Remote Terminal</title>
-
-	<link rel="stylesheet" href="/css/app.css">
-	<script src="/js/app.js"></script>
-</head>
-<body class="page-wifi">
-
-<img src="/img/loader.gif" alt="Loading…" id="loader">
-
-<h1 onclick="location.href='/'">WiFi settings</h1>
-
-<div class="Box" id="wificonfbox">
-	<table>
-		<tr>
-			<th>WiFi mode</th>
-			<td id="opmodebox">%WiFiMode%</td>
-		</tr>
-		<tr class="x-hide-noip x-hide-2">
-			<th>IP</th>
-			<td>%StaIP%</td>
-		</tr>
-		<tr>
-			<th>Switch to</th>
-			<td id="modeswitch"></td>
-		</tr>
-		<tr class="x-hide-1">
-			<th><label for="channel">AP channel</label></th>
-			<td>
-				<form action="/wifi/setchannel" method="GET">
-					<input name="ch" id="channel" type="number" step=1 min=1 max=14 value="%WiFiChannel%"><!--
-					--><input type="submit" value="Set" class="narrow btn-green x-hide-3">
-				</form>
-			</td>
-		</tr>
-		<tr class="x-hide-1">
-			<th><label for="channel">AP name</label></th>
-			<td>
-				<form action="/wifi/setname" method="GET">
-					<input name="name" type="text" value="%APName%"><!--
-					--><input type="submit" value="Set" class="narrow btn-green">
-				</form>
-			</td>
-		</tr>
-		<tr><td colspan=2 style="white-space: normal;">
-			<p>Some changes require a reboot, dropping connection. It can take a while to re-connect.</p>
-			<p>
-				<b>If you lose access</b>, connect GPIO0 to GND for	5 seconds to enter Client+AP mode.
-				If that fails, try the UART factory reset command "<code>\e]FR\a</code>".
-			<p>
-		</td></tr>
-	</table>
-</div>
-
-<div class="Box" id="ap-box">
-	<h2>Select AP to join</h2>
-	<div id="ap-loader" class="x-hide-2">Scanning<span class="anim-dots">.</span></div>
-	<div id="ap-noscan" class="x-hide-1 x-hide-3">Can't scan in AP-only mode.</div>
-	<div id="ap-list" style="display:none"></div>
-</div>
-
-<div class="Modal hidden" id="psk-modal">
-	<div class="Dialog">
-		<form action="/wifi/connect" method="post" id="conn-form">
-			<input type="hidden" id="conn-essid" name="essid"><!--
-			--><label for="conn-passwd">Password:</label><!--
-			--><input type="password" id="conn-passwd" name="passwd"><!--
-			--><input type="submit" value="Connect!">
-		</form>
-	</div>
-</div>
-
-<script>
-	_root = window.location.host;
-	wifiInit({staSSID: '%StaSSID%', staIP: '%StaIP%', mode: '%WiFiModeNum%'});
-</script>
-</body>
-</html>
@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
-
-	<title>Connecting…</title>
-
-	<link rel="stylesheet" href="css/app.css">
-	<script src="js/app.js"></script>
-</head>
-<body>
-
-<h1>Connecting to network</h1>
-
-<div class="Box">
-	<p><b>Status:</b><br><span id="status"></span><span class="anim-dots">.</span></p>
-	<a href="/wifi" id="backbtn" class="hidden button">Back to WiFi config</a>
-</div>
-
-<script>
-	_root = window.location.host;
-	wifiConn();
-</script>
-</body>
-</html>
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>About - ESP8266 Remote Terminal</title>
+	<meta name="viewport" content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
+
+	<link rel="stylesheet" href="/css/app.css">
+	<script src="/js/app.js"></script>
+</head>
+<body class="page-about">
+
+<h1 onclick="location.href='/'">About</h1>
+
+<div class="Box">
+	<img src="/img/cvut.svg" id="logo" class="mq-tablet-min">
+	<h2>ESP8266 Remote Terminal</h2>
+
+	<img src="/img/cvut.svg" id="logo2" class="mq-phone">
+
+	<p>&copy; Ondřej Hruška, 2017 &lt;<a href="mailto:ondra@ondrovo.com">ondra@ondrovo.com</a>&gt;</p>
+
+	<p><a href="http://measure.feld.cvut.cz/" target="blank">Katedra měření, FEL ČVUT</a><br>Department of Measurement, FEE CTU</p>
+</div>
+
+<div class="Box">
+	<h2>Firmware</h2>
+	<table>
+		<tr>
+			<th>Firmware</th>
+			<td>v%vers_fw%, build <i>%date%</i> at <i>%time%</i></td>
+		</tr>
+		<tr>
+			<th>libesphttpd</th>
+			<td>v%vers_httpd%</td>
+		</tr>
+		<tr>
+			<th>ESP&nbsp;IoT&nbsp;SDK</th>
+			<td>v%vers_sdk%</td>
+		</tr>
+	</table>
+</div>
+
+<div class="Box">
+	<h2>Issues</h2>
+	<p>
+		Please report any issues to the <a href="%githubrepo%/issues">bugtracker</a> or send them by e-mail.
+	</p>
+	<p>
+		Firmware updates can be downloaded from the <a href="%githubrepo%/releases">releases page</a>.
+		Flash the images using <a href="https://github.com/espressif/esptool">esptool</a>.
+	</p>
+</div>
+
+<div class="Box">
+	<h2>Contributing</h2>
+	<p>
+		Submit your improvements and ideas to the project on <a href="%githubrepo%">GitHub</a>.<br>
+	</p>
+</div>
+
+<div class="Box">
+	<h2>Acknowledgements</h2>
+	<p>
+		The webserver is based on a <a href="https://github.com/MightyPork/libesphttpd">fork</a> of the
+		<a href="https://github.com/Spritetm/esphttpd">esphttpd</a> library by Jeroen Domburg (Sprite_tm).
+	</p>
+	<p>
+		Using (modified) JS library <a href="https://github.com/kylebarrow/chibi">chibi.js</a> by Kyle Barrow as a lightweight jQuery alternative.
+	</p>
+</div>
+
+<nav id="botnav">
+	<a href="/">Terminal</a><!--
+		--><a href="/help">Help</a><!--
+		--><a href="/wifi">WiFi config</a>
+</nav>
+
+</body>
+</html>
@@ -461,8 +461,6 @@ h1 {
 h2 {
  font-size: 1.26563em;
  margin-bottom: 0.61805rem; }
-  h2:first-child {
-    margin-top: 0; }

 td, th {
  padding: 0.38198rem;
@@ -498,6 +496,21 @@ tbody td input[type="text"], tbody td input[type="number"] {
  #loader.show {
    opacity: 1; }

+ul > * {
+  padding-top: .1em;
+  padding-bottom: .1em; }
+
+#botnav {
+  padding-top: 1.5em;
+  text-align: center; }
+  #botnav a {
+    padding: 0 0.38198rem;
+    text-decoration: underline; }
+    #botnav a, #botnav a:visited, #botnav a:link {
+      color: #2e4d6e; }
+    #botnav a:hover {
+      color: #5abfff; }
+
 button, input[type=submit], .button {
  text-align: center;
  cursor: pointer;
@@ -701,3 +714,155 @@ input[type="number"], input[type="password"], input[type="text"], textarea, sele

 #termwrap {
  text-align: center; }
+
+.page-about .Box {
+  padding-left: 1rem;
+  padding-right: 1rem; }
+  .page-about .Box a {
+    font-weight: bold; }
+.page-about #logo {
+  float: right;
+  height: 130px; }
+.page-about #logo2 {
+  max-width: 100%; }
+.page-about td {
+  white-space: normal; }
+
+.colorprev {
+  margin-top: 0.38198rem;
+  margin-bottom: 0.38198rem; }
+  .colorprev span {
+    display: inline-block;
+    width: 2em;
+    padding: 0.38198rem 0;
+    text-align: center; }
+
+.ansiref, .ansiref td, .ansiref th {
+  border: 1px solid #666; }
+.ansiref th, .ansiref td {
+  white-space: normal; }
+.ansiref th {
+  background-color: rgba(255, 255, 255, 0.1); }
+.ansiref td:nth-child(1) {
+  font-family: monospace; }
+.ansiref.w100 {
+  width: 100%; }
+  .ansiref.w100 td:nth-child(1) {
+    width: 9em; }
+  .ansiref.w100 td:nth-child(2) {
+    width: 8em; }
+
+.fg0 {
+  color: #111213; }
+
+.bg0 {
+  background-color: #111213; }
+
+.fg1 {
+  color: #CC0000; }
+
+.bg1 {
+  background-color: #CC0000; }
+
+.fg2 {
+  color: #4E9A06; }
+
+.bg2 {
+  background-color: #4E9A06; }
+
+.fg3 {
+  color: #C4A000; }
+
+.bg3 {
+  background-color: #C4A000; }
+
+.fg4 {
+  color: #3465A4; }
+
+.bg4 {
+  background-color: #3465A4; }
+
+.fg5 {
+  color: #75507B; }
+
+.bg5 {
+  background-color: #75507B; }
+
+.fg6 {
+  color: #06989A; }
+
+.bg6 {
+  background-color: #06989A; }
+
+.fg7 {
+  color: #D3D7CF; }
+
+.bg7 {
+  background-color: #D3D7CF; }
+
+.fg8 {
+  color: #555753; }
+
+.bg8 {
+  background-color: #555753; }
+
+.fg9 {
+  color: #EF2929; }
+
+.bg9 {
+  background-color: #EF2929; }
+
+.fg10 {
+  color: #8AE234; }
+
+.bg10 {
+  background-color: #8AE234; }
+
+.fg11 {
+  color: #FCE94F; }
+
+.bg11 {
+  background-color: #FCE94F; }
+
+.fg12 {
+  color: #729FCF; }
+
+.bg12 {
+  background-color: #729FCF; }
+
+.fg13 {
+  color: #AD7FA8; }
+
+.bg13 {
+  background-color: #AD7FA8; }
+
+.fg14 {
+  color: #34E2E2; }
+
+.bg14 {
+  background-color: #34E2E2; }
+
+.fg15 {
+  color: #EEEEEC; }
+
+.bg15 {
+  background-color: #EEEEEC; }
+
+.fg8, .fg9, .fg10, .fg11, .fg12, .fg13, .fg14, .fg15 {
+  font-weight: bold; }
+
+.nb {
+  font-weight: normal !important; }
+
+@media screen and (min-width: 545px) {
+  .mq-phone {
+    display: none; } }
+@media screen and (max-width: 544px) {
+  .mq-tablet-min {
+    display: none; } }
+@media screen and (min-width: 1001px) {
+  .mq-tablet-max {
+    display: none; } }
+@media screen and (max-width: 1000px) {
+  .mq-normal-min {
+    display: none; } }
@@ -0,0 +1,336 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Help - ESP8266 Remote Terminal</title>
+	<meta name="viewport" content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
+
+	<link rel="stylesheet" href="/css/app.css">
+	<script src="/js/app.js"></script>
+</head>
+<body class="page-help">
+
+<h1 onclick="location.href='/'">Quick Reference</h1>
+
+<div class="Box">
+	<h2>Wiring</h2>
+
+	<ul>
+		<li>Communication UART on pins <b>Rx, Tx</b> at 115200-8-1-N</li>
+		<li>Debug log on pin <b>GPIO2</b> at 115200-8-1-N</li>
+		<li>Use 3.3V logic, or 5V with protection resistors (10k)</li>
+		<li>Connect Rx and Tx with a piece of wire to test the terminal alone, you should see what you type in the browser.
+			NOTE: This won't work if your ESP8266 board has a built-in USB-serial.</li>
+	</ul>
+</div>
+
+<div class="Box">
+	<h2>Screen</h2>
+
+	<ul>
+		<li>Most ANSI escape sequences are supported.</li>
+		<li>The max screen size is 2000 characters (eg. <b>25x80</b>), default is <b>10x26</b>. Set using <code>\e]W&lt;rows&gt;;&lt;cols&gt;\a</code>.</li>
+		<li>The screen will automatically scroll, can be used for log output.</li>
+		<li>Display update is sent <b>after 20 ms of inactivity</b>.</li>
+		<li>The browser display needs WebSockets for the real-time updating. It may not work on really old phones / browsers.</li>
+	</ul>
+</div>
+
+<div class="Box">
+	<h2>Color Reference</h2>
+
+	<p>Color is set using <code>\e[&lt;c&gt;m</code> or <code>\e[&lt;c&gt;;&lt;c&gt;m</code> where "&lt;c&gt;" are numbers from the following tables:</p>
+
+	<b>Foreground</b>
+
+	<div class="colorprev">
+		<span class="bg7 fg0">30</span>
+		<span class="bg0 fg1">31</span>
+		<span class="bg0 fg2">32</span>
+		<span class="bg0 fg3">33</span>
+		<span class="bg0 fg4">34</span>
+		<span class="bg0 fg5">35</span>
+		<span class="bg0 fg6">36</span>
+		<span class="bg0 fg7">37</span>
+	</div>
+
+	<div class="colorprev">
+		<span class="bg7 fg8">90</span>
+		<span class="bg0 fg9">91</span>
+		<span class="bg0 fg10">92</span>
+		<span class="bg0 fg11">93</span>
+		<span class="bg0 fg12">94</span>
+		<span class="bg0 fg13">95</span>
+		<span class="bg0 fg14">96</span>
+		<span class="bg0 fg15">97</span>
+	</div>
+
+	<b>Background</b>
+
+	<div class="colorprev">
+		<span class="bg0 fg15 nb">40</span>
+		<span class="bg1 fg15 nb">41</span>
+		<span class="bg2 fg15 nb">42</span>
+		<span class="bg3 fg0">43</span>
+		<span class="bg4 fg15 nb">44</span>
+		<span class="bg5 fg15 nb">45</span>
+		<span class="bg6 fg15 nb">46</span>
+		<span class="bg7 fg0">47</span>
+	</div>
+
+	<div class="colorprev">
+		<span class="bg8 fg15 nb">100</span>
+		<span class="bg9 fg0">101</span>
+		<span class="bg10 fg0">102</span>
+		<span class="bg11 fg0">103</span>
+		<span class="bg12 fg0">104</span>
+		<span class="bg13 fg0">105</span>
+		<span class="bg14 fg0">106</span>
+		<span class="bg15 fg0">107</span>
+	</div>
+
+	<p>Bright foreground can also be set using the "bold" attribute 1 (eg. <code>\e[31;1m</code>). For more details, see the ANSI code reference below.</p>
+</div>
+
+<div class="Box">
+	<h2>User Input</h2>
+
+	<p>
+		All the user types on their keyboard is sent as-is to the UART, including ESC, ANSI sequences for arrow keys and CR-LF for Enter.
+		The input is limited to ASCII codes 32-126, backspace 8 and tab 9.
+	</p>
+
+	<p>The buttons under the screen send ASCII codes 1, 2, 3, 4, 5.</p>
+
+	<p>
+		<b>Mouse input</b> (click/tap) is sent as <code>\e[&lt;y&gt;;&lt;x&gt;M</code>. You can use this for on-screen buttons, menu navigation etc.
+		<i>Please note this is a custom escape sequence, not supported by PuTTY or other terminals.</i>
+	</p>
+</div>
+
+<div class="Box">
+	<h2>Supported ANSI Escape Sequences</h2>
+
+	<p>Sequences are started by ASCII code 27 (ESC, <code>\e</code>, <code>\x1b</code>, <code>\033</code>)</p>
+
+	<p>Instead of <code>\a</code> (BELL, ASCII 7) in the commands, you can use `\e\` (ESC + backslash). It's the Text Separator code.</p>
+
+	<h3>Text Attributes</h3>
+
+	<p>
+		All text attributes are set using <code>\e[...m</code> where the dots are numbers separated by semicolons.
+		You can combine up to 3 attributes in a single command.
+	</p>
+
+	<table class="ansiref">
+		<thead>
+		<tr>
+			<th>Attribute</th>
+			<th>Meaning</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>0</td>
+			<td>Reset text attributes to default</td>
+		</tr>
+		<tr>
+			<td>7</td>
+			<td>Inverse (fg/bg swap when printing)</td>
+		</tr>
+		<tr>
+			<td>27</td>
+			<td>Inverse OFF</td>
+		</tr>
+		<tr>
+			<td>30-37, 90-97</td>
+			<td>Foreground color, normal and bright</td>
+		</tr>
+		<tr>
+			<td>40-47, 100-107</td>
+			<td>Background color, normal and bright</td>
+		</tr>
+		</tbody>
+	</table>
+
+	<h3>Cursor</h3>
+
+	<p>Movement commands scroll the screen if needed. The coordinates are 1-based, origin top left.</p>
+
+	<table class="ansiref w100">
+		<thead>
+		<tr>
+			<th>Code</th>
+			<th>Params</th>
+			<th>Meaning</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>\e[&lt;n&gt;A</td>
+			<td>[count]</td>
+			<td>Move cursor up</td>
+		</tr>
+		<tr>
+			<td>\e[&lt;n&gt;B</td>
+			<td>[count]</td>
+			<td>Move cursor down</td>
+		</tr>
+		<tr>
+			<td>\e[&lt;n&gt;C</td>
+			<td>[count]</td>
+			<td>Move cursor forward (right)</td>
+		</tr>
+		<tr>
+			<td>\e[&lt;n&gt;D</td>
+			<td>[count]</td>
+			<td>Move cursor backward (left)</td>
+		</tr>
+		<tr>
+			<td>\e[&lt;n&gt;E</td>
+			<td>[count]</td>
+			<td>Go N line down, start of line</td>
+		</tr>
+		<tr>
+			<td>\e[&lt;n&gt;F</td>
+			<td>[count]</td>
+			<td>Go N lines up, start of line</td>
+		</tr>
+		<tr>
+			<td>\e[&lt;n&gt;G</td>
+			<td>column</td>
+			<td>Go to column</td>
+		</tr>
+		<tr>
+			<td>\e[&lt;y&gt;;&lt;x&gt;G</td>
+			<td>[row=1];[col=1]</td>
+			<td>Go to row and column</td>
+		</tr>
+		<tr>
+			<td>\e[6n</td>
+			<td>--</td>
+			<td>Query cursor position. Position is sent back as <code>\e[?;?R</code> with row;column.</td>
+		</tr>
+		<tr>
+			<td>\e[s</td>
+			<td>--</td>
+			<td>Store position</td>
+		</tr>
+		<tr>
+			<td>\e[u</td>
+			<td>--</td>
+			<td>Restore position</td>
+		</tr>
+		<tr>
+			<td>\e7</td>
+			<td>--</td>
+			<td>Store position & attributes</td>
+		</tr>
+		<tr>
+			<td>\e8</td>
+			<td>--</td>
+			<td>Restore position & attributes</td>
+		</tr>
+		<tr>
+			<td>\e[?25l</td>
+			<td>--</td>
+			<td>Hide cursor</td>
+		</tr>
+		<tr>
+			<td>\e[?25h</td>
+			<td>--</td>
+			<td>Show cursor</td>
+		</tr>
+		<tr>
+			<td>\e[?7l</td>
+			<td>--</td>
+			<td>Disable cursor auto-wrap & auto-scroll at end of screen</td>
+		</tr>
+		<tr>
+			<td>\e[?7h</td>
+			<td>--</td>
+			<td>Enable cursor auto-wrap & auto-scroll at end of screen</td>
+		</tr>
+		</tbody>
+	</table>
+
+	<h3>Screen</h3>
+
+	<table class="ansiref w100">
+		<thead>
+		<tr>
+			<th>Code</th>
+			<th>Params</th>
+			<th>Meaning</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>\e[&lt;m&gt;J</td>
+			<td>[mode=0]</td>
+			<td>Clear screen. Mode: 0 - from cursor, 1 - to cursor, 2 - all</td>
+		</tr>
+		<tr>
+			<td>\e[&lt;m&gt;K</td>
+			<td>[mode=0]</td>
+			<td>Erase line. Mode: 0 - from cursor, 1 - to cursor, 2 - all</td>
+		</tr>
+		<tr>
+			<td>\e[&lt;n&gt;S</td>
+			<td>[lines]</td>
+			<td>Scroll screen content up, add empty line at the bottom</td>
+		</tr>
+		<tr>
+			<td>\e[&lt;n&gt;T</td>
+			<td>[lines]</td>
+			<td>Scroll screen content down, add empty line at the top</td>
+		</tr>
+		<tr>
+			<td>\e]W&lt;r&gt;;&lt;c&gt;\a</td>
+			<td>rows;cols</td>
+			<td>Set screen size, maximum 25x80 (resp. total 2000 characters). This also clears the screen.</td>
+		</tr>
+		</tbody>
+	</table>
+
+	<h3>System Commands</h3>
+
+	<table class="ansiref w100">
+		<thead>
+		<tr>
+			<th>Code</th>
+			<th>Params</th>
+			<th>Meaning</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>\ec</td>
+			<td>--</td>
+			<td>
+				"Device Reset" - clear screen, reset attributes, show cursor & move it to 1,1.
+				The screen size and WiFi settings stay unchanged.
+			</td>
+		</tr>
+		<tr>
+			<td>\e]FR\a</td>
+			<td>--</td>
+			<td>"Factory Reset", emergency code when you mess up the WiFi, restores SSID to unique default, clears stored credentials & enters Client+AP mode.</td>
+		</tr>
+		<tr>
+			<td>\e[5n</td>
+			<td>--</td>
+			<td>Query device status, replies with <code>\e[0n</code> "device is OK". Can be used to check if the UART works.</td>
+		</tr>
+		</tbody>
+	</table>
+</div>
+
+<nav id="botnav">
+	<a href="/">Terminal</a><!--
+	--><a href="/wifi">WiFi config</a><!--
+	--><a href="/about">About</a>
+</nav>
+
+</body>
+</html>
@@ -894,19 +894,7 @@ $._loader = function(vis) {
 		var W, H;
 		var cursor = {a: false, x: 0, y: 0, suppress: false, hidden: false};
 		var screen = [];
-
-		/** Colors table */
-		var CLR = [// dark gray #2E3436
-			// 0 black, 1 red, 2 green, 3 yellow
-			// 4 blue, 5 mag, 6 cyan, 7 white
-			'#111213','#CC0000','#4E9A06','#C4A000',
-			'#3465A4','#75507B','#06989A','#D3D7CF',
-			// BRIGHT
-			// 8 black, 9 red, 10 green, 11 yellow
-			// 12 blue, 13 mag, 14 cyan, 15 white
-			'#555753','#EF2929','#8AE234','#FCE94F',
-			'#729FCF','#AD7FA8','#34E2E2','#EEEEEC'
-		];
+		var blinkIval;

 		/** Clear screen */
 		function cls() {
@@ -957,9 +945,7 @@ $._loader = function(vis) {
 			bg = inv ? cell.fg : cell.bg;
 			// Update
 			e.innerText = (cell.t+' ')[0];
-			e.style.color = colorHex(fg);
-			e.style.backgroundColor = colorHex(bg);
-			e.style.fontWeight = fg > 7 ? 'bold' : 'normal';
+			e.className = 'fg'+fg+' bg'+bg;
 		}

 		/** Show entire screen */
@@ -1027,13 +1013,6 @@ $._loader = function(vis) {
 			blitAll();
 		}

-		/** Parse color */
-		function colorHex(c) {
-			c = parseInt(c);
-			if (c < 0 || c > 15) c = 0;
-			return CLR[c];
-		}
-
 		/** Init the terminal */
 		function init(obj) {
 			W = obj.w;
@@ -1071,7 +1050,8 @@ $._loader = function(vis) {
 			}

 			/* Cursor blinking */
-			setInterval(function() {
+			clearInterval(blinkIval);
+			blinkIval = setInterval(function() {
 				cursor.a = !cursor.a;
 				if (cursor.hidden) {
 					cursor.a = false;
@@ -1284,7 +1264,7 @@ $._loader = function(vis) {

 	/** Ask the CGI what APs are visible (async) */
 	function scanAPs() {
-		$.get('/wifi/scan', onScan);
+		$.get('http://'+_root+'/wifi/scan', onScan);
 	}

 	function rescan(time) {
@@ -1338,7 +1318,7 @@ $._loader = function(vis) {
 		var abortTmeo;

 		function getStatus() {
-			xhr.open("GET", "/wifi/connstatus");
+			xhr.open("GET", 'http://'+_root+"/wifi/connstatus");
 			xhr.onreadystatechange = function () {
 				if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300) {
 					clearTimeout(abortTmeo);
@@ -8,20 +8,8 @@
 		var screen = [];
 		var blinkIval;

-		/** Colors table */
-		var CLR = [// dark gray #2E3436
-			// 0 black, 1 red, 2 green, 3 yellow
-			// 4 blue, 5 mag, 6 cyan, 7 white
-			'#111213','#CC0000','#4E9A06','#C4A000',
-			'#3465A4','#75507B','#06989A','#D3D7CF',
-			// BRIGHT
-			// 8 black, 9 red, 10 green, 11 yellow
-			// 12 blue, 13 mag, 14 cyan, 15 white
-			'#555753','#EF2929','#8AE234','#FCE94F',
-			'#729FCF','#AD7FA8','#34E2E2','#EEEEEC'
-		];
-
-		/** Clear screen */
+/*
+		/!** Clear screen *!/
 		function cls() {
 			screen.forEach(function(cell, i) {
 				cell.t = ' ';
@@ -30,6 +18,7 @@
 				blit(cell);
 			});
 		}
+*/

 		/** Set text and color at XY */
 		function cellAt(y, x) {
@@ -41,14 +30,15 @@
 			return cellAt(cursor.y, cursor.x);
 		}

-		/** Enable or disable cursor visibility */
+/*
+		/!** Enable or disable cursor visibility *!/
 		function cursorEnable(enable) {
 			cursor.hidden = !enable;
 			cursor.a &= enable;
 			blit(cursorCell(), cursor.a);
 		}

-		/** Safely move cursor */
+		/!** Safely move cursor *!/
 		function cursorSet(y, x) {
 			// Hide and prevent from showing up during the move
 			cursor.suppress = true;
@@ -61,6 +51,7 @@
 			cursor.suppress = false;
 			blit(cursorCell(), cursor.a);
 		}
+*/

 		/** Update cell on display. inv = invert (for cursor) */
 		function blit(cell, inv) {
@@ -70,9 +61,7 @@
 			bg = inv ? cell.fg : cell.bg;
 			// Update
 			e.innerText = (cell.t+' ')[0];
-			e.style.color = colorHex(fg);
-			e.style.backgroundColor = colorHex(bg);
-			e.style.fontWeight = fg > 7 ? 'bold' : 'normal';
+			e.className = 'fg'+fg+' bg'+bg;
 		}

 		/** Show entire screen */
@@ -140,13 +129,6 @@
 			blitAll();
 		}

-		/** Parse color */
-		function colorHex(c) {
-			c = parseInt(c);
-			if (c < 0 || c > 15) c = 0;
-			return CLR[c];
-		}
-
 		/** Init the terminal */
 		function init(obj) {
 			W = obj.w;
@@ -75,7 +75,7 @@

 	/** Ask the CGI what APs are visible (async) */
 	function scanAPs() {
-		$.get('/wifi/scan', onScan);
+		$.get('http://'+_root+'/wifi/scan', onScan);
 	}

 	function rescan(time) {
@@ -129,7 +129,7 @@
 		var abortTmeo;

 		function getStatus() {
-			xhr.open("GET", "/wifi/connstatus");
+			xhr.open("GET", 'http://'+_root+"/wifi/connstatus");
 			xhr.onreadystatechange = function () {
 				if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300) {
 					clearTimeout(abortTmeo);
@@ -103,7 +103,7 @@ h1 {
 h2 {
 	font-size: fsize(2);
 	margin-bottom: dist(-1);
-	&:first-child{margin-top:0}
+	//&:first-child{margin-top:0}
 }

 td, th {
@@ -153,3 +153,26 @@ tbody td {
 		opacity:1;
 	}
 }
+
+ul > * {
+	padding-top: .1em;
+	padding-bottom: .1em;
+}
+
+#botnav {
+	padding-top: 1.5em;
+	text-align: center;
+
+	a {
+		padding: 0 dist(-2);
+		text-decoration: underline;
+
+		&, &:visited, &:link {
+			color: #2e4d6e;
+		}
+
+		&:hover {
+			color: #5abfff;
+		}
+	}
+}
@@ -0,0 +1,24 @@
+$term-colors:
+	// 0 black, 1 red, 2 green, 3 yellow
+	// 4 blue, 5 mag, 6 cyan, 7 white
+	#111213, #CC0000, #4E9A06, #C4A000,
+	#3465A4, #75507B, #06989A, #D3D7CF,
+	// BRIGHT
+	// 8 black, 9 red, 10 green, 11 yellow
+	// 12 blue, 13 mag, 14 cyan, 15 white
+	#555753, #EF2929, #8AE234, #FCE94F,
+	#729FCF, #AD7FA8, #34E2E2, #EEEEEC;
+
+@for $i from 1 through length($term-colors) {
+	$c: nth($term-colors, $i);
+	.fg#{$i - 1} { color: $c; }
+	.bg#{$i - 1} { background-color: $c; }
+}
+
+.fg8, .fg9, .fg10, .fg11, .fg12, .fg13, .fg14, .fg15 {
+	font-weight: bold;
+}
+
+.nb {
+	font-weight: normal !important;
+}
@@ -39,3 +39,23 @@ $c-form-highlight-a: #2972ba;
 // import all our pages
@import "pages/wifi";
@import "pages/term";
+@import "pages/about";
+@import "term-colors";
+
+// media queries
+
+@include media($tablet-min) {
+	.mq-phone { display: none; }
+}
+
+@include media($phone) {
+	.mq-tablet-min { display: none; }
+}
+
+@include media($normal-min) {
+	.mq-tablet-max { display: none; }
+}
+
+@include media($tablet-max) {
+	.mq-normal-min { display: none; }
+}
@@ -0,0 +1,63 @@
+.page-about {
+	.Box {
+		padding-left:dist(0);
+		padding-right:dist(0);
+
+		a {font-weight: bold;}
+	}
+
+	#logo {
+		float:right;
+		height: 130px;
+	}
+
+	// mobile friendly
+	#logo2 {
+		max-width: 100%;
+	}
+
+	td {
+		white-space: normal;
+	}
+}
+
+.colorprev {
+	margin-top: dist(-2);
+	margin-bottom: dist(-2);
+	span {
+		display: inline-block;
+		width: 2em;
+		padding: dist(-2) 0;
+		text-align: center;
+	}
+}
+
+.ansiref {
+	&,td,th{
+		border: 1px solid #666;
+	}
+
+	th,td {
+		white-space: normal;
+	}
+
+	th {
+		background-color: rgba(255,255,255,.1);
+	}
+
+	td:nth-child(1) {
+		font-family: monospace;
+	}
+
+	&.w100 {
+		width: 100%;
+
+		td:nth-child(1) {
+			width: 9em;
+		}
+
+		td:nth-child(2) {
+			width: 8em;
+		}
+	}
+}
@@ -8,21 +8,19 @@

 	#screen {
 		@include noselect();
-
 		font-family: monospace;
 		font-size: 16pt;
 		white-space: nowrap;
 		background: #111213;
 		padding: 6px;
 		display: inline-block;
-
-		border: 2px solid #3983CD;//#1bc249;
+		border: 2px solid #3983CD; //#1bc249;

 		span {
 			white-space: pre;
 			cursor: pointer;
 			&:hover {
-				outline: 1px solid rgba(#ffffff,0.4);
+				outline: 1px solid rgba(#ffffff, 0.4);
 				@include media($phone) {
 					outline: 0 none;
 				}
@@ -0,0 +1,3 @@
+#!/bin/bash
+
+xterm -e "php -S localhost:2000"
@@ -24,6 +24,12 @@
 	</div>
 </div>

+<nav id="botnav">
+	<a href="/wifi">WiFi config</a><!--
+		--><a href="/help">Help</a><!--
+		--><a href="/about">About</a>
+</nav>
+
 <script>
 	_root = window.location.host;
 	termInit(%screenData%);
@@ -0,0 +1,15 @@
+<?php
+
+$f = file_get_contents('term.html');
+
+$f = str_replace('%screenData%', 
+'{
+ "w": 26, "h": 10,
+ "x": 0, "y": 0,
+ "cv": 1,
+ "screen": "70 t259"
+}', $f);
+
+$f = str_replace('window.location.host', '"192.168.0.18"', $f);
+
+echo $f;
@@ -64,6 +64,12 @@
 	<div id="ap-list" style="display:none"></div>
 </div>

+<nav id="botnav">
+	<a href="/">Terminal</a><!--
+		--><a href="/help">Help</a><!--
+		--><a href="/about">About</a>
+</nav>
+
 <div class="Modal hidden" id="psk-modal">
 	<div class="Dialog">
 		<form action="/wifi/connect" method="post" id="conn-form">
@@ -0,0 +1,13 @@
+<?php
+
+$f = file_get_contents('wifi.html');
+
+$f = str_replace('%StaSSID%', 'Chlivek', $f);
+$f = str_replace('%StaIP%', '192.168.0.15', $f);
+$f = str_replace('%WiFiModeNum%', '1', $f);
+$f = str_replace('%WiFiMode%', 'Client', $f);
+$f = str_replace('%WiFiChannel%', '1', $f);
+
+$f = str_replace('window.location.host', '"192.168.0.15"', $f);
+
+echo $f;
@@ -138,7 +138,6 @@ apars_handle_CSI(char leadchar, int *params, char keychar)
 				screen_clear_line(CLEAR_FROM_CURSOR);
 			} else {
 				screen_clear_line(CLEAR_ALL);
-				screen_cursor_set_x(0);
 			}
 			break;

@@ -157,20 +156,29 @@ apars_handle_CSI(char leadchar, int *params, char keychar)
 			}
 			else if (n1 == 5) {
 				// Query device status - reply "Device is OK"
-				UART_WriteString(UART0, "\0330n", UART_TIMEOUT_US);
+				UART_WriteString(UART0, "\033[0n", UART_TIMEOUT_US);
 			}
 			break;

-			// DECTCEM cursor show hide
-		case 'l':
-			if (leadchar == '?' && n1 == 25) {
-				screen_cursor_enable(1);
-			}
-			break;
+			// DECTCEM feature enable / disable

 		case 'h':
-			if (leadchar == '?' && n1 == 25) {
-				screen_cursor_enable(0);
+			if (leadchar == '?') {
+				if (n1 == 25) {
+					screen_cursor_enable(1);
+				} else if (n1 == 7) {
+					screen_wrap_enable(1);
+				}
+			}
+			break;
+
+		case 'l':
+			if (leadchar == '?') {
+				if (n1 == 25) {
+					screen_cursor_enable(0);
+				} else if (n1 == 7) {
+					screen_wrap_enable(0);
+				}
 			}
 			break;

@@ -1,8 +1,13 @@
 #include <esp8266.h>
 #include <httpd.h>
+#include <esp_sdk_ver.h>

 #include "cgi_main.h"
 #include "screen.h"
+#include "user_main.h"
+
+#define STR_HELPER(x) #x
+#define STR(x) STR_HELPER(x)

 /**
 * Main page template substitution
@@ -32,3 +37,29 @@ httpd_cgi_state ICACHE_FLASH_ATTR tplScreen(HttpdConnData *connData, char *token
 	return HTTPD_CGI_DONE;
 }

+/** "About" page */
+httpd_cgi_state ICACHE_FLASH_ATTR tplAbout(HttpdConnData *connData, char *token, void **arg)
+{
+	if (token == NULL) return HTTPD_CGI_DONE;
+
+	if (streq(token, "vers_fw")) {
+		httpdSend(connData, FIRMWARE_VERSION, -1);
+	}
+	else if (streq(token, "date")) {
+		httpdSend(connData, __DATE__, -1);
+	}
+	else if (streq(token, "time")) {
+		httpdSend(connData, __TIME__, -1);
+	}
+	else if (streq(token, "vers_httpd")) {
+		httpdSend(connData, HTTPDVER, -1);
+	}
+	else if (streq(token, "vers_sdk")) {
+		httpdSend(connData, STR(ESP_SDK_VERSION), -1);
+	}
+	else if (streq(token, "githubrepo")) {
+		httpdSend(connData, TERMINAL_GITHUB_REPO, -1);
+	}
+
+	return HTTPD_CGI_DONE;
+}
@@ -2,5 +2,6 @@
 #define CGI_MAIN_H

 httpd_cgi_state tplScreen(HttpdConnData *connData, char *token, void **arg);
+httpd_cgi_state tplAbout(HttpdConnData *connData, char *token, void **arg);

 #endif // CGI_MAIN_H
@@ -6,28 +6,26 @@
 #include "uart_driver.h"
 #include "screen.h"

-static volatile bool timer_running = false;
-static ETSTimer notifyTim;
+#define SOCK_BUF_LEN 2048
+static char sock_buff[SOCK_BUF_LEN];

 static void notifyTimCb(void *arg) {
-	timer_running = false;
-
 	void *data = NULL;

-	const int bufsiz = 1024;
-	char buff[bufsiz];
 	for (int i = 0; i < 20; i++) {
-		httpd_cgi_state cont = screenSerializeToBuffer(buff, bufsiz, &data);
+		httpd_cgi_state cont = screenSerializeToBuffer(sock_buff, SOCK_BUF_LEN, &data);
 		int flg = 0;
 		if (cont == HTTPD_CGI_MORE) flg |= WEBSOCK_FLAG_MORE;
 		if (i > 0) flg |= WEBSOCK_FLAG_CONT;
-		cgiWebsockBroadcast(URL_WS_UPDATE, buff, (int) strlen(buff), flg);
+		cgiWebsockBroadcast(URL_WS_UPDATE, sock_buff, (int) strlen(sock_buff), flg);
 		if (cont == HTTPD_CGI_DONE) break;
 	}

-	screenSerializeToBuffer(NULL, bufsiz, &data);
+	screenSerializeToBuffer(NULL, SOCK_BUF_LEN, &data);
 }

+static ETSTimer notifyTim;
+
 /**
 * Broadcast screen state to sockets.
 * This is a callback for the Screen module,
@@ -35,9 +33,6 @@ static void notifyTimCb(void *arg) {
 */
 void ICACHE_FLASH_ATTR screen_notifyChange(void)
 {
-	if (timer_running) return;
-
-	timer_running = true;
 	os_timer_disarm(&notifyTim);
 	os_timer_setfn(&notifyTim, notifyTimCb, NULL);
 	os_timer_arm(&notifyTim, 20, 0);
@@ -27,6 +27,8 @@ HttpdBuiltInUrl routes[] = {

 	// --- Web pages ---
 	ROUTE_TPL_FILE("/", tplScreen, "/term.tpl"),
+	ROUTE_TPL_FILE("/about", tplAbout, "/about.tpl"),
+	ROUTE_FILE("/help", "/help.tpl"),

 	// --- Sockets ---
 	ROUTE_WS(URL_WS_UPDATE, updateSockConnect),
@@ -31,6 +31,7 @@ static struct {
 	int y;    //!< Y coordinate
 	bool visible;    //!< Visible
 	bool inverse;    //!< Inverse colors
+	bool autowrap;    //!< Wrapping when EOL
 	Color fg;        //!< Foreground color for writing
 	Color bg;        //!< Background color for writing
 } cursor;
@@ -75,25 +76,18 @@ static volatile int notifyLock = 0;
 							if (notifyLock == 0) screen_notifyChange(); \
 						} while(0)

-/**
- * Reset a cell
- */
-static inline void
-cell_init(Cell *cell)
-{
-	cell->c = ' ';
-	cell->fg = SCREEN_DEF_FG;
-	cell->bg = SCREEN_DEF_BG;
-}
-
 /**
 * Clear range, inclusive
 */
 static inline void
 clear_range(unsigned int from, unsigned int to)
 {
+	Color fg = cursor.inverse ? cursor.bg : cursor.fg;
+	Color bg = cursor.inverse ? cursor.fg : cursor.bg;
 	for (unsigned int i = from; i <= to; i++) {
-		cell_init(&screen[i]);
+		screen[i].c = ' ';
+		screen[i].fg = fg;
+		screen[i].bg = bg;
 	}
 }

@@ -109,6 +103,7 @@ cursor_reset(void)
 	cursor.bg = SCREEN_DEF_BG;
 	cursor.visible = 1;
 	cursor.inverse = 0;
+	cursor.autowrap = 1;
 }

 //endregion
@@ -122,11 +117,7 @@ void ICACHE_FLASH_ATTR
 screen_init(void)
 {
 	NOTIFY_LOCK();
-	for (unsigned int i = 0; i < MAX_SCREEN_SIZE; i++) {
-		cell_init(&screen[i]);
-	}
-
-	cursor_reset();
+	screen_reset();
 	NOTIFY_DONE();
 }

@@ -137,8 +128,8 @@ void ICACHE_FLASH_ATTR
 screen_reset(void)
 {
 	NOTIFY_LOCK();
-	screen_clear(CLEAR_ALL);
 	cursor_reset();
+	screen_clear(CLEAR_ALL);
 	NOTIFY_DONE();
 }

@@ -408,6 +399,17 @@ screen_cursor_enable(bool enable)
 	NOTIFY_DONE();
 }

+/**
+ * Enable autowrap
+ */
+void ICACHE_FLASH_ATTR
+screen_wrap_enable(bool enable)
+{
+	NOTIFY_LOCK();
+	cursor.autowrap = enable;
+	NOTIFY_DONE();
+}
+
 //endregion

 //region Colors
@@ -503,7 +505,7 @@ screen_putchar(char ch)
 				cursor.x--;
 			} else {
 				// wrap around start of line
-				if (cursor.y>0) {
+				if (cursor.autowrap && cursor.y>0) {
 					cursor.x=W-1;
 					cursor.y--;
 				}
@@ -543,13 +545,17 @@ screen_putchar(char ch)
 	cursor.x++;
 	// X wrap
 	if (cursor.x >= W) {
-		cursor.x = 0;
-		cursor.y++;
-		// Y wrap
-		if (cursor.y > H-1) {
-			// Scroll up, so we have space for writing
-			screen_scroll_up(1);
-			cursor.y = H-1;
+		if (cursor.autowrap) {
+			cursor.x = 0;
+			cursor.y++;
+			// Y wrap
+			if (cursor.y > H - 1) {
+				// Scroll up, so we have space for writing
+				screen_scroll_up(1);
+				cursor.y = H - 1;
+			}
+		} else {
+			cursor.x = W - 1;
 		}
 	}

@@ -109,6 +109,9 @@ void screen_cursor_restore(bool withAttrs);
 /** Enable cursor display */
 void screen_cursor_enable(bool enable);

+/** Enable auto wrap */
+void screen_wrap_enable(bool enable);
+
 // --- Colors ---

 /** Set cursor foreground color */
@@ -7,9 +7,9 @@
 /*
 * ----------------------------------------------------------------------------
 * "THE BEER-WARE LICENSE" (Revision 42):
- * Jeroen Domburg <jeroen@spritesmods.com> wrote this file. As long as you retain 
- * this notice you can do whatever you want with this stuff. If we meet some day, 
- * and you think this stuff is worth it, you can buy me a beer in return. 
+ * Jeroen Domburg <jeroen@spritesmods.com> wrote this file. As long as you retain
+ * this notice you can do whatever you want with this stuff. If we meet some day,
+ * and you think this stuff is worth it, you can buy me a beer in return.
 * ----------------------------------------------------------------------------
 */

@@ -18,12 +18,13 @@
 #include <captdns.h>
 #include <espfs.h>
 #include <webpages-espfs.h>
+#include <cgiflash.h>
 #include "serial.h"
 #include "io.h"
 #include "screen.h"
 #include "routes.h"
-
-#define FIRMWARE_VERSION "0.3"
+#include "user_main.h"
+#include "uart_driver.h"

 #ifdef ESPFS_POS
 CgiUploadFlashDef uploadParams={
@@ -114,6 +115,10 @@ void ICACHE_FLASH_ATTR user_init(void)
 	// The terminal screen
 	screen_init();

+	// Print the CANCEL character to indicate the module has restarted
+	// Critically important for client application if any kind of screen persistence / content re-use is needed
+	UART_WriteChar(UART0, 24, UART_TIMEOUT_US); // 0x18 - 24 - CAN
+
 	info("Listening on UART0, 115200-8-N-1!");
 }

@@ -0,0 +1,7 @@
+#ifndef USER_MAIN_H_H
+#define USER_MAIN_H_H
+
+#define FIRMWARE_VERSION "0.5.2"
+#define TERMINAL_GITHUB_REPO "https://github.com/MightyPork/esp-vt100-firmware"
+
+#endif //USER_MAIN_H_H
Author	SHA1	Message	Date
MightyPork	b074eb4f2c	version bump	2017-03-02 00:52:31 +01:00
MightyPork	9dd5a1f082	Implemented cursor wrap control codes e[?7h and l	2017-03-02 00:06:45 +01:00
MightyPork	e7c26b3e94	send code 0x18 on restart	2017-03-01 23:57:07 +01:00
MightyPork	b6a0e796d8	Fixed broken Report Device OK response	2017-01-30 01:22:16 +01:00
MightyPork	29f726c073	Fixed some broken impl	2017-01-30 01:10:10 +01:00
MightyPork	0acf0bdd72	Small front-end improvements + made screen clearing apply cursor color to cleared area	2017-01-29 20:08:58 +01:00
MightyPork	03179a0ff0	readme	2017-01-29 15:18:00 +01:00
MightyPork	2560eae519	removed html folder, added to gitignore	2017-01-29 15:15:38 +01:00
MightyPork	9113756091	Fixed a mistake on the help page with color numbers	2017-01-29 15:13:17 +01:00
MightyPork	f87f638f03	Added Help and About pages	2017-01-29 14:47:39 +01:00
MightyPork	16f81cd411	Fix issue with buffer overflow for too large screen updated too fast	2017-01-29 11:10:19 +01:00
MightyPork	e62c4ece90	improvements + page testing php scripts (use with php -S localhost:1337 in the folder)	2017-01-29 01:58:36 +01:00