You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
404 lines
13 KiB
404 lines
13 KiB
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
|
|
<title>Terminal Settings :: ESPTerm</title>
|
|
<link href="/css/app.f5dd70a.css" rel="stylesheet">
|
|
<script src="/js/app.f5dd70a.js"></script>
|
|
<script>
|
|
var _root = location.host;
|
|
var _demo = 1;
|
|
</script>
|
|
</head>
|
|
<body class="cfg">
|
|
<div id="outer">
|
|
<nav id="menu">
|
|
<div id="brand" tabindex=0>ESPTerm<sup> DEMO</sup></div>
|
|
<a href="term.html" class="icn-back">Back to Terminal</a>
|
|
<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>
|
|
|
|
<div id="content">
|
|
<img src="/img/loader.gif" alt="Loading…" id="loader">
|
|
<h1>Terminal Settings</h1>
|
|
|
|
<div class="Box errors hidden">
|
|
<span class="lead">Validation errors for:</span> <span class="list"></span>
|
|
</div>
|
|
|
|
<div class="Box message hidden"></div>
|
|
|
|
<div class="Box">
|
|
<a href="reset_screen.html">Reset screen & parser</a>
|
|
</div>
|
|
|
|
<!-- Theme -->
|
|
<form class="Box mobcol str" action="term_set.html" method="GET" id='form-scheme'>
|
|
<h2>Color Scheme</h2>
|
|
|
|
<div class="Row explain">
|
|
|
|
To select default text and background color, click on the
|
|
preview palette. Alternatively, use numbers 0-15 for theme colors, 16-255 for standard
|
|
colors and hex (#FFFFFF) for True Color (24-bit).
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<label for="theme">Color palette</label>
|
|
<select name="theme" id="theme" class="short" onchange="showColor()">
|
|
<option value="0">Tango</option>
|
|
<option value="1">Linux (CGA)</option>
|
|
<option value="2">XTerm</option>
|
|
<option value="3">Rxvt</option>
|
|
<option value="4">Ambience</option>
|
|
<option value="5">Solarized</option>
|
|
<option value="6">CGA NTSC</option>
|
|
<option value="7">ZX Spectrum</option>
|
|
<option value="8">Apple II</option>
|
|
<option value="9">Commodore</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="Row color-preview">
|
|
<label>Background</label>
|
|
<div>
|
|
<div class="colorprev bg">
|
|
<span data-bg=0 data-fg=15>0</span><!--
|
|
--><span data-bg=1 data-fg=15>1</span><!--
|
|
--><span data-bg=2 data-fg=15>2</span><!--
|
|
--><span data-bg=3 data-fg=0>3</span><!--
|
|
--><span data-bg=4 data-fg=15>4</span><!--
|
|
--><span data-bg=5 data-fg=15>5</span><!--
|
|
--><span data-bg=6 data-fg=15>6</span><!--
|
|
--><span data-bg=7 data-fg=0>7</span>
|
|
</div>
|
|
|
|
<div class="colorprev bg">
|
|
<span data-bg=8 data-fg=15>8</span><!--
|
|
--><span data-bg=9 data-fg=0>9</span><!--
|
|
--><span data-bg=10 data-fg=0>10</span><!--
|
|
--><span data-bg=11 data-fg=0>11</span><!--
|
|
--><span data-bg=12 data-fg=0>12</span><!--
|
|
--><span data-bg=13 data-fg=0>13</span><!--
|
|
--><span data-bg=14 data-fg=0>14</span><!--
|
|
--><span data-bg=15 data-fg=0>15</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Row color-preview">
|
|
<label>Foreground</label>
|
|
<div>
|
|
<div class="colorprev fg">
|
|
<span data-fg=0 data-bg=0 style="text-shadow: 0 0 4px white;">0</span><!--
|
|
--><span data-fg=1 data-bg=0>1</span><!--
|
|
--><span data-fg=2 data-bg=0>2</span><!--
|
|
--><span data-fg=3 data-bg=0>3</span><!--
|
|
--><span data-fg=4 data-bg=0>4</span><!--
|
|
--><span data-fg=5 data-bg=0>5</span><!--
|
|
--><span data-fg=6 data-bg=0>6</span><!--
|
|
--><span data-fg=7 data-bg=0>7</span>
|
|
</div>
|
|
|
|
<div class="colorprev fg">
|
|
<span data-fg=8 data-bg=0>8</span><!--
|
|
--><span data-fg=9 data-bg=0>9</span><!--
|
|
--><span data-fg=10 data-bg=0>10</span><!--
|
|
--><span data-fg=11 data-bg=0>11</span><!--
|
|
--><span data-fg=12 data-bg=0>12</span><!--
|
|
--><span data-fg=13 data-bg=0>13</span><!--
|
|
--><span data-fg=14 data-bg=0>14</span><!--
|
|
--><span data-fg=15 data-bg=0>15</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Row color-preview">
|
|
<label>Defaults</label>
|
|
<div class="color-example" data-fg="" data-bg="">
|
|
Default colors preview </div>
|
|
</div>
|
|
|
|
<div class="Row color-preview">
|
|
<label>Presets</label>
|
|
<div id="fgbg_presets"></div>
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<div class="SubRow">
|
|
<label for="default_fg">Default fg.</label>
|
|
<input type="text" name="default_fg" id="default_fg" class="short" value="7">
|
|
</div>
|
|
<div class="SubRow">
|
|
<label for="default_bg">Default bg.</label>
|
|
<input type="text" name="default_bg" id="default_bg" class="short" value="0">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<label>Cursor style</label>
|
|
<select name="cursor_shape" id="cursor_shape">
|
|
<option value="0">Block, blinking</option>
|
|
<option value="2">Block, steady</option>
|
|
<option value="3">Underline, blinking</option>
|
|
<option value="4">Underline, steady</option>
|
|
<option value="5">I-bar, blinking</option>
|
|
<option value="6">I-bar, steady</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="Row buttons">
|
|
<a class="button icn-ok" href="#" onclick="qs('#form-scheme').submit()">Apply!</a>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Initials -->
|
|
<form class="Box mobcol str" action="term_set.html" method="GET" id='form-initial'>
|
|
<h2>Initial Settings</h2>
|
|
|
|
<div class="Row explain">
|
|
|
|
Those are the initial settings used after ESPTerm powers on, or when the screen
|
|
reset command is received (<code>\ec</code>). They can be changed by the
|
|
terminal application using escape sequences.
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<div class="SubRow">
|
|
<label for="term_width">Width</label>
|
|
<input type="number" step=1 min=1 max=255 name="term_width" id="term_width" value="80" required>
|
|
</div>
|
|
<div class="SubRow">
|
|
<label for="term_height">Height</label>
|
|
<input type="number" step=1 min=1 max=255 name="term_height" id="term_height" value="25" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<label for="term_title">Header text</label>
|
|
<input type="text" name="term_title" id="term_title" value="ESPTerm Web UI Demo" required>
|
|
</div>
|
|
|
|
<div class="Row checkbox" >
|
|
<label>Show buttons</label><!--
|
|
--><span class="box" tabindex=0 role=checkbox></span>
|
|
<input type="hidden" id="show_buttons" name="show_buttons" value="1">
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<label>Button labels</label>
|
|
<input class="tiny" type="text" name="btn1" id="btn1" value="OK">
|
|
<input class="tiny" type="text" name="btn2" id="btn2" value="Cancel">
|
|
<input class="tiny" type="text" name="btn3" id="btn3" value="">
|
|
<input class="tiny" type="text" name="btn4" id="btn4" value="">
|
|
<input class="tiny" type="text" name="btn5" id="btn5" value="Help">
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<label>Button codes<br>(ASCII, dec, CSV)</label>
|
|
<input class="tiny" type="text" name="bm1" id="bm1" value="01,121">
|
|
<input class="tiny" type="text" name="bm2" id="bm2" value="01,110">
|
|
<input class="tiny" type="text" name="bm3" id="bm3" value="">
|
|
<input class="tiny" type="text" name="bm4" id="bm4" value="">
|
|
<input class="tiny" type="text" name="bm5" id="bm5" value="05">
|
|
</div>
|
|
|
|
<div class="Row checkbox" >
|
|
<label>Enter = CR+LF (LNM)</label><!--
|
|
--><span class="box" tabindex=0 role=checkbox></span>
|
|
<input type="hidden" id="crlf_mode" name="crlf_mode" value="">
|
|
</div>
|
|
|
|
<div class="Row checkbox" >
|
|
<label>Local Echo (<span style="text-decoration:overline">SRM</span>)</label><!--
|
|
--><span class="box" tabindex=0 role=checkbox></span>
|
|
<input type="hidden" id="loopback" name="loopback" value="">
|
|
</div>
|
|
|
|
<div class="Row buttons">
|
|
<a class="button icn-ok" href="#" onclick="qs('#form-initial').submit()">Apply!</a>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- UART -->
|
|
<form class="Box mobcol str" action="term_set.html" method="GET" id="form-uart">
|
|
<h2 tabindex=0>Serial Port Parameters</h2>
|
|
|
|
<div class="Row explain">
|
|
|
|
This form controls the communication UART. The debug UART is fixed
|
|
at 115.200 baud, one stop-bit and no parity.
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<label for="uart_baud">Baud rate<span class="mq-phone"> (bps)</span></label>
|
|
<select name="uart_baud" id="uart_baud" class="short">
|
|
<option value="300">300</option>
|
|
<option value="600">600</option>
|
|
<option value="1200">1.200</option>
|
|
<option value="2400">2.400</option>
|
|
<option value="4800">4.800</option>
|
|
<option value="9600">9.600</option>
|
|
<option value="19200">19.200</option>
|
|
<option value="38400">38.400</option>
|
|
<option value="57600">57.600</option>
|
|
<option value="74880">74.880</option>
|
|
<option value="115200">115.200</option>
|
|
<option value="230400">230.400</option>
|
|
<option value="460800">460.800</option>
|
|
<option value="921600">921.600</option>
|
|
<option value="1843200">1.843.200</option>
|
|
<option value="3686400">3.686.400</option>
|
|
</select>
|
|
<span class="mq-no-phone"> bps</span>
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<label for="uart_parity">Parity</label>
|
|
<select name="uart_parity" id="uart_parity" class="short">
|
|
<option value="2">None</option>
|
|
<option value="1">Odd</option>
|
|
<option value="0">Even</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<label for="uart_stopbits">Stop-bits</label>
|
|
<select name="uart_stopbits" id="uart_stopbits" class="short">
|
|
<option value="1">One</option>
|
|
<option value="2">One and half</option>
|
|
<option value="3">Two</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="Row buttons">
|
|
<a class="button icn-ok" href="#" onclick="qs('#form-uart').submit()">Apply!</a>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Expert terminal opts -->
|
|
<form class="Box mobcol str" action="term_set.html" method="GET" id='form-expert'>
|
|
<h2>Expert Options</h2>
|
|
|
|
<div class="Row explain">
|
|
|
|
Those are advanced config options that usually don't need to be changed.
|
|
Edit them only if you know what you're doing. </div>
|
|
|
|
<div class="Row">
|
|
<label for="parser_tout_ms">Parser timeout<span class="mq-phone"> (ms)</span></label>
|
|
<input type="number" step=1 min=0 name="parser_tout_ms" id="parser_tout_ms" value="10" required>
|
|
<span class="mq-no-phone"> ms</span>
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<label for="display_tout_ms">Redraw delay<span class="mq-phone"> (ms)</span></label>
|
|
<input type="number" step=1 min=0 name="display_tout_ms" id="display_tout_ms" value="15" required>
|
|
<span class="mq-no-phone"> ms</span>
|
|
</div>
|
|
|
|
<div class="Row">
|
|
<label for="display_cooldown_ms">Redraw cooldown<span class="mq-phone"> (ms)</span></label>
|
|
<input type="number" step=1 min=0 name="display_cooldown_ms" id="display_cooldown_ms" value="35" required>
|
|
<span class="mq-no-phone"> ms</span>
|
|
</div>
|
|
|
|
<div class="Row checkbox" >
|
|
<label>SS3 Fn keys</label><!--
|
|
--><span class="box" tabindex=0 role=checkbox></span>
|
|
<input type="hidden" id="fn_alt_mode" name="fn_alt_mode" value="1">
|
|
</div>
|
|
|
|
<div class="Row checkbox" >
|
|
<label>Capture all keys<br>(F5, F11, F12…)</label><!--
|
|
--><span class="box" tabindex=0 role=checkbox></span>
|
|
<input type="hidden" id="want_all_fn" name="want_all_fn" value="0">
|
|
</div>
|
|
|
|
<div class="Row checkbox" >
|
|
<label>Show nav links</label><!--
|
|
--><span class="box" tabindex=0 role=checkbox></span>
|
|
<input type="hidden" id="show_config_links" name="show_config_links" value="1">
|
|
</div>
|
|
|
|
<div class="Row buttons">
|
|
<a class="button icn-ok" href="#" onclick="qs('#form-expert').submit()">Apply!</a>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
$('#cursor_shape').val();
|
|
$('#theme').val(0);
|
|
|
|
$('#uart_baud').val(115200);
|
|
$('#uart_parity').val(2);
|
|
$('#uart_stopbits').val(1);
|
|
|
|
function showColor() {
|
|
var ex = qs('.color-example');
|
|
var fg = $('#default_fg').val();
|
|
var bg = $('#default_bg').val();
|
|
|
|
if (/^\d+$/.test(fg)) fg = +fg;
|
|
else if (!/^#[\da-f]{6}$/i.test(fg)) {
|
|
fg = 'black';
|
|
}
|
|
|
|
if (/^\d+$/.test(bg)) bg = +bg;
|
|
else if (!/^#[\da-f]{6}$/i.test(bg)) {
|
|
bg = 'black';
|
|
}
|
|
|
|
ex.dataset.fg = fg;
|
|
ex.dataset.bg = bg;
|
|
|
|
themes.themePreview(+$('#theme').val())
|
|
}
|
|
showColor();
|
|
|
|
$('#default_fg').on('input', showColor)
|
|
$('#default_bg').on('input', showColor)
|
|
|
|
$('.colorprev.bg span').on('click', function() {
|
|
var bg = this.dataset.bg;
|
|
if (typeof bg != 'undefined') $('#default_bg').val(bg);
|
|
showColor()
|
|
});
|
|
|
|
$('.colorprev.fg span').on('click', function() {
|
|
var fg = this.dataset.fg;
|
|
if (typeof fg != 'undefined') $('#default_fg').val(fg);
|
|
showColor()
|
|
});
|
|
|
|
var $presets = $('#fgbg_presets');
|
|
for(var i = 0; i < themes.fgbgThemes.length; i++) {
|
|
fg = themes.fgbgThemes[i][0];
|
|
bg = themes.fgbgThemes[i][1];
|
|
$presets
|
|
.htmlAppend(
|
|
'<span class="preset" ' +
|
|
'data-xfg="'+fg+'" data-xbg="'+bg+'" ' +
|
|
'style="color:'+fg+';background:'+bg+'"> ['+i+'] </span>');
|
|
|
|
if ((i+1)%5==0) $presets.htmlAppend('<br>');
|
|
}
|
|
|
|
$('.preset').on('click', function() {
|
|
$('#default_fg').val(this.dataset.xfg)
|
|
$('#default_bg').val(this.dataset.xbg)
|
|
showColor()
|
|
});
|
|
</script>
|
|
|
|
<div class="botpad"></div>
|
|
|
|
<div class="NotifyMsg hidden" id="notif"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|