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

Troubleshooting

+
+

Tips & Troubleshooting

- +
-
-

Screen

+
+

Escape Sequences Intro

+ +
+ VT102 + +

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: +

+ +
    +
  • CSI commands: \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
  • +
  • SGR commands: CSI terminated by m. Those set text attributes and colors. E.g. \e[
  • +
  • OSC commands: \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.
  • +
  • There are a few other commands that don't follow this pattern, such as \e7 or + \e#8, mostly for historical reasons.
  • +
+ +

A list of the most important escape sequences is presented in the following sections.

+
+
- +

+ 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. +

+
-
-

Color Reference

+
+

Text Attributes

+ +
+

+ 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:

+ + + + + + + + + + + + + +
StyleEnableDisable
Bold121, 22
Faint222
Italic323
Underlined424
Blink525
Inverse727
Striked929
๐”‰๐”ฏ๐”ž๐”จ๐”ฑ๐”ฒ๐”ฏ2023
+
+
-

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

+ +
+

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.

+ +

Foreground colors

+ +
+ 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 +
+ +
+ 90 + 91 + 92 + 93 + 94 + 95 + 96 + 97 +
+ +

Background colors

+ +
+ 40 + 41 + 42 + 43 + 44 + 45 + 46 + 47 +
+ +
+ 100 + 101 + 102 + 103 + 104 + 105 + 106 + 107 +
+
+
- Foreground +
+

User Input

-
- 30 - 31 - 32 - 33 - 34 - 35 - 36 - 37 +
+

Keyboard

+ +

+ 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: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyCodeKeyCode
๐Ÿก‘\e[AF1\eOP
๐Ÿก“\e[BF2\eOQ
๐Ÿก’\e[CF3\eOR
๐Ÿก\e[DF4\eOS
Home\eOHF5\e[15~
End\eOFF6\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~
EnterCR (13)F11\e[23~
Ctrl+EnterLF (10)F12\e[24~
TabTAB (9)ESCESC (27)
BackspaceBS (8)Ctrl+A..ZASCII 1-26
+ +

Action buttons

+ +

+ 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. +

+ +

Mouse

+ +

+ 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. +

+
-
- 90 - 91 - 92 - 93 - 94 - 95 - 96 - 97 +
+

Cursor Commands

+ +
+

+ 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. +

+ +

Movement

+ + + + + + + + + + + + + + + + + + + + + +
CodeMeaning
+ \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[6nQuery cursor position. Sent back as \e[r;cR.
+ +

Save / restore

+ + + + + + + + + + + + + +
CodeMeaning
\e[s
\e[u
Save (s) or restore (u) cursor position
\e7
\e8
Save (7) or restore (8) cursor position and attributes
+ +

Scrolling Region

+ + + + + + + + + + + + + + + + + +
CodeMeaning
\e[a;brSet 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.
+ +

Tab stops

+ + + + + + + + + + + + + + + + + +
CodeMeaning
\eHSet 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).
+ +

Other options

+ + + + + + + + + + + + + +
CodeMeaning
\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
+
- Background - -
- 40 - 41 - 42 - 43 - 44 - 45 - 46 - 47 +
+

Screen Content Manipulation

+ +
+

+ 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. +

+ + + + + + + + + + + + + + + + + + + + + + + + + +
CodeMeaning
\e[mJClear part of screen. m: 0 - from cursor, 1 - to cursor, 2 - all
\e[mKErase 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.
+
-
- 100 - 101 - 102 - 103 - 104 - 105 - 106 - 107 +
+

Alternate Character Sets

+ +
+

+ 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:

+ +
    +
  • B - US ASCII (default)
  • +
  • A - UK ASCII: # replaced with ยฃ
  • +
  • 0 - Symbols and basic line drawing (standard DEC alternate character set)
  • +
  • 1 - Symbols and advanced line drawing (based on DOS codepage 437)
  • +
+ +

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:

+ + + + + + + + + + + + + + + + + + + + +
CodeMeaning
\e(xSet G0 = codepage x
\e)xSet 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.

-
-

User Input

- -

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

+
+

Title and Button Labels

+ +
+

+ 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. +

+ + + + + + + + + + + + + +
CodeMeaning
\e]0;title\aSet 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".
+
-
-

Supported ANSI Escape Sequences

- -

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.

- -

Text Attributes

- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributeMeaning
0Reset text attributes to default
1Bold
21 or 22Bold off
7Inverse (fg/bg swap when printing)
27Inverse OFF
30-37, 90-97Foreground color, normal and bright
40-47, 100-107Background color, normal and bright
- -

Cursor

- -

Movement commands scroll the screen if needed. The coordinates are 1-based, origin top left.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CodeParamsMeaning
\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>GcolumnGo 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
- -

Screen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CodeParamsMeaning
\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>\arows;colsSet screen size (max ~ 80x30). This also clears the screen. This is a custom ESPTerm OSC command.
- -

System Commands

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CodeParamsMeaning
\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=โ€ฆ\aTitle textSet terminal title. This is a custom ESPTerm OSC command.
\e]BTNn=โ€ฆ\a1-5, labelSet 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. -
+
+

System Commands

+ +
+ + + + + + + + + + + + + + + + +
CodeMeaning
\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. +
+
diff --git a/html_orig/sass/form/_form_layout.scss b/html_orig/sass/form/_form_layout.scss index 5adc85e..c18f59b 100755 --- a/html_orig/sass/form/_form_layout.scss +++ b/html_orig/sass/form/_form_layout.scss @@ -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; diff --git a/html_orig/sass/layout/_base.scss b/html_orig/sass/layout/_base.scss index eda4c7e..bac9829 100755 --- a/html_orig/sass/layout/_base.scss +++ b/html_orig/sass/layout/_base.scss @@ -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; } diff --git a/html_orig/sass/layout/_box.scss b/html_orig/sass/layout/_box.scss index d1fed9f..93d11dd 100755 --- a/html_orig/sass/layout/_box.scss +++ b/html_orig/sass/layout/_box.scss @@ -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; } diff --git a/html_orig/sass/pages/_about.scss b/html_orig/sass/pages/_about.scss index d87129f..e55ce39 100644 --- a/html_orig/sass/pages/_about.scss +++ b/html_orig/sass/pages/_about.scss @@ -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; } } } diff --git a/user/version.h b/user/version.h index f910102..25c4ccc 100644 --- a/user/version.h +++ b/user/version.h @@ -7,7 +7,7 @@ #define FW_V_MAJOR 0 #define FW_V_MINOR 6 -#define FW_V_PATCH 9 +#define FW_V_PATCH 10 #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