See espterm.github.io

cfg_term.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
  7. <title>Terminal Settings :: ESPTerm</title>
  8. <link href="/css/app.8b43b1d-en.css" rel="stylesheet">
  9. <script src="/js/app.8b43b1d-en.js"></script>
  10. <script>
  11. var _root = location.host;
  12. var _demo = 1;
  13. </script>
  14. </head>
  15. <body class="cfg">
  16. <div id="outer">
  17. <nav id="menu">
  18. <div id="brand" tabindex=0>ESPTerm<sup> DEMO</sup></div>
  19. <a href="term.html" class="icn-back">Back to Terminal</a>
  20. <a href="cfg_term.html" class="icn-terminal selected">Terminal Settings</a><a href="cfg_wifi.html" class="icn-wifi ">WiFi Settings</a><a href="cfg_network.html" class="icn-network ">Network Settings</a><a href="cfg_system.html" class="icn-configure ">System Settings</a><a href="help.html" class="icn-help ">Quick Reference</a><a href="about.html" class="icn-about ">About ESPTerm</a></nav>
  21. <div id="content">
  22. <img src="/img/loader.gif" alt="Loading…" id="loader">
  23. <h1>Terminal Settings</h1>
  24. <div class="Box errors hidden">
  25. <span class="lead">Validation errors for:</span>&nbsp;<span class="list"></span>
  26. </div>
  27. <div class="Box message hidden"></div>
  28. <div class="Box errmessage hidden"></div>
  29. <div class="Box">
  30. <a href="reset_screen.html">Reset screen & parser</a>
  31. </div>
  32. <!-- Theme -->
  33. <form class="Box mobcol str" action="term_set.html" method="GET" id='form-scheme'>
  34. <h2>Color Scheme</h2>
  35. <div class="Row explain">
  36. To select default text and background color, click on the
  37. preview palette. Alternatively, use numbers 0-15 for theme colors,
  38. 16-255 for standard colors and hex (#FFFFFF) for True Color (24-bit).
  39. </div>
  40. <div class="Row">
  41. <label for="theme">Color Palette</label>
  42. <select name="theme" id="theme">
  43. <option value="0">Tango</option>
  44. <option value="1">Linux (CGA)</option>
  45. <option value="2">XTerm</option>
  46. <option value="3">Rxvt</option>
  47. <option value="4">Ambience</option>
  48. <option value="5">Solarized Dark</option>
  49. <option value="11">Solarized Dark, high contrast</option>
  50. <option value="10">Solarized Light</option>
  51. <option value="6">CGA NTSC</option>
  52. <option value="7">ZX Spectrum</option>
  53. <option value="8">Apple II</option>
  54. <option value="9">Commodore</option>
  55. </select>
  56. <span onclick="TermConf.prevTheme()" class="mq-no-phone theme-nav-btn">◀</span>
  57. <span onclick="TermConf.nextTheme()" class="mq-no-phone theme-nav-btn">▶</span>
  58. </div>
  59. <div class="Row color-preview">
  60. <label>Background</label>
  61. <div>
  62. <div class="colorprev bg">
  63. <span data-bg=0 data-fg=15>0</span><!--
  64. --><span data-bg=1 data-fg=15>1</span><!--
  65. --><span data-bg=2 data-fg=15>2</span><!--
  66. --><span data-bg=3 data-fg=0>3</span><!--
  67. --><span data-bg=4 data-fg=15>4</span><!--
  68. --><span data-bg=5 data-fg=15>5</span><!--
  69. --><span data-bg=6 data-fg=15>6</span><!--
  70. --><span data-bg=7 data-fg=0>7</span>
  71. </div>
  72. <div class="colorprev bg">
  73. <span data-bg=8 data-fg=15>8</span><!--
  74. --><span data-bg=9 data-fg=0>9</span><!--
  75. --><span data-bg=10 data-fg=0>10</span><!--
  76. --><span data-bg=11 data-fg=0>11</span><!--
  77. --><span data-bg=12 data-fg=0>12</span><!--
  78. --><span data-bg=13 data-fg=0>13</span><!--
  79. --><span data-bg=14 data-fg=0>14</span><!--
  80. --><span data-bg=15 data-fg=0>15</span>
  81. </div>
  82. </div>
  83. </div>
  84. <div class="Row color-preview">
  85. <label>Foreground</label>
  86. <div>
  87. <div class="colorprev fg">
  88. <span data-fg=0>0</span><!--
  89. --><span data-fg=1>1</span><!--
  90. --><span data-fg=2>2</span><!--
  91. --><span data-fg=3>3</span><!--
  92. --><span data-fg=4>4</span><!--
  93. --><span data-fg=5>5</span><!--
  94. --><span data-fg=6>6</span><!--
  95. --><span data-fg=7>7</span>
  96. </div>
  97. <div class="colorprev fg">
  98. <span data-fg=8>8</span><!--
  99. --><span data-fg=9>9</span><!--
  100. --><span data-fg=10>10</span><!--
  101. --><span data-fg=11>11</span><!--
  102. --><span data-fg=12>12</span><!--
  103. --><span data-fg=13>13</span><!--
  104. --><span data-fg=14>14</span><!--
  105. --><span data-fg=15>15</span>
  106. </div>
  107. </div>
  108. </div>
  109. <div class="Row color-preview">
  110. <label></label>
  111. <div class="color-example" data-fg="" data-bg="">
  112. Default colors preview </div>
  113. </div>
  114. <div class="Row color-preview">
  115. <label>Defaults Presets</label>
  116. <div id="fgbg_presets"></div>
  117. </div>
  118. <div class="Row">
  119. <div class="SubRow">
  120. <label for="default_fg">Default Fg.</label>
  121. <input type="text" name="default_fg" id="default_fg" class="short" value="7">
  122. </div>
  123. <div class="SubRow">
  124. <label for="default_bg">Default Bg.</label>
  125. <input type="text" name="default_bg" id="default_bg" class="short" value="0">
  126. </div>
  127. </div>
  128. <div class="Row">
  129. <label>Cursor Style</label>
  130. <select name="cursor_shape" id="cursor_shape">
  131. <option value="0">Block, blinking</option>
  132. <option value="2">Block, steady</option>
  133. <option value="3">Underline, blinking</option>
  134. <option value="4">Underline, steady</option>
  135. <option value="5">I-bar, blinking</option>
  136. <option value="6">I-bar, steady</option>
  137. </select>
  138. </div>
  139. <div class="Row buttons">
  140. <a class="button icn-ok" href="#" onclick="qs('#form-scheme').submit()">Apply!</a>
  141. </div>
  142. </form>
  143. <!-- Initials -->
  144. <form class="Box mobcol str" action="term_set.html" method="GET" id='form-initial'>
  145. <h2>Initial Settings</h2>
  146. <div class="Row explain">
  147. Those are the initial settings used after ESPTerm powers on,
  148. or when the screen reset command is received (<code>\ec</code>).
  149. They can be changed by the terminal application using escape sequences.
  150. </div>
  151. <div class="Row">
  152. <div class="SubRow">
  153. <label for="width">Width</label>
  154. <input type="number" step=1 min=1 max=255 name="width" id="width" value="80" required>
  155. </div>
  156. <div class="SubRow">
  157. <label for="height">Height</label>
  158. <input type="number" step=1 min=1 max=255 name="height" id="height" value="25" required>
  159. </div>
  160. </div>
  161. <div class="Row">
  162. <label for="title">Header Text</label>
  163. <input type="text" name="title" id="title" value="ESPTerm Web UI Demo" required>
  164. </div>
  165. <div class="Row checkbox" >
  166. <label>Show buttons</label><!--
  167. --><span class="box" tabindex=0 role=checkbox></span>
  168. <input type="hidden" id="show_buttons" name="show_buttons" value="1">
  169. </div>
  170. <div class="Row">
  171. <label for="button_count">Button count</label>
  172. <input type="number" step=1 min=0 max=5 name="button_count" id="button_count" value="5" required>
  173. </div>
  174. <div class="Row">
  175. <label>Button Labels</label>
  176. <input class="tiny" type="text" name="btn1" id="btn1" value="OK">
  177. <input class="tiny" type="text" name="btn2" id="btn2" value="Cancel">
  178. <input class="tiny" type="text" name="btn3" id="btn3" value="">
  179. <input class="tiny" type="text" name="btn4" id="btn4" value="">
  180. <input class="tiny" type="text" name="btn5" id="btn5" value="Help">
  181. </div>
  182. <div class="Row">
  183. <label>Button codes<br>(ASCII, dec, CSV)</label>
  184. <input class="tiny" type="text" name="bm1" id="bm1" value="01,121">
  185. <input class="tiny" type="text" name="bm2" id="bm2" value="01,110">
  186. <input class="tiny" type="text" name="bm3" id="bm3" value="">
  187. <input class="tiny" type="text" name="bm4" id="bm4" value="">
  188. <input class="tiny" type="text" name="bm5" id="bm5" value="05">
  189. </div>
  190. <div class="Row">
  191. <label>Button colors</label>
  192. <input class="tiny" type="text" name="bc1" id="bc1" value="">
  193. <input class="tiny" type="text" name="bc2" id="bc2" value="">
  194. <input class="tiny" type="text" name="bc3" id="bc3" value="">
  195. <input class="tiny" type="text" name="bc4" id="bc4" value="">
  196. <input class="tiny" type="text" name="bc5" id="bc5" value="">
  197. </div>
  198. <div class="Row">
  199. <label for="backdrop">Background image URL</label>
  200. <input type="text" name="backdrop" id="backdrop" value="" required>
  201. </div>
  202. <div class="Row checkbox" >
  203. <label>Enter = CR+LF (LNM)</label><!--
  204. --><span class="box" tabindex=0 role=checkbox></span>
  205. <input type="hidden" id="crlf_mode" name="crlf_mode" value="">
  206. </div>
  207. <div class="Row checkbox" >
  208. <label>Local Echo (<span style="text-decoration:overline">SRM</span>)</label><!--
  209. --><span class="box" tabindex=0 role=checkbox></span>
  210. <input type="hidden" id="loopback" name="loopback" value="">
  211. </div>
  212. <div class="Row buttons">
  213. <a class="button icn-ok" href="#" onclick="qs('#form-initial').submit()">Apply!</a>
  214. </div>
  215. </form>
  216. <!-- UART -->
  217. <form class="Box mobcol str" action="term_set.html" method="GET" id="form-uart">
  218. <h2 tabindex=0>Serial Port Parameters</h2>
  219. <div class="Row explain">
  220. This form controls the communication UART. The debug UART is fixed
  221. at 115.200 baud, one stop-bit and no parity.
  222. </div>
  223. <div class="Row">
  224. <label for="uart_baudrate">Baud rate<span class="mq-phone">&nbsp;(bps)</span></label>
  225. <select name="uart_baudrate" id="uart_baudrate" class="short">
  226. <option value="300">300</option>
  227. <option value="600">600</option>
  228. <option value="1200">1.200</option>
  229. <option value="2400">2.400</option>
  230. <option value="4800">4.800</option>
  231. <option value="9600">9.600</option>
  232. <option value="19200">19.200</option>
  233. <option value="38400">38.400</option>
  234. <option value="57600">57.600</option>
  235. <option value="74880">74.880</option>
  236. <option value="115200">115.200</option>
  237. <option value="230400">230.400</option>
  238. <option value="460800">460.800</option>
  239. <option value="921600">921.600</option>
  240. <option value="1843200">1.843.200</option>
  241. <option value="3686400">3.686.400</option>
  242. </select>
  243. <span class="mq-no-phone">&nbsp;bps</span>
  244. </div>
  245. <div class="Row">
  246. <label for="uart_parity">Parity</label>
  247. <select name="uart_parity" id="uart_parity" class="short">
  248. <option value="2">None</option>
  249. <option value="1">Odd</option>
  250. <option value="0">Even</option>
  251. </select>
  252. </div>
  253. <div class="Row">
  254. <label for="uart_stopbits">Stop-bits</label>
  255. <select name="uart_stopbits" id="uart_stopbits" class="short">
  256. <option value="1">One</option>
  257. <option value="2">One and half</option>
  258. <option value="3">Two</option>
  259. </select>
  260. </div>
  261. <div class="Row buttons">
  262. <a class="button icn-ok" href="#" onclick="qs('#form-uart').submit()">Apply!</a>
  263. </div>
  264. </form>
  265. <!-- Expert terminal opts -->
  266. <form class="Box mobcol str" action="term_set.html" method="GET" id='form-expert'>
  267. <h2>Expert Options</h2>
  268. <div class="Row explain">
  269. Those are advanced config options that usually don't need to be changed.
  270. Edit them only if you know what you're doing. </div>
  271. <div class="Row">
  272. <label for="font_stack">Font stack</label>
  273. <input type="text" name="font_stack" id="font_stack" value="" required>
  274. </div>
  275. <div class="Row">
  276. <label for="font_size">Font size<span class="mq-phone">&nbsp;(px)</span></label>
  277. <input type="number" step=1 min=0 name="font_size" id="font_size" value="20" required>
  278. <span class="mq-no-phone">&nbsp;px</span>
  279. </div>
  280. <div class="Row">
  281. <label for="parser_tout_ms">Parser Timeout<span class="mq-phone">&nbsp;(ms)</span></label>
  282. <input type="number" step=1 min=0 name="parser_tout_ms" id="parser_tout_ms" value="10" required>
  283. <span class="mq-no-phone">&nbsp;ms</span>
  284. </div>
  285. <div class="Row">
  286. <label for="display_tout_ms">Redraw Delay<span class="mq-phone">&nbsp;(ms)</span></label>
  287. <input type="number" step=1 min=0 name="display_tout_ms" id="display_tout_ms" value="15" required>
  288. <span class="mq-no-phone">&nbsp;ms</span>
  289. </div>
  290. <div class="Row">
  291. <label for="display_cooldown_ms">Redraw Cooldown<span class="mq-phone">&nbsp;(ms)</span></label>
  292. <input type="number" step=1 min=0 name="display_cooldown_ms" id="display_cooldown_ms" value="35" required>
  293. <span class="mq-no-phone">&nbsp;ms</span>
  294. </div>
  295. <div class="Row checkbox" >
  296. <label>Debug internal state</label><!--
  297. --><span class="box" tabindex=0 role=checkbox></span>
  298. <input type="hidden" id="debugbar" name="debugbar" value="">
  299. </div>
  300. <div class="Row checkbox" >
  301. <label>Display control codes</label><!--
  302. --><span class="box" tabindex=0 role=checkbox></span>
  303. <input type="hidden" id="ascii_debug" name="ascii_debug" value="">
  304. </div>
  305. <div class="Row checkbox" >
  306. <label>SS3 Fn keys</label><!--
  307. --><span class="box" tabindex=0 role=checkbox></span>
  308. <input type="hidden" id="fn_alt_mode" name="fn_alt_mode" value="1">
  309. </div>
  310. <div class="Row checkbox" >
  311. <label>Capture F5, F11, F12</label><!--
  312. --><span class="box" tabindex=0 role=checkbox></span>
  313. <input type="hidden" id="want_all_fn" name="want_all_fn" value="0">
  314. </div>
  315. <div class="Row checkbox" >
  316. <label>Show nav links</label><!--
  317. --><span class="box" tabindex=0 role=checkbox></span>
  318. <input type="hidden" id="show_config_links" name="show_config_links" value="1">
  319. </div>
  320. <div class="Row checkbox" >
  321. <label>Allow \e?12h/l</label><!--
  322. --><span class="box" tabindex=0 role=checkbox></span>
  323. <input type="hidden" id="allow_decopt_12" name="allow_decopt_12" value="0">
  324. </div>
  325. <div class="Row buttons">
  326. <a class="button icn-ok" href="#" onclick="qs('#form-expert').submit()">Apply!</a>
  327. </div>
  328. </form>
  329. <script>
  330. $.ready(function () {
  331. $('#cursor_shape').val('');
  332. $('#theme').val('0');
  333. $('#uart_baudrate').val('115200');
  334. $('#uart_parity').val('2');
  335. $('#uart_stopbits').val('1');
  336. TermConf.init();
  337. });
  338. </script>
  339. <div class="botpad"></div>
  340. <div class="NotifyMsg hidden" id="notif"></div>
  341. </div>
  342. </div>
  343. </body>
  344. </html>