parent
9113756091
commit
2560eae519
@ -1,80 +0,0 @@ |
|||||||
<!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>© Ondřej Hruška, 2017 <<a href="mailto:ondra@ondrovo.com">ondra@ondrovo.com</a>></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 IoT 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> |
|
||||||
@ -1,864 +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; } |
|
||||||
|
|
||||||
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; } |
|
||||||
|
|
||||||
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; |
|
||||||
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 #screen .fg8, .page-term #screen .fg9, .page-term #screen .fg10, .page-term #screen .fg11, .page-term #screen .fg12, .page-term #screen .fg13, .page-term #screen .fg14, .page-term #screen .fg15 { |
|
||||||
font-weight: bold; } |
|
||||||
.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; } |
|
||||||
|
|
||||||
.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: 6em; } |
|
||||||
.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; } |
|
||||||
|
|
||||||
@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; } } |
|
||||||
|
Before Width: | Height: | Size: 318 B |
@ -1,326 +0,0 @@ |
|||||||
<!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?;?\a</code> with rows;cols.</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[?m</code> or <code>\e[?;?m</code> where "?" are numbers from the following tables:</p> |
|
||||||
|
|
||||||
<b>Foreground</b> |
|
||||||
|
|
||||||
<div class="colorprev"> |
|
||||||
<span class="fg0" style="background:#333">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="bg0 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">40</span> |
|
||||||
<span class="bg1 fg15">41</span> |
|
||||||
<span class="bg2 fg15">42</span> |
|
||||||
<span class="bg3 fg0">43</span> |
|
||||||
<span class="bg4 fg15">44</span> |
|
||||||
<span class="bg5 fg15">45</span> |
|
||||||
<span class="bg6 fg15">46</span> |
|
||||||
<span class="bg7 fg0">47</span> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="colorprev"> |
|
||||||
<span class="bg8 fg15">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?;?M</code> with row;column. You can use this for on-screen buttons, menu navigation etc. |
|
||||||
<i>Please note this is a custom 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[?A</td> |
|
||||||
<td>[count]</td> |
|
||||||
<td>Move cursor up</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e[?B</td> |
|
||||||
<td>[count]</td> |
|
||||||
<td>Move cursor down</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e[?C</td> |
|
||||||
<td>[count]</td> |
|
||||||
<td>Move cursor forward (right)</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e[?D</td> |
|
||||||
<td>[count]</td> |
|
||||||
<td>Move cursor backward (left)</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e[?E</td> |
|
||||||
<td>[count]</td> |
|
||||||
<td>Go N line down, start of line</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e[?F</td> |
|
||||||
<td>[count]</td> |
|
||||||
<td>Go N lines up, start of line</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e[?G</td> |
|
||||||
<td>column</td> |
|
||||||
<td>Go to column</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e[?;?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 (literal question mark, lowercase L!)</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e[?25h</td> |
|
||||||
<td>--</td> |
|
||||||
<td>Show cursor (literal question mark!)</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[?J</td> |
|
||||||
<td>[mode=0]</td> |
|
||||||
<td>Clear screen. Mode: 0 - from cursor, 1 - to cursor, 2 - all</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e[?K</td> |
|
||||||
<td>[mode=0]</td> |
|
||||||
<td>Erase line. Mode: 0 - from cursor, 1 - to cursor, 2 - all</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e[?S</td> |
|
||||||
<td>[lines]</td> |
|
||||||
<td>Scroll screen content up, add empty line at the bottom</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e[?T</td> |
|
||||||
<td>[lines]</td> |
|
||||||
<td>Scroll screen content down, add empty line at the top</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<td>\e]W?;?\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> |
|
||||||
|
Before Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 2.5 KiB |
File diff suppressed because it is too large
Load Diff
@ -1,39 +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> |
|
||||||
|
|
||||||
<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%); |
|
||||||
</script> |
|
||||||
|
|
||||||
</body> |
|
||||||
</html> |
|
||||||
@ -1,89 +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> |
|
||||||
|
|
||||||
<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"> |
|
||||||
<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> |
|
||||||
Loading…
Reference in new issue