espterm
/
espterm-front-end
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

merge.jpg

Browse Source
box-drawing
cpsdqs 8 years ago
parent 5245917c88 46099bb749
commit a66e90e3eb
4 changed files with 133 additions and 91 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 14
      js/term/screen_parser.js
  2. 26
      js/term/themes.js
  3. 164
      pages/cfg_term.php
  4. 20
      sass/pages/_term.scss

14
js/term/screen_parser.js
Unescape View File

@ -86,12 +86,10 @@ module.exports = class ScreenParser {
const newHeight = du(strArray[ci++])
const newWidth = du(strArray[ci++])
const theme = du(strArray[ci++])
const defFg = du(strArray[ci++]) | (du(strArray[ci++]) << 12)
const defBg = du(strArray[ci++]) | (du(strArray[ci++]) << 12)
const defFg = (du(strArray[ci++]) & 0xFFFF) | ((du(strArray[ci++]) & 0xFFFF) << 16)
const defBg = (du(strArray[ci++]) & 0xFFFF) | ((du(strArray[ci++]) & 0xFFFF) << 16)
const attributes = du(strArray[ci++])
console.log(`set colors ${defFg}, ${defBg}, theme ${theme}`)
// theming
this.screen.renderer.loadTheme(theme)
this.screen.renderer.setDefaultColors(defFg, defBg)
@ -323,8 +321,8 @@ module.exports = class ScreenParser {
case SEQ_SET_FG:
data = du(strArray[ci++])
if (data & 0x10000) {
data ^= 0x10000
data |= du(strArray[ci++]) << 12
data &= 0xFFF
data |= (du(strArray[ci++]) & 0xFFF) << 12
data += 256
}
fg = data
@ -333,8 +331,8 @@ module.exports = class ScreenParser {
case SEQ_SET_BG:
data = du(strArray[ci++])
if (data & 0x10000) {
data ^= 0x10000
data |= du(strArray[ci++]) << 12
data &= 0xFFF
data |= (du(strArray[ci++]) & 0xFFF) << 12
data += 256
}
bg = data

26
js/term/themes.js
Unescape View File

@ -98,24 +98,26 @@ exports.buildColorTable = function () {
exports.SELECTION_FG = '#333'
exports.SELECTION_BG = '#b2d7fe'
function resolveColor (themeN, shade) {
shade = +shade
if (shade < 16) shade = themes[themeN][shade]
else {
shade = exports.buildColorTable()[shade]
}
return shade
}
exports.themePreview = function (n) {
exports.themePreview = function (themeN) {
document.querySelectorAll('[data-fg]').forEach((elem) => {
let shade = elem.dataset.fg
if (/^\d+$/.test(shade)) shade = resolveColor(n, shade)
if (/^\d+$/.test(shade)) shade = exports.toCss(shade, themeN)
elem.style.color = shade
})
document.querySelectorAll('[data-bg]').forEach((elem) => {
let shade = elem.dataset.bg
if (/^\d+$/.test(shade)) shade = resolveColor(n, shade)
if (/^\d+$/.test(shade)) shade = exports.toCss(shade, themeN)
elem.style.backgroundColor = shade
})
}
exports.toCss = function (shade, themeN) {
if (/^\d+$/.test(shade)) {
shade = +shade
if (shade < 16) shade = themes[themeN][shade]
else {
shade = exports.buildColorTable()[shade]
}
}
return shade
}

164
pages/cfg_term.php
Unescape View File

@ -12,7 +12,7 @@
<div class="Row">
<label for="theme"><?= tr("term.theme") ?></label>
<select name="theme" id="theme" onchange="showColor()">
<select name="theme" id="theme">
<option value="0">Tango</option>
<option value="1">Linux (CGA)</option>
<option value="2">XTerm</option>
@ -26,6 +26,8 @@
<option value="8">Apple II</option>
<option value="9">Commodore</option>
</select>
<span onclick="prevTheme()" class="mq-no-phone theme-nav-btn">◀</span>
<span onclick="nextTheme()" class="mq-no-phone theme-nav-btn">▶</span>
</div>
<div class="Row color-preview">
@ -59,25 +61,25 @@
<label><?= tr("term.color_fg_prev") ?></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>
<span data-fg=0>0</span><!--
--><span data-fg=1>1</span><!--
--><span data-fg=2>2</span><!--
--><span data-fg=3>3</span><!--
--><span data-fg=4>4</span><!--
--><span data-fg=5>5</span><!--
--><span data-fg=6>6</span><!--
--><span data-fg=7>7</span>
</div>
<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>
<span data-fg=8>8</span><!--
--><span data-fg=9>9</span><!--
--><span data-fg=10>10</span><!--
--><span data-fg=11>11</span><!--
--><span data-fg=12>12</span><!--
--><span data-fg=13>13</span><!--
--><span data-fg=14>14</span><!--
--><span data-fg=15>15</span>
</div>
</div>
</div>
@ -292,69 +294,89 @@
</form>
<script>
$('#cursor_shape').val(%cursor_shape%);
$('#theme').val(%theme%);
$('#uart_baud').val(%uart_baud%);
$('#uart_parity').val(%uart_parity%);
$('#uart_stopbits').val(%uart_stopbits%);
function showColor() {
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++) {
var thm = themes.fgbgThemes[i];
var fg = thm[0];
function showColor() {
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';
}
var themeN = +$('#theme').val();
ex.dataset.fg = fg;
ex.dataset.bg = bg;
themes.themePreview(themeN);
$('.colorprev.fg span').css('background', themes.toCss(bg, themeN));
}
$.ready(function () {
$('#cursor_shape').val('%cursor_shape%');
$('#theme').val('%theme%');
$('#uart_baud').val('%uart_baud%');
$('#uart_parity').val('%uart_parity%');
$('#uart_stopbits').val('%uart_stopbits%');
$('#theme').on('change', 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++) {
var thm = themes.fgbgThemes[i];
var fg = thm[0];
var bg = thm[1];
var lbl = thm[2];
var tit = thm[3];
$presets
.htmlAppend(
'<span class="preset" ' +
'data-xfg="'+fg+'" data-xbg="'+bg+'" ' +
'style="color:'+fg+';background:'+bg+'" title="'+tit+'">&nbsp;'+lbl+'&nbsp;</span>');
'data-xfg="' + fg + '" data-xbg="' + bg + '" ' +
'style="color:' + fg + ';background:' + bg + '" title="' + tit + '">&nbsp;' + lbl + '&nbsp;</span>');
if ((i+1)%5==0) $presets.htmlAppend('<br>');
}
if ((i + 1) % 5 == 0) $presets.htmlAppend('<br>');
}
$('.preset').on('click', function() {
$('.preset').on('click', function () {
$('#default_fg').val(this.dataset.xfg)
$('#default_bg').val(this.dataset.xbg)
showColor()
});
});
showColor();
})
function nextTheme() {
var sel = qs('#theme');
var i = sel.selectedIndex;
sel.options[++i % sel.options.length].selected = true;
showColor();
}
function prevTheme() {
var sel = qs('#theme');
var i = sel.selectedIndex;
sel.options[(sel.options.length+(--i)) % sel.options.length].selected = true;
showColor();
}
</script>

20
sass/pages/_term.scss
Unescape View File

@ -381,3 +381,23 @@ body.pseudo-fullscreen {
display: inline-block;
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;
@include noselect();
cursor: pointer;
position: relative;
&:active {
top: 1px;
}
}

Write Preview
Loading…
Cancel
Save