espterm
/
espterm-demo-website
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
See espterm.github.io
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.
17 Commits
1 Branch
0 Tags
1.9 MiB
 
 
Tag: Branch: Tree: 1b91fd066d
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1b91fd066d'
${ noResults }
espterm-demo-website/cfg_term.html

355 lines
12 KiB
Raw Blame History

<!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>&nbsp;<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>&nbsp;<!--
--><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>&nbsp;<!--
--><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">&nbsp;
<input class="short" type="text" name="btn2" id="btn2" value="Cancel">&nbsp;
<input class="short" type="text" name="btn3" id="btn3" value="">&nbsp;
<input class="short" type="text" name="btn4" id="btn4" value="">&nbsp;
<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">&nbsp;(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">&nbsp;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">&nbsp;(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">&nbsp;ms</span>
</div>
<div class="Row">
<label for="display_tout_ms">Redraw delay<span class="mq-phone">&nbsp;(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">&nbsp;ms</span>
</div>
<div class="Row">
<label for="display_cooldown_ms">Redraw cooldown<span class="mq-phone">&nbsp;(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">&nbsp;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">&nbsp;
<input class="short" type="text" name="bm2" id="bm2" value="01,110">&nbsp;
<input class="short" type="text" name="bm3" id="bm3" value="">&nbsp;
<input class="short" type="text" name="bm4" id="bm4" value="">&nbsp;
<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>