Small front-end improvements + made screen clearing apply cursor color to cleared area

pull/30/head 0.5
Ondřej Hruška 8 years ago
parent 03179a0ff0
commit 0acf0bdd72
  1. 10
      html_orig/css/app.css
  2. 18
      html_orig/help.html
  3. 24
      html_orig/js/app.js
  4. 35
      html_orig/jssrc/term.js
  5. 8
      html_orig/sass/_term-colors.scss
  6. 2
      html_orig/sass/pages/_about.scss
  7. 4
      html_orig/sass/pages/_term.scss
  8. 3
      html_orig/server.sh
  9. 2
      html_orig/term_test.php
  10. 25
      user/screen.c
  11. 2
      user/user_main.h

@ -700,8 +700,6 @@ input[type="number"], input[type="password"], input[type="text"], textarea, sele
@media screen and (max-width: 544px) { @media screen and (max-width: 544px) {
.page-term #screen span:hover { .page-term #screen span:hover {
outline: 0 none; } } outline: 0 none; } }
.page-term #screen .fg8, .page-term #screen .fg9, .page-term #screen .fg10, .page-term #screen .fg11, .page-term #screen .fg12, .page-term #screen .fg13, .page-term #screen .fg14, .page-term #screen .fg15 {
font-weight: bold; }
.page-term #buttons { .page-term #buttons {
margin-top: 10px; margin-top: 10px;
white-space: nowrap; } white-space: nowrap; }
@ -750,7 +748,7 @@ input[type="number"], input[type="password"], input[type="text"], textarea, sele
.ansiref.w100 { .ansiref.w100 {
width: 100%; } width: 100%; }
.ansiref.w100 td:nth-child(1) { .ansiref.w100 td:nth-child(1) {
width: 6em; } width: 7em; }
.ansiref.w100 td:nth-child(2) { .ansiref.w100 td:nth-child(2) {
width: 8em; } width: 8em; }
@ -850,6 +848,12 @@ input[type="number"], input[type="password"], input[type="text"], textarea, sele
.bg15 { .bg15 {
background-color: #EEEEEC; } background-color: #EEEEEC; }
.fg8, .fg9, .fg10, .fg11, .fg12, .fg13, .fg14, .fg15 {
font-weight: bold; }
.nb {
font-weight: normal !important; }
@media screen and (min-width: 545px) { @media screen and (min-width: 545px) {
.mq-phone { .mq-phone {
display: none; } } display: none; } }

@ -44,7 +44,7 @@
<b>Foreground</b> <b>Foreground</b>
<div class="colorprev"> <div class="colorprev">
<span class="fg0" style="background:#333">30</span> <span class="bg7 fg0">30</span>
<span class="bg0 fg1">31</span> <span class="bg0 fg1">31</span>
<span class="bg0 fg2">32</span> <span class="bg0 fg2">32</span>
<span class="bg0 fg3">33</span> <span class="bg0 fg3">33</span>
@ -55,7 +55,7 @@
</div> </div>
<div class="colorprev"> <div class="colorprev">
<span class="bg0 fg8">90</span> <span class="bg7 fg8">90</span>
<span class="bg0 fg9">91</span> <span class="bg0 fg9">91</span>
<span class="bg0 fg10">92</span> <span class="bg0 fg10">92</span>
<span class="bg0 fg11">93</span> <span class="bg0 fg11">93</span>
@ -68,18 +68,18 @@
<b>Background</b> <b>Background</b>
<div class="colorprev"> <div class="colorprev">
<span class="bg0 fg15">40</span> <span class="bg0 fg15 nb">40</span>
<span class="bg1 fg15">41</span> <span class="bg1 fg15 nb">41</span>
<span class="bg2 fg15">42</span> <span class="bg2 fg15 nb">42</span>
<span class="bg3 fg0">43</span> <span class="bg3 fg0">43</span>
<span class="bg4 fg15">44</span> <span class="bg4 fg15 nb">44</span>
<span class="bg5 fg15">45</span> <span class="bg5 fg15 nb">45</span>
<span class="bg6 fg15">46</span> <span class="bg6 fg15 nb">46</span>
<span class="bg7 fg0">47</span> <span class="bg7 fg0">47</span>
</div> </div>
<div class="colorprev"> <div class="colorprev">
<span class="bg8 fg15">100</span> <span class="bg8 fg15 nb">100</span>
<span class="bg9 fg0">101</span> <span class="bg9 fg0">101</span>
<span class="bg10 fg0">102</span> <span class="bg10 fg0">102</span>
<span class="bg11 fg0">103</span> <span class="bg11 fg0">103</span>

@ -896,19 +896,6 @@ $._loader = function(vis) {
var screen = []; var screen = [];
var blinkIval; var blinkIval;
/** Colors table */
var CLR = [// dark gray #2E3436
// 0 black, 1 red, 2 green, 3 yellow
// 4 blue, 5 mag, 6 cyan, 7 white
'#111213','#CC0000','#4E9A06','#C4A000',
'#3465A4','#75507B','#06989A','#D3D7CF',
// BRIGHT
// 8 black, 9 red, 10 green, 11 yellow
// 12 blue, 13 mag, 14 cyan, 15 white
'#555753','#EF2929','#8AE234','#FCE94F',
'#729FCF','#AD7FA8','#34E2E2','#EEEEEC'
];
/** Clear screen */ /** Clear screen */
function cls() { function cls() {
screen.forEach(function(cell, i) { screen.forEach(function(cell, i) {
@ -958,9 +945,7 @@ $._loader = function(vis) {
bg = inv ? cell.fg : cell.bg; bg = inv ? cell.fg : cell.bg;
// Update // Update
e.innerText = (cell.t+' ')[0]; e.innerText = (cell.t+' ')[0];
e.style.color = colorHex(fg); e.className = 'fg'+fg+' bg'+bg;
e.style.backgroundColor = colorHex(bg);
e.style.fontWeight = fg > 7 ? 'bold' : 'normal';
} }
/** Show entire screen */ /** Show entire screen */
@ -1028,13 +1013,6 @@ $._loader = function(vis) {
blitAll(); blitAll();
} }
/** Parse color */
function colorHex(c) {
c = parseInt(c);
if (c < 0 || c > 15) c = 0;
return CLR[c];
}
/** Init the terminal */ /** Init the terminal */
function init(obj) { function init(obj) {
W = obj.w; W = obj.w;

@ -8,20 +8,8 @@
var screen = []; var screen = [];
var blinkIval; var blinkIval;
/** Colors table */ /*
var CLR = [// dark gray #2E3436 /!** Clear screen *!/
// 0 black, 1 red, 2 green, 3 yellow
// 4 blue, 5 mag, 6 cyan, 7 white
'#111213','#CC0000','#4E9A06','#C4A000',
'#3465A4','#75507B','#06989A','#D3D7CF',
// BRIGHT
// 8 black, 9 red, 10 green, 11 yellow
// 12 blue, 13 mag, 14 cyan, 15 white
'#555753','#EF2929','#8AE234','#FCE94F',
'#729FCF','#AD7FA8','#34E2E2','#EEEEEC'
];
/** Clear screen */
function cls() { function cls() {
screen.forEach(function(cell, i) { screen.forEach(function(cell, i) {
cell.t = ' '; cell.t = ' ';
@ -30,6 +18,7 @@
blit(cell); blit(cell);
}); });
} }
*/
/** Set text and color at XY */ /** Set text and color at XY */
function cellAt(y, x) { function cellAt(y, x) {
@ -41,14 +30,15 @@
return cellAt(cursor.y, cursor.x); return cellAt(cursor.y, cursor.x);
} }
/** Enable or disable cursor visibility */ /*
/!** Enable or disable cursor visibility *!/
function cursorEnable(enable) { function cursorEnable(enable) {
cursor.hidden = !enable; cursor.hidden = !enable;
cursor.a &= enable; cursor.a &= enable;
blit(cursorCell(), cursor.a); blit(cursorCell(), cursor.a);
} }
/** Safely move cursor */ /!** Safely move cursor *!/
function cursorSet(y, x) { function cursorSet(y, x) {
// Hide and prevent from showing up during the move // Hide and prevent from showing up during the move
cursor.suppress = true; cursor.suppress = true;
@ -61,6 +51,7 @@
cursor.suppress = false; cursor.suppress = false;
blit(cursorCell(), cursor.a); blit(cursorCell(), cursor.a);
} }
*/
/** Update cell on display. inv = invert (for cursor) */ /** Update cell on display. inv = invert (for cursor) */
function blit(cell, inv) { function blit(cell, inv) {
@ -70,10 +61,7 @@
bg = inv ? cell.fg : cell.bg; bg = inv ? cell.fg : cell.bg;
// Update // Update
e.innerText = (cell.t+' ')[0]; e.innerText = (cell.t+' ')[0];
e.classList.className = 'fg'+fg+' bg'+bg; e.className = 'fg'+fg+' bg'+bg;
// e.style.color = colorHex(fg);
// e.style.backgroundColor = colorHex(bg);
// e.style.fontWeight = fg > 7 ? 'bold' : 'normal';
} }
/** Show entire screen */ /** Show entire screen */
@ -141,13 +129,6 @@
blitAll(); blitAll();
} }
/** Parse color */
function colorHex(c) {
c = parseInt(c);
if (c < 0 || c > 15) c = 0;
return CLR[c];
}
/** Init the terminal */ /** Init the terminal */
function init(obj) { function init(obj) {
W = obj.w; W = obj.w;

@ -14,3 +14,11 @@ $term-colors:
.fg#{$i - 1} { color: $c; } .fg#{$i - 1} { color: $c; }
.bg#{$i - 1} { background-color: $c; } .bg#{$i - 1} { background-color: $c; }
} }
.fg8, .fg9, .fg10, .fg11, .fg12, .fg13, .fg14, .fg15 {
font-weight: bold;
}
.nb {
font-weight: normal !important;
}

@ -53,7 +53,7 @@
width: 100%; width: 100%;
td:nth-child(1) { td:nth-child(1) {
width: 6em; width: 7em;
} }
td:nth-child(2) { td:nth-child(2) {

@ -26,10 +26,6 @@
} }
} }
} }
.fg8, .fg9, .fg10, .fg11, .fg12, .fg13, .fg14, .fg15 {
font-weight: bold;
}
} }
#buttons { #buttons {

@ -0,0 +1,3 @@
#!/bin/bash
xterm -e "php -S localhost:2000"

@ -10,6 +10,6 @@ $f = str_replace('%screenData%',
"screen": "70 t259" "screen": "70 t259"
}', $f); }', $f);
$f = str_replace('window.location.host', '"192.168.0.15"', $f); $f = str_replace('window.location.host', '"192.168.0.18"', $f);
echo $f; echo $f;

@ -75,25 +75,18 @@ static volatile int notifyLock = 0;
if (notifyLock == 0) screen_notifyChange(); \ if (notifyLock == 0) screen_notifyChange(); \
} while(0) } while(0)
/**
* Reset a cell
*/
static inline void
cell_init(Cell *cell)
{
cell->c = ' ';
cell->fg = SCREEN_DEF_FG;
cell->bg = SCREEN_DEF_BG;
}
/** /**
* Clear range, inclusive * Clear range, inclusive
*/ */
static inline void static inline void
clear_range(unsigned int from, unsigned int to) clear_range(unsigned int from, unsigned int to)
{ {
Color fg = cursor.inverse ? cursor.bg : cursor.fg;
Color bg = cursor.inverse ? cursor.fg : cursor.bg;
for (unsigned int i = from; i <= to; i++) { for (unsigned int i = from; i <= to; i++) {
cell_init(&screen[i]); screen[i].c = ' ';
screen[i].fg = fg;
screen[i].bg = bg;
} }
} }
@ -122,11 +115,7 @@ void ICACHE_FLASH_ATTR
screen_init(void) screen_init(void)
{ {
NOTIFY_LOCK(); NOTIFY_LOCK();
for (unsigned int i = 0; i < MAX_SCREEN_SIZE; i++) { screen_reset();
cell_init(&screen[i]);
}
cursor_reset();
NOTIFY_DONE(); NOTIFY_DONE();
} }
@ -137,8 +126,8 @@ void ICACHE_FLASH_ATTR
screen_reset(void) screen_reset(void)
{ {
NOTIFY_LOCK(); NOTIFY_LOCK();
screen_clear(CLEAR_ALL);
cursor_reset(); cursor_reset();
screen_clear(CLEAR_ALL);
NOTIFY_DONE(); NOTIFY_DONE();
} }

@ -1,7 +1,7 @@
#ifndef USER_MAIN_H_H #ifndef USER_MAIN_H_H
#define USER_MAIN_H_H #define USER_MAIN_H_H
#define FIRMWARE_VERSION "0.4" #define FIRMWARE_VERSION "0.5"
#define TERMINAL_GITHUB_REPO "https://github.com/MightyPork/esp-vt100-firmware" #define TERMINAL_GITHUB_REPO "https://github.com/MightyPork/esp-vt100-firmware"
#endif //USER_MAIN_H_H #endif //USER_MAIN_H_H

Loading…
Cancel
Save