Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 MightyPork
|
fe699c7918 | ||
|
MightyPork
|
4edaa0687d | ||
|
MightyPork
|
f8ebae044a | ||
|
MightyPork
|
9e9539472c | ||
|
MightyPork
|
b57e0ee75b | ||
|
MightyPork
|
65e34a1634 |
+2
-2
@@ -5,7 +5,7 @@ cmake_minimum_required(VERSION 3.7)
|
||||
# Do not attempt to build it with cmake, use make instead. #
|
||||
###################################################################
|
||||
|
||||
project(esp_vt100_firmware)
|
||||
project(ESPTerm)
|
||||
|
||||
set(CMAKE_CXX_STANDARD GNU99)
|
||||
|
||||
@@ -165,4 +165,4 @@ add_definitions(
|
||||
-DDEBUG_HEAP=1
|
||||
-DESPFS_HEATSHRINK)
|
||||
|
||||
add_executable(esp_vt100_firmware ${SOURCE_FILES})
|
||||
add_executable(ESPTerm ${SOURCE_FILES})
|
||||
|
||||
+60
-17
@@ -416,8 +416,12 @@ a:hover {
|
||||
cursor: pointer; }
|
||||
|
||||
ul > * {
|
||||
padding-top: .2em;
|
||||
padding-bottom: .2em; }
|
||||
padding-top: .3em;
|
||||
padding-bottom: .3em; }
|
||||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0; }
|
||||
|
||||
/* Main outer container */
|
||||
#outer {
|
||||
@@ -629,7 +633,36 @@ ul > * {
|
||||
.Box.mobopen .Row.explain {
|
||||
margin-top: 18px; } }
|
||||
|
||||
.Box.fold h2 {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 2px 1.3rem 2px 5px;
|
||||
margin: 0 -5px 0 -5px; }
|
||||
.Box.fold h2::after {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
content: '▸';
|
||||
top: 50%;
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
transform: translate(0, -50%) rotate(90deg); }
|
||||
.Box.fold.expanded h2::after {
|
||||
transform: translate(-25%, -50%) rotate(-90deg);
|
||||
margin-bottom: 1rem; }
|
||||
.Box.fold .Row {
|
||||
display: none; }
|
||||
.Box.fold.expanded .Row {
|
||||
display: flex; }
|
||||
.Box.fold.expanded .Row.v {
|
||||
display: block; }
|
||||
|
||||
@media screen and (max-width: 544px) {
|
||||
.Box.fold h2, .Box.mobcol h2 {
|
||||
padding: 2px 1.3rem 2px 5px;
|
||||
margin: 0 -5px 0 -5px; }
|
||||
.Box.fold.expanded h2::after, .Box.mobcol.expanded h2::after {
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
.Box.mobcol h2 {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@@ -648,10 +681,12 @@ ul > * {
|
||||
margin-bottom: 1rem; }
|
||||
.Box.mobcol .Row {
|
||||
display: none; }
|
||||
.Box.mobcol #ap-box {
|
||||
display: none; }
|
||||
.Box.mobcol.expanded .Row {
|
||||
display: flex; }
|
||||
.Box.mobcol.expanded .Row.v {
|
||||
display: block; }
|
||||
.Box.mobcol #ap-box {
|
||||
display: none; }
|
||||
.Box.mobcol.expanded #ap-box {
|
||||
display: block; } }
|
||||
.Modal {
|
||||
@@ -875,6 +910,16 @@ form {
|
||||
margin-top: 0; }
|
||||
.Row:last-child {
|
||||
margin-bottom: 0; }
|
||||
.Row.v {
|
||||
display: block; }
|
||||
.Row .aside {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 5px; }
|
||||
@media screen and (max-width: 544px) {
|
||||
.Row .aside {
|
||||
margin: 0;
|
||||
float: none; } }
|
||||
.Row .spacer {
|
||||
width: 160px; }
|
||||
@media screen and (max-width: 544px) {
|
||||
@@ -1107,7 +1152,7 @@ body.term #screen {
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-family: monospace;
|
||||
font-size: 16pt;
|
||||
font-size: 20px;
|
||||
white-space: nowrap;
|
||||
background: #111213;
|
||||
padding: 6px;
|
||||
@@ -1115,12 +1160,11 @@ body.term #screen {
|
||||
border: 2px solid #3983CD; }
|
||||
body.term #screen span {
|
||||
white-space: pre;
|
||||
cursor: pointer; }
|
||||
body.term #screen span:hover {
|
||||
outline: 1px solid rgba(255, 255, 255, 0.4); }
|
||||
@media screen and (max-width: 544px) {
|
||||
body.term #screen span:hover {
|
||||
outline: 0 none; } }
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 1.15em;
|
||||
width: 0.6em;
|
||||
overflow: visible; }
|
||||
body.term #buttons {
|
||||
margin-top: 10px;
|
||||
white-space: nowrap; }
|
||||
@@ -1605,20 +1649,19 @@ body.term #botnav {
|
||||
padding: 0.38198rem 0;
|
||||
text-align: center; }
|
||||
|
||||
.ansiref, .ansiref td, .ansiref th {
|
||||
.Row table, .Row table td, .Row table th {
|
||||
border: 1px solid #666; }
|
||||
.ansiref th, .ansiref td {
|
||||
.Row table th, .Row table td {
|
||||
white-space: normal; }
|
||||
.ansiref th {
|
||||
.Row table th {
|
||||
background-color: rgba(255, 255, 255, 0.1); }
|
||||
|
||||
.ansiref td:nth-child(1) {
|
||||
font-family: monospace; }
|
||||
.ansiref.w100 {
|
||||
width: 100%; }
|
||||
.ansiref.w100 td:nth-child(1) {
|
||||
width: 9em; }
|
||||
.ansiref.w100 td:nth-child(2) {
|
||||
width: 8em; }
|
||||
width: 6em; }
|
||||
|
||||
@media screen and (min-width: 545px) {
|
||||
.mq-phone {
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
+40
-9
@@ -1216,7 +1216,7 @@ $.ready(function () {
|
||||
});
|
||||
|
||||
// Expanding boxes on mobile
|
||||
$('.Box.mobcol').forEach(function(x) {
|
||||
$('.Box.mobcol,.Box.fold').forEach(function(x) {
|
||||
var h = x.querySelector('h2');
|
||||
|
||||
var hdl = function() {
|
||||
@@ -1567,12 +1567,14 @@ var Screen = (function () {
|
||||
bg: 0,
|
||||
attrs: 0,
|
||||
suppress: false, // do not turn on in blink interval (for safe moving)
|
||||
forceOn: false,
|
||||
hidden: false, // do not show
|
||||
hanging: false, // xenl
|
||||
};
|
||||
|
||||
var screen = [];
|
||||
var blinkIval;
|
||||
var cursorFlashStartIval;
|
||||
|
||||
var frakturExceptions = {
|
||||
'C': '\u212d',
|
||||
@@ -1717,14 +1719,14 @@ var Screen = (function () {
|
||||
}
|
||||
|
||||
if (!cursor.suppress) {
|
||||
_draw(_curCell(), cursor.a);
|
||||
_draw(_curCell(), cursor.forceOn || cursor.a);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// blink attribute
|
||||
setInterval(function () {
|
||||
$('#screen').removeClass('blink-hide');
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
$('#screen').addClass('blink-hide');
|
||||
}, 800); // 200 ms ON
|
||||
}, 1000);
|
||||
@@ -1752,6 +1754,8 @@ var Screen = (function () {
|
||||
|
||||
if (!inited) _init();
|
||||
|
||||
var cursorMoved;
|
||||
|
||||
// Set size
|
||||
num = parse2B(str, i); i += 2; // height
|
||||
num2 = parse2B(str, i); i += 2; // width
|
||||
@@ -1763,6 +1767,7 @@ var Screen = (function () {
|
||||
// Cursor position
|
||||
num = parse2B(str, i); i += 2; // row
|
||||
num2 = parse2B(str, i); i += 2; // col
|
||||
cursorMoved = (cursor.x != num2 || cursor.y != num);
|
||||
cursorSet(num, num2);
|
||||
// console.log("Cursor at ",num, num2);
|
||||
|
||||
@@ -1826,9 +1831,17 @@ var Screen = (function () {
|
||||
|
||||
_drawAll();
|
||||
|
||||
if (!cursor.hidden || cursor.hanging) {
|
||||
// hide cursor asap
|
||||
_draw(_curCell(), false);
|
||||
// if (!cursor.hidden || cursor.hanging || !cursor.suppress) {
|
||||
// // hide cursor asap
|
||||
// _draw(_curCell(), false);
|
||||
// }
|
||||
|
||||
if (cursorMoved) {
|
||||
cursor.forceOn = true;
|
||||
cursorFlashStartIval = setTimeout(function() {
|
||||
cursor.forceOn = false;
|
||||
}, 1200);
|
||||
_draw(_curCell(), true);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1897,6 +1910,7 @@ var Screen = (function () {
|
||||
/** Handle connections */
|
||||
var Conn = (function() {
|
||||
var ws;
|
||||
var heartbeatTout;
|
||||
|
||||
function onOpen(evt) {
|
||||
console.log("CONNECTED");
|
||||
@@ -1913,9 +1927,13 @@ var Conn = (function() {
|
||||
|
||||
function onMessage(evt) {
|
||||
try {
|
||||
//console.log("RX: ", evt.data);
|
||||
// Assume all our messages are screen updates
|
||||
Screen.load(evt.data);
|
||||
// . = heartbeat
|
||||
if (evt.data != '.') {
|
||||
//console.log("RX: ", evt.data);
|
||||
// Assume all our messages are screen updates
|
||||
Screen.load(evt.data);
|
||||
}
|
||||
heartbeat();
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
@@ -1936,6 +1954,8 @@ var Conn = (function() {
|
||||
}
|
||||
|
||||
function init() {
|
||||
heartbeat();
|
||||
|
||||
ws = new WebSocket("ws://"+_root+"/term/update.ws");
|
||||
ws.onopen = onOpen;
|
||||
ws.onclose = onClose;
|
||||
@@ -1948,11 +1968,22 @@ var Conn = (function() {
|
||||
if (status !== 200) location.reload(true);
|
||||
console.log("Data received!");
|
||||
Screen.load(resp);
|
||||
heartbeat();
|
||||
|
||||
showPage();
|
||||
});
|
||||
}
|
||||
|
||||
function heartbeat() {
|
||||
clearTimeout(heartbeatTout);
|
||||
heartbeatTout = setTimeout(heartbeatFail, 3000);
|
||||
}
|
||||
|
||||
function heartbeatFail() {
|
||||
console.error("Heartbeat lost, reloading...");
|
||||
location.reload();
|
||||
}
|
||||
|
||||
return {
|
||||
ws: null,
|
||||
init: init,
|
||||
|
||||
@@ -16,7 +16,7 @@ $.ready(function () {
|
||||
});
|
||||
|
||||
// Expanding boxes on mobile
|
||||
$('.Box.mobcol').forEach(function(x) {
|
||||
$('.Box.mobcol,.Box.fold').forEach(function(x) {
|
||||
var h = x.querySelector('h2');
|
||||
|
||||
var hdl = function() {
|
||||
|
||||
+39
-8
@@ -10,12 +10,14 @@ var Screen = (function () {
|
||||
bg: 0,
|
||||
attrs: 0,
|
||||
suppress: false, // do not turn on in blink interval (for safe moving)
|
||||
forceOn: false,
|
||||
hidden: false, // do not show
|
||||
hanging: false, // xenl
|
||||
};
|
||||
|
||||
var screen = [];
|
||||
var blinkIval;
|
||||
var cursorFlashStartIval;
|
||||
|
||||
var frakturExceptions = {
|
||||
'C': '\u212d',
|
||||
@@ -160,14 +162,14 @@ var Screen = (function () {
|
||||
}
|
||||
|
||||
if (!cursor.suppress) {
|
||||
_draw(_curCell(), cursor.a);
|
||||
_draw(_curCell(), cursor.forceOn || cursor.a);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// blink attribute
|
||||
setInterval(function () {
|
||||
$('#screen').removeClass('blink-hide');
|
||||
setTimeout(function() {
|
||||
setTimeout(function () {
|
||||
$('#screen').addClass('blink-hide');
|
||||
}, 800); // 200 ms ON
|
||||
}, 1000);
|
||||
@@ -195,6 +197,8 @@ var Screen = (function () {
|
||||
|
||||
if (!inited) _init();
|
||||
|
||||
var cursorMoved;
|
||||
|
||||
// Set size
|
||||
num = parse2B(str, i); i += 2; // height
|
||||
num2 = parse2B(str, i); i += 2; // width
|
||||
@@ -206,6 +210,7 @@ var Screen = (function () {
|
||||
// Cursor position
|
||||
num = parse2B(str, i); i += 2; // row
|
||||
num2 = parse2B(str, i); i += 2; // col
|
||||
cursorMoved = (cursor.x != num2 || cursor.y != num);
|
||||
cursorSet(num, num2);
|
||||
// console.log("Cursor at ",num, num2);
|
||||
|
||||
@@ -269,9 +274,17 @@ var Screen = (function () {
|
||||
|
||||
_drawAll();
|
||||
|
||||
if (!cursor.hidden || cursor.hanging) {
|
||||
// hide cursor asap
|
||||
_draw(_curCell(), false);
|
||||
// if (!cursor.hidden || cursor.hanging || !cursor.suppress) {
|
||||
// // hide cursor asap
|
||||
// _draw(_curCell(), false);
|
||||
// }
|
||||
|
||||
if (cursorMoved) {
|
||||
cursor.forceOn = true;
|
||||
cursorFlashStartIval = setTimeout(function() {
|
||||
cursor.forceOn = false;
|
||||
}, 1200);
|
||||
_draw(_curCell(), true);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -340,6 +353,7 @@ var Screen = (function () {
|
||||
/** Handle connections */
|
||||
var Conn = (function() {
|
||||
var ws;
|
||||
var heartbeatTout;
|
||||
|
||||
function onOpen(evt) {
|
||||
console.log("CONNECTED");
|
||||
@@ -356,9 +370,13 @@ var Conn = (function() {
|
||||
|
||||
function onMessage(evt) {
|
||||
try {
|
||||
//console.log("RX: ", evt.data);
|
||||
// Assume all our messages are screen updates
|
||||
Screen.load(evt.data);
|
||||
// . = heartbeat
|
||||
if (evt.data != '.') {
|
||||
//console.log("RX: ", evt.data);
|
||||
// Assume all our messages are screen updates
|
||||
Screen.load(evt.data);
|
||||
}
|
||||
heartbeat();
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
@@ -379,6 +397,8 @@ var Conn = (function() {
|
||||
}
|
||||
|
||||
function init() {
|
||||
heartbeat();
|
||||
|
||||
ws = new WebSocket("ws://"+_root+"/term/update.ws");
|
||||
ws.onopen = onOpen;
|
||||
ws.onclose = onClose;
|
||||
@@ -391,11 +411,22 @@ var Conn = (function() {
|
||||
if (status !== 200) location.reload(true);
|
||||
console.log("Data received!");
|
||||
Screen.load(resp);
|
||||
heartbeat();
|
||||
|
||||
showPage();
|
||||
});
|
||||
}
|
||||
|
||||
function heartbeat() {
|
||||
clearTimeout(heartbeatTout);
|
||||
heartbeatTout = setTimeout(heartbeatFail, 3000);
|
||||
}
|
||||
|
||||
function heartbeatFail() {
|
||||
console.error("Heartbeat lost, reloading...");
|
||||
location.reload();
|
||||
}
|
||||
|
||||
return {
|
||||
ws: null,
|
||||
init: init,
|
||||
|
||||
+561
-324
@@ -1,361 +1,598 @@
|
||||
<div class="Box">
|
||||
<h2>Troubleshooting</h2>
|
||||
<div class="Box fold">
|
||||
<h2>Tips & Troubleshooting</h2>
|
||||
|
||||
<ul>
|
||||
<li>ESPTerm communicates with external µC via UART on pins <b>Rx</b> and <b>Tx</b>.
|
||||
It can be configured in <a href="<?= url('cfg_system') ?>">System Settings</a>.
|
||||
Make sure you're using the correct baud rate and other settings on the other side.
|
||||
<div class="Row v">
|
||||
<img src="/img/adapter.jpg" class="aside" alt="ESPTerm v2">
|
||||
<ul>
|
||||
<li><b>Communication UART (Rx, Tx)</b> can be configured in the <a href="<?= url('cfg_system') ?>">System Settings</a>.
|
||||
|
||||
<li>Boot log and debug messages are available on pin <b>GPIO2</b> (P2) at 115200\,bps, 1 stop bit, no parity.
|
||||
<li><b>Boot log and debug messages</b> are available on pin <b>GPIO2</b> (P2) at 115200\,baud, 1 stop bit, no parity.
|
||||
Those messages may be disabled through compile flags.
|
||||
|
||||
<li>ESPTerm uses 3.3\,V logic. For communication with 5\,V logic (eg. Aurdino), 470\,R
|
||||
protection resistors are recommended. The ESPTerm breakout board already includes those resistors.
|
||||
<li><b>Loopback test</b>: Connect the Rx and Tx pins with a piece of wire. Anything you type in the browser should
|
||||
appear on the screen. Set Parser Timeout = 0 in <a href="<?= url('cfg_term') ?>">Terminal Settings</a>
|
||||
to be able to manually enter escape sequences.
|
||||
|
||||
<li>If the Low Voltage Detector ("LVD") LED on the ESPTerm breakout lights up, your power connections have too high
|
||||
resistance or the power supply is insufficient. ESP8266 can consume in short spikes up to 500\,A and
|
||||
the supply voltage on the module must not drop below about 2.7\,V. Avoid needless breadboard jumpers and too thin wires.
|
||||
<li><b>For best performance</b>, use the module in Client mode (connected to external network) and minimize the number
|
||||
of simultaneous connections. Enabling AP consumes extra RAM and strains the processor.
|
||||
|
||||
<li>Connect Rx and Tx with a piece of wire to verify that the terminal works correctly; you should then immediately
|
||||
see what you type in the browser. <i>This won't work if your ESP8266 board has a built-in USB-serial
|
||||
converter connected to those pins.</i>
|
||||
<li>In AP mode, <b>check that the WiFi channel used is clear</b>; interference may cause flaky connection.
|
||||
A good mobile app to use for this is
|
||||
<a href="https://play.google.com/store/apps/details?id=com.farproc.wifi.analyzer">WiFi Analyzer (Google Play)</a>.
|
||||
Adjust the hotspot strength and range using the Tx Power setting.
|
||||
|
||||
<li>For best performance, use the module in Client mode (connected to external network). Enabling AP mode consumes
|
||||
extra RAM and cycles, since the captive portal DNS server and DHCP server are be loaded.
|
||||
|
||||
<li>In AP mode, check that the channel used by ESPTerm is clear; interference may cause flaky connection. A good mobile app to use for this is <a href="https://play.google.com/store/apps/details?id=com.farproc.wifi.analyzer">WiFi Analyzer (Google Play)</a>
|
||||
|
||||
<li>The terminal browser display needs WebSockets for the real-time updating to work.
|
||||
It will not work with some old browsers (Android < 4.4, IE < 10, Opera Mini)
|
||||
- see the <a href="https://caniuse.com/websockets/embed/">compatibility chart</a>.
|
||||
|
||||
<li>At most 4 clients can be connected to the AP at the same time. This is a limitation of the ESP8266 SDK.
|
||||
</ul>
|
||||
<li>Hold the BOOT button (GPIO0 to GND) for ~1 second to force enable AP. Hold it for ~6 seconds to restore default settings.
|
||||
(This is indicated by the blue LED rapidly flashing). Default settings can be overwritten in the
|
||||
<a href="<?= url('cfg_system') ?>">System Settings</a>.
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Box">
|
||||
<h2>Screen</h2>
|
||||
<div class="Box fold">
|
||||
<h2>Escape Sequences Intro</h2>
|
||||
|
||||
<ul>
|
||||
<li>Most ANSI escape sequences are supported.
|
||||
<div class="Row v">
|
||||
<img src="/img/vt100.jpg" class="aside" alt="VT102">
|
||||
|
||||
<li>The initial screen size and other terminal options can be configured in
|
||||
<a href="<?= url('cfg_term') ?>">Terminal Settings</a>
|
||||
<p>ESPTerm emulates VT102 (pictured) with some additions from later VT models and <code>xterm</code>.
|
||||
All commonly used attributes and commands are supported.
|
||||
ESPTerm is capable of displaying ncurses applications such as <i>Midnight Commander</i> using <i>agetty</i>.</p>
|
||||
|
||||
<li>Display updates are sent to the browser after 20 ms of inactivity on the communication UART.
|
||||
This is to avoid hogging the server with tiny updates during large screen repaints.
|
||||
</ul>
|
||||
<p>
|
||||
ESPTerm accepts UTF-8 characters received on the communication UART and displays them on the screen,
|
||||
interpreting some codes as Control Characters. Those are e.g. Carriage Return (13), Line Feed (10), Tab (9), Backspace (8) and Bell (7).
|
||||
Escape sequences start with the control character ESC (27), followed by any number of ASCII characters
|
||||
forming the body of the command. On this page, we'll use <code>\e</code> to indicate ESC.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Escape sequences can be divided based on their first character and structure. Most common types are:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>CSI commands: <code>\e[</code> followed by 1 optional leading character, multiple numbers divided by
|
||||
semicolons, and one or two trailing characters. Those control the cursor, set attributes and manipulate screen content. E.g. <code>\e[?7;10h</code>, <code>\e[2J</code></li>
|
||||
<li>SGR commands: CSI terminated by <code>m</code>. Those set text attributes and colors. E.g. <code>\e[</code></li>
|
||||
<li>OSC commands: <code>\e]</code> followed by any number of UTF-8 characters (ESPTerm supports up to 64)
|
||||
terminated by <code>\e\\</code> (ESC and backslash) or Bell (7). Those are used to exchange text strings.</li>
|
||||
<li>There are a few other commands that don't follow this pattern, such as <code>\e7</code> or
|
||||
<code>\e#8</code>, mostly for historical reasons.</li>
|
||||
</ul>
|
||||
|
||||
<p>A list of the most important escape sequences is presented in the following sections.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Box theme-0">
|
||||
<h2>Color Reference</h2>
|
||||
<div class="Box fold">
|
||||
<h2>Screen Behavior</h2>
|
||||
|
||||
<p>Color is set using <code>\e[<c>m</code> where <code><c></code> are numbers separated by semicolons
|
||||
(and <code>\e</code> is ESC, code 27). The actual color representation depends on a color theme which
|
||||
can be selected in <a href="<?= url('cfg_term') ?>">Terminal Settings</a>.</p>
|
||||
<div class="Row v">
|
||||
<p>The initial screen size, title text and button labels can be configured in <a href="<?= url('cfg_term') ?>">Terminal Settings</a>.</p>
|
||||
|
||||
<b>Foreground</b>
|
||||
|
||||
<div class="colorprev">
|
||||
<span class="bg7 fg0">30</span>
|
||||
<span class="bg0 fg1">31</span>
|
||||
<span class="bg0 fg2">32</span>
|
||||
<span class="bg0 fg3">33</span>
|
||||
<span class="bg0 fg4">34</span>
|
||||
<span class="bg0 fg5">35</span>
|
||||
<span class="bg0 fg6">36</span>
|
||||
<span class="bg0 fg7">37</span>
|
||||
<p>
|
||||
Screen updates are sent to the browser through a WebSocket after some time of inactivity on the communication UART
|
||||
(called "Redraw Delay"). After an update is sent, at least a time of "Redraw Cooldown" must elapse before the next
|
||||
update can be sent. Those delays are used is to avoid burdening the server with tiny updates during a large screen
|
||||
repaint. If you experience issues (broken image due to dropped bytes), try adjusting those config options. It may also
|
||||
be useful to try different baud rates.
|
||||
</p>
|
||||
</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>To make the text bold, use the "bold" attribute (eg. <code>\e[31;40;1m</code> for
|
||||
<span style="padding: 2px;" class="bg0 fg1 bold">bold red on black</span>).</p>
|
||||
|
||||
<p>The colors are reset to default using <code>\e[0m</code>. For more info, see the tables below.</p>
|
||||
</div>
|
||||
|
||||
<div class="Box">
|
||||
<div class="Box fold">
|
||||
<h2>Text Attributes</h2>
|
||||
|
||||
<div class="Row v">
|
||||
<p>
|
||||
All text attributes are set using SGR commands like <code>\e[10;20;30m</code>, with up to 10 numbers separated by semicolons.
|
||||
To restore all attributes to their default states, use SGR 0: <code>\e[0m</code> or <code>\e[m</code>.
|
||||
</p>
|
||||
|
||||
<p>Those are the supported text attributes SGR codes:</p>
|
||||
|
||||
<table>
|
||||
<thead><tr><th>Style</th><th>Enable</th><th>Disable</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><b>Bold</b></td><td>1</td><td>21, 22</td></tr>
|
||||
<tr><td style="opacity:.6">Faint</td><td>2</td><td>22</td></tr>
|
||||
<tr><td><i>Italic</i></td><td>3</td><td>23</td></tr>
|
||||
<tr><td><u>Underlined</u></td><td>4</td><td>24</td></tr>
|
||||
<tr><td>Blink</td><td>5</td><td>25</td></tr>
|
||||
<tr><td><span style="color:black;background:#ccc;">Inverse</span></td><td>7</td><td>27</td></tr>
|
||||
<tr><td><s>Striked</s></td><td>9</td><td>29</td></tr>
|
||||
<tr><td>𝔉𝔯𝔞𝔨𝔱𝔲𝔯</td><td>20</td><td>23</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Box fold theme-0">
|
||||
<h2>Colors</h2>
|
||||
|
||||
<div class="Row v">
|
||||
<p>Colors are set using SGR commands (like <code>\e[10;20;30m</code>). The following tables list the SGR codes to use.
|
||||
Selected colors are used for any new text entered, as well as for empty space when using line and screen clearing commands.
|
||||
The configured default colors can be restored using SGR 39 for foreground and SGR 49 for background.</p>
|
||||
|
||||
<p>The actual color representation depends on a color theme which
|
||||
can be selected in <a href="<?= url('cfg_term') ?>">Terminal Settings</a>.</p>
|
||||
|
||||
<h3>Foreground colors</h3>
|
||||
|
||||
<div class="colorprev">
|
||||
<span class="bg7 fg0">30</span>
|
||||
<span class="bg0 fg1">31</span>
|
||||
<span class="bg0 fg2">32</span>
|
||||
<span class="bg0 fg3">33</span>
|
||||
<span class="bg0 fg4">34</span>
|
||||
<span class="bg0 fg5">35</span>
|
||||
<span class="bg0 fg6">36</span>
|
||||
<span class="bg0 fg7">37</span>
|
||||
</div>
|
||||
|
||||
<div class="colorprev">
|
||||
<span class="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>
|
||||
|
||||
<h3>Background colors</h3>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Box fold">
|
||||
<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.
|
||||
</p>
|
||||
<div class="Row v">
|
||||
<h3>Keyboard</h3>
|
||||
|
||||
<p>The buttons under the screen send ASCII codes 1, 2, 3, 4, 5. This choice was made to make their parsing as simple as possible.</p>
|
||||
<p>
|
||||
The user can input text using their keyboard, or on Android, using the on-screen keyboard which is open using
|
||||
a button beneath the screen. Supported are all printable characters, as well as many control keys, such as arrows, Ctrl+letters
|
||||
and function keys. Sequences sent by function keys are based on VT102 and xterm. Here are some examples:
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Mouse input (click/tap) is sent as <code>\e[<y>;<x>M</code>. You can use this for virtual on-screen buttons.
|
||||
</p>
|
||||
<table>
|
||||
<thead><tr><th>Key</th><th>Code</th><th>Key</th><th>Code</th></tr></thead>
|
||||
<tr>
|
||||
<td>🡑</td>
|
||||
<td><code>\e[A</code></td>
|
||||
<td>F1</td>
|
||||
<td><code>\eOP</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>🡓</td>
|
||||
<td><code>\e[B</code></td>
|
||||
<td>F2</td>
|
||||
<td><code>\eOQ</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>🡒</td>
|
||||
<td><code>\e[C</code></td>
|
||||
<td>F3</td>
|
||||
<td><code>\eOR</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>🡐</td>
|
||||
<td><code>\e[D</code></td>
|
||||
<td>F4</td>
|
||||
<td><code>\eOS</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Home</td>
|
||||
<td><code>\eOH</code></td>
|
||||
<td>F5</td>
|
||||
<td><code>\e[15~</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>End</td>
|
||||
<td><code>\eOF</code></td>
|
||||
<td>F6</td>
|
||||
<td><code>\e[17~</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Insert</td>
|
||||
<td><code>\e[2~</code></td>
|
||||
<td>F7</td>
|
||||
<td><code>\e[18~</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Delete</td>
|
||||
<td><code>\e[3~</code></td>
|
||||
<td>F8</td>
|
||||
<td><code>\e[19~</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Page Up</td>
|
||||
<td><code>\e[5~</code></td>
|
||||
<td>F9</td>
|
||||
<td><code>\e[20~</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Page Down</td>
|
||||
<td><code>\e[6~</code></td>
|
||||
<td>F10</td>
|
||||
<td><code>\e[21~</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Enter</td>
|
||||
<td><code>CR (13)</code></td>
|
||||
<td>F11</td>
|
||||
<td><code>\e[23~</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ctrl+Enter</td>
|
||||
<td><code>LF (10)</code></td>
|
||||
<td>F12</td>
|
||||
<td><code>\e[24~</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Tab</td>
|
||||
<td><code>TAB (9)</code></td>
|
||||
<td>ESC</td>
|
||||
<td><code>ESC (27)</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Backspace</td>
|
||||
<td><code>BS (8)</code></td>
|
||||
<td>Ctrl+A..Z</td>
|
||||
<td><code>ASCII 1-26</code></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h3>Action buttons</h3>
|
||||
|
||||
<p>
|
||||
The blue buttons under the screen send ASCII codes 1, 2, 3, 4, 5, which incidentally correspond to Ctrl+A,B,C,D,E.
|
||||
This choice was made to make button press parsing as simple as possible.
|
||||
</p>
|
||||
|
||||
<h3>Mouse</h3>
|
||||
|
||||
<p>
|
||||
ESPTerm in the current version does not implement standard mouse input. Instead, clicks/taps produce CSI sequences
|
||||
<code>\e[<i>r</i>;<i>c</i>M</code> (row, column). You can use this for virtual on-screen buttons.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Box">
|
||||
<h2>Supported ANSI Escape Sequences</h2>
|
||||
<div class="Box fold">
|
||||
<h2>Cursor Commands</h2>
|
||||
|
||||
<p>Sequences are started by ASCII code 27 (ESC, <code>\e</code>, <code>\x1b</code>, <code>\033</code>)</p>
|
||||
<div class="Row v">
|
||||
<p>
|
||||
The coordinates are 1-based, origin is top left. The cursor can move within the entire screen,
|
||||
or in the active Scrolling Region if Origin Mode is enabled.
|
||||
</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>
|
||||
<p>After writing a character, the cursor advances to the right. If it has reached the end of the row,
|
||||
it stays on the same line, but writing the next character makes it jump to the start of the next
|
||||
line first, scrolling up if needed. If Auto-wrap mode is disabled, the cursor never wraps or scrolls
|
||||
the screen.
|
||||
</p>
|
||||
|
||||
<h3>Text Attributes</h3>
|
||||
<p>
|
||||
<b>Legend:</b>
|
||||
Italic letters such as <i>n</i> are ASCII numbers that serve as arguments, separated with a semicolon.
|
||||
If an argument is left out, it's treated as 0 or 1, depending on what makes sense for the command.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
<h3>Movement</h3>
|
||||
|
||||
<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>1</td>
|
||||
<td>Bold</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21 or 22</td>
|
||||
<td>Bold off</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>
|
||||
<table class="ansiref w100">
|
||||
<thead><tr><th>Code</th><th>Meaning</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
\e[<i>n</i>A<br>
|
||||
\e[<i>n</i>B<br>
|
||||
\e[<i>n</i>C<br>
|
||||
\e[<i>n</i>D
|
||||
</td>
|
||||
<td>Move cursor up (A), down (B), right (C), left (D)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
\e[<i>n</i>F<br>
|
||||
\e[<i>n</i>E
|
||||
</td>
|
||||
<td>Go <i>n</i> lines up (F) or down (E), start of line</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
\e[<i>r</i>d<br>
|
||||
\e[<i>c</i>G<br>
|
||||
\e[<i>r</i>;<i>c</i>H
|
||||
</td>
|
||||
<td>
|
||||
Go to absolute position - row (d), column (G), or both (H). Use <code>\e[H</code> to go to 1,1.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[6n</td>
|
||||
<td>Query cursor position. Sent back as <code>\e[<i>r</i>;<i>c</i>R</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Cursor</h3>
|
||||
<h3>Save / restore</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>Meaning</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>\e[s<br>\e[u</td>
|
||||
<td>Save (s) or restore (u) cursor position</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e7<br>\e8</td>
|
||||
<td>Save (7) or restore (8) cursor position and attributes</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="ansiref w100">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Code</th>
|
||||
<th>Params</th>
|
||||
<th>Meaning</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>\e[<n>A</td>
|
||||
<td>[count]</td>
|
||||
<td>Move cursor up</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[<n>B</td>
|
||||
<td>[count]</td>
|
||||
<td>Move cursor down</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[<n>C</td>
|
||||
<td>[count]</td>
|
||||
<td>Move cursor forward (right)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[<n>D</td>
|
||||
<td>[count]</td>
|
||||
<td>Move cursor backward (left)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[<n>E</td>
|
||||
<td>[count]</td>
|
||||
<td>Go N lines down, start of line</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[<n>F</td>
|
||||
<td>[count]</td>
|
||||
<td>Go N lines up, start of line</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[<n>G</td>
|
||||
<td>column</td>
|
||||
<td>Go to column</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[<y>;<x>G</td>
|
||||
<td>[row=1];[col=1]</td>
|
||||
<td>Go to row and column</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[6n</td>
|
||||
<td>--</td>
|
||||
<td>Query cursor position. Position is sent back as <code>\e[?;?R</code> with row;column.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[s</td>
|
||||
<td>--</td>
|
||||
<td>Store position</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[u</td>
|
||||
<td>--</td>
|
||||
<td>Restore position</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e7</td>
|
||||
<td>--</td>
|
||||
<td>Store position & attributes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e8</td>
|
||||
<td>--</td>
|
||||
<td>Restore position & attributes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[?25l</td>
|
||||
<td>--</td>
|
||||
<td>Hide cursor</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[?25h</td>
|
||||
<td>--</td>
|
||||
<td>Show cursor</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[?7l</td>
|
||||
<td>--</td>
|
||||
<td>Disable cursor auto-wrap & auto-scroll at end of screen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[?7h</td>
|
||||
<td>--</td>
|
||||
<td>Enable cursor auto-wrap & auto-scroll at end of screen</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Scrolling Region</h3>
|
||||
|
||||
<h3>Screen</h3>
|
||||
<table class="ansiref w100">
|
||||
<thead><tr><th>Code</th><th>Meaning</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>\e[<i>a</i>;<i>b</i>r</td>
|
||||
<td>Set scrolling region to rows <i>a</i> through <i>b</i> and go to 1,1. By default, the
|
||||
scrolling region spans the entire screen height. The cursor can leave the region using
|
||||
absolute position commands, unless Origin Mode (see below) is active.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[?6h<br>\e[?6l</td>
|
||||
<td>Enable (h) or disable (l) Origin Mode and go to 1,1. In Origin Mode, all coordinates
|
||||
are relative to the Scrolling Region and the cursor can't leave the region.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
\e[<i>n</i>S<br>
|
||||
\e[<i>n</i>T
|
||||
</td>
|
||||
<td>Move contents of the Scrolling Region up (S) or down (T), pad with empty lines of the current background color.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="ansiref w100">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Code</th>
|
||||
<th>Params</th>
|
||||
<th>Meaning</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>\e[<m>J</td>
|
||||
<td>[mode=0]</td>
|
||||
<td>Clear screen. Mode: 0 - from cursor, 1 - to cursor, 2 - all</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[<m>K</td>
|
||||
<td>[mode=0]</td>
|
||||
<td>Erase line. Mode: 0 - from cursor, 1 - to cursor, 2 - all</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[<n>S</td>
|
||||
<td>[lines]</td>
|
||||
<td>Scroll screen content up, add empty line at the bottom</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[<n>T</td>
|
||||
<td>[lines]</td>
|
||||
<td>Scroll screen content down, add empty line at the top</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e]W<r>;<c>\a</td>
|
||||
<td>rows;cols</td>
|
||||
<td>Set screen size (max ~ 80x30). This also clears the screen. This is a custom ESPTerm OSC command.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Tab stops</h3>
|
||||
|
||||
<h3>System Commands</h3>
|
||||
<table class="ansiref w100">
|
||||
<thead><tr><th>Code</th><th>Meaning</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>\eH</td>
|
||||
<td>Set tab stop at the current column. There are, by default, tabs every 8 columns.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
\e[<i>n</i>I<br>
|
||||
\e[<i>n</i>Z
|
||||
</td>
|
||||
<td>Advance (I) or go back (Z) <i>n</i> tab stops or end/start of line. ASCII TAB (9) is equivalent to <code>\e[1I</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
\e[0g<br>
|
||||
\e[3g<br>
|
||||
</td>
|
||||
<td>Clear tab stop at the current column (0), or all columns (3).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<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[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>
|
||||
<tr>
|
||||
<td>\e]TITLE=…\a</td>
|
||||
<td>Title text</td>
|
||||
<td>Set terminal title. This is a custom ESPTerm OSC command.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e]BTNn=…\a</td>
|
||||
<td>1-5, label</td>
|
||||
<td>Set button label. This is a custom ESPTerm OSC command.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ASCII 24 (18h)</td>
|
||||
<td></td>
|
||||
<td>This symbol is sent by ESPTerm when it becomes ready to receive commands. It can be used to wait before it becomes
|
||||
ready on power-up, or to detect a spontaneous ESPTerm restart - that could happen due to RAM exhaustion due
|
||||
to a memory leak, or perhaps a power outage.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Other options</h3>
|
||||
|
||||
<table class="ansiref w100">
|
||||
<thead><tr><th>Code</th><th>Meaning</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>\e[?7h<br>\e[?7l</td>
|
||||
<td>Enable (h) or disable (l) cursor auto-wrap and screen auto-scroll</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[?25h<br>\e[?25l</td>
|
||||
<td>Show (h) or hide (l) the cursor</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Box fold">
|
||||
<h2>Screen Content Manipulation</h2>
|
||||
|
||||
<div class="Row v">
|
||||
<p>
|
||||
<b>Legend:</b>
|
||||
Italic letters such as <i>n</i> are ASCII numbers that serve as arguments, separated with a semicolon.
|
||||
If an argument is left out, it's treated as 0 or 1, depending on what makes sense for the command.
|
||||
</p>
|
||||
|
||||
<table class="ansiref w100">
|
||||
<thead><tr><th>Code</th><th>Meaning</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>\e[<i>m</i>J</td>
|
||||
<td>Clear part of screen. <i>m</i>: 0 - from cursor, 1 - to cursor, 2 - all</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[<i>m</i>K</td>
|
||||
<td>Erase part of line. <i>m</i>: 0 - from cursor, 1 - to cursor, 2 - all</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
\e[<i>n</i>X
|
||||
</td>
|
||||
<td>Erase <i>n</i> characters in line.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
\e[<i>n</i>L<br>
|
||||
\e[<i>n</i>M
|
||||
</td>
|
||||
<td>Insert (L) or delete (M) <i>n</i> lines. Following lines are pulled up or pushed down.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
\e[<i>n</i>@<br>
|
||||
\e[<i>nP
|
||||
</td>
|
||||
<td>Insert (@) or delete (P) <i>n</i> characters. The rest of the line is pulled left or pushed right.
|
||||
Characters going past the end of line are lost.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Box fold">
|
||||
<h2>Alternate Character Sets</h2>
|
||||
|
||||
<div class="Row v">
|
||||
<p>
|
||||
ESPTerm implements Alternate Character Sets as a way to print box drawing characters
|
||||
and special symbols. A character set can change what each received ASCII character
|
||||
is printed as on the screen (eg. "{" is "π" in codepage 0). The implementation is based
|
||||
on the original VT devices.
|
||||
Since ESPTerm also fully supports UTF-8, you can probably ignore this feature and use
|
||||
Unicode directly. It's added for compatibility with some programs that use this.
|
||||
</p>
|
||||
|
||||
<p>The following codepages are implemented:</p>
|
||||
|
||||
<ul>
|
||||
<li>B - US ASCII (default)</li>
|
||||
<li>A - UK ASCII: # replaced with £</li>
|
||||
<li>0 - Symbols and basic line drawing (standard DEC alternate character set)</li>
|
||||
<li>1 - Symbols and advanced line drawing (based on DOS codepage 437)</li>
|
||||
</ul>
|
||||
|
||||
<p>To see what character maps to which symbol, look in the source code or try it. All codepages use codes 32-127, 32 being space.</p>
|
||||
|
||||
<p>
|
||||
There are two character set slots, G0 and G1.
|
||||
Those slots are selected as active using ASCII codes Shift In and Shift Out (those originally served for shifting
|
||||
a red-black typewriter tape). Each slot (G0 and G1) can have a different codepage assigned. G0 and G1 and the active slot number are
|
||||
saved and restored with the cursor and cleared with a screen reset (<code>\ec</code>).
|
||||
</p>
|
||||
|
||||
<p>The following commands are used:</p>
|
||||
|
||||
<table class="ansiref w100">
|
||||
<thead><tr><th>Code</th><th>Meaning</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>\e(<i>x</i></td>
|
||||
<td>Set G0 = codepage <i>x</i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e)<i>x</i></td>
|
||||
<td>Set G1 = codepage <i>x</i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SO (14)</td>
|
||||
<td>Activate G0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SI (15)</td>
|
||||
<td>Activate G1</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Box fold">
|
||||
<h2>Title and Button Labels</h2>
|
||||
|
||||
<div class="Row v">
|
||||
<p>
|
||||
It's possible to dynamically change the screen title text and action button labels.
|
||||
Setting an empty label to a button makes it look disabled. The buttons send ASCII 1-5 when clicked.
|
||||
Those changes are not retained after restart.
|
||||
</p>
|
||||
|
||||
<table class="ansiref w100">
|
||||
<thead><tr><th>Code</th><th>Meaning</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>\e]0;<i>title</i>\a</td>
|
||||
<td>Set screen title (this is a standard OSC command)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
\e]<i>81</i>;<i>btn1</i>\a<br>
|
||||
\e]<i>82</i>;<i>btn2</i>\a<br>
|
||||
\e]<i>83</i>;<i>btn3</i>\a<br>
|
||||
\e]<i>84</i>;<i>btn4</i>\a<br>
|
||||
\e]<i>85</i>;<i>btn5</i>\a<br>
|
||||
</td>
|
||||
<td>Set button 1-5 label - eg. <code>\e]81;Yes\a</code>
|
||||
sets the first button text to "Yes".</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Box fold">
|
||||
<h2>System Commands</h2>
|
||||
|
||||
<div class="Row v">
|
||||
<table class="ansiref w100">
|
||||
<thead><tr><th>Code</th><th>Meaning</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>\ec</td>
|
||||
<td>
|
||||
Clear screen, reset attributes and cursor.
|
||||
The screen size, title and button labels remain unchanged.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>\e[5n</td>
|
||||
<td>
|
||||
Query device status, ESPTerm replies with <code>\e[0n</code> "device is OK".
|
||||
Can be used to check if the terminal has booted up and is ready to receive commands.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CAN (24)</td>
|
||||
<td>
|
||||
This ASCII code is not a command, but is sent by ESPTerm when it becomes ready to receive commands.
|
||||
When this code is received on the UART, it means ESPTerm has restarted and is ready. Use this to detect
|
||||
spontaneous restarts which require a full screen repaint.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,6 +29,20 @@ form { @include naked(); }
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.v {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aside {
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
@include media($phone) {
|
||||
margin: 0; float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
width: $form-label-w;
|
||||
|
||||
|
||||
@@ -31,6 +31,11 @@ a:hover {
|
||||
}
|
||||
|
||||
ul > * {
|
||||
padding-top: .2em;
|
||||
padding-bottom: .2em;
|
||||
padding-top: .3em;
|
||||
padding-bottom: .3em;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -103,44 +103,69 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mobcol-base {
|
||||
h2 {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 2px 1.3rem 2px 5px;
|
||||
margin: 0 -5px 0 -5px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
content: '▸';
|
||||
|
||||
top:50%;
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
transform: translate(0,-50%) rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded h2::after {
|
||||
transform: translate(-25%,-50%) rotate(-90deg);
|
||||
margin-bottom: dist(0);
|
||||
}
|
||||
|
||||
.Row {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
.Row {
|
||||
display: flex;
|
||||
|
||||
&.v {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Box.fold {
|
||||
@include mobcol-base;
|
||||
}
|
||||
|
||||
@include media($phone) {
|
||||
.Box.mobcol {
|
||||
.Box.fold, .Box.mobcol {
|
||||
h2 {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 2px 1.3rem 2px 5px;
|
||||
margin: 0 -5px 0 -5px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
content: '▸';
|
||||
|
||||
top:50%;
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
transform: translate(0,-50%) rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded h2::after {
|
||||
transform: translate(-25%,-50%) rotate(-90deg);
|
||||
margin-bottom: dist(0);
|
||||
}
|
||||
}
|
||||
|
||||
.Row {
|
||||
display: none;
|
||||
}
|
||||
.Box.mobcol {
|
||||
@include mobcol-base;
|
||||
|
||||
#ap-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
.Row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#ap-box {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.ansiref {
|
||||
.Row table {
|
||||
&,td,th{
|
||||
border: 1px solid #666;
|
||||
}
|
||||
@@ -45,7 +45,9 @@
|
||||
th {
|
||||
background-color: rgba(255,255,255,.1);
|
||||
}
|
||||
}
|
||||
|
||||
.ansiref {
|
||||
td:nth-child(1) {
|
||||
font-family: monospace;
|
||||
}
|
||||
@@ -54,11 +56,7 @@
|
||||
width: 100%;
|
||||
|
||||
td:nth-child(1) {
|
||||
width: 9em;
|
||||
}
|
||||
|
||||
td:nth-child(2) {
|
||||
width: 8em;
|
||||
width: 6em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@ body.term {
|
||||
#screen {
|
||||
@include noselect();
|
||||
font-family: monospace;
|
||||
font-size: 16pt;
|
||||
font-size: 20px;//16pt; - 16pt causes vertical breaks in line drawing characters??
|
||||
white-space: nowrap;
|
||||
background: #111213;
|
||||
padding: 6px;
|
||||
@@ -27,12 +27,11 @@ body.term {
|
||||
span {
|
||||
white-space: pre;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
outline: 1px solid rgba(#ffffff, 0.4);
|
||||
@include media($phone) {
|
||||
outline: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
line-height: 1.15em; // this adjusts the spacing
|
||||
width: 0.6em; // horizontal spacing, estimated to be about right
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -19,6 +19,7 @@ volatile bool notify_cooldown = false;
|
||||
static ETSTimer notifyContentTim;
|
||||
static ETSTimer notifyLabelsTim;
|
||||
static ETSTimer notifyCooldownTim;
|
||||
static ETSTimer heartbeatTim;
|
||||
|
||||
// we're trying to do a kind of mutex here, without the actual primitives
|
||||
// this might glitch, very rarely.
|
||||
@@ -183,9 +184,18 @@ void ICACHE_FLASH_ATTR updateSockRx(Websock *ws, char *data, int len, int flags)
|
||||
}
|
||||
}
|
||||
|
||||
void ICACHE_FLASH_ATTR heartbeatTimCb(void *unused)
|
||||
{
|
||||
if (notify_available) {
|
||||
cgiWebsockBroadcast(URL_WS_UPDATE, ".", 1, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/** Socket connected for updates */
|
||||
void ICACHE_FLASH_ATTR updateSockConnect(Websock *ws)
|
||||
{
|
||||
ws_info("Socket connected to "URL_WS_UPDATE);
|
||||
ws->recvCb = updateSockRx;
|
||||
|
||||
TIMER_START(&heartbeatTim, heartbeatTimCb, 1000, 1);
|
||||
}
|
||||
|
||||
+8
-8
@@ -1146,14 +1146,14 @@ static const u16 codepage_1[] =
|
||||
0x2663, // 37 % ♣ (5)
|
||||
0x2660, // 38 & ♠ (6)
|
||||
0x2022, // 39 ' • (7) - inverse dot and circle left out, can be done with SGR
|
||||
0x231B, // 40 ( ⌛ - hourglass (timer icon)
|
||||
0x0,//0x231B, // 40 ( ⌛ - hourglass (timer icon)
|
||||
0x25CB, // 41 ) ○ (9)
|
||||
0x21AF, // 42 * ↯ - electricity (lightning monitor...)
|
||||
0x266A, // 43 + ♪ (13)
|
||||
0x266B, // 44 , ♫ (14)
|
||||
0x263C, // 45 - ☼ (15)
|
||||
0x2302, // 46 . ⌂ (127)
|
||||
0x2622, // 47 / ☢ - radioactivity (geiger counter...)
|
||||
0x0,//0x2622, // 47 / ☢ - radioactivity (geiger counter...)
|
||||
0x2591, // 48 0 ░ (176) - this block is kept aligned and ordered from DOS, moved -128
|
||||
0x2592, // 49 1 ▒ (177)
|
||||
0x2593, // 50 2 ▓ (178)
|
||||
@@ -1212,10 +1212,10 @@ static const u16 codepage_1[] =
|
||||
0x25BC, // 103 g ▼ (31)
|
||||
0x25BA, // 104 h ► (16)
|
||||
0x25C4, // 105 i ◄ (17)
|
||||
0x25E2, // 106 j ◢ - added for slanted corners
|
||||
0x25E3, // 107 k ◣
|
||||
0x25E4, // 108 l ◤
|
||||
0x25E5, // 109 m ◥
|
||||
0x0,//0x25E2, // 106 j ◢ - added for slanted corners
|
||||
0x0,//0x25E3, // 107 k ◣
|
||||
0x0,//0x25E4, // 108 l ◤
|
||||
0x0,//0x25E5, // 109 m ◥
|
||||
0x256D, // 110 n ╭ - rounded corners
|
||||
0x256E, // 111 o ╮
|
||||
0x256F, // 112 p ╯
|
||||
@@ -1231,8 +1231,8 @@ static const u16 codepage_1[] =
|
||||
0x0, // 122 z
|
||||
0x0, // 123 {
|
||||
0x0, // 124 |
|
||||
0x2714, // 125 } ✔ - checkboxes or checklist items
|
||||
0x2718, // 126 ~ ✘
|
||||
0x0,//0x2714, // 125 } ✔ - checkboxes or checklist items
|
||||
0x0,//0x2718, // 126 ~ ✘
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
+3
-3
@@ -6,11 +6,11 @@
|
||||
#define ESP_VT100_FIRMWARE_VERSION_H
|
||||
|
||||
#define FW_V_MAJOR 0
|
||||
#define FW_V_MINOR 6
|
||||
#define FW_V_PATCH 9
|
||||
#define FW_V_MINOR 7
|
||||
#define FW_V_PATCH 0
|
||||
|
||||
#define FIRMWARE_VERSION STR(FW_V_MAJOR) "." STR(FW_V_MINOR) "." STR(FW_V_PATCH) "+" GIT_HASH
|
||||
#define FIRMWARE_VERSION_NUM (FW_V_MAJOR*10000 + FW_V_MINOR*100 + FW_V_PATCH) // this is used in ID queries
|
||||
#define TERMINAL_GITHUB_REPO "https://github.com/MightyPork/esp-vt100-firmware"
|
||||
#define TERMINAL_GITHUB_REPO "https://github.com/MightyPork/ESPTerm"
|
||||
|
||||
#endif //ESP_VT100_FIRMWARE_VERSION_H
|
||||
|
||||
Reference in New Issue
Block a user