|
|
|
@ -5,8 +5,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> |
|
|
|
|
<link href="/css/app.f5dd70a.css" rel="stylesheet"> |
|
|
|
|
<script src="/js/app.f5dd70a.js"></script> |
|
|
|
|
<script> |
|
|
|
|
var _root = location.host; |
|
|
|
|
var _demo = 1; |
|
|
|
@ -27,22 +27,25 @@ |
|
|
|
|
<span class="lead">Validation errors for:</span> <span class="list"></span> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Box message hidden"></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> |
|
|
|
|
<!-- Theme --> |
|
|
|
|
<form class="Box mobcol str" action="term_set.html" method="GET" id='form-scheme'> |
|
|
|
|
<h2>Color Scheme</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. |
|
|
|
|
To select default text and background color, click on the |
|
|
|
|
preview palette. Alternatively, use numbers 0-15 for theme colors, 16-255 for standard |
|
|
|
|
colors and hex (#FFFFFF) for True Color (24-bit). |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row"> |
|
|
|
|
<label for="theme">Color scheme</label> |
|
|
|
|
<label for="theme">Color palette</label> |
|
|
|
|
<select name="theme" id="theme" class="short" onchange="showColor()"> |
|
|
|
|
<option value="0">Tango</option> |
|
|
|
|
<option value="1">Linux (CGA)</option> |
|
|
|
@ -58,100 +61,118 @@ |
|
|
|
|
</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> |
|
|
|
|
<label>Background</label> |
|
|
|
|
<div> |
|
|
|
|
<div class="colorprev bg"> |
|
|
|
|
<span data-bg=0 data-fg=15>0</span><!-- |
|
|
|
|
--><span data-bg=1 data-fg=15>1</span><!-- |
|
|
|
|
--><span data-bg=2 data-fg=15>2</span><!-- |
|
|
|
|
--><span data-bg=3 data-fg=0>3</span><!-- |
|
|
|
|
--><span data-bg=4 data-fg=15>4</span><!-- |
|
|
|
|
--><span data-bg=5 data-fg=15>5</span><!-- |
|
|
|
|
--><span data-bg=6 data-fg=15>6</span><!-- |
|
|
|
|
--><span data-bg=7 data-fg=0>7</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 class="colorprev bg"> |
|
|
|
|
<span data-bg=8 data-fg=15>8</span><!-- |
|
|
|
|
--><span data-bg=9 data-fg=0>9</span><!-- |
|
|
|
|
--><span data-bg=10 data-fg=0>10</span><!-- |
|
|
|
|
--><span data-bg=11 data-fg=0>11</span><!-- |
|
|
|
|
--><span data-bg=12 data-fg=0>12</span><!-- |
|
|
|
|
--><span data-bg=13 data-fg=0>13</span><!-- |
|
|
|
|
--><span data-bg=14 data-fg=0>14</span><!-- |
|
|
|
|
--><span data-bg=15 data-fg=0>15</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</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="Row color-preview"> |
|
|
|
|
<label>Foreground</label> |
|
|
|
|
<div> |
|
|
|
|
<div class="colorprev fg"> |
|
|
|
|
<span data-fg=0 data-bg=0 style="text-shadow: 0 0 4px white;">0</span><!-- |
|
|
|
|
--><span data-fg=1 data-bg=0>1</span><!-- |
|
|
|
|
--><span data-fg=2 data-bg=0>2</span><!-- |
|
|
|
|
--><span data-fg=3 data-bg=0>3</span><!-- |
|
|
|
|
--><span data-fg=4 data-bg=0>4</span><!-- |
|
|
|
|
--><span data-fg=5 data-bg=0>5</span><!-- |
|
|
|
|
--><span data-fg=6 data-bg=0>6</span><!-- |
|
|
|
|
--><span data-fg=7 data-bg=0>7</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 class="colorprev fg"> |
|
|
|
|
<span data-fg=8 data-bg=0>8</span><!-- |
|
|
|
|
--><span data-fg=9 data-bg=0>9</span><!-- |
|
|
|
|
--><span data-fg=10 data-bg=0>10</span><!-- |
|
|
|
|
--><span data-fg=11 data-bg=0>11</span><!-- |
|
|
|
|
--><span data-fg=12 data-bg=0>12</span><!-- |
|
|
|
|
--><span data-fg=13 data-bg=0>13</span><!-- |
|
|
|
|
--><span data-fg=14 data-bg=0>14</span><!-- |
|
|
|
|
--><span data-fg=15 data-bg=0>15</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row color-preview"> |
|
|
|
|
<div id="color-example" data-fg="" data-bg=""> |
|
|
|
|
<label>Defaults</label> |
|
|
|
|
<div class="color-example" data-fg="" data-bg=""> |
|
|
|
|
Default colors preview </div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row color-preview"> |
|
|
|
|
<label>Presets</label> |
|
|
|
|
<div id="fgbg_presets"></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 class="SubRow"> |
|
|
|
|
<label for="default_fg">Default fg.</label> |
|
|
|
|
<input type="text" name="default_fg" id="default_fg" class="short" value="7"> |
|
|
|
|
</div> |
|
|
|
|
<div class="SubRow"> |
|
|
|
|
<label for="default_bg">Default bg.</label> |
|
|
|
|
<input type="text" name="default_bg" id="default_bg" class="short" value="0"> |
|
|
|
|
</div> |
|
|
|
|
</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> |
|
|
|
|
<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-scheme').submit()">Apply!</a> |
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
<!-- Initials --> |
|
|
|
|
<form class="Box mobcol 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 (<code>\ec</code>). They can be changed by the |
|
|
|
|
terminal application using escape sequences. |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row"> |
|
|
|
|
<div class="SubRow"> |
|
|
|
|
<label for="term_width">Width</label> |
|
|
|
|
<input type="number" step=1 min=1 max=255 name="term_width" id="term_width" value="80" required> |
|
|
|
|
</div> |
|
|
|
|
<div class="SubRow"> |
|
|
|
|
<label for="term_height">Height</label> |
|
|
|
|
<input type="number" step=1 min=1 max=255 name="term_height" id="term_height" value="25" required> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row"> |
|
|
|
@ -167,23 +188,32 @@ |
|
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
<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="btn3" id="btn3" value=""> |
|
|
|
|
<input class="tiny" type="text" name="btn4" id="btn4" value=""> |
|
|
|
|
<input class="tiny" 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> |
|
|
|
|
<label>Button codes<br>(ASCII, dec, CSV)</label> |
|
|
|
|
<input class="tiny" type="text" name="bm1" id="bm1" value="01,121"> |
|
|
|
|
<input class="tiny" type="text" name="bm2" id="bm2" value="01,110"> |
|
|
|
|
<input class="tiny" type="text" name="bm3" id="bm3" value=""> |
|
|
|
|
<input class="tiny" type="text" name="bm4" id="bm4" value=""> |
|
|
|
|
<input class="tiny" type="text" name="bm5" id="bm5" value="05"> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row checkbox" > |
|
|
|
|
<label>Enter = CR+LF (LNM)</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>Local Echo (<span style="text-decoration:overline">SRM</span>)</label><!-- |
|
|
|
|
--><span class="box" tabindex=0 role=checkbox></span> |
|
|
|
|
<input type="hidden" id="loopback" name="loopback" value=""> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="Row buttons"> |
|
|
|
@ -191,12 +221,13 @@ |
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
<form class="Box fold str" action="term_set.html" method="GET" id="form-uart"> |
|
|
|
|
<h2 tabindex=0>Serial Port</h2> |
|
|
|
|
<!-- UART --> |
|
|
|
|
<form class="Box mobcol str" action="term_set.html" method="GET" id="form-uart"> |
|
|
|
|
<h2 tabindex=0>Serial Port Parameters</h2> |
|
|
|
|
|
|
|
|
|
<div class="Row explain"> |
|
|
|
|
|
|
|
|
|
This form controls the primary, 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. |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
@ -246,7 +277,8 @@ |
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
<form class="Box fold str" action="term_set.html" method="GET" id='form-expert'> |
|
|
|
|
<!-- Expert terminal opts --> |
|
|
|
|
<form class="Box mobcol str" action="term_set.html" method="GET" id='form-expert'> |
|
|
|
|
<h2>Expert Options</h2> |
|
|
|
|
|
|
|
|
|
<div class="Row explain"> |
|
|
|
@ -272,15 +304,6 @@ |
|
|
|
|
<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> |
|
|
|
@ -293,32 +316,18 @@ |
|
|
|
|
<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); |
|
|
|
|
|
|
|
|
@ -327,20 +336,60 @@ |
|
|
|
|
$('#uart_stopbits').val(1); |
|
|
|
|
|
|
|
|
|
function showColor() { |
|
|
|
|
var ex = qs('#color-example'); |
|
|
|
|
ex.dataset.fg = +$('#default_fg').val(); |
|
|
|
|
ex.dataset.bg = +$('#default_bg').val(); |
|
|
|
|
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(); |
|
|
|
|
|
|
|
|
|
$('.colorprev span').on('click', function() { |
|
|
|
|
var fg = this.dataset.fg; |
|
|
|
|
$('#default_fg').on('input', showColor) |
|
|
|
|
$('#default_bg').on('input', showColor) |
|
|
|
|
|
|
|
|
|
$('.colorprev.bg span').on('click', function() { |
|
|
|
|
var bg = this.dataset.bg; |
|
|
|
|
if (typeof fg != 'undefined') $('#default_fg').val(fg); |
|
|
|
|
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+'"> ['+i+'] </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> |
|
|
|
|
|
|
|
|
|
<div class="botpad"></div> |
|
|
|
|