parent
							
								
									16f81cd411
								
							
						
					
					
						commit
						f87f638f03
					
				@ -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>© 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> | 
				
			||||
@ -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> | 
				
			||||
| 
		 After Width: | Height: | Size: 8.8 KiB  | 
@ -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>© 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> | 
				
			||||
@ -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> | 
				
			||||
@ -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; } | 
				
			||||
} | 
				
			||||
@ -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; | 
				
			||||
		} | 
				
			||||
	} | 
				
			||||
} | 
				
			||||
@ -1 +1 @@ | 
				
			||||
Subproject commit a4e0fed2b281760349ddd107b827d8f6b0f56e02 | 
				
			||||
Subproject commit 03003ea591a272df50159ba52f84ca84c5cad78e | 
				
			||||
@ -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
 | 
				
			||||
					Loading…
					
					
				
		Reference in new issue