espterm
/
espterm-firmware
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added Help and About pages

Browse Source
pull/30/head 0.4
Ondřej Hruška 8 years ago
parent 16f81cd411
commit f87f638f03
25 changed files with 1358 additions and 21 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      build_web.sh
  2. 80
      html/about.tpl
  3. 165
      html/css/app.css
  4. 326
      html/help.tpl
  5. 5
      html/img/cvut.svg
  6. 7
      html/js/app.js
  7. 6
      html/term.tpl
  8. 6
      html/wifi.tpl
  9. 80
      html_orig/about.html
  10. 165
      html_orig/css/app.css
  11. 326
      html_orig/help.html
  12. 7
      html_orig/jssrc/term.js
  13. 25
      html_orig/sass/_layout.scss
  14. 16
      html_orig/sass/_term-colors.scss
  15. 20
      html_orig/sass/app.scss
  16. 63
      html_orig/sass/pages/_about.scss
  17. 10
      html_orig/sass/pages/_term.scss
  18. 6
      html_orig/term.html
  19. 6
      html_orig/wifi.html
  20. 2
      libesphttpd
  21. 31
      user/cgi_main.c
  22. 1
      user/cgi_main.h
  23. 2
      user/routes.c
  24. 3
      user/user_main.c
  25. 7
      user/user_main.h

8
build_web.sh
Unescape View File

@ -2,6 +2,11 @@
echo "-- Preparing WWW files --" echo "-- Preparing WWW files --"
rm -r html
mkdir -p html/img
mkdir -p html/js
mkdir -p html/css
# Join scripts # Join scripts
DD=html_orig/jssrc DD=html_orig/jssrc
cat $DD/chibi.js \ 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/css/app.css html/css/app.css
cp html_orig/term.html html/term.tpl cp html_orig/term.html html/term.tpl
cp html_orig/wifi.html html/wifi.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/wifi_conn.html html/wifi_conn.tpl
cp html_orig/img/loader.gif html/img/loader.gif 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 cp html_orig/favicon.ico html/favicon.ico

80
html/about.tpl
Unescape View File

@ -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>

165
html/css/app.css
Unescape View File

@ -461,8 +461,6 @@ h1 {
h2 { h2 {
font-size: 1.26563em; font-size: 1.26563em;
margin-bottom: 0.61805rem; } margin-bottom: 0.61805rem; }
h2:first-child {
margin-top: 0; }
td, th { td, th {
padding: 0.38198rem; padding: 0.38198rem;
@ -498,6 +496,21 @@ tbody td input[type="text"], tbody td input[type="number"] {
#loader.show { #loader.show {
opacity: 1; } 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 { button, input[type=submit], .button {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -687,6 +700,8 @@ input[type="number"], input[type="password"], input[type="text"], textarea, sele
@media screen and (max-width: 544px) { @media screen and (max-width: 544px) {
.page-term #screen span:hover { .page-term #screen span:hover {
outline: 0 none; } } 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 { .page-term #buttons {
margin-top: 10px; margin-top: 10px;
white-space: nowrap; } white-space: nowrap; }
@ -701,3 +716,149 @@ input[type="number"], input[type="password"], input[type="text"], textarea, sele
#termwrap { #termwrap {
text-align: center; } 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; } }

326
html/help.tpl
Unescape View File

@ -0,0 +1,326 @@
<!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">30</span>
<span class="bg1 fg15">31</span>
<span class="bg2 fg15">32</span>
<span class="bg3 fg0">33</span>
<span class="bg4 fg15">34</span>
<span class="bg5 fg15">35</span>
<span class="bg6 fg15">36</span>
<span class="bg7 fg0">37</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>

5
html/img/cvut.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

7
html/js/app.js
Unescape View File

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

6
html/term.tpl
Unescape View File

@ -24,6 +24,12 @@
</div> </div>
</div> </div>
<nav id="botnav">
<a href="/wifi">WiFi config</a><!--
--><a href="/help">Help</a><!--
--><a href="/about">About</a>
</nav>
<script> <script>
_root = window.location.host; _root = window.location.host;
termInit(%screenData%); termInit(%screenData%);

6
html/wifi.tpl
Unescape View File

@ -64,6 +64,12 @@
<div id="ap-list" style="display:none"></div> <div id="ap-list" style="display:none"></div>
</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="Modal hidden" id="psk-modal">
<div class="Dialog"> <div class="Dialog">
<form action="/wifi/connect" method="post" id="conn-form"> <form action="/wifi/connect" method="post" id="conn-form">

80
html_orig/about.html
Unescape View File

@ -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>

165
html_orig/css/app.css
Unescape View File

@ -461,8 +461,6 @@ h1 {
h2 { h2 {
font-size: 1.26563em; font-size: 1.26563em;
margin-bottom: 0.61805rem; } margin-bottom: 0.61805rem; }
h2:first-child {
margin-top: 0; }
td, th { td, th {
padding: 0.38198rem; padding: 0.38198rem;
@ -498,6 +496,21 @@ tbody td input[type="text"], tbody td input[type="number"] {
#loader.show { #loader.show {
opacity: 1; } 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 { button, input[type=submit], .button {
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -687,6 +700,8 @@ input[type="number"], input[type="password"], input[type="text"], textarea, sele
@media screen and (max-width: 544px) { @media screen and (max-width: 544px) {
.page-term #screen span:hover { .page-term #screen span:hover {
outline: 0 none; } } 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 { .page-term #buttons {
margin-top: 10px; margin-top: 10px;
white-space: nowrap; } white-space: nowrap; }
@ -701,3 +716,149 @@ input[type="number"], input[type="password"], input[type="text"], textarea, sele
#termwrap { #termwrap {
text-align: center; } 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; } }

326
html_orig/help.html
Unescape View File

@ -0,0 +1,326 @@
<!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">30</span>
<span class="bg1 fg15">31</span>
<span class="bg2 fg15">32</span>
<span class="bg3 fg0">33</span>
<span class="bg4 fg15">34</span>
<span class="bg5 fg15">35</span>
<span class="bg6 fg15">36</span>
<span class="bg7 fg0">37</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>

7
html_orig/jssrc/term.js
Unescape View File

@ -70,9 +70,10 @@
bg = inv ? cell.fg : cell.bg; bg = inv ? cell.fg : cell.bg;
// Update // Update
e.innerText = (cell.t+' ')[0]; e.innerText = (cell.t+' ')[0];
e.style.color = colorHex(fg); e.classList.className = 'fg'+fg+' bg'+bg;
e.style.backgroundColor = colorHex(bg); // e.style.color = colorHex(fg);
e.style.fontWeight = fg > 7 ? 'bold' : 'normal'; // e.style.backgroundColor = colorHex(bg);
// e.style.fontWeight = fg > 7 ? 'bold' : 'normal';
} }
/** Show entire screen */ /** Show entire screen */

25
html_orig/sass/_layout.scss
Unescape View File

@ -103,7 +103,7 @@ h1 {
h2 { h2 {
font-size: fsize(2); font-size: fsize(2);
margin-bottom: dist(-1); margin-bottom: dist(-1);
&:first-child{margin-top:0} //&:first-child{margin-top:0}
} }
td, th { td, th {
@ -153,3 +153,26 @@ tbody td {
opacity:1; 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;
}
}
}

16
html_orig/sass/_term-colors.scss
Unescape View File

@ -0,0 +1,16 @@
$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; }
}

20
html_orig/sass/app.scss
Unescape View File

@ -39,3 +39,23 @@ $c-form-highlight-a: #2972ba;
// import all our pages // import all our pages
@import "pages/wifi"; @import "pages/wifi";
@import "pages/term"; @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; }
}

63
html_orig/sass/pages/_about.scss
Unescape View File

@ -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: 6em;
}
td:nth-child(2) {
width: 8em;
}
}
}

10
html_orig/sass/pages/_term.scss
Unescape View File

@ -8,26 +8,28 @@
#screen { #screen {
@include noselect(); @include noselect();
font-family: monospace; font-family: monospace;
font-size: 16pt; font-size: 16pt;
white-space: nowrap; white-space: nowrap;
background: #111213; background: #111213;
padding: 6px; padding: 6px;
display: inline-block; display: inline-block;
border: 2px solid #3983CD; //#1bc249;
border: 2px solid #3983CD;//#1bc249;
span { span {
white-space: pre; white-space: pre;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
outline: 1px solid rgba(#ffffff,0.4); outline: 1px solid rgba(#ffffff, 0.4);
@include media($phone) { @include media($phone) {
outline: 0 none; outline: 0 none;
} }
} }
} }
.fg8, .fg9, .fg10, .fg11, .fg12, .fg13, .fg14, .fg15 {
font-weight: bold;
}
} }
#buttons { #buttons {

6
html_orig/term.html
Unescape View File

@ -24,6 +24,12 @@
</div> </div>
</div> </div>
<nav id="botnav">
<a href="/wifi">WiFi config</a><!--
--><a href="/help">Help</a><!--
--><a href="/about">About</a>
</nav>
<script> <script>
_root = window.location.host; _root = window.location.host;
termInit(%screenData%); termInit(%screenData%);

6
html_orig/wifi.html
Unescape View File

@ -64,6 +64,12 @@
<div id="ap-list" style="display:none"></div> <div id="ap-list" style="display:none"></div>
</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="Modal hidden" id="psk-modal">
<div class="Dialog"> <div class="Dialog">
<form action="/wifi/connect" method="post" id="conn-form"> <form action="/wifi/connect" method="post" id="conn-form">

2
libesphttpd

@ -1 +1 @@
Subproject commit a4e0fed2b281760349ddd107b827d8f6b0f56e02 Subproject commit 03003ea591a272df50159ba52f84ca84c5cad78e

31
user/cgi_main.c
Unescape View File

@ -1,8 +1,13 @@
#include <esp8266.h> #include <esp8266.h>
#include <httpd.h> #include <httpd.h>
#include <esp_sdk_ver.h>
#include "cgi_main.h" #include "cgi_main.h"
#include "screen.h" #include "screen.h"
#include "user_main.h"
#define STR_HELPER(x) #x
#define STR(x) STR_HELPER(x)
/** /**
* Main page template substitution * Main page template substitution
@ -32,3 +37,29 @@ httpd_cgi_state ICACHE_FLASH_ATTR tplScreen(HttpdConnData *connData, char *token
return HTTPD_CGI_DONE; 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;
}

1
user/cgi_main.h
Unescape View File

@ -2,5 +2,6 @@
#define CGI_MAIN_H #define CGI_MAIN_H
httpd_cgi_state tplScreen(HttpdConnData *connData, char *token, void **arg); httpd_cgi_state tplScreen(HttpdConnData *connData, char *token, void **arg);
httpd_cgi_state tplAbout(HttpdConnData *connData, char *token, void **arg);
#endif // CGI_MAIN_H #endif // CGI_MAIN_H

2
user/routes.c
Unescape View File

@ -27,6 +27,8 @@ HttpdBuiltInUrl routes[] = {
// --- Web pages --- // --- Web pages ---
ROUTE_TPL_FILE("/", tplScreen, "/term.tpl"), ROUTE_TPL_FILE("/", tplScreen, "/term.tpl"),
ROUTE_TPL_FILE("/about", tplAbout, "/about.tpl"),
ROUTE_FILE("/help", "/help.tpl"),
// --- Sockets --- // --- Sockets ---
ROUTE_WS(URL_WS_UPDATE, updateSockConnect), ROUTE_WS(URL_WS_UPDATE, updateSockConnect),

3
user/user_main.c
Unescape View File

@ -23,8 +23,7 @@
#include "io.h" #include "io.h"
#include "screen.h" #include "screen.h"
#include "routes.h" #include "routes.h"
#include "user_main.h"
#define FIRMWARE_VERSION "0.3"
#ifdef ESPFS_POS #ifdef ESPFS_POS
CgiUploadFlashDef uploadParams={ CgiUploadFlashDef uploadParams={

7
user/user_main.h
Unescape View File

@ -0,0 +1,7 @@
#ifndef USER_MAIN_H_H
#define USER_MAIN_H_H
#define FIRMWARE_VERSION "0.4"
#define TERMINAL_GITHUB_REPO "https://github.com/MightyPork/esp-vt100-firmware"
#endif //USER_MAIN_H_H
Write Preview
Loading…
Cancel
Save