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.
277 lines
9.7 KiB
277 lines
9.7 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">
|
|
<title>Terminal Settings :: ESPTerm</title>
|
|
<link href="/css/app.css" rel="stylesheet">
|
|
<script src="/js/app.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>
|
|
|
|
<script>
|
|
function menuOpen() { $('#menu').toggleClass('expanded') }
|
|
$('#brand').on('click', menuOpen).on('keypress', cr(menuOpen));
|
|
</script>
|
|
|
|
<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-1'>
|
|
<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</option>
|
|
<option value="2">XTerm</option>
|
|
<option value="3">Rxvt</option>
|
|
<option value="4">Ambience</option>
|
|
<option value="5">Solarized</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="Row color-preview">
|
|
<div class="colorprev">
|
|
<span data-fg=0 class="bg0 fg0">30</span><!--
|
|
--><span data-fg=1 class="bg0 fg1">31</span><!--
|
|
--><span data-fg=2 class="bg0 fg2">32</span><!--
|
|
--><span data-fg=3 class="bg0 fg3">33</span><!--
|
|
--><span data-fg=4 class="bg0 fg4">34</span><!--
|
|
--><span data-fg=5 class="bg0 fg5">35</span><!--
|
|
--><span data-fg=6 class="bg0 fg6">36</span><!--
|
|
--><span data-fg=7 class="bg0 fg7">37</span>
|
|
</div>
|
|
|
|
<div class="colorprev">
|
|
<span data-fg=8 class="bg0 fg8">90</span><!--
|
|
--><span data-fg=9 class="bg0 fg9">91</span><!--
|
|
--><span data-fg=10 class="bg0 fg10">92</span><!--
|
|
--><span data-fg=11 class="bg0 fg11">93</span><!--
|
|
--><span data-fg=12 class="bg0 fg12">94</span><!--
|
|
--><span data-fg=13 class="bg0 fg13">95</span><!--
|
|
--><span data-fg=14 class="bg0 fg14">96</span><!--
|
|
--><span data-fg=15 class="bg0 fg15">97</span>
|
|
</div>
|
|
|
|
<div class="colorprev">
|
|
<span data-bg=0 class="bg0 fg15">40</span><!--
|
|
--><span data-bg=1 class="bg1 fg15">41</span><!--
|
|
--><span data-bg=2 class="bg2 fg15">42</span><!--
|
|
--><span data-bg=3 class="bg3 fg0">43</span><!--
|
|
--><span data-bg=4 class="bg4 fg15">44</span><!--
|
|
--><span data-bg=5 class="bg5 fg15">45</span><!--
|
|
--><span data-bg=6 class="bg6 fg15">46</span><!--
|
|
--><span data-bg=7 class="bg7 fg0">47</span>
|
|
</div>
|
|
|
|
<div class="colorprev">
|
|
<span data-bg=8 class="bg8 fg15">100</span><!--
|
|
--><span data-bg=9 class="bg9 fg0">101</span><!--
|
|
--><span data-bg=10 class="bg10 fg0">102</span><!--
|
|
--><span data-bg=11 class="bg11 fg0">103</span><!--
|
|
--><span data-bg=12 class="bg12 fg0">104</span><!--
|
|
--><span data-bg=13 class="bg13 fg0">105</span><!--
|
|
--><span data-bg=14 class="bg14 fg0">106</span><!--
|
|
--><span data-bg=15 class="bg15 fg0">107</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Row color-preview">
|
|
<div style="
|
|
" id="color-example">
|
|
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">
|
|
<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 buttons">
|
|
<a class="button icn-ok" href="#" onclick="qs('#form-1').submit()">Apply!</a>
|
|
</div>
|
|
</form>
|
|
|
|
<form class="Box fold str" action="term_set.html" method="GET" id='form-2'>
|
|
<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>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 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-2').submit()">Apply!</a>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
$('#default_fg').val(7);
|
|
$('#default_bg').val(0);
|
|
$('#theme').val(0);
|
|
|
|
function showColor() {
|
|
var ex = qs('#color-example');
|
|
ex.className = '';
|
|
ex.classList.add('fg'+$('#default_fg').val());
|
|
ex.classList.add('bg'+$('#default_bg').val());
|
|
var th = $('#theme').val();
|
|
$('.color-preview').forEach(function(e) {
|
|
e.className = 'Row color-preview theme-'+th;
|
|
});
|
|
}
|
|
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>
|
|
|