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

Rewrite term_screen with canvas

Browse Source
http-comm
cpsdqs 7 years ago committed by Ondřej Hruška
parent b8ed46cbea
commit dd08290587
1 changed files with 443 additions and 378 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. 821
      html_orig/jssrc/term_screen.js

821
html_orig/jssrc/term_screen.js
Unescape View File

@ -1,378 +1,443 @@
var Screen = (function () { // Some non-bold Fraktur symbols are outside the contiguous block
var W = 0, H = 0; // dimensions const frakturExceptions = {
var inited = false; 'C': '\u212d',
'H': '\u210c',
var cursor = { 'I': '\u2111',
a: false, // active (blink state) 'R': '\u211c',
x: 0, // 0-based coordinates 'Z': '\u2128'
y: 0, }
fg: 7, // colors 0-15
bg: 0, // constants for decoding the update blob
attrs: 0, const SEQ_SET_COLOR_ATTR = 1
suppress: false, // do not turn on in blink interval (for safe moving) const SEQ_REPEAT = 2
forceOn: false, // force on unless hanging: used to keep cursor visible during move const SEQ_SET_COLOR = 3
hidden: false, // do not show (DEC opt) const SEQ_SET_ATTR = 4
hanging: false, // cursor at column "W+1" - not visible
}; const themes = [
[
var screen = []; '#111213',
var blinkIval; '#CC0000',
var cursorFlashStartIval; '#4E9A06',
'#C4A000',
// Some non-bold Fraktur symbols are outside the contiguous block '#3465A4',
var frakturExceptions = { '#75507B',
'C': '\u212d', '#06989A',
'H': '\u210c', '#D3D7CF',
'I': '\u2111', '#555753',
'R': '\u211c', '#EF2929',
'Z': '\u2128', '#8AE234',
}; '#FCE94F',
'#729FCF',
// for BEL '#AD7FA8',
var audioCtx = null; '#34E2E2',
try { '#EEEEEC'
audioCtx = new (window.AudioContext || window.audioContext || window.webkitAudioContext)(); ]
} catch (er) { ]
console.error("No AudioContext!", er);
} class TermScreen {
constructor () {
/** Get cell under cursor */ this.canvas = document.createElement('canvas')
function _curCell() { this.ctx = this.canvas.getContext('2d')
return screen[cursor.y*W + cursor.x];
} if ('AudioContext' in window || 'webkitAudioContext' in window) {
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
/** Safely move cursor */ } else {
function cursorSet(y, x) { console.warn('No AudioContext!')
// Hide and prevent from showing up during the move }
cursor.suppress = true;
_draw(_curCell(), false); this.cursor = {
cursor.x = x; x: 0,
cursor.y = y; y: 0,
// Show again fg: 7,
cursor.suppress = false; bg: 0,
_draw(_curCell()); attrs: 0,
} blinkOn: false,
visible: true,
function alpha2fraktur(t) { hanging: false,
// perform substitution blinkInterval: null
if (t >= 'a' && t <= 'z') { }
t = String.fromCodePoint(0x1d51e - 97 + t.charCodeAt(0));
} this._colors = themes[0]
else if (t >= 'A' && t <= 'Z') {
// this set is incomplete, some exceptions are needed this._window = {
if (frakturExceptions.hasOwnProperty(t)) { width: 0,
t = frakturExceptions[t]; height: 0,
} else { devicePixelRatio: 1,
t = String.fromCodePoint(0x1d504 - 65 + t.charCodeAt(0)); fontFamily: '"DejaVu Sans Mono", "Liberation Mono", "Inconsolata", ' +
} 'monospace',
} fontSize: 20,
return t; gridScaleX: 1.0,
} gridScaleY: 1.2,
blinkStyleOn: true,
/** Update cell on display. inv = invert (for cursor) */ blinkInterval: null
function _draw(cell, inv) { }
if (!cell) return; this.windowState = {
if (typeof inv == 'undefined') { width: 0,
inv = cursor.a && cursor.x == cell.x && cursor.y == cell.y; height: 0,
} devicePixelRatio: 0,
gridScaleX: 0,
var fg, bg, cn, t; gridScaleY: 0,
fontFamily: '',
fg = inv ? cell.bg : cell.fg; fontSize: 0
bg = inv ? cell.fg : cell.bg; }
t = cell.t; const self = this
if (!t.length) t = ' '; this.window = new Proxy(this._window, {
set (target, key, value, receiver) {
cn = 'fg' + fg + ' bg' + bg; target[key] = value
if (cell.attrs & (1<<0)) cn += ' bold'; self.updateSize()
if (cell.attrs & (1<<1)) cn += ' faint'; self.scheduleDraw()
if (cell.attrs & (1<<2)) cn += ' italic'; return true
if (cell.attrs & (1<<3)) cn += ' under'; }
if (cell.attrs & (1<<4)) cn += ' blink'; })
if (cell.attrs & (1<<5)) {
cn += ' fraktur'; this.screen = []
t = alpha2fraktur(t); this.screenFG = []
} this.screenBG = []
if (cell.attrs & (1<<6)) cn += ' strike'; this.screenAttrs = []
cell.slot.textContent = t; this.resetBlink()
cell.elem.className = cn; this.resetCursorBlink()
} }
/** Show entire screen */ get colors () { return this._colors }
function _drawAll() { set colors (theme) {
for (var i = W*H-1; i>=0; i--) { this._colors = theme
_draw(screen[i]); this.scheduleDraw()
} }
}
// schedule a draw in the next tick
function _rebuild(rows, cols) { scheduleDraw () {
W = cols; clearTimeout(this._scheduledDraw)
H = rows; this._scheduledDraw = setTimeout(() => this.draw(), 1)
}
/* Build screen & show */
var cOuter, cInner, cell, screenDiv = qs('#screen'); getFont (modifiers = {}) {
let fontStyle = modifiers.style || 'normal'
// Empty the screen node let fontWeight = modifiers.weight || 'normal'
while (screenDiv.firstChild) screenDiv.removeChild(screenDiv.firstChild); return `${fontStyle} normal ${fontWeight} ${
this.window.fontSize}px ${this.window.fontFamily}`
screen = []; }
for(var i = 0; i < W*H; i++) { getCharSize () {
cOuter = mk('span'); this.ctx.font = this.getFont()
cInner = mk('span');
return {
/* Mouse tracking */ width: this.ctx.measureText(' ').width,
(function() { height: this.window.fontSize
var x = i % W; }
var y = Math.floor(i / W); }
cOuter.addEventListener('mouseenter', function (evt) {
Input.onMouseMove(x, y); updateSize () {
}); this._window.devicePixelRatio = window.devicePixelRatio || 1
cOuter.addEventListener('mousedown', function (evt) {
Input.onMouseDown(x, y, evt.button+1); let didChange = false
}); for (let key in this.windowState) {
cOuter.addEventListener('mouseup', function (evt) { if (this.windowState[key] !== this.window[key]) {
Input.onMouseUp(x, y, evt.button+1); didChange = true
}); this.windowState[key] = this.window[key]
cOuter.addEventListener('contextmenu', function (evt) { }
if (Input.mouseTracksClicks()) { }
evt.preventDefault();
} if (didChange) {
}); const {
cOuter.addEventListener('mousewheel', function (evt) { width, height, devicePixelRatio, gridScaleX, gridScaleY, fontSize
Input.onMouseWheel(x, y, evt.deltaY>0?1:-1); } = this.window
return false; const charSize = this.getCharSize()
});
})(); this.canvas.width = width * devicePixelRatio * charSize.width * gridScaleX
this.canvas.style.width = `${width * charSize.width * gridScaleX}px`
/* End of line */ this.canvas.height = height * devicePixelRatio * charSize.height *
if ((i > 0) && (i % W == 0)) { gridScaleY
screenDiv.appendChild(mk('br')); this.canvas.style.height = `${height * charSize.height * gridScaleY}px`
} }
/* The cell */ }
cOuter.appendChild(cInner);
screenDiv.appendChild(cOuter); resetCursorBlink () {
clearInterval(this.cursor.blinkInterval)
cell = { this.cursor.blinkInterval = setInterval(() => {
t: ' ', this.cursor.blinkOn = !this.cursor.blinkOn
fg: 7, this.scheduleDraw()
bg: 0, // the colors will be replaced immediately as we receive data (user won't see this) }, 500)
attrs: 0, }
elem: cOuter,
slot: cInner, resetBlink () {
x: i % W, clearInterval(this.window.blinkInterval)
y: Math.floor(i / W), let intervals = 0
}; this.window.blinkInterval = setInterval(() => {
screen.push(cell); intervals++
_draw(cell); if (intervals >= 4 && this.window.blinkStyleOn) {
} this.window.blinkStyleOn = false
} intervals = 0
} else {
/** Init the terminal */ this.window.blinkStyleOn = true
function _init() { intervals = 0
/* Cursor blinking */ }
clearInterval(blinkIval); }, 200)
blinkIval = setInterval(function () { }
cursor.a = !cursor.a;
if (cursor.hidden || cursor.hanging) { drawCell ({ x, y, charSize, cellWidth, cellHeight, text, fg, bg, attrs }) {
cursor.a = false; const ctx = this.ctx
} ctx.fillStyle = this.colors[bg]
ctx.globalCompositeOperation = 'destination-over'
if (!cursor.suppress) { ctx.fillRect(x * cellWidth, y * cellHeight,
_draw(_curCell(), cursor.forceOn || cursor.a); Math.ceil(cellWidth), Math.ceil(cellHeight))
} ctx.globalCompositeOperation = 'source-over'
}, 500);
let fontModifiers = {}
/* blink attribute animation */ let underline = false
setInterval(function () { let blink = false
$('#screen').removeClass('blink-hide'); let strike = false
setTimeout(function () { if (attrs & 1) fontModifiers.weight = 'bold'
$('#screen').addClass('blink-hide'); if (attrs & 1 << 1) ctx.globalAlpha = 0.5
}, 800); // 200 ms ON if (attrs & 1 << 2) fontModifiers.style = 'italic'
}, 1000); if (attrs & 1 << 3) underline = true
if (attrs & 1 << 4) blink = true
inited = true; if (attrs & 1 << 5) text = TermScreen.alphaToFraktur(text)
} if (attrs & 1 << 6) strike = true
// constants for decoding the update blob if (!blink || this.window.blinkStyleOn) {
var SEQ_SET_COLOR_ATTR = 1; ctx.font = this.getFont(fontModifiers)
var SEQ_REPEAT = 2; ctx.fillStyle = this.colors[fg]
var SEQ_SET_COLOR = 3; ctx.fillText(text, (x + 0.5) * cellWidth, (y + 0.5) * cellHeight)
var SEQ_SET_ATTR = 4;
if (underline || strike) {
/** Parse received screen update object (leading S removed already) */ let lineY = underline
function _load_content(str) { ? y * cellHeight * charSize.height
var i = 0, ci = 0, j, jc, num, num2, t = ' ', fg, bg, attrs, cell; : (y + 0.5) * cellHeight
if (!inited) _init(); ctx.strokeStyle = this.colors[fg]
ctx.lineWidth = 1
var cursorMoved; ctx.moveTo(x * cellWidth, lineY)
ctx.lineTo((x + 1) * cellWidth, lineY)
// Set size ctx.stroke()
num = parse2B(str, i); i += 2; // height }
num2 = parse2B(str, i); i += 2; // width }
if (num != H || num2 != W) {
_rebuild(num, num2); ctx.globalAlpha = 1
} }
// console.log("Size ",num, num2);
draw () {
// Cursor position const ctx = this.ctx
num = parse2B(str, i); i += 2; // row const {
num2 = parse2B(str, i); i += 2; // col width,
cursorMoved = (cursor.x != num2 || cursor.y != num); height,
cursorSet(num, num2); devicePixelRatio,
// console.log("Cursor at ",num, num2); fontFamily,
fontSize,
// Attributes gridScaleX,
num = parse2B(str, i); i += 2; // fg bg attribs gridScaleY
cursor.hidden = !(num & (1<<0)); // DEC opt "visible" } = this.window
cursor.hanging = !!(num & (1<<1));
// console.log("Attributes word ",num.toString(16)+'h'); const charSize = this.getCharSize()
const cellWidth = charSize.width * gridScaleX
Input.setAlts( const cellHeight = charSize.height * gridScaleY
!!(num & (1<<2)), // cursors alt const screenWidth = width * cellWidth
!!(num & (1<<3)), // numpad alt const screenHeight = height * cellHeight
!!(num & (1<<4)) // fn keys alt const screenLength = width * height
);
ctx.setTransform(this.window.devicePixelRatio, 0, 0,
var mt_click = !!(num & (1<<5)); this.window.devicePixelRatio, 0, 0)
var mt_move = !!(num & (1<<6)); ctx.clearRect(0, 0, screenWidth, screenHeight)
Input.setMouseMode(
mt_click, ctx.font = this.getFont()
mt_move ctx.textAlign = 'center'
); ctx.textBaseline = 'middle'
$('#screen').toggleClass('noselect', mt_move);
for (let cell = 0; cell < screenLength; cell++) {
var show_buttons = !!(num & (1<<7)); let x = cell % width
var show_config_links = !!(num & (1<<8)); let y = Math.floor(cell / width)
$('.x-term-conf-btn').toggleClass('hidden', !show_config_links); let isCursor = this.cursor.x === x && this.cursor.y === y
$('#action-buttons').toggleClass('hidden', !show_buttons);
let text = this.screen[cell]
fg = 7; let fg = isCursor ? this.screenBG[cell] : this.screenFG[cell]
bg = 0; let bg = isCursor ? this.screenFG[cell] : this.screenBG[cell]
attrs = 0; let attrs = this.screenAttrs[cell]
// Here come the content if (isCursor && fg === bg) bg = fg === 0 ? 7 : 0
while(i < str.length && ci<W*H) {
this.drawCell({
j = str[i++]; x, y, charSize, cellWidth, cellHeight, text, fg, bg, attrs
jc = j.charCodeAt(0); })
if (jc == SEQ_SET_COLOR_ATTR) { }
num = parse3B(str, i); i += 3; }
fg = num & 0x0F;
bg = (num & 0xF0) >> 4; loadContent (str) {
attrs = (num & 0xFF00)>>8; // current index
} let i = 0
else if (jc == SEQ_SET_COLOR) {
num = parse2B(str, i); i += 2; // window size
fg = num & 0x0F; this.window.height = parse2B(str, i)
bg = (num & 0xF0) >> 4; this.window.width = parse2B(str, i + 2)
} this.updateSize()
else if (jc == SEQ_SET_ATTR) { i += 4
num = parse2B(str, i); i += 2;
attrs = num & 0xFF; // cursor position
} let [cursorY, cursorX] = [parse2B(str, i), parse2B(str, i + 2)]
else if (jc == SEQ_REPEAT) { i += 4
num = parse2B(str, i); i += 2; let cursorMoved = (cursorX !== this.cursor.x || cursorY !== this.cursor.y)
// console.log("Repeat x ",num); this.cursor.x = cursorX
for (; num>0 && ci<W*H; num--) { this.cursor.y = cursorY
cell = screen[ci++];
cell.fg = fg; if (cursorMoved) this.resetCursorBlink()
cell.bg = bg;
cell.t = t; // attributes
cell.attrs = attrs; let attributes = parse2B(str, i)
} i += 2
}
else { this.cursor.visible = !!(attributes & 1)
cell = screen[ci++]; this.cursor.hanging = !!(attributes & 1 << 0)
// Unique cell character
t = cell.t = j; Input.setAlts(
cell.fg = fg; !!(attributes & 1 << 2), // cursors alt
cell.bg = bg; !!(attributes & 1 << 3), // numpad alt
cell.attrs = attrs; !!(attributes & 1 << 4) // fn keys alt
// console.log("Symbol ", j); )
}
} let trackMouseClicks = !!(attributes & 1 << 5)
let trackMouseMovement = !!(attributes & 1 << 6)
_drawAll();
Input.setMouseMode(trackMouseClicks, trackMouseMovement)
// if (!cursor.hidden || cursor.hanging || !cursor.suppress) {
// // hide cursor asap let showButtons = !!(attributes & 1 << 7)
// _draw(_curCell(), false); let showConfigLinks = !!(attributes & 1 << 8)
// }
$('.x-term-conf-btn').toggleClass('hidden', !showConfigLinks)
if (cursorMoved) { $('#action-buttons').toggleClass('hidden', !showButtons)
cursor.forceOn = true;
cursorFlashStartIval = setTimeout(function() { // content
cursor.forceOn = false; let fg = 7
}, 1200); let bg = 0
_draw(_curCell(), true); let attrs = 0
} let cell = 0 // cell index
} let text = ' '
let screenLength = this.window.width * this.window.height
/** Apply labels to buttons and screen title (leading T removed already) */
function _load_labels(str) { this.screen = new Array(screenLength).fill(' ')
var pieces = str.split('\x01'); this.screenFG = new Array(screenLength).fill(' ')
qs('h1').textContent = pieces[0]; this.screenBG = new Array(screenLength).fill(' ')
$('#action-buttons button').forEach(function(x, i) { this.screenAttrs = new Array(screenLength).fill(' ')
var s = pieces[i+1].trim();
// if empty string, use the "dim" effect and put nbsp instead to stretch the btn vertically while (i < str.length && cell < screenLength) {
x.innerHTML = s.length > 0 ? e(s) : "&nbsp;"; let character = str[i++]
x.style.opacity = s.length > 0 ? 1 : 0.2; let charCode = character.charCodeAt(0)
})
} if (charCode === SEQ_SET_COLOR_ATTR) {
let data = parse3B(str, i)
/** Audible beep for ASCII 7 */ i += 3
function _beep() { fg = data & 0xF
var osc, gain; bg = data >> 4 & 0xF
if (!audioCtx) return; attrs = data >> 8 & 0xFF
} else if (charCode == SEQ_SET_COLOR) {
// Main beep let data = parse2B(str, i)
osc = audioCtx.createOscillator(); i += 2
gain = audioCtx.createGain(); fg = data & 0xF
osc.connect(gain); bg = data >> 4 & 0xF
gain.connect(audioCtx.destination); } else if (charCode === SEQ_SET_ATTR) {
gain.gain.value = 0.5; let data = parse2B(str, i)
osc.frequency.value = 750; i += 2
osc.type = 'sine'; attrs = data & 0xFF
osc.start(); } else if (charCode === SEQ_REPEAT) {
osc.stop(audioCtx.currentTime+0.05); let count = parse2B(str, i)
i += 2
// Surrogate beep (making it sound like 'oops') for (let j = 0; j < count; j++) {
osc = audioCtx.createOscillator(); this.screen[cell] = text
gain = audioCtx.createGain(); this.screenFG[cell] = fg
osc.connect(gain); this.screenBG[cell] = bg
gain.connect(audioCtx.destination); this.screenAttrs[cell] = attrs
gain.gain.value = 0.2;
osc.frequency.value = 400; if (++cell > screenLength) break
osc.type = 'sine'; }
osc.start(audioCtx.currentTime+0.05); } else {
osc.stop(audioCtx.currentTime+0.08); // unique cell character
} this.screen[cell] = text = character
this.screenFG[cell] = fg
/** Load screen content from a binary sequence (new) */ this.screenBG[cell] = bg
function load(str) { this.screenAttrs[cell] = attrs
//console.log(JSON.stringify(str)); cell++
var content = str.substr(1); }
switch(str.charAt(0)) { }
case 'S':
_load_content(content); this.scheduleDraw()
break; if (this.onload) this.onload()
case 'T': }
_load_labels(content);
break; /** Apply labels to buttons and screen title (leading T removed already) */
case 'B': loadLabels (str) {
_beep(); let pieces = str.split('\x01')
break; qs('h1').textContent = pieces[0]
default: $('#action-buttons button').forEach((button, i) => {
console.warn("Bad data message type, ignoring."); var label = pieces[i + 1].trim()
console.log(str); // if empty string, use the "dim" effect and put nbsp instead to
} // stretch the button vertically
} button.innerHTML = label ? e(label) : '&nbsp;';
button.style.opacity = label ? 1 : 0.2;
return { })
load: load, // full load (string) }
};
})(); load (str) {
const content = str.substr(1)
switch (str[0]) {
case 'S':
this.loadContent(content)
break
case 'T':
this.loadLabels(content)
break
case 'B':
this.beep()
break
default:
console.warn(`Bad data message type; ignoring.\n${
JSON.stringify(content)}`)
}
}
beep () {
const audioCtx = this.audioCtx
if (!audioCtx) return
let osc, gain
// main beep
osc = audioCtx.createOscillator()
gain = audioCtx.createGain()
osc.connect(gain)
gain.connect(audioCtx.destination);
gain.gain.value = 0.5;
osc.frequency.value = 750;
osc.type = 'sine';
osc.start();
osc.stop(audioCtx.currentTime + 0.05);
// surrogate beep (making it sound like 'oops')
osc = audioCtx.createOscillator();
gain = audioCtx.createGain();
osc.connect(gain);
gain.connect(audioCtx.destination);
gain.gain.value = 0.2;
osc.frequency.value = 400;
osc.type = 'sine';
osc.start(audioCtx.currentTime + 0.05);
osc.stop(audioCtx.currentTime + 0.08);
}
static alphaToFraktur (character) {
if ('a' <= character && character <= 'z') {
character = String.fromCodePoint(0x1d51e - 0x61 + character.charCodeAt(0))
} else if ('A' <= character && character <= 'Z') {
character = frakturExceptions[character] || String.fromCodePoint(
0x1d504 - 0x41 + character.charCodeAt(0))
}
return character
}
}
const Screen = new TermScreen()
let didAddScreen = false
Screen.onload = function () {
if (didAddScreen) return
didAddScreen = true
qs('#screen').appendChild(Screen.canvas)
}

Write Preview
Loading…
Cancel
Save