Merge branch 'help-page-update' into work

_build_assets.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+source "_build_common.sh"
+
+echo 'Copying resources...'
+
+cp -r img out/img
+cp favicon.ico out/
+
+if [[ $ESP_PROD ]]; then
+	echo 'Cleaning junk files...'
+	find out/ -name "*.orig" -delete
+	find out/ -name "*.xcf"  -delete
+	find out/ -name "*~"     -delete
+	find out/ -name "*.bak"  -delete
+	find out/ -name "*.map"  -delete
+fi

_build_common.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+export FRONT_END_HASH=$(git rev-parse --short HEAD)

_build_css.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+source "_build_common.sh"
+
+echo 'Building CSS...'
+
+mkdir -p out/css
+npm run sass -- --output-style compressed sass/app.scss "out/css/app.$FRONT_END_HASH.css"

_build_html.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+source "_build_common.sh"
+
+echo 'Building HTML...'
+
+php ./compile_html.php

_build_js.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+source "_build_common.sh"
+
+mkdir -p out/js
+echo 'Generating lang.js...'
+php ./dump_js_lang.php
+
+echo 'Processing JS...'
+npm run babel -- -o "out/js/app.$FRONT_END_HASH.js" --source-maps js/lib \
+    js/lib/chibi.js \
+    js/lib/keymaster.js \
+    js/lib/polyfills.js \
+    js/utils.js \
+    js/modal.js \
+    js/notif.js \
+    js/appcommon.js \
+    js/lang.js \
+    js/wifi.js \
+    js/term_* \
+    js/debug_screen.js \
+    js/soft_keyboard.js \
+    js/term.js

build.sh

@@ -2,51 +2,13 @@
 
 cd $(dirname $0)
 
-FRONT_END_HASH=$(git rev-parse --short HEAD)
+source "_build_common.sh"
 
-rm -r out/*
+rm -fr out/*
-mkdir out/js
-mkdir out/css
 
-echo 'Generating lang.js...'
+./_build_css.sh
-php ./dump_js_lang.php
+./_build_js.sh
-
+./_build_html.sh
-echo 'Packing JS...'
+./_build_assets.sh
-npm run babel -- -o "out/js/app.$FRONT_END_HASH.js" --source-maps js/lib \
-    js/lib/chibi.js \
-    js/lib/keymaster.js \
-    js/lib/polyfills.js \
-    js/utils.js \
-    js/modal.js \
-    js/notif.js \
-    js/appcommon.js \
-    js/lang.js \
-    js/wifi.js \
-    js/term_* \
-    js/debug_screen.js \
-    js/soft_keyboard.js \
-    js/term.js
-
-echo 'Building CSS...'
-
-npm run sass -- --output-style compressed sass/app.scss "out/css/app.$FRONT_END_HASH.css"
-
-echo 'Building HTML...'
-
-php ./compile_html.php
-
-echo 'Copying resources...'
-
-cp -r img out/img
-cp favicon.ico out/
-
-if [[ $ESP_PROD ]]; then
-	echo 'Cleaning junk files...'
-	find out/ -name "*.orig" -delete
-	find out/ -name "*.xcf"  -delete
-	find out/ -name "*~"     -delete
-	find out/ -name "*.bak"  -delete
-	find out/ -name "*.map"  -delete
-fi
 
 echo 'ESPTerm front-end ready'

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`
+					Save (`s`) and restore (`r`) any option set using `CSI ? <i>n</i> h`.
-					sets the 3rd button to send string "iv" when pressed.
+					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.
+			Colors are set using SGR commands (like `\e[30;47m`). The following tables list the SGR
-			Selected colors are used for any new text entered, as well as for empty space when using line and screen clearing commands.
+			codes to use. Selected colors are used for any new text entered, as well as for empty
-			The configured default colors can be restored using SGR 39 for foreground and SGR 49 for background.
+			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/_print_override.scss

@@ -0,0 +1,115 @@
+@media print {
+	.Row.buttons, nav {
+		display: none !important;
+	}
+	.Row.buttons .button {
+		display: none !important;
+	}
+
+	h1, h2, h3 {
+		// chrome ignores those :(
+		break-after: avoid-page!important;
+		page-break-after: avoid!important;
+		font-family: sans-serif;
+	}
+
+	html, body {
+		background: white;
+		color: black;
+		font-family: serif;
+		//font-size: 12pt;
+		line-height: 1.3em;
+	}
+
+	label, p {
+		color: black !important;
+		text-shadow: none !important;
+	}
+
+	.Box {
+		box-shadow: none;
+	}
+
+	input, select, button {
+		background: white !important;
+		color: black !important;
+		border: 1px solid black !important;
+	}
+
+	a {
+		color: #004eff !important;
+	}
+
+	a[href^="http://"]::after,
+	a[href^="https://"]::after {
+		content: attr(href);
+		padding-left: .8ex;
+		text-decoration: underline !important;
+	}
+	p a {
+		word-wrap: break-word;
+	}
+
+	.Row.checkbox .box {
+		border-color: black;
+		border-radius: 3px;
+		background: white;
+		color: black;
+	}
+
+	.button {
+		background: white; border: 1px solid black;
+		text-shadow: none !important;
+		color: black;
+		box-shadow: none;
+		text-decoration: underline !important;
+	}
+
+	[class^="icn-"], [class*=" icn-"] {
+		&::before {
+			display: none;
+		}
+	}
+
+	.Box .Row {
+		display: block !important;
+	}
+
+	.Box.fold h2::after {
+		display: none;
+	}
+
+	#outer {
+		display: block;
+		overflow: auto;
+		width: unset;
+		height: unset;
+		position: static;
+	}
+
+	html, body {
+		overflow: auto !important;
+		width: unset; height: unset;
+	}
+
+	.Box {
+		padding: 0; border: 0 none;
+	}
+
+	.charset div span:nth-child(1),
+	.charset div span:nth-child(2) {
+		color: #666;
+	}
+
+	.page-help code {
+		background: rgba(0, 215, 255, 0.31);
+	}
+
+	[noprint] {
+		display: none !important;
+	}
+
+	#content tbody th {
+		color: black !important;
+	}
+}

sass/app.scss

@@ -55,3 +55,5 @@ $screen-stack: "DejaVu Sans Mono", "Liberation Mono", "Inconsolata", "Menlo", mo
 @include media($tablet-max) {
 	.mq-normal-min { display: none !important; }
 }
+
+@import "print_override";

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;
+}