|
|
|
|
<!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.310033b.css" rel="stylesheet">
|
|
|
|
|
<script src="/js/app.310033b.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">
|
|
|
|
|
<a href="reset_screen.html">Reset screen & parser</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<form class="Box mobopen 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. Some options can be changed by the application via escape sequences,
|
|
|
|
|
those changes won't be saved in Flash.
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="Row">
|
|
|
|
|
<label for="theme">Color scheme</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">
|
|
|
|
|
<div class="colorprev">
|
|
|
|
|
<span data-fg=0 data-bg="0" style="text-shadow: 0 0 4px white;">30</span><!--
|
|
|
|
|
--><span data-fg=1 data-bg="0">31</span><!--
|
|
|
|
|
--><span data-fg=2 data-bg="0">32</span><!--
|
|
|
|
|
--><span data-fg=3 data-bg="0">33</span><!--
|
|
|
|
|
--><span data-fg=4 data-bg="0">34</span><!--
|
|
|
|
|
--><span data-fg=5 data-bg="0">35</span><!--
|
|
|
|
|
--><span data-fg=6 data-bg="0">36</span><!--
|
|
|
|
|
--><span data-fg=7 data-bg="0">37</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="colorprev">
|
|
|
|
|
<span data-fg=8 data-bg="0">90</span><!--
|
|
|
|
|
--><span data-fg=9 data-bg="0">91</span><!--
|
|
|
|
|
--><span data-fg=10 data-bg="0">92</span><!--
|
|
|
|
|
--><span data-fg=11 data-bg="0">93</span><!--
|
|
|
|
|
--><span data-fg=12 data-bg="0">94</span><!--
|
|
|
|
|
--><span data-fg=13 data-bg="0">95</span><!--
|
|
|
|
|
--><span data-fg=14 data-bg="0">96</span><!--
|
|
|
|
|
--><span data-fg=15 data-bg="0">97</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="colorprev">
|
|
|
|
|
<span data-bg=0 data-fg="15">40</span><!--
|
|
|
|
|
--><span data-bg=1 data-fg="15">41</span><!--
|
|
|
|
|
--><span data-bg=2 data-fg="15">42</span><!--
|
|
|
|
|
--><span data-bg=3 data-fg="0">43</span><!--
|
|
|
|
|
--><span data-bg=4 data-fg="15">44</span><!--
|
|
|
|
|
--><span data-bg=5 data-fg="15">45</span><!--
|
|
|
|
|
--><span data-bg=6 data-fg="15">46</span><!--
|
|
|
|
|
--><span data-bg=7 data-fg="0">47</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="colorprev">
|
|
|
|
|
<span data-bg=8 data-fg="15">100</span><!--
|
|
|
|
|
--><span data-bg=9 data-fg="0">101</span><!--
|
|
|
|
|
--><span data-bg=10 data-fg="0">102</span><!--
|
|
|
|
|
--><span data-bg=11 data-fg="0">103</span><!--
|
|
|
|
|
--><span data-bg=12 data-fg="0">104</span><!--
|
|
|
|
|
--><span data-bg=13 data-fg="0">105</span><!--
|
|
|
|
|
--><span data-bg=14 data-fg="0">106</span><!--
|
|
|
|
|
--><span data-bg=15 data-fg="0">107</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="Row color-preview">
|
|
|
|
|
<div id="color-example" data-fg="" data-bg="">
|
|
|
|
|
Default colors preview </div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="Row">
|
|
|
|
|
<label>Text / background</label>
|
|
|
|
|
<select name="default_fg" id="default_fg" class="short" onchange="showColor()">
|
|
|
|
|
<option value="0">Black</option>
|
|
|
|
|
<option value="1">Red</option>
|
|
|
|
|
<option value="2">Green</option>
|
|
|
|
|
<option value="3">Yellow</option>
|
|
|
|
|
<option value="4">Blue</option>
|
|
|
|
|
<option value="5">Purple</option>
|
|
|
|
|
<option value="6">Cyan</option>
|
|
|
|
|
<option value="7">Silver</option>
|
|
|
|
|
<option value="8">Gray</option>
|
|
|
|
|
<option value="9">Light Red</option>
|
|
|
|
|
<option value="10">Light Green</option>
|
|
|
|
|
<option value="11">Light Yellow</option>
|
|
|
|
|
<option value="12">Light Blue</option>
|
|
|
|
|
<option value="13">Light Purple</option>
|
|
|
|
|
<option value="14">Light Cyan</option>
|
|
|
|
|
<option value="15">White</option>
|
|
|
|
|
</select> <!--
|
|
|
|
|
--><select name="default_bg" id="default_bg" class="short" onchange="showColor()">
|
|
|
|
|
<option value="0">Black</option>
|
|
|
|
|
<option value="1">Red</option>
|
|
|
|
|
<option value="2">Green</option>
|
|
|
|
|
<option value="3">Yellow</option>
|
|
|
|
|
<option value="4">Blue</option>
|
|
|
|
|
<option value="5">Purple</option>
|
|
|
|
|
<option value="6">Cyan</option>
|
|
|
|
|
<option value="7">Silver</option>
|
|
|
|
|
<option value="8">Gray</option>
|
|
|
|
|
<option value="9">Light Red</option>
|
|
|
|
|
<option value="10">Light Green</option>
|
|
|
|
|
<option value="11">Light Yellow</option>
|
|
|
|
|
<option value="12">Light Blue</option>
|
|
|
|
|
<option value="13">Light Purple</option>
|
|
|
|
|
<option value="14">Light Cyan</option>
|
|
|
|
|
<option value="15">White</option>
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="Row">
|
|
|
|
|
<label for="term_width">Width / height</label>
|
|
|
|
|
<input type="number" step=1 min=1 max=255 name="term_width" id="term_width" value="80" required> <!--
|
|
|
|
|
--><input type="number" step=1 min=1 max=255 name="term_height" id="term_height" value="25" required>
|
|
|
|
|
</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="short" type="text" name="btn1" id="btn1" value="OK">
|
|
|
|
|
<input class="short" type="text" name="btn2" id="btn2" value="Cancel">
|
|
|
|
|
<input class="short" type="text" name="btn3" id="btn3" value="">
|
|
|
|
|
<input class="short" type="text" name="btn4" id="btn4" value="">
|
|
|
|
|
<input class="short" type="text" name="btn5" id="btn5" value="Help">
|
|
|
|
|
</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-initial').submit()">Apply!</a>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<form class="Box fold str" action="term_set.html" method="GET" id="form-uart">
|
|
|
|
|
<h2 tabindex=0>Serial Port</h2>
|
|
|
|
|
|
|
|
|
|
<div class="Row explain">
|
|
|
|
|
|
|
|
|
|
This form controls the primary, 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>
|
|
|
|
|
|
|
|
|
|
<form class="Box fold 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">
|
|
|
|
|
<label>Button codes<br>(ASCII, dec, CSV)</label>
|
|
|
|
|
<input class="short" type="text" name="bm1" id="bm1" value="01,121">
|
|
|
|
|
<input class="short" type="text" name="bm2" id="bm2" value="01,110">
|
|
|
|
|
<input class="short" type="text" name="bm3" id="bm3" value="">
|
|
|
|
|
<input class="short" type="text" name="bm4" id="bm4" value="">
|
|
|
|
|
<input class="short" type="text" name="bm5" id="bm5" value="05">
|
|
|
|
|
</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>Enter sends CR+LF</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>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 checkbox" >
|
|
|
|
|
<label>Local Echo</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-expert').submit()">Apply!</a>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
$('#default_fg').val(7);
|
|
|
|
|
$('#default_bg').val(0);
|
|
|
|
|
$('#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');
|
|
|
|
|
ex.dataset.fg = +$('#default_fg').val();
|
|
|
|
|
ex.dataset.bg = +$('#default_bg').val();
|
|
|
|
|
themes.themePreview(+$('#theme').val())
|
|
|
|
|
}
|
|
|
|
|
showColor();
|
|
|
|
|
|
|
|
|
|
$('.colorprev span').on('click', function() {
|
|
|
|
|
var fg = this.dataset.fg;
|
|
|
|
|
var bg = this.dataset.bg;
|
|
|
|
|
if (typeof fg != 'undefined') $('#default_fg').val(fg);
|
|
|
|
|
if (typeof bg != 'undefined') $('#default_bg').val(bg);
|
|
|
|
|
showColor()
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div class="botpad"></div>
|
|
|
|
|
|
|
|
|
|
<div class="NotifyMsg hidden" id="notif"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
