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.
15 Commits
1 Branch
0 Tags
1.9 MiB
 
 
Tag: Branch: Tree: 28ced98514
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '28ced98514'
${ noResults }
espterm-demo-website/cfg_term.html

302 lines
11 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">
<title>Terminal Settings :: ESPTerm</title>
<link href="/css/app.e3b21ad.css" rel="stylesheet">
<script src="/js/app.e3b21ad.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>&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-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>&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">
<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-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">&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 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);
$('#cursor_shape').val();
$('#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>