updated help page

pages/about.php

@@ -2,7 +2,7 @@
 	<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">
+	<img src="/img/cvut.svg" id="logo2" class="mq-phone" noprint>
 
 	<p>
 		&copy; Ondřej Hruška, 2016-2017

pages/help.php

@@ -1,5 +1,10 @@
 <div class="Box">
-	<a href="#" onclick="hpfold(1);return false">Expand all</a>&nbsp;|&nbsp;<a href="#" onclick="hpfold(0);return false">Collapse all</a>
+	<div noprint><a href="#" onclick="hpfold(1);return false">Expand all</a>&nbsp;|&nbsp;<a href="#" onclick="hpfold(0);return false">Collapse all</a><br>
+	<span class="smallpad"></span>
+	</div>
+	<i>Note: This list of commands is not exhaustive. \\
+	There's a more detailed and technical
+	<a href="https://espterm.github.io/docs/espterm-xterm.html">document</a> available online.</i>
 </div>
 
 <?php require __DIR__ . "/help/troubleshooting.php"; ?>

pages/help/cmd_cursor.php

@@ -184,6 +184,15 @@
 				</td>
 				<td>Enable (`h`) or disable (`l`) cursor auto-wrap and screen auto-scroll</td>
 			</tr>
+			<tr>
+				<td>
+					<code>
+						\e[?12h \\
+						\e[?12l
+					</code>
+				</td>
+				<td>Toggle cursor blinking (`h` on, `l` off)</td>
+			</tr>
 			<tr>
 				<td>
 					<code>
@@ -193,6 +202,15 @@
 				</td>
 				<td>Show (`h`) or hide (`l`) the cursor</td>
 			</tr>
+			<tr>
+				<td>
+					<code>
+						\e[?45h \\
+						\e[?45l
+					</code>
+				</td>
+				<td>Enable (`h`) or disable (`l`) reverse wrap-around (when using "move left" or backspace)</td>
+			</tr>
 			</tbody>
 		</table>
 	</div>

pages/help/cmd_screen.php

@@ -34,6 +34,13 @@
 					Erase _n_ characters in line.
 				</td>
 			</tr>
+			<tr>
+				<td>
+					`\e[<i>n</i>b`</td>
+				<td>
+					Repeat last printed characters _n_ times (moving cursor and using the current style).
+				</td>
+			</tr>
 			<tr>
 				<td>
 					<code>

pages/help/cmd_system.php

@@ -18,6 +18,10 @@
 					The screen size, title and button labels remain unchanged.
 				</td>
 			</tr>
+			<tr>
+				<td>`\e[8;<i>r</i>;<i>c</i>t`</td>
+				<td>Set screen size to _r_ rows and _c_ columns (this is a command borrowed from Xterm)</td>
+			</tr>
 			<tr>
 				<td>`\e[5n`</td>
 				<td>
@@ -33,6 +37,15 @@
 					spontaneous restarts which require a full screen repaint.
 				</td>
 			</tr>
+			<tr>
+				<td>`\e[<i>n</i> q`</td>
+				<td>
+					Set cursor style: eg. `\e[3 q` (the space is part of the command!).
+					0~-~block~(blink), 1~-~default, 2~-~block~(steady), 3~-~underline~(blink),
+					4~-~underline~(steady), 5~-~I-bar~(blink), 6~-~I-bar~(steady). The default style (number 1)
+					can be configured in Terminal Settings
+				</td>
+			</tr>
 			<tr>
 				<td>`\e]0;<i>t</i>\a`</td>
 				<td>Set screen title to _t_ (this is a standard OSC command)</td>
@@ -40,23 +53,48 @@
 			<tr>
 				<td>
 					<code>
-						\e]<i>80+n</i>;<i>t</i>\a
+						\e]<i>8x</i>;<i>t</i>\a
 					</code>
 				</td>
 				<td>
-					Set label for button _n_ = 1-5 (code 81-85) to _t_ - e.g.`\e]81;Yes\a`
+					Set label for button 1-5 (code 81-85) to _t_ - e.g.`\e]81;Yes\a`
 					sets the first button text to "Yes".
 				</td>
 			</tr>
 			<tr>
 				<td>
 					<code>
-						\e]<i>90+n</i>;<i>m</i>\a
+						\e]<i>9x</i>;<i>m</i>\a
+					</code>
+				</td>
+				<td>
+					Set message for button 1-5 (code 91-95) to _m_ - e.g.`\e]94;*\a`
+					sets the 3rd button to send "*" when pressed. The message can be up to
+					10 bytes long.
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<code>
+						\e]9;<i>t</i>\a
+					</code>
+				</td>
+				<td>
+					Show a notification with text _t_. This will be either a desktop notification
+					or a pop-up balloon.
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<code>
+						\e[?<i>n</i>s \\
+						\e[?<i>n</i>r
 					</code>
 				</td>
 				<td>
-					Set message for button _n_ = 1-5 (code 91-95) to _m_ - e.g.`\e]94;iv\a`
-					sets the 3rd button to send string "iv" when pressed.
+					Save (`s`) and restore (`r`) any option set using `CSI ? <i>n</i> h`.
+					This is used by some applications to back up the original state before
+					making changes.
 				</td>
 			</tr>
 			<tr>
@@ -67,7 +105,7 @@
 					</code>
 				</td>
 				<td>
-					Show (`h`) or hide (`l`) action buttons (the blue buttons under the screen).
+					Show (`h`) or hide (`l`) the action buttons (the blue buttons under the screen).
 				</td>
 			</tr>
 			<tr>
@@ -81,6 +119,33 @@
 					Show (`h`) or hide (`l`) menu/help links under the screen.
 				</td>
 			</tr>
+			<tr>
+				<td>
+					<code>
+						\e[?2004h \\
+						\e[?2004l
+					</code>
+				</td>
+				<td>
+					Enable (`h`) or disable (`l`) Bracketed Paste mode.
+					This mode makes any text sent using the Upload Tool be preceded by `\e[200\~`
+					and terminated by `\e[201\~`. This is useful for distinguishing keyboard input
+					from uploads.
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<code>
+						\e[?1049h \\
+						\e[?1049l
+					</code>
+				</td>
+				<td>
+					Switch to (`h`) or from (`l`) an alternate screen.
+					ESPTerm can't implement this fully, so the original screen content is not saved,
+					but it will remember the cursor, screen size, terminal title, button labels and messages.
+				</td>
+			</tr>
 			<tr>
 				<td>
 					<code>
@@ -93,10 +158,6 @@
 					SRM is the opposite of Local Echo, meaning `\e[12h` disables and `\e[12l` enables Local Echo.
 				</td>
 			</tr>
-			<tr>
-				<td>`\e[8;<i>r</i>;<i>c</i>t`</td>
-				<td>Set screen size to _r_ rows and _c_ columns (this is a command borrowed from Xterm)</td>
-			</tr>
 			</tbody>
 		</table>
 	</div>

pages/help/screen_behavior.php

@@ -3,7 +3,8 @@
 
 	<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>.
+			The initial screen size, title text and button labels can be configured
+			in <a href="<?= url('cfg_term') ?>">Terminal Settings</a>.
 		</p>
 
 		<p>
@@ -13,5 +14,17 @@
 			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>
+
+		<h3>UTF-8 support</h3>
+
+		<p>
+			ESPTerm supports all UTF-8 characters, but to reduce the screen buffer RAM size,
+			only a small amount of unique multi-byte characters can be used at the same time
+			(up to 160, depending on compile flags). Unique multi-byte characters are stored in a
+			look-up table and are removed when they are no longer used on the screen. In
+			rare cases it can happen that a character stays in the table after no longer
+			being used (this can be noticed when the table fills up and new characters
+			are not shown correctly). This is fixed by clearing the screen (`\e[2J` or `\ec`).
+		</p>
 	</div>
 </div>

pages/help/sgr_colors.php

@@ -1,16 +1,18 @@
 
-<div class="Box fold theme-0">
+<div class="Box fold theme-1">
 	<h2>Commands: Color SGR</h2>
 
 	<div class="Row v">
 		<p>
-			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.
+			Colors are set using SGR commands (like `\e[30;47m`). 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 clearing commands (except screen reset `\ec`, which first clears all
+			style attriutes. 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
+			The actual color representation of the basic 16 colors depends on a color theme which
 			can be selected in <a href="<?= url('cfg_term') ?>">Terminal Settings</a>.
 		</p>
 
@@ -61,5 +63,19 @@
 			<span class="bg14 fg0">106</span>
 			<span class="bg15 fg0">107</span>
 		</div>
+
+		<h3>256-color palette</h3>
+
+		<p>
+			ESPTerm supports in total 256 standard colors. The dark and bright basic colors are
+			numbered 0-7 and 8-15. To use colors higher than 15 (or 0-15 using this simpler numbering),
+			send `CSI 38 ; 5 ; <i>n</i> m`, where `n` is the color to set. Use 48 for background colors.
+		</p>
+
+		<p>
+			For a fererence of all 256 shades please refer to
+			<a href="https://jonasjacek.github.io/colors/">jonasjacek.github.io/colors</a>
+			or look it up elsewhere.
+		</p>
 	</div>
 </div>

pages/help/sgr_styles.php

@@ -3,7 +3,7 @@
 
 	<div class="Row v">
 		<p>
-			All text attributes are set using SGR commands like `\e[10;20;30m`, with up to 10 numbers separated by semicolons.
+			All text attributes are set using SGR commands like `\e[1;4m`, with up to 10 numbers separated by semicolons.
 			To restore all attributes to their default states, use SGR 0: `\e[0m` or `\e[m`.
 		</p>
 
@@ -16,11 +16,23 @@
 			<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 style="text-decoration: overline;">Overline</td><td>53</td><td>55</td></tr>
+			<tr><td><span id="blinkdemo">Blink</span></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>𝔉𝔯𝔞𝔨𝔱𝔲𝔯</td><td>20</td><td>23</td></tr>
+			<tr><td>Conceal<sup>1</sup></td><td>8</td><td>28</td></tr>
 			</tbody>
 		</table>
+		<p><sup>1</sup>Conceal turns all characters invisible.</p>
 	</div>
 </div>
+
+<script>
+	setInterval(function() {
+	  qs('#blinkdemo').className='';
+      setTimeout(function() {
+        qs('#blinkdemo').className='invisible';
+      }, 750);
+	}, 1000);
+</script>

sass/layout/_base.scss

@@ -26,6 +26,10 @@ a:hover {
 	display: none !important;
 }
 
+.invisible {
+	visibility: hidden !important;
+}
+
 [onclick] {
 	cursor: pointer;
 }

sass/pages/_about.scss

@@ -126,3 +126,8 @@
 		}
 	}
 }
+
+.smallpad {
+	display: block;
+	padding-bottom: 5px;
+}