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

Merge 770d2d1a3b into a20ec8a49e

Browse Source
pull/111/merge
cpsdqs 8 years ago committed by GitHub
parent a20ec8a49e 770d2d1a3b
commit 5f7aa06b74
1 changed files with 645 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. 879
      html_orig/jssrc/term_screen.js

879
html_orig/jssrc/term_screen.js
Unescape View File

@ -1,346 +1,616 @@
var Screen = (function () { // Some non-bold Fraktur symbols are outside the contiguous block
var W = 0, H = 0; // dimensions const frakturExceptions = {
var inited = false;
var cursor = {
a: false, // active (blink state)
x: 0, // 0-based coordinates
y: 0,
fg: 7, // colors 0-15
bg: 0,
attrs: 0,
suppress: false, // do not turn on in blink interval (for safe moving)
forceOn: false, // force on unless hanging: used to keep cursor visible during move
hidden: false, // do not show (DEC opt)
hanging: false, // cursor at column "W+1" - not visible
};
var screen = [];
var blinkIval;
var cursorFlashStartIval;
// Some non-bold Fraktur symbols are outside the contiguous block
var frakturExceptions = {
'C': '\u212d', 'C': '\u212d',
'H': '\u210c', 'H': '\u210c',
'I': '\u2111', 'I': '\u2111',
'R': '\u211c', 'R': '\u211c',
'Z': '\u2128', 'Z': '\u2128'
}; }
// for BEL // constants for decoding the update blob
var audioCtx = null; const SEQ_SET_COLOR_ATTR = 1
try { const SEQ_REPEAT = 2
audioCtx = new (window.AudioContext || window.audioContext || window.webkitAudioContext)(); const SEQ_SET_COLOR = 3
} catch (er) { const SEQ_SET_ATTR = 4
console.error("No AudioContext!", er);
} const SELECTION_BG = '#b2d7fe'
const SELECTION_FG = '#333'
/** Get cell under cursor */
function _curCell() { const themes = [
return screen[cursor.y*W + cursor.x]; [ // Tango
} '#111213', '#CC0000', '#4E9A06', '#C4A000', '#3465A4', '#75507B', '#06989A',
'#D3D7CF',
/** Safely move cursor */ '#555753', '#EF2929', '#8AE234', '#FCE94F', '#729FCF', '#AD7FA8', '#34E2E2',
function cursorSet(y, x) { '#EEEEEC'
// Hide and prevent from showing up during the move ],
cursor.suppress = true; [ // Linux
_draw(_curCell(), false); '#000000', '#aa0000', '#00aa00', '#aa5500', '#0000aa', '#aa00aa', '#00aaaa',
cursor.x = x; '#aaaaaa',
cursor.y = y; '#555555', '#ff5555', '#55ff55', '#ffff55', '#5555ff', '#ff55ff', '#55ffff',
// Show again '#ffffff'
cursor.suppress = false; ],
_draw(_curCell()); [ // xterm
} '#000000', '#cd0000', '#00cd00', '#cdcd00', '#0000ee', '#cd00cd', '#00cdcd',
'#e5e5e5',
function alpha2fraktur(t) { '#7f7f7f', '#ff0000', '#00ff00', '#ffff00', '#5c5cff', '#ff00ff', '#00ffff',
// perform substitution '#ffffff'
if (t >= 'a' && t <= 'z') { ],
t = String.fromCodePoint(0x1d51e - 97 + t.charCodeAt(0)); [ // rxvt
} '#000000', '#cd0000', '#00cd00', '#cdcd00', '#0000cd', '#cd00cd', '#00cdcd',
else if (t >= 'A' && t <= 'Z') { '#faebd7',
// this set is incomplete, some exceptions are needed '#404040', '#ff0000', '#00ff00', '#ffff00', '#0000ff', '#ff00ff', '#00ffff',
if (frakturExceptions.hasOwnProperty(t)) { '#ffffff'
t = frakturExceptions[t]; ],
[ // Ambience
'#2e3436', '#cc0000', '#4e9a06', '#c4a000', '#3465a4', '#75507b', '#06989a',
'#d3d7cf',
'#555753', '#ef2929', '#8ae234', '#fce94f', '#729fcf', '#ad7fa8', '#34e2e2',
'#eeeeec'
],
[ // Solarized
'#073642', '#dc322f', '#859900', '#b58900', '#268bd2', '#d33682', '#2aa198',
'#eee8d5',
'#002b36', '#cb4b16', '#586e75', '#657b83', '#839496', '#6c71c4', '#93a1a1',
'#fdf6e3'
]
]
class TermScreen {
constructor () {
this.canvas = document.createElement('canvas')
this.ctx = this.canvas.getContext('2d')
if ('AudioContext' in window || 'webkitAudioContext' in window) {
this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
} else { } else {
t = String.fromCodePoint(0x1d504 - 65 + t.charCodeAt(0)); console.warn('No AudioContext!')
}
}
return t;
} }
/** Update cell on display. inv = invert (for cursor) */ this.cursor = {
function _draw(cell, inv) { x: 0,
if (!cell) return; y: 0,
if (typeof inv == 'undefined') { fg: 7,
inv = cursor.a && cursor.x == cell.x && cursor.y == cell.y; bg: 0,
attrs: 0,
blinkOn: false,
visible: true,
hanging: false,
style: 'block',
blinkInterval: null
}
this._colors = themes[0]
this._window = {
width: 0,
height: 0,
devicePixelRatio: 1,
fontFamily: '"DejaVu Sans Mono", "Liberation Mono", "Inconsolata", ' +
'monospace',
fontSize: 20,
gridScaleX: 1.0,
gridScaleY: 1.2,
blinkStyleOn: true,
blinkInterval: null
}
this.windowState = {
width: 0,
height: 0,
devicePixelRatio: 0,
gridScaleX: 0,
gridScaleY: 0,
fontFamily: '',
fontSize: 0
}
this.selection = {
selectable: true,
start: [0, 0],
end: [0, 0]
}
this.mouseMode = { clicks: false, movement: false }
const self = this
this.window = new Proxy(this._window, {
set (target, key, value, receiver) {
target[key] = value
self.updateSize()
self.scheduleDraw()
return true
} }
})
var fg, bg, cn, t; this.screen = []
this.screenFG = []
fg = inv ? cell.bg : cell.fg; this.screenBG = []
bg = inv ? cell.fg : cell.bg; this.screenAttrs = []
this.resetBlink()
this.resetCursorBlink()
let selecting = false
this.canvas.addEventListener('mousedown', e => {
if (this.selection.selectable || e.altKey) {
let x = e.offsetX
let y = e.offsetY
selecting = true
this.selection.start = this.selection.end = this.screenToGrid(x, y)
this.scheduleDraw()
} else {
Input.onMouseDown(...this.screenToGrid(e.offsetX, e.offsetY),
e.button + 1)
}
})
window.addEventListener('mousemove', e => {
if (selecting) {
this.selection.end = this.screenToGrid(e.offsetX, e.offsetY)
this.scheduleDraw()
}
})
window.addEventListener('mouseup', e => {
if (selecting) {
selecting = false
this.selection.end = this.screenToGrid(e.offsetX, e.offsetY)
this.scheduleDraw()
Object.assign(this.selection, this.getNormalizedSelection())
}
})
this.canvas.addEventListener('mousemove', e => {
if (!selecting) {
Input.onMouseMove(...this.screenToGrid(e.offsetX, e.offsetY))
}
})
this.canvas.addEventListener('mouseup', e => {
if (!selecting) {
Input.onMouseUp(...this.screenToGrid(e.offsetX, e.offsetY),
e.button + 1)
}
})
this.canvas.addEventListener('wheel', e => {
if (this.mouseMode.clicks) {
Input.onMouseWheel(...this.screenToGrid(e.offsetX, e.offsetY),
e.deltaY > 0 ? 1 : -1)
t = cell.t; // prevent page scrolling
if (!t.length) t = ' '; e.preventDefault()
}
})
cn = 'fg' + fg + ' bg' + bg; // bind ctrl+shift+c to copy
if (cell.attrs & (1<<0)) cn += ' bold'; key('⌃+⇧+c', e => {
if (cell.attrs & (1<<1)) cn += ' faint'; e.preventDefault()
if (cell.attrs & (1<<2)) cn += ' italic'; this.copySelectionToClipboard()
if (cell.attrs & (1<<3)) cn += ' under'; })
if (cell.attrs & (1<<4)) cn += ' blink';
if (cell.attrs & (1<<5)) {
cn += ' fraktur';
t = alpha2fraktur(t);
} }
if (cell.attrs & (1<<6)) cn += ' strike';
cell.slot.textContent = t; get colors () { return this._colors }
cell.elem.className = cn; set colors (theme) {
this._colors = theme
this.scheduleDraw()
} }
/** Show entire screen */ // schedule a draw in the next tick
function _drawAll() { scheduleDraw () {
for (var i = W*H-1; i>=0; i--) { clearTimeout(this._scheduledDraw)
_draw(screen[i]); this._scheduledDraw = setTimeout(() => this.draw(), 1)
} }
getFont (modifiers = {}) {
let fontStyle = modifiers.style || 'normal'
let fontWeight = modifiers.weight || 'normal'
return `${fontStyle} normal ${fontWeight} ${
this.window.fontSize}px ${this.window.fontFamily}`
} }
function _rebuild(rows, cols) { getCharSize () {
W = cols; this.ctx.font = this.getFont()
H = rows;
/* Build screen & show */ return {
var cOuter, cInner, cell, screenDiv = qs('#screen'); width: this.ctx.measureText(' ').width,
height: this.window.fontSize
}
}
// Empty the screen node updateSize () {
while (screenDiv.firstChild) screenDiv.removeChild(screenDiv.firstChild); this._window.devicePixelRatio = window.devicePixelRatio || 1
screen = []; let didChange = false
for (let key in this.windowState) {
if (this.windowState[key] !== this.window[key]) {
didChange = true
this.windowState[key] = this.window[key]
}
}
for(var i = 0; i < W*H; i++) { if (didChange) {
cOuter = mk('span'); const {
cInner = mk('span'); width, height, devicePixelRatio, gridScaleX, gridScaleY, fontSize
} = this.window
const charSize = this.getCharSize()
/* Mouse tracking */ this.canvas.width = width * devicePixelRatio * charSize.width * gridScaleX
(function() { this.canvas.style.width = `${Math.ceil(width * charSize.width *
var x = i % W; gridScaleX)}px`
var y = Math.floor(i / W); this.canvas.height = height * devicePixelRatio * charSize.height *
cOuter.addEventListener('mouseenter', function (evt) { gridScaleY
Input.onMouseMove(x, y); this.canvas.style.height = `${Math.ceil(height * charSize.height *
}); gridScaleY)}px`
cOuter.addEventListener('mousedown', function (evt) { }
Input.onMouseDown(x, y, evt.button+1);
});
cOuter.addEventListener('mouseup', function (evt) {
Input.onMouseUp(x, y, evt.button+1);
});
cOuter.addEventListener('contextmenu', function (evt) {
if (Input.mouseTracksClicks()) {
evt.preventDefault();
} }
});
cOuter.addEventListener('mousewheel', function (evt) {
Input.onMouseWheel(x, y, evt.deltaY>0?1:-1);
return false;
});
})();
/* End of line */ resetCursorBlink () {
if ((i > 0) && (i % W == 0)) { this.cursor.blinkOn = true
screenDiv.appendChild(mk('br')); clearInterval(this.cursor.blinkInterval)
this.cursor.blinkInterval = setInterval(() => {
this.cursor.blinkOn = !this.cursor.blinkOn
this.scheduleDraw()
}, 500)
} }
/* The cell */
cOuter.appendChild(cInner);
screenDiv.appendChild(cOuter);
cell = { resetBlink () {
t: ' ', this.window.blinkStyleOn = true
fg: 7, clearInterval(this.window.blinkInterval)
bg: 0, // the colors will be replaced immediately as we receive data (user won't see this) let intervals = 0
attrs: 0, this.window.blinkInterval = setInterval(() => {
elem: cOuter, intervals++
slot: cInner, if (intervals >= 4 && this.window.blinkStyleOn) {
x: i % W, this.window.blinkStyleOn = false
y: Math.floor(i / W), intervals = 0
}; } else if (intervals >= 1 && !this.window.blinkStyleOn) {
screen.push(cell); this.window.blinkStyleOn = true
_draw(cell); intervals = 0
} }
}, 200)
} }
/** Init the terminal */ getNormalizedSelection () {
function _init() { let { start, end } = this.selection
/* Cursor blinking */ // if the start line is after the end line, or if they're both on the same
clearInterval(blinkIval); // line but the start column comes after the end column, swap
blinkIval = setInterval(function () { if (start[1] > end[1] || (start[1] === end[1] && start[0] > end[0])) {
cursor.a = !cursor.a; [start, end] = [end, start]
if (cursor.hidden || cursor.hanging) { }
cursor.a = false; return { start, end }
} }
if (!cursor.suppress) { isInSelection (col, line) {
_draw(_curCell(), cursor.forceOn || cursor.a); let { start, end } = this.getNormalizedSelection()
let colAfterStart = start[0] <= col
let colBeforeEnd = col < end[0]
let onStartLine = line === start[1]
let onEndLine = line === end[1]
if (onStartLine && onEndLine) return colAfterStart && colBeforeEnd
else if (onStartLine) return colAfterStart
else if (onEndLine) return colBeforeEnd
else return start[1] < line && line < end[1]
} }
}, 500);
/* blink attribute animation */ getSelectedText () {
setInterval(function () { const screenLength = this.window.width * this.window.height
$('#screen').removeClass('blink-hide'); let lines = []
setTimeout(function () { let previousLineIndex = -1
$('#screen').addClass('blink-hide');
}, 800); // 200 ms ON for (let cell = 0; cell < screenLength; cell++) {
}, 1000); let x = cell % this.window.width
let y = Math.floor(cell / this.window.width)
inited = true; if (this.isInSelection(x, y)) {
if (previousLineIndex !== y) {
previousLineIndex = y
lines.push('')
}
lines[lines.length - 1] += this.screen[cell]
}
} }
// constants for decoding the update blob return lines.join('\n')
var SEQ_SET_COLOR_ATTR = 1; }
var SEQ_REPEAT = 2;
var SEQ_SET_COLOR = 3;
var SEQ_SET_ATTR = 4;
/** Parse received screen update object (leading S removed already) */ copySelectionToClipboard () {
function _load_content(str) { let selectedText = this.getSelectedText()
var i = 0, ci = 0, j, jc, num, num2, t = ' ', fg, bg, attrs, cell; // don't copy anything if nothing is selected
if (!selectedText) return
let textarea = document.createElement('textarea')
document.body.appendChild(textarea)
textarea.value = selectedText
textarea.select()
if (document.execCommand('copy')) {
Notify.show(`Copied to clipboard`)
} else {
// unsuccessful copy
// TODO: do something?
}
document.body.removeChild(textarea)
}
screenToGrid (x, y) {
let charSize = this.getCharSize()
let cellWidth = charSize.width * this.window.gridScaleX
let cellHeight = charSize.height * this.window.gridScaleY
return [
Math.floor((x + cellWidth / 2) / cellWidth),
Math.floor(y / cellHeight)
]
}
drawCell ({ x, y, charSize, cellWidth, cellHeight, text, fg, bg, attrs },
compositeAbove = false) {
const ctx = this.ctx
const inSelection = this.isInSelection(x, y)
ctx.fillStyle = inSelection ? SELECTION_BG : this.colors[bg]
if (!compositeAbove) ctx.globalCompositeOperation = 'destination-over'
ctx.fillRect(x * cellWidth, y * cellHeight,
Math.ceil(cellWidth), Math.ceil(cellHeight))
ctx.globalCompositeOperation = 'source-over'
let fontModifiers = {}
let underline = false
let blink = false
let strike = false
if (attrs & 1) fontModifiers.weight = 'bold'
if (attrs & 1 << 1) ctx.globalAlpha = 0.5
if (attrs & 1 << 2) fontModifiers.style = 'italic'
if (attrs & 1 << 3) underline = true
if (attrs & 1 << 4) blink = true
if (attrs & 1 << 5) text = TermScreen.alphaToFraktur(text)
if (attrs & 1 << 6) strike = true
if (!blink || this.window.blinkStyleOn) {
ctx.font = this.getFont(fontModifiers)
ctx.fillStyle = inSelection ? SELECTION_FG : this.colors[fg]
ctx.fillText(text, (x + 0.5) * cellWidth, (y + 0.5) * cellHeight)
if (underline || strike) {
let lineY = underline
? y * cellHeight + charSize.height
: (y + 0.5) * cellHeight
ctx.strokeStyle = inSelection ? SELECTION_FG : this.colors[fg]
ctx.lineWidth = this.window.fontSize / 10
ctx.lineCap = 'round'
ctx.beginPath()
ctx.moveTo(x * cellWidth, lineY)
ctx.lineTo((x + 1) * cellWidth, lineY)
ctx.stroke()
}
}
ctx.globalAlpha = 1
}
draw () {
const ctx = this.ctx
const {
width,
height,
devicePixelRatio,
fontFamily,
fontSize,
gridScaleX,
gridScaleY
} = this.window
const charSize = this.getCharSize()
const cellWidth = charSize.width * gridScaleX
const cellHeight = charSize.height * gridScaleY
const screenWidth = width * cellWidth
const screenHeight = height * cellHeight
const screenLength = width * height
ctx.setTransform(this.window.devicePixelRatio, 0, 0,
this.window.devicePixelRatio, 0, 0)
ctx.clearRect(0, 0, screenWidth, screenHeight)
ctx.font = this.getFont()
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
for (let cell = 0; cell < screenLength; cell++) {
let x = cell % width
let y = Math.floor(cell / width)
let isCursor = this.cursor.x === x && this.cursor.y === y
if (this.cursor.hanging) isCursor = false
let invertForCursor = isCursor && this.cursor.blinkOn &&
this.cursor.style === 'block'
let text = this.screen[cell]
let fg = invertForCursor ? this.screenBG[cell] : this.screenFG[cell]
let bg = invertForCursor ? this.screenFG[cell] : this.screenBG[cell]
let attrs = this.screenAttrs[cell]
// HACK: ensure cursor is visible
if (invertForCursor && fg === bg) bg = fg === 0 ? 7 : 0
this.drawCell({
x, y, charSize, cellWidth, cellHeight, text, fg, bg, attrs
})
if (!inited) _init(); if (isCursor && this.cursor.blinkOn && this.cursor.style !== 'block') {
ctx.save()
ctx.beginPath()
if (this.cursor.style === 'bar') {
// vertical bar
let barWidth = 2
ctx.rect(x * cellWidth, y * cellHeight, barWidth, cellHeight)
} else if (this.cursor.style === 'line') {
// underline
let lineHeight = 2
ctx.rect(x * cellWidth, y * cellHeight + charSize.height,
cellWidth, lineHeight)
}
ctx.clip()
var cursorMoved; // swap foreground/background
fg = this.screenBG[cell]
bg = this.screenFG[cell]
// HACK: ensure cursor is visible
if (fg === bg) bg = fg === 0 ? 7 : 0
// Set size this.drawCell({
num = parse2B(str, i); i += 2; // height x, y, charSize, cellWidth, cellHeight, text, fg, bg, attrs
num2 = parse2B(str, i); i += 2; // width }, true)
if (num != H || num2 != W) { ctx.restore()
_rebuild(num, num2); }
} }
// console.log("Size ",num, num2); }
loadContent (str) {
// current index
let i = 0
// window size
this.window.height = parse2B(str, i)
this.window.width = parse2B(str, i + 2)
this.updateSize()
i += 4
// cursor position
let [cursorY, cursorX] = [parse2B(str, i), parse2B(str, i + 2)]
i += 4
let cursorMoved = (cursorX !== this.cursor.x || cursorY !== this.cursor.y)
this.cursor.x = cursorX
this.cursor.y = cursorY
if (cursorMoved) this.resetCursorBlink()
// Cursor position // attributes
num = parse2B(str, i); i += 2; // row let attributes = parse2B(str, i)
num2 = parse2B(str, i); i += 2; // col i += 2
cursorMoved = (cursor.x != num2 || cursor.y != num);
cursorSet(num, num2);
// console.log("Cursor at ",num, num2);
// Attributes this.cursor.visible = !!(attributes & 1)
num = parse2B(str, i); i += 2; // fg bg attribs this.cursor.hanging = !!(attributes & 1 << 1)
cursor.hidden = !(num & (1<<0)); // DEC opt "visible"
cursor.hanging = !!(num & (1<<1));
// console.log("Attributes word ",num.toString(16)+'h');
Input.setAlts( Input.setAlts(
!!(num & (1<<2)), // cursors alt !!(attributes & 1 << 2), // cursors alt
!!(num & (1<<3)), // numpad alt !!(attributes & 1 << 3), // numpad alt
!!(num & (1<<4)) // fn keys alt !!(attributes & 1 << 4) // fn keys alt
); )
var mt_click = !!(num & (1<<5)); let trackMouseClicks = !!(attributes & 1 << 5)
var mt_move = !!(num & (1<<6)); let trackMouseMovement = !!(attributes & 1 << 6)
Input.setMouseMode(
mt_click, Input.setMouseMode(trackMouseClicks, trackMouseMovement)
mt_move this.selection.selectable = !trackMouseMovement
); this.mouseMode = {
$('#screen').toggleClass('noselect', mt_move); clicks: trackMouseClicks,
movement: trackMouseMovement
var show_buttons = !!(num & (1<<7)); }
var show_config_links = !!(num & (1<<8));
$('.x-term-conf-btn').toggleClass('hidden', !show_config_links); let showButtons = !!(attributes & 1 << 7)
$('#action-buttons').toggleClass('hidden', !show_buttons); let showConfigLinks = !!(attributes & 1 << 8)
fg = 7; $('.x-term-conf-btn').toggleClass('hidden', !showConfigLinks)
bg = 0; $('#action-buttons').toggleClass('hidden', !showButtons)
attrs = 0;
// content
// Here come the content let fg = 7
while(i < str.length && ci<W*H) { let bg = 0
let attrs = 0
j = str[i++]; let cell = 0 // cell index
jc = j.charCodeAt(0); let text = ' '
if (jc == SEQ_SET_COLOR_ATTR) { let screenLength = this.window.width * this.window.height
num = parse3B(str, i); i += 3;
fg = num & 0x0F; this.screen = new Array(screenLength).fill(' ')
bg = (num & 0xF0) >> 4; this.screenFG = new Array(screenLength).fill(' ')
attrs = (num & 0xFF00)>>8; this.screenBG = new Array(screenLength).fill(' ')
} this.screenAttrs = new Array(screenLength).fill(' ')
else if (jc == SEQ_SET_COLOR) {
num = parse2B(str, i); i += 2; while (i < str.length && cell < screenLength) {
fg = num & 0x0F; let character = str[i++]
bg = (num & 0xF0) >> 4; let charCode = character.charCodeAt(0)
}
else if (jc == SEQ_SET_ATTR) { if (charCode === SEQ_SET_COLOR_ATTR) {
num = parse2B(str, i); i += 2; let data = parse3B(str, i)
attrs = num & 0xFF; i += 3
} fg = data & 0xF
else if (jc == SEQ_REPEAT) { bg = data >> 4 & 0xF
num = parse2B(str, i); i += 2; attrs = data >> 8 & 0xFF
// console.log("Repeat x ",num); } else if (charCode == SEQ_SET_COLOR) {
for (; num>0 && ci<W*H; num--) { let data = parse2B(str, i)
cell = screen[ci++]; i += 2
cell.fg = fg; fg = data & 0xF
cell.bg = bg; bg = data >> 4 & 0xF
cell.t = t; } else if (charCode === SEQ_SET_ATTR) {
cell.attrs = attrs; let data = parse2B(str, i)
} i += 2
} attrs = data & 0xFF
else { } else if (charCode === SEQ_REPEAT) {
cell = screen[ci++]; let count = parse2B(str, i)
// Unique cell character i += 2
t = cell.t = j; for (let j = 0; j < count; j++) {
cell.fg = fg; this.screen[cell] = text
cell.bg = bg; this.screenFG[cell] = fg
cell.attrs = attrs; this.screenBG[cell] = bg
// console.log("Symbol ", j); this.screenAttrs[cell] = attrs
}
} if (++cell > screenLength) break
_drawAll();
// if (!cursor.hidden || cursor.hanging || !cursor.suppress) {
// // hide cursor asap
// _draw(_curCell(), false);
// }
if (cursorMoved) {
cursor.forceOn = true;
cursorFlashStartIval = setTimeout(function() {
cursor.forceOn = false;
}, 1200);
_draw(_curCell(), true);
} }
} else {
// unique cell character
this.screen[cell] = text = character
this.screenFG[cell] = fg
this.screenBG[cell] = bg
this.screenAttrs[cell] = attrs
cell++
}
}
this.scheduleDraw()
if (this.onload) this.onload()
} }
/** Apply labels to buttons and screen title (leading T removed already) */ /** Apply labels to buttons and screen title (leading T removed already) */
function _load_labels(str) { loadLabels (str) {
var pieces = str.split('\x01'); let pieces = str.split('\x01')
qs('h1').textContent = pieces[0]; qs('h1').textContent = pieces[0]
$('#action-buttons button').forEach(function(x, i) { $('#action-buttons button').forEach((button, i) => {
var s = pieces[i+1].trim(); var label = pieces[i + 1].trim()
// if empty string, use the "dim" effect and put nbsp instead to stretch the btn vertically // if empty string, use the "dim" effect and put nbsp instead to
x.innerHTML = s.length > 0 ? e(s) : "&nbsp;"; // stretch the button vertically
x.style.opacity = s.length > 0 ? 1 : 0.2; button.innerHTML = label ? e(label) : '&nbsp;';
button.style.opacity = label ? 1 : 0.2;
}) })
} }
/** Audible beep for ASCII 7 */ load (str) {
function _beep() { const content = str.substr(1)
var osc, gain;
if (!audioCtx) return;
// Main beep switch (str[0]) {
osc = audioCtx.createOscillator(); case 'S':
gain = audioCtx.createGain(); this.loadContent(content)
osc.connect(gain); 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.connect(audioCtx.destination);
gain.gain.value = 0.5; gain.gain.value = 0.5;
osc.frequency.value = 750; osc.frequency.value = 750;
osc.type = 'sine'; osc.type = 'sine';
osc.start(); osc.start();
osc.stop(audioCtx.currentTime+0.05); osc.stop(audioCtx.currentTime + 0.05);
// Surrogate beep (making it sound like 'oops') // surrogate beep (making it sound like 'oops')
osc = audioCtx.createOscillator(); osc = audioCtx.createOscillator();
gain = audioCtx.createGain(); gain = audioCtx.createGain();
osc.connect(gain); osc.connect(gain);
@ -348,31 +618,28 @@ var Screen = (function () {
gain.gain.value = 0.2; gain.gain.value = 0.2;
osc.frequency.value = 400; osc.frequency.value = 400;
osc.type = 'sine'; osc.type = 'sine';
osc.start(audioCtx.currentTime+0.05); osc.start(audioCtx.currentTime + 0.05);
osc.stop(audioCtx.currentTime+0.08); osc.stop(audioCtx.currentTime + 0.08);
} }
/** Load screen content from a binary sequence (new) */ static alphaToFraktur (character) {
function load(str) { if ('a' <= character && character <= 'z') {
//console.log(JSON.stringify(str)); character = String.fromCodePoint(0x1d51e - 0x61 + character.charCodeAt(0))
var content = str.substr(1); } else if ('A' <= character && character <= 'Z') {
switch(str.charAt(0)) { character = frakturExceptions[character] || String.fromCodePoint(
case 'S': 0x1d504 - 0x41 + character.charCodeAt(0))
_load_content(content);
break;
case 'T':
_load_labels(content);
break;
case 'B':
_beep();
break;
default:
console.warn("Bad data message type, ignoring.");
console.log(str);
} }
return character
} }
}
return { const Screen = new TermScreen()
load: load, // full load (string) let didAddScreen = false
}; Screen.onload = function () {
})(); if (didAddScreen) return
didAddScreen = true
qs('#screen').appendChild(Screen.canvas)
for (let item of qs('#screen').classList) {
if (item.startsWith('theme-')) Screen.colors = themes[item.substr(6)]
}
}

Write Preview
Loading…
Cancel
Save