diff --git a/html_orig/css/app.css b/html_orig/css/app.css index 24a1467..d09050c 100644 --- a/html_orig/css/app.css +++ b/html_orig/css/app.css @@ -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) { @@ -1605,20 +1650,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 { diff --git a/html_orig/img/adapter.jpg b/html_orig/img/adapter.jpg new file mode 100644 index 0000000..ab6cfd3 Binary files /dev/null and b/html_orig/img/adapter.jpg differ diff --git a/html_orig/img/vt100.jpg b/html_orig/img/vt100.jpg new file mode 100644 index 0000000..909461a Binary files /dev/null and b/html_orig/img/vt100.jpg differ diff --git a/html_orig/js/app.js b/html_orig/js/app.js index 4eb4b82..6d27006 100644 --- a/html_orig/js/app.js +++ b/html_orig/js/app.js @@ -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() { diff --git a/html_orig/jssrc/appcommon.js b/html_orig/jssrc/appcommon.js index b78747c..bfcd9b8 100644 --- a/html_orig/jssrc/appcommon.js +++ b/html_orig/jssrc/appcommon.js @@ -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() { diff --git a/html_orig/pages/help.php b/html_orig/pages/help.php index 05c8e18..90c1afb 100644 --- a/html_orig/pages/help.php +++ b/html_orig/pages/help.php @@ -1,361 +1,598 @@ -
ESPTerm emulates VT102 (pictured) with some additions from later VT models and xterm
.
+ All commonly used attributes and commands are supported.
+ ESPTerm is capable of displaying ncurses applications such as Midnight Commander using agetty.
+ 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 \e
to indicate ESC.
+
+ Escape sequences can be divided based on their first character and structure. Most common types are: +
+ +\e[
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. \e[?7;10h
, \e[2J
m
. Those set text attributes and colors. E.g. \e[
\e]
followed by any number of UTF-8 characters (ESPTerm supports up to 64)
+ terminated by \e\\
(ESC and backslash) or Bell (7). Those are used to exchange text strings.\e7
or
+ \e#8
, mostly for historical reasons.A list of the most important escape sequences is presented in the following sections.
+The initial screen size, title text and button labels can be configured in Terminal Settings.
-+ 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. +
+
+ All text attributes are set using SGR commands like \e[10;20;30m
, with up to 10 numbers separated by semicolons.
+ To restore all attributes to their default states, use SGR 0: \e[0m
or \e[m
.
+
Those are the supported text attributes SGR codes:
+ +Style | Enable | Disable |
---|---|---|
Bold | 1 | 21, 22 |
Faint | 2 | 22 |
Italic | 3 | 23 |
Underlined | 4 | 24 |
Blink | 5 | 25 |
Inverse | 7 | 27 |
9 | 29 | |
๐๐ฏ๐๐จ๐ฑ๐ฒ๐ฏ | 20 | 23 |
Color is set using \e[<c>m
where <c>
are numbers separated by semicolons
- (and \e
is ESC, code 27). The actual color representation depends on a color theme which
- can be selected in Terminal Settings.
Colors are set using SGR commands (like \e[10;20;30m
). 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.
The actual color representation depends on a color theme which + can be selected in Terminal Settings.
+ ++ 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: +
+ +Key | Code | Key | Code |
---|---|---|---|
๐ก | +\e[A |
+ F1 | +\eOP |
+
๐ก | +\e[B |
+ F2 | +\eOQ |
+
๐ก | +\e[C |
+ F3 | +\eOR |
+
๐ก | +\e[D |
+ F4 | +\eOS |
+
Home | +\eOH |
+ F5 | +\e[15~ |
+
End | +\eOF |
+ F6 | +\e[17~ |
+
Insert | +\e[2~ |
+ F7 | +\e[18~ |
+
Delete | +\e[3~ |
+ F8 | +\e[19~ |
+
Page Up | +\e[5~ |
+ F9 | +\e[20~ |
+
Page Down | +\e[6~ |
+ F10 | +\e[21~ |
+
Enter | +CR (13) |
+ F11 | +\e[23~ |
+
Ctrl+Enter | +LF (10) |
+ F12 | +\e[24~ |
+
Tab | +TAB (9) |
+ ESC | +ESC (27) |
+
Backspace | +BS (8) |
+ Ctrl+A..Z | +ASCII 1-26 |
+
+ 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. +
+ +
+ ESPTerm in the current version does not implement standard mouse input. Instead, clicks/taps produce CSI sequences
+ \e[r;cM
(row, column). You can use this for virtual on-screen buttons.
+
+ 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. +
+ +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. +
+ ++ Legend: + Italic letters such as n 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. +
+ +Code | Meaning |
---|---|
+ \e[nA + \e[nB + \e[nC + \e[nD + |
+ Move cursor up (A), down (B), right (C), left (D) | +
+ \e[nF + \e[nE + |
+ Go n lines up (F) or down (E), start of line | +
+ \e[rd + \e[cG + \e[r;cH + |
+
+ Go to absolute position - row (d), column (G), or both (H). Use \e[H to go to 1,1.
+ |
+
\e[6n | +Query cursor position. Sent back as \e[r;cR . |
+
Code | Meaning |
---|---|
\e[s \e[u |
+ Save (s) or restore (u) cursor position | +
\e7 \e8 |
+ Save (7) or restore (8) cursor position and attributes | +
Code | Meaning |
---|---|
\e[a;br | +Set scrolling region to rows a through b 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. | +
\e[?6h \e[?6l |
+ 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. | +
+ \e[nS + \e[nT + |
+ Move contents of the Scrolling Region up (S) or down (T), pad with empty lines of the current background color. | +
Code | Meaning |
---|---|
\eH | +Set tab stop at the current column. There are, by default, tabs every 8 columns. | +
+ \e[nI + \e[nZ + |
+ Advance (I) or go back (Z) n tab stops or end/start of line. ASCII TAB (9) is equivalent to \e[1I |
+
+ \e[0g + \e[3g + |
+ Clear tab stop at the current column (0), or all columns (3). | +
Code | Meaning |
---|---|
\e[?7h \e[?7l |
+ Enable (h) or disable (l) cursor auto-wrap and screen auto-scroll | +
\e[?25h \e[?25l |
+ Show (h) or hide (l) the cursor | +
+ Legend: + Italic letters such as n 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. +
+ +Code | Meaning |
---|---|
\e[mJ | +Clear part of screen. m: 0 - from cursor, 1 - to cursor, 2 - all | +
\e[mK | +Erase part of line. m: 0 - from cursor, 1 - to cursor, 2 - all | +
+ \e[nX + | +Erase n characters in line. | +
+ \e[nL + \e[nM + |
+ Insert (L) or delete (M) n lines. Following lines are pulled up or pushed down. | +
+ \e[n@ + \e[nP + |
+ Insert (@) or delete (P) n characters. The rest of the line is pulled left or pushed right. + Characters going past the end of line are lost. | +
+ 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. +
+ +The following codepages are implemented:
+ +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.
+ +
+ 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 (\ec
).
+
The following commands are used:
+ +Code | Meaning |
---|---|
\e(x | +Set G0 = codepage x | +
\e)x | +Set G1 = codepage x | +
SO (14) | +Activate G0 | +
SI (15) | +Activate G1 | +
To make the text bold, use the "bold" attribute (eg. \e[31;40;1m
for
- bold red on black).
The colors are reset to default using \e[0m
. For more info, see the tables below.
- 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 buttons under the screen send ASCII codes 1, 2, 3, 4, 5. This choice was made to make their parsing as simple as possible.
- -
- Mouse input (click/tap) is sent as \e[<y>;<x>M
. You can use this for virtual on-screen buttons.
-
+ 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. +
+ +Code | Meaning |
---|---|
\e]0;title\a | +Set screen title (this is a standard OSC command) | +
+ \e]81;btn1\a + \e]82;btn2\a + \e]83;btn3\a + \e]84;btn4\a + \e]85;btn5\a + |
+ Set button 1-5 label - eg. \e]81;Yes\a
+ sets the first button text to "Yes". |
+
Sequences are started by ASCII code 27 (ESC, \e
, \x1b
, \033
)
Instead of \a
(BELL, ASCII 7) in the commands, you can use `\e\` (ESC + backslash). It's the Text Separator code.
- All text attributes are set using \e[...m
where the dots are numbers separated by semicolons.
- You can combine up to 3 attributes in a single command.
-
Attribute | -Meaning | -
---|---|
0 | -Reset text attributes to default | -
1 | -Bold | -
21 or 22 | -Bold off | -
7 | -Inverse (fg/bg swap when printing) | -
27 | -Inverse OFF | -
30-37, 90-97 | -Foreground color, normal and bright | -
40-47, 100-107 | -Background color, normal and bright | -
Movement commands scroll the screen if needed. The coordinates are 1-based, origin top left.
- -Code | -Params | -Meaning | -
---|---|---|
\e[<n>A | -[count] | -Move cursor up | -
\e[<n>B | -[count] | -Move cursor down | -
\e[<n>C | -[count] | -Move cursor forward (right) | -
\e[<n>D | -[count] | -Move cursor backward (left) | -
\e[<n>E | -[count] | -Go N lines down, start of line | -
\e[<n>F | -[count] | -Go N lines up, start of line | -
\e[<n>G | -column | -Go to column | -
\e[<y>;<x>G | -[row=1];[col=1] | -Go to row and column | -
\e[6n | --- | -Query cursor position. Position is sent back as \e[?;?R with row;column. |
-
\e[s | --- | -Store position | -
\e[u | --- | -Restore position | -
\e7 | --- | -Store position & attributes | -
\e8 | --- | -Restore position & attributes | -
\e[?25l | --- | -Hide cursor | -
\e[?25h | --- | -Show cursor | -
\e[?7l | --- | -Disable cursor auto-wrap & auto-scroll at end of screen | -
\e[?7h | --- | -Enable cursor auto-wrap & auto-scroll at end of screen | -
Code | -Params | -Meaning | -
---|---|---|
\e[<m>J | -[mode=0] | -Clear screen. Mode: 0 - from cursor, 1 - to cursor, 2 - all | -
\e[<m>K | -[mode=0] | -Erase line. Mode: 0 - from cursor, 1 - to cursor, 2 - all | -
\e[<n>S | -[lines] | -Scroll screen content up, add empty line at the bottom | -
\e[<n>T | -[lines] | -Scroll screen content down, add empty line at the top | -
\e]W<r>;<c>\a | -rows;cols | -Set screen size (max ~ 80x30). This also clears the screen. This is a custom ESPTerm OSC command. | -
Code | -Params | -Meaning | -
---|---|---|
\ec | --- | -- "Device Reset" - clear screen, reset attributes, show cursor & move it to 1,1. - The screen size and WiFi settings stay unchanged. - | -
\e[5n | --- | -Query device status, replies with \e[0n "device is OK". Can be used to check if the UART works. |
-
\e]TITLE=โฆ\a | -Title text | -Set terminal title. This is a custom ESPTerm OSC command. | -
\e]BTNn=โฆ\a | -1-5, label | -Set button label. This is a custom ESPTerm OSC command. | -
ASCII 24 (18h) | -- | 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. - | -
Code | Meaning |
---|---|
\ec | ++ Clear screen, reset attributes and cursor. + The screen size, title and button labels remain unchanged. + | +
\e[5n | +
+ Query device status, ESPTerm replies with \e[0n "device is OK".
+ Can be used to check if the terminal has booted up and is ready to receive commands. |
+
CAN (24) | ++ 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. + | +