master
Ondřej Hruška 7 years ago
parent faedddffdd
commit e5479ed79c
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 0
      .gitkeep
  2. 10
      about.html
  3. 4
      cfg_network.html
  4. 16
      cfg_system.html
  5. 170
      cfg_term.html
  6. 4
      cfg_wifi.html
  7. 16
      cfg_wifi_conn.html
  8. 2079
      css/app.310033b.css
  9. 120
      css/app.69e5b77.css
  10. 103
      help.html
  11. BIN
      img/adapter.jpg.orig
  12. BIN
      img/vt100.jpg.orig
  13. 0
      js/.gitkeep
  14. 2
      js/app.310033b.js
  15. 1
      js/app.310033b.js.map
  16. 4
      js/app.69e5b77.js
  17. 1
      js/app.69e5b77.js.map
  18. 2
      js/app.f5dd70a.js
  19. 1
      js/app.f5dd70a.js.map
  20. 32
      term.html

@ -5,8 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
<title>About ESPTerm :: ESPTerm</title> <title>About ESPTerm :: ESPTerm</title>
<link href="/css/app.f5dd70a.css" rel="stylesheet"> <link href="/css/app.69e5b77.css" rel="stylesheet">
<script src="/js/app.f5dd70a.js"></script> <script src="/js/app.69e5b77.js"></script>
<script> <script>
var _root = location.host; var _root = location.host;
var _demo = 1; var _demo = 1;
@ -52,12 +52,12 @@
<table> <table>
<tr> <tr>
<th>ESPTerm</th> <th>ESPTerm</th>
<td>v2.0.0, built 2017-09-26 at&nbsp;18:29 CEST</td> <td>v2.1.0, built 2017-10-02 at&nbsp;3:24 CEST</td>
</tr> </tr>
<tr> <tr>
<th>Git hash</th> <th>Git hash</th>
<td>back-end: <a href="https://github.com/espterm/espterm-firmware/commit/8c55202">8c55202</a>, <td>back-end: <a href="https://github.com/espterm/espterm-firmware/commit/a72e2be">a72e2be</a>,
front-end: <a href="https://github.com/espterm/espterm-front-end/commit/f5dd70a">f5dd70a</td> front-end: <a href="https://github.com/espterm/espterm-front-end/commit/69e5b77">69e5b77</td>
</tr> </tr>
<tr> <tr>
<th>libesphttpd</th> <th>libesphttpd</th>

@ -5,8 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
<title>Network Settings :: ESPTerm</title> <title>Network Settings :: ESPTerm</title>
<link href="/css/app.f5dd70a.css" rel="stylesheet"> <link href="/css/app.69e5b77.css" rel="stylesheet">
<script src="/js/app.f5dd70a.js"></script> <script src="/js/app.69e5b77.js"></script>
<script> <script>
var _root = location.host; var _root = location.host;
var _demo = 1; var _demo = 1;

@ -5,8 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
<title>System Settings :: ESPTerm</title> <title>System Settings :: ESPTerm</title>
<link href="/css/app.f5dd70a.css" rel="stylesheet"> <link href="/css/app.69e5b77.css" rel="stylesheet">
<script src="/js/app.f5dd70a.js"></script> <script src="/js/app.69e5b77.js"></script>
<script> <script>
var _root = location.host; var _root = location.host;
var _demo = 1; var _demo = 1;
@ -63,10 +63,10 @@
<div class="Row explain"> <div class="Row explain">
ESP8266 can be overclocked from 80&nbsp;MHz to 160&nbsp;MHz. ESP8266 can be overclocked from 80&nbsp;MHz to 160&nbsp;MHz. This will make
This will make it more responsive and allow faster screen updates it more responsive and allow faster screen updates at the expense of slightly
at the expense of slightly higher power consumption. This can also make higher power consumption. This can also make it more susceptible to interference.
it more susceptible to interference. Use with care. Use with care.
</div> </div>
<div class="Row checkbox" > <div class="Row checkbox" >
@ -135,10 +135,10 @@
<div class="Row explain"> <div class="Row explain">
The "admin password" is used to manipulate the stored default settings The "admin password" is used to manipulate the stored default settings
and to change access restrictions. This password is not saved as part and to change access restrictions. This password is not saved as part
of the main config, i.e. using save / restore does not affect this of the main config, i.e. using save / restore does not affect this
password. When the admin password is forgotten, the easiest way to password. When the admin password is forgotten, the easiest way to
re-gain access is to wipe and re-flash the chip.<br> re-gain access is to wipe and re-flash the chip.<br>
The default admin password is "%def_admin_pw%". The default admin password is "%def_admin_pw%".
</div> </div>

@ -5,8 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
<title>Terminal Settings :: ESPTerm</title> <title>Terminal Settings :: ESPTerm</title>
<link href="/css/app.f5dd70a.css" rel="stylesheet"> <link href="/css/app.69e5b77.css" rel="stylesheet">
<script src="/js/app.f5dd70a.js"></script> <script src="/js/app.69e5b77.js"></script>
<script> <script>
var _root = location.host; var _root = location.host;
var _demo = 1; var _demo = 1;
@ -40,24 +40,28 @@
<div class="Row explain"> <div class="Row explain">
To select default text and background color, click on the To select default text and background color, click on the
preview palette. Alternatively, use numbers 0-15 for theme colors, 16-255 for standard preview palette. Alternatively, use numbers 0-15 for theme colors,
colors and hex (#FFFFFF) for True Color (24-bit). 16-255 for standard colors and hex (#FFFFFF) for True Color (24-bit).
</div> </div>
<div class="Row"> <div class="Row">
<label for="theme">Color palette</label> <label for="theme">Color Palette</label>
<select name="theme" id="theme" class="short" onchange="showColor()"> <select name="theme" id="theme">
<option value="0">Tango</option> <option value="0">Tango</option>
<option value="1">Linux (CGA)</option> <option value="1">Linux (CGA)</option>
<option value="2">XTerm</option> <option value="2">XTerm</option>
<option value="3">Rxvt</option> <option value="3">Rxvt</option>
<option value="4">Ambience</option> <option value="4">Ambience</option>
<option value="5">Solarized</option> <option value="5">Solarized Dark</option>
<option value="11">Solarized Dark, high contrast</option>
<option value="10">Solarized Light</option>
<option value="6">CGA NTSC</option> <option value="6">CGA NTSC</option>
<option value="7">ZX Spectrum</option> <option value="7">ZX Spectrum</option>
<option value="8">Apple II</option> <option value="8">Apple II</option>
<option value="9">Commodore</option> <option value="9">Commodore</option>
</select> </select>
<span onclick="TermConf.prevTheme()" class="mq-no-phone theme-nav-btn"></span>
<span onclick="TermConf.nextTheme()" class="mq-no-phone theme-nav-btn"></span>
</div> </div>
<div class="Row color-preview"> <div class="Row color-preview">
@ -91,53 +95,53 @@
<label>Foreground</label> <label>Foreground</label>
<div> <div>
<div class="colorprev fg"> <div class="colorprev fg">
<span data-fg=0 data-bg=0 style="text-shadow: 0 0 4px white;">0</span><!-- <span data-fg=0>0</span><!--
--><span data-fg=1 data-bg=0>1</span><!-- --><span data-fg=1>1</span><!--
--><span data-fg=2 data-bg=0>2</span><!-- --><span data-fg=2>2</span><!--
--><span data-fg=3 data-bg=0>3</span><!-- --><span data-fg=3>3</span><!--
--><span data-fg=4 data-bg=0>4</span><!-- --><span data-fg=4>4</span><!--
--><span data-fg=5 data-bg=0>5</span><!-- --><span data-fg=5>5</span><!--
--><span data-fg=6 data-bg=0>6</span><!-- --><span data-fg=6>6</span><!--
--><span data-fg=7 data-bg=0>7</span> --><span data-fg=7>7</span>
</div> </div>
<div class="colorprev fg"> <div class="colorprev fg">
<span data-fg=8 data-bg=0>8</span><!-- <span data-fg=8>8</span><!--
--><span data-fg=9 data-bg=0>9</span><!-- --><span data-fg=9>9</span><!--
--><span data-fg=10 data-bg=0>10</span><!-- --><span data-fg=10>10</span><!--
--><span data-fg=11 data-bg=0>11</span><!-- --><span data-fg=11>11</span><!--
--><span data-fg=12 data-bg=0>12</span><!-- --><span data-fg=12>12</span><!--
--><span data-fg=13 data-bg=0>13</span><!-- --><span data-fg=13>13</span><!--
--><span data-fg=14 data-bg=0>14</span><!-- --><span data-fg=14>14</span><!--
--><span data-fg=15 data-bg=0>15</span> --><span data-fg=15>15</span>
</div> </div>
</div> </div>
</div> </div>
<div class="Row color-preview"> <div class="Row color-preview">
<label>Defaults</label> <label></label>
<div class="color-example" data-fg="" data-bg=""> <div class="color-example" data-fg="" data-bg="">
Default colors preview </div> Default colors preview </div>
</div> </div>
<div class="Row color-preview"> <div class="Row color-preview">
<label>Presets</label> <label>Defaults Presets</label>
<div id="fgbg_presets"></div> <div id="fgbg_presets"></div>
</div> </div>
<div class="Row"> <div class="Row">
<div class="SubRow"> <div class="SubRow">
<label for="default_fg">Default fg.</label> <label for="default_fg">Default Fg.</label>
<input type="text" name="default_fg" id="default_fg" class="short" value="7"> <input type="text" name="default_fg" id="default_fg" class="short" value="7">
</div> </div>
<div class="SubRow"> <div class="SubRow">
<label for="default_bg">Default bg.</label> <label for="default_bg">Default Bg.</label>
<input type="text" name="default_bg" id="default_bg" class="short" value="0"> <input type="text" name="default_bg" id="default_bg" class="short" value="0">
</div> </div>
</div> </div>
<div class="Row"> <div class="Row">
<label>Cursor style</label> <label>Cursor Style</label>
<select name="cursor_shape" id="cursor_shape"> <select name="cursor_shape" id="cursor_shape">
<option value="0">Block, blinking</option> <option value="0">Block, blinking</option>
<option value="2">Block, steady</option> <option value="2">Block, steady</option>
@ -159,9 +163,9 @@
<div class="Row explain"> <div class="Row explain">
Those are the initial settings used after ESPTerm powers on, or when the screen Those are the initial settings used after ESPTerm powers on,
reset command is received (<code>\ec</code>). They can be changed by the or when the screen reset command is received (<code>\ec</code>).
terminal application using escape sequences. They can be changed by the terminal application using escape sequences.
</div> </div>
<div class="Row"> <div class="Row">
@ -176,7 +180,7 @@
</div> </div>
<div class="Row"> <div class="Row">
<label for="term_title">Header text</label> <label for="term_title">Header Text</label>
<input type="text" name="term_title" id="term_title" value="ESPTerm Web UI Demo" required> <input type="text" name="term_title" id="term_title" value="ESPTerm Web UI Demo" required>
</div> </div>
@ -187,7 +191,7 @@
</div> </div>
<div class="Row"> <div class="Row">
<label>Button labels</label> <label>Button Labels</label>
<input class="tiny" type="text" name="btn1" id="btn1" value="OK"> <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="btn2" id="btn2" value="Cancel">
<input class="tiny" type="text" name="btn3" id="btn3" value=""> <input class="tiny" type="text" name="btn3" id="btn3" value="">
@ -227,7 +231,7 @@
<div class="Row explain"> <div class="Row explain">
This form controls the communication UART. The debug UART is fixed This form controls the communication UART. The debug UART is fixed
at 115.200 baud, one stop-bit and no parity. at 115.200 baud, one stop-bit and no parity.
</div> </div>
@ -287,23 +291,36 @@
Edit them only if you know what you're doing. </div> Edit them only if you know what you're doing. </div>
<div class="Row"> <div class="Row">
<label for="parser_tout_ms">Parser timeout<span class="mq-phone">&nbsp;(ms)</span></label> <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> <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> <span class="mq-no-phone">&nbsp;ms</span>
</div> </div>
<div class="Row"> <div class="Row">
<label for="display_tout_ms">Redraw delay<span class="mq-phone">&nbsp;(ms)</span></label> <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> <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> <span class="mq-no-phone">&nbsp;ms</span>
</div> </div>
<div class="Row"> <div class="Row">
<label for="display_cooldown_ms">Redraw cooldown<span class="mq-phone">&nbsp;(ms)</span></label> <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> <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> <span class="mq-no-phone">&nbsp;ms</span>
</div> </div>
<div class="Row checkbox" >
<label>Debug internal state</label><!--
--><span class="box" tabindex=0 role=checkbox></span>
<input type="hidden" id="debugbar" name="debugbar" value="">
</div>
<div class="Row checkbox" >
<label>Display control codes</label><!--
--><span class="box" tabindex=0 role=checkbox></span>
<input type="hidden" id="ascii_debug" name="ascii_debug" value="">
</div>
<div class="Row checkbox" > <div class="Row checkbox" >
<label>SS3 Fn keys</label><!-- <label>SS3 Fn keys</label><!--
--><span class="box" tabindex=0 role=checkbox></span> --><span class="box" tabindex=0 role=checkbox></span>
@ -311,7 +328,7 @@
</div> </div>
<div class="Row checkbox" > <div class="Row checkbox" >
<label>Capture all keys<br>(F5, F11, F12…)</label><!-- <label>Capture F5, F11, F12</label><!--
--><span class="box" tabindex=0 role=checkbox></span> --><span class="box" tabindex=0 role=checkbox></span>
<input type="hidden" id="want_all_fn" name="want_all_fn" value="0"> <input type="hidden" id="want_all_fn" name="want_all_fn" value="0">
</div> </div>
@ -322,74 +339,27 @@
<input type="hidden" id="show_config_links" name="show_config_links" value="1"> <input type="hidden" id="show_config_links" name="show_config_links" value="1">
</div> </div>
<div class="Row checkbox" >
<label>Allow \e?12h/l</label><!--
--><span class="box" tabindex=0 role=checkbox></span>
<input type="hidden" id="allow_decopt_12" name="allow_decopt_12" value="0">
</div>
<div class="Row buttons"> <div class="Row buttons">
<a class="button icn-ok" href="#" onclick="qs('#form-expert').submit()">Apply!</a> <a class="button icn-ok" href="#" onclick="qs('#form-expert').submit()">Apply!</a>
</div> </div>
</form> </form>
<script> <script>
$('#cursor_shape').val(); $.ready(function () {
$('#theme').val(0); $('#cursor_shape').val('');
$('#theme').val('0');
$('#uart_baud').val(115200); $('#uart_baud').val('115200');
$('#uart_parity').val(2); $('#uart_parity').val('2');
$('#uart_stopbits').val(1); $('#uart_stopbits').val('1');
function showColor() { TermConf.init();
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+'">&nbsp;['+i+']&nbsp;</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> </script>
<div class="botpad"></div> <div class="botpad"></div>

@ -5,8 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
<title>WiFi Settings :: ESPTerm</title> <title>WiFi Settings :: ESPTerm</title>
<link href="/css/app.f5dd70a.css" rel="stylesheet"> <link href="/css/app.69e5b77.css" rel="stylesheet">
<script src="/js/app.f5dd70a.js"></script> <script src="/js/app.69e5b77.js"></script>
<script> <script>
var _root = location.host; var _root = location.host;
var _demo = 1; var _demo = 1;

@ -5,8 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
<title>Connecting to Network :: ESPTerm</title> <title>Connecting to Network :: ESPTerm</title>
<link href="/css/app.f5dd70a.css" rel="stylesheet"> <link href="/css/app.69e5b77.css" rel="stylesheet">
<script src="/js/app.f5dd70a.js"></script> <script src="/js/app.69e5b77.js"></script>
<script> <script>
var _root = location.host; var _root = location.host;
var _demo = 1; var _demo = 1;
@ -26,14 +26,14 @@
<div class="Box"> <div class="Box">
<p> <p>
If you're configuring ESPTerm via a smartphone, or were connected If you're configuring ESPTerm via a smartphone, or were connected
from another external network, your device may lose connection and this from another external network, your device may lose connection and
progress indicator won't work. Please wait a while (~ 15 seconds), this progress indicator won't work. Please wait a while (~ 15 seconds),
then check if the connection succeeded.</p> then check if the connection succeeded.</p>
<p> <p>
To force enable the built-in AP, hold the BOOT To force enable the built-in AP, hold the BOOT button until the blue LED
button until the blue LED starts flashing. Hold the button longer (until the LED starts flashing. Hold the button longer (until the LED flashes rapidly)
flashes rapidly) for a "factory reset".</p> for a "factory reset".</p>
</div> </div>
<script> <script>

File diff suppressed because one or more lines are too long

@ -452,7 +452,7 @@ html {
} }
html { html {
font-family: Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
color: #D0D0D0; color: #D0D0D0;
background: #131315; background: #131315;
} }
@ -681,7 +681,7 @@ ul {
#content tbody th { #content tbody th {
text-align: right; text-align: right;
width: 180px; width: 220px;
color: white; color: white;
} }
@ -1162,7 +1162,7 @@ input[type="number"], input[type="password"], input[type="text"], textarea, sele
border-bottom: 2px solid #2972ba; border-bottom: 2px solid #2972ba;
background-color: #3c3c3c; background-color: #3c3c3c;
color: white; color: white;
padding: 6px; padding: 4px 6px;
line-height: 1em; line-height: 1em;
font-weight: normal; font-weight: normal;
} }
@ -1303,7 +1303,7 @@ form {
} }
.Row .spacer { .Row .spacer {
width: 180px; width: 220px;
} }
@media screen and (max-width: 544px) { @media screen and (max-width: 544px) {
@ -1359,7 +1359,7 @@ form {
font-weight: bold; font-weight: bold;
color: white; color: white;
display: inline-block; display: inline-block;
width: 180px; width: 220px;
text-align: right; text-align: right;
text-shadow: 1px 1px 3px black; text-shadow: 1px 1px 3px black;
padding: 8px; padding: 8px;
@ -1635,7 +1635,6 @@ body.term #content h1 {
#screen { #screen {
white-space: nowrap; white-space: nowrap;
background: #111213; background: #111213;
padding: 6px;
display: inline-block; display: inline-block;
border: 2px solid #3983CD; border: 2px solid #3983CD;
position: relative; position: relative;
@ -1651,6 +1650,40 @@ body.term #content h1 {
cursor: text; cursor: text;
} }
#screen .screen-margin {
position: absolute;
background: rgba(17, 18, 19, 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
pointer-events: none;
}
#screen .screen-margin.top {
top: 0;
left: 0;
right: 0;
height: 6px;
}
#screen .screen-margin.left, #screen .screen-margin.right {
top: 6px;
left: 0;
bottom: 0;
width: 6px;
}
#screen .screen-margin.right {
left: auto;
right: 0;
}
#screen .screen-margin.bottom {
left: 6px;
right: 6px;
bottom: 0;
height: 6px;
}
#screen #softkb-input { #screen #softkb-input {
position: absolute; position: absolute;
top: 6px; top: 6px;
@ -1680,8 +1713,20 @@ body.term #content h1 {
display: block; display: block;
} }
#screen .debug-canvas {
position: absolute;
top: 6px;
left: 6px;
pointer-events: none;
}
#screen .debug-toolbar { #screen .debug-toolbar {
line-height: 1.5; line-height: 1.5;
text-align: left;
padding: 6px;
font-family: "DejaVu Sans Mono", "Liberation Mono", "Inconsolata", "Menlo", monospace;
font-size: 12px;
white-space: normal;
} }
#action-buttons { #action-buttons {
@ -1701,6 +1746,10 @@ body.term #content h1 {
outline: 0 none !important; outline: 0 none !important;
} }
#action-buttons button.inactive {
opacity: 0.2;
}
#load-failed { #load-failed {
color: red; color: red;
font-size: 18px; font-size: 18px;
@ -1772,7 +1821,7 @@ body.term #content h1 {
} }
#fu_form label { #fu_form label {
width: 8em; width: 10em;
display: inline-block; display: inline-block;
} }
@ -1825,6 +1874,7 @@ body.term #content h1 {
background: #d1d5db; background: #d1d5db;
padding: 5px 10px; padding: 5px 10px;
overflow-x: auto; overflow-x: auto;
margin: 6px;
} }
#keyboard-shortcut-bar:not(.open) { #keyboard-shortcut-bar:not(.open) {
@ -1848,6 +1898,40 @@ body.term #content h1 {
color: #000; color: #000;
} }
body.pseudo-fullscreen #screen .screen-margin,
body.pseudo-fullscreen #keyboard-shortcut-bar {
display: none;
}
body.pseudo-fullscreen #outer {
position: static;
}
body.pseudo-fullscreen #screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
body.pseudo-fullscreen #screen canvas {
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
body.pseudo-fullscreen #term-nav {
position: fixed;
width: 100%;
bottom: 0;
z-index: 98;
height: 24px;
padding: 0;
}
.bold { .bold {
font-weight: bold !important; font-weight: bold !important;
} }
@ -1915,6 +1999,28 @@ body.term #content h1 {
padding: 5px; padding: 5px;
} }
.theme-nav-btn {
width: 2em;
height: 2em;
display: flex;
align-items: center;
justify-content: space-around;
background: #4c4c4c;
color: #eaeaea;
margin: 5px;
border-radius: 5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
position: relative;
}
.theme-nav-btn:active {
top: 1px;
}
.page-about .Box { .page-about .Box {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;

@ -5,8 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
<title>Quick Reference :: ESPTerm</title> <title>Quick Reference :: ESPTerm</title>
<link href="/css/app.f5dd70a.css" rel="stylesheet"> <link href="/css/app.69e5b77.css" rel="stylesheet">
<script src="/js/app.f5dd70a.js"></script> <script src="/js/app.69e5b77.js"></script>
<script> <script>
var _root = location.host; var _root = location.host;
var _demo = 1; var _demo = 1;
@ -51,15 +51,14 @@
appear on the screen. Set <i>Parser Timeout = 0</i> in <a href="cfg_term.html">Terminal Settings</a> appear on the screen. Set <i>Parser Timeout = 0</i> in <a href="cfg_term.html">Terminal Settings</a>
to be able to manually enter escape sequences. to be able to manually enter escape sequences.
<li>There is very little RAM available to the webserver, and it can support at most 4 connections at the same time. <li>Use Ctrl+F12 to open a screen debug panel. Additional debugging can be enabled in the
Each terminal session (open window with the terminal screen) uses one persistent connection for screen updates. <a href="cfg_term.html">Terminal Settings</a> (near the bottom).
<b>Avoid leaving unused windows open</b>, or either the RAM or connections may be exhausted.
<li><b>For best performance</b>, use the module in Client mode (connected to external network) and minimize the number <li><b>For best performance</b>, use the module in Client mode (connected to external network) and minimize the number
of simultaneous connections. Enabling AP consumes extra RAM because the DHCP server and Captive Portal of simultaneous connections. Enabling AP consumes extra RAM because the DHCP server and Captive Portal
DNS server are started. DNS server are started.
<li>In AP mode, <b>check that the WiFi channel used is clear</b>; interference may cause flaky connection. <li><b>Check that the WiFi channel used is clear</b>; interference may cause flaky connection.
A good mobile app to use for this is A good mobile app to use for this is
<a href="https://play.google.com/store/apps/details?id=com.farproc.wifi.analyzer">WiFi Analyzer (Google Play)</a>. <a href="https://play.google.com/store/apps/details?id=com.farproc.wifi.analyzer">WiFi Analyzer (Google Play)</a>.
Adjust the hotspot strength and range using the <i>Tx Power setting</i>. Adjust the hotspot strength and range using the <i>Tx Power setting</i>.
@ -513,7 +512,7 @@
</div> </div>
<div class="Box fold"> <div class="Box fold">
<h2>Commands: Style attributes</h2> <h2>Commands: Style Attributes</h2>
<div class="Row v"> <div class="Row v">
<p> <p>
@ -553,7 +552,7 @@
<div class="Box fold"> <div class="Box fold">
<h2>Commands: Color attributes</h2> <h2>Commands: Color Attributes</h2>
<div class="Row v"> <div class="Row v">
<p> <p>
@ -930,6 +929,94 @@
</div> </div>
</div> </div>
<div class="Box fold">
<h2>Commands: Networking</h2>
<div class="Row v">
<p>
ESPTerm implements commands for device-to-device messaging and for requesting external
servers. This can be used e.g. for remote control, status reporting or data upload / download.
</p>
<p>
Networking commands use the format <code>\e^...\a</code>, a Privacy Message (PM).
PM is similar to OSC, which uses <code>]</code> in place of <code>^</code>. The PM payload (text between <code>\e^</code> and <code>\a</code>)
must be shorter than 256 bytes, and should not contain any control characters (ASCII < 32).
</p>
<h3>Device-to-device Messaging</h3>
<p>
To send a message to another ESPTerm module, use: <code>\e^M;<i>DestIP</i>;<i>message</i>\a</code>.
</p>
<p>
This command sends a POST request to <code>http://<i>&lt;DestIP&gt;</i>/api/v1/msg</code>.
The IP address may be appended by a port, if needed (eg. :8080).
</p>
<p>
Each ESPTerm listens for such requests and relays them to UART:
<code>\e^m;<i>SrcIP</i>;L=<i>length</i>;<i>message</i>\a</code>, with <i>length</i> being the byte length of
<i>message</i>, as ASCII.
</p>
<p>
Notice a pattern with the first letter: capital is always a command, lower case a response.
This is followed with the HTTP commands and any networking commands added in the future.
</p>
<p>
<b>Example:</b> Node 192.168.0.10 sends a message to 192.168.0.19: <code>\e^M;192.168.0.19;Hello\a</code>.
Node 192.168.0.19 receives <code>\e^m;192.168.0.10;L=5;Hello\a</code> on the UART. Note that the IP
address in the reception message is that of the first node, thus it can be used to send a message back.
</p>
<h3>External HTTP requests</h3>
<p>
To request an external server, use <code>\e^H;<i>method</i>;<i>options</i>;<i>url</i>\n<i>body</i>\a</code>.
</p>
<ul>
<li><code><i>method</i></code> - can be any usual HTTP verb, such as <code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>HEAD</code>.
<li><code><i>options</i></code> - is a comma-separated list of flags and parameters:
<ul>
<li><code>H</code> - get response headers
<li><code>B</code> - get response body
<li><code>X</code> - ignore the response, return nothing
<li><code>T=<i>ms</i></code> - request timeout (default 5000&nbsp;ms), in milliseconds
<li><code>L=<i>bytes</i></code> - limit response length (default 0 = don't limit). Applies to the head, body, or both combined, depending on the <code>H</code> and <code>B</code> flags
<li><code>l=<i>bytes</i></code> - limit the response buffer size (default 5000&nbsp;B).
This can reduce RAM usage, however it shouldn't be set too small, as this buffer
is used for both headers and the response body.
</ul>
<li><code><i>url</i></code> - full request URL, including <code>http://</code>. Port may be specified if different from :80,
and GET arguments may be appended to the URL if needed.
<li><code><i>body</i></code> - optional, separated from <code><i>url</i></code> by a single line feed character (<code>\n</code>).
This can be used for POST and PUT requests. Note: the command may be truncated to the
maximum total length of 256 characters if too long.
</ul>
<p>The response has the following format: <code>\e^h;<i>status</i>;<i>options</i>;<i>response</i>\a</code></p>
<ul>
<li><code><i>status</i></code> - a HTTP status code, eg. 200 is OK, 404 Not found.
<li><code><i>options</i></code> - similar to those in the request, here describing the response data.
This field can contain comma-separated <code>B</code>, <code>H</code> and <code>L=<i>bytes</i></code>.
<li><code><i>response</i></code> - the response, as requested. If both headers and body are received,
they will be separated by an empty line (i.e. <code>\r\n\r\n</code>). Response can be up to several
kilobytes long, depending on the <code>L=</code> and <code>l=</code> options.
</ul>
<p>
<b>Example:</b> <code>\e^H;GET;B;http://wtfismyip.com/text\a</code> - get the body of a web page
(wtfismyip.com is a service that sends back your IP address).
A response could be <code>\e^h;200;B,L=11;80.70.60.50\a</code>.
</p>
</div>
</div>
<div class="Box fold"> <div class="Box fold">
<h2>Commands: System Functions</h2> <h2>Commands: System Functions</h2>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -5,8 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
<title>Terminal :: ESPTerm</title> <title>Terminal :: ESPTerm</title>
<link href="/css/app.f5dd70a.css" rel="stylesheet"> <link href="/css/app.69e5b77.css" rel="stylesheet">
<script src="/js/app.f5dd70a.js"></script> <script src="/js/app.69e5b77.js"></script>
<script> <script>
var _root = location.host; var _root = location.host;
var _demo = 1; var _demo = 1;
@ -37,7 +37,7 @@
<textarea id="fu_text"></textarea> <textarea id="fu_text"></textarea>
</p> </p>
<p> <p>
<label for="fu_crlf">Line Endings:</label> <label for="fu_crlf">Line endings:</label>
<select id="fu_crlf"> <select id="fu_crlf">
<option value="CR">CR (Enter key)</option> <option value="CR">CR (Enter key)</option>
<option value="CRLF">CR LF (Windows)</option> <option value="CRLF">CR LF (Windows)</option>
@ -45,9 +45,13 @@
</select> </select>
</p> </p>
<p> <p>
<label for="fu_delay">Line Delay (ms):</label> <label for="fu_delay">Chunk delay (ms):</label>
<input id="fu_delay" type="number" value=1 min=0> <input id="fu_delay" type="number" value=1 min=0>
</p> </p>
<p>
<label for="fu_chunk">Chunk size (0=line):</label>
<input id="fu_chunk" type="number" value=0 min=0 max=100>
</p>
</div> </div>
<div class="fu-buttons"> <div class="fu-buttons">
<button id="term-fu-start" class="icn-ok x-fu-go">Start</button>&nbsp; <button id="term-fu-start" class="icn-ok x-fu-go">Start</button>&nbsp;
@ -66,15 +70,13 @@
<div id="touch-select-menu"> <div id="touch-select-menu">
<button id="touch-select-copy-btn">Copy</button> <button id="touch-select-copy-btn">Copy</button>
</div> </div>
<div class="screen-margin top"></div>
<div class="screen-margin left"></div>
<div class="screen-margin right"></div>
<div class="screen-margin bottom"></div>
</div> </div>
<div id="action-buttons"> <div id="action-buttons"></div>
<button data-n="1"></button><!--
--><button data-n="2"></button><!--
--><button data-n="3"></button><!--
--><button data-n="4"></button><!--
--><button data-n="5"></button>
</div>
</div> </div>
<nav id="term-nav"> <nav id="term-nav">
@ -89,13 +91,7 @@
<script> <script>
try { try {
window.noAutoShow = true; window.noAutoShow = true;
termInit({ termInit({ allFn: !!+'0', });
labels: 'TESPTerm Web UI Demo\u0001OK\u0001Cancel\u0001\u0001\u0001Help',
theme: +'0',
defaultFg: +'7',
defaultBg: +'0',
allFn: !!+'0',
});
} catch (e) { } catch (e) {
console.error(e); console.error(e);
console.error("Fail, reloading in 3s…"); console.error("Fail, reloading in 3s…");

Loading…
Cancel
Save