${errorMsg}
at ${file}:${line}:${col}`, 10000, true) + return false + } + + qs('#screen').appendChild(screen.canvas) + screen.load(labels, theme) // load labels and theme + + window.initSoftKeyboard(screen, input) + if (window.attachDebugScreen) window.attachDebugScreen(screen) + + let isFullscreen = false + let fitScreen = false + let fitScreenIfNeeded = function fitScreenIfNeeded () { + if (isFullscreen) { + screen.window.fitIntoWidth = window.screen.width + screen.window.fitIntoHeight = window.screen.height + } else { + screen.window.fitIntoWidth = fitScreen ? window.innerWidth - 20 : 0 + screen.window.fitIntoHeight = fitScreen ? window.innerHeight : 0 + } + } + fitScreenIfNeeded() + window.addEventListener('resize', fitScreenIfNeeded) + + let toggleFitScreen = function () { + fitScreen = !fitScreen + const resizeButtonIcon = qs('#resize-button-icon') + if (fitScreen) { + resizeButtonIcon.classList.remove('icn-resize-small') + resizeButtonIcon.classList.add('icn-resize-full') + } else { + resizeButtonIcon.classList.remove('icn-resize-full') + resizeButtonIcon.classList.add('icn-resize-small') + } + fitScreenIfNeeded() + } + + qs('#term-fit-screen').addEventListener('click', function () { + toggleFitScreen() + return false + }) + + // add fullscreen mode & button + if (Element.prototype.requestFullscreen || Element.prototype.webkitRequestFullscreen) { + let checkForFullscreen = function () { + // document.fullscreenElement is not really supported yet, so here's a hack + if (isFullscreen && (innerWidth !== window.screen.width || innerHeight !== window.screen.height)) { + isFullscreen = false + fitScreenIfNeeded() + } + } + setInterval(checkForFullscreen, 500) + + // (why are the buttons anchors?) + let button = mk('a') + button.href = '#' + button.addEventListener('click', e => { + e.preventDefault() + + isFullscreen = true + fitScreenIfNeeded() + screen.updateSize() + + if (screen.canvas.requestFullscreen) screen.canvas.requestFullscreen() + else screen.canvas.webkitRequestFullscreen() + }) + let icon = mk('i') + icon.classList.add('icn-resize-full') // TODO: less confusing icons + button.appendChild(icon) + let span = mk('span') + span.textContent = 'Fullscreen' + button.appendChild(span) + qs('#term-nav').insertBefore(button, qs('#term-nav').firstChild) + } + + // for debugging + window.termScreen = screen + window.conn = conn + window.input = input + window.termUpl = termUpload +} diff --git a/js/term_conn.js b/js/term_conn.js new file mode 100644 index 0000000..955fee1 --- /dev/null +++ b/js/term_conn.js @@ -0,0 +1,144 @@ +/** Handle connections */ +window.Conn = function (screen) { + let ws + let heartbeatTout + let pingIv + let xoff = false + let autoXoffTout + let reconTout + + let pageShown = false + + function onOpen (evt) { + console.log('CONNECTED') + heartbeat() + doSend('i') + } + + function onClose (evt) { + console.warn('SOCKET CLOSED, code ' + evt.code + '. Reconnecting...') + clearTimeout(reconTout) + reconTout = setTimeout(function () { + init() + }, 2000) + // this happens when the buffer gets fucked up via invalid unicode. + // we basically use polling instead of socket then + } + + function onMessage (evt) { + try { + // . = heartbeat + switch (evt.data.charAt(0)) { + case '.': + // heartbeat, no-op message + break + + case '-': + // console.log('xoff'); + xoff = true + autoXoffTout = setTimeout(function () { + xoff = false + }, 250) + break + + case '+': + // console.log('xon'); + xoff = false + clearTimeout(autoXoffTout) + break + + default: + screen.load(evt.data) + if (!pageShown) { + showPage() + pageShown = true + } + break + } + heartbeat() + } catch (e) { + console.error(e) + } + } + + function canSend () { + return !xoff + } + + function doSend (message) { + if (_demo) { + if (typeof demoInterface !== 'undefined') { + demoInterface.input(message) + } else { + console.log(`TX: ${JSON.stringify(message)}`) + } + return true // Simulate success + } + if (xoff) { + // TODO queue + console.log("Can't send, flood control.") + return false + } + + if (!ws) return false // for dry testing + if (ws.readyState !== 1) { + console.error('Socket not ready') + return false + } + if (typeof message != 'string') { + message = JSON.stringify(message) + } + ws.send(message) + return true + } + + function init () { + if (window._demo) { + if (typeof demoInterface === 'undefined') { + alert('Demoing non-demo demo!') // this will catch mistakes when deploying to the website + } else { + demoInterface.init(screen) + showPage() + } + return + } + + clearTimeout(reconTout) + clearTimeout(heartbeatTout) + + ws = new WebSocket('ws://' + _root + '/term/update.ws') + ws.onopen = onOpen + ws.onclose = onClose + ws.onmessage = onMessage + console.log('Opening socket.') + heartbeat() + } + + function heartbeat () { + clearTimeout(heartbeatTout) + heartbeatTout = setTimeout(heartbeatFail, 2000) + } + + function heartbeatFail () { + console.error('Heartbeat lost, probing server...') + pingIv = setInterval(function () { + console.log('> ping') + $.get('http://' + _root + '/system/ping', function (resp, status) { + if (status === 200) { + clearInterval(pingIv) + console.info('Server ready, reloading page...') + location.reload() + } + }, { + timeout: 100 + }) + }, 1000) + } + + return { + ws: null, + init: init, + send: doSend, + canSend: canSend // check flood control + } +} diff --git a/js/term_input.js b/js/term_input.js new file mode 100644 index 0000000..e42ee35 --- /dev/null +++ b/js/term_input.js @@ -0,0 +1,303 @@ +/** + * User input + * + * --- Rx messages: --- + * S - screen content (binary encoding of the entire screen with simple compression) + * T - text labels - Title and buttons, \0x01-separated + * B - beep + * . - heartbeat + * + * --- Tx messages --- + * s - string + * b - action button + * p - mb press + * r - mb release + * m - mouse move + */ +window.Input = function (conn) { + let cfg = { + np_alt: false, + cu_alt: false, + fn_alt: false, + mt_click: false, + mt_move: false, + no_keys: false, + crlf_mode: false + } + + /** Send a literal message */ + function sendStrMsg (str) { + return conn.send('s' + str) + } + + /** Send a button event */ + function sendBtnMsg (n) { + conn.send('b' + Chr(n)) + } + + /** Fn alt choice for key message */ + function fa (alt, normal) { + return cfg.fn_alt ? alt : normal + } + + /** Cursor alt choice for key message */ + function ca (alt, normal) { + return cfg.cu_alt ? alt : normal + } + + /** Numpad alt choice for key message */ + function na (alt, normal) { + return cfg.np_alt ? alt : normal + } + + function _bindFnKeys (allFn) { + const keymap = { + 'tab': '\x09', + 'backspace': '\x08', + 'enter': cfg.crlf_mode ? '\x0d\x0a' : '\x0d', + 'ctrl+enter': '\x0a', + 'esc': '\x1b', + 'up': ca('\x1bOA', '\x1b[A'), + 'down': ca('\x1bOB', '\x1b[B'), + 'right': ca('\x1bOC', '\x1b[C'), + 'left': ca('\x1bOD', '\x1b[D'), + 'home': ca('\x1bOH', fa('\x1b[H', '\x1b[1~')), + 'insert': '\x1b[2~', + 'delete': '\x1b[3~', + 'end': ca('\x1bOF', fa('\x1b[F', '\x1b[4~')), + 'pageup': '\x1b[5~', + 'pagedown': '\x1b[6~', + 'f1': fa('\x1bOP', '\x1b[11~'), + 'f2': fa('\x1bOQ', '\x1b[12~'), + 'f3': fa('\x1bOR', '\x1b[13~'), + 'f4': fa('\x1bOS', '\x1b[14~'), + 'f5': '\x1b[15~', // note the disconnect + 'f6': '\x1b[17~', + 'f7': '\x1b[18~', + 'f8': '\x1b[19~', + 'f9': '\x1b[20~', + 'f10': '\x1b[21~', // note the disconnect + 'f11': '\x1b[23~', + 'f12': '\x1b[24~', + 'shift+f1': fa('\x1bO1;2P', '\x1b[25~'), + 'shift+f2': fa('\x1bO1;2Q', '\x1b[26~'), // note the disconnect + 'shift+f3': fa('\x1bO1;2R', '\x1b[28~'), + 'shift+f4': fa('\x1bO1;2S', '\x1b[29~'), // note the disconnect + 'shift+f5': fa('\x1b[15;2~', '\x1b[31~'), + 'shift+f6': fa('\x1b[17;2~', '\x1b[32~'), + 'shift+f7': fa('\x1b[18;2~', '\x1b[33~'), + 'shift+f8': fa('\x1b[19;2~', '\x1b[34~'), + 'shift+f9': fa('\x1b[20;2~', '\x1b[35~'), // 35-38 are not standard - but what is? + 'shift+f10': fa('\x1b[21;2~', '\x1b[36~'), + 'shift+f11': fa('\x1b[22;2~', '\x1b[37~'), + 'shift+f12': fa('\x1b[23;2~', '\x1b[38~'), + 'np_0': na('\x1bOp', '0'), + 'np_1': na('\x1bOq', '1'), + 'np_2': na('\x1bOr', '2'), + 'np_3': na('\x1bOs', '3'), + 'np_4': na('\x1bOt', '4'), + 'np_5': na('\x1bOu', '5'), + 'np_6': na('\x1bOv', '6'), + 'np_7': na('\x1bOw', '7'), + 'np_8': na('\x1bOx', '8'), + 'np_9': na('\x1bOy', '9'), + 'np_mul': na('\x1bOR', '*'), + 'np_add': na('\x1bOl', '+'), + 'np_sub': na('\x1bOS', '-'), + 'np_point': na('\x1bOn', '.'), + 'np_div': na('\x1bOQ', '/') + // we don't implement numlock key (should change in numpad_alt mode, but it's even more useless than the rest) + } + + const blacklist = [ + 'f5', 'f11', 'f12', 'shift+f5' + ] + + for (let k in keymap) { + if (!allFn && blacklist.includes(k)) continue + if (keymap.hasOwnProperty(k)) { + bind(k, keymap[k]) + } + } + } + + /** Bind a keystroke to message */ + function bind (combo, str) { + // mac fix - allow also cmd + if (combo.indexOf('ctrl+') !== -1) { + combo += ',' + combo.replace('ctrl', 'command') + } + + // unbind possible old binding + key.unbind(combo) + + key(combo, function (e) { + if (cfg.no_keys) return + e.preventDefault() + sendStrMsg(str) + }) + } + + /** Bind/rebind key messages */ + function _initKeys (opts) { + let { allFn } = opts + + // This takes care of text characters typed + window.addEventListener('keypress', function (evt) { + if (cfg.no_keys) return + let str = '' + if (evt.key) str = evt.key + else if (evt.which) str = String.fromCodePoint(evt.which) + if (str.length > 0 && str.charCodeAt(0) >= 32) { + // console.log("Typed ", str); + // prevent space from scrolling + if (evt.which === 32) evt.preventDefault() + sendStrMsg(str) + } + }) + + // ctrl-letter codes are sent as simple low ASCII codes + for (let i = 1; i <= 26; i++) { + bind('ctrl+' + String.fromCharCode(96 + i), String.fromCharCode(i)) + } + /* eslint-disable */ + bind('ctrl+]', '\x1b') // alternate way to enter ESC + bind('ctrl+\\', '\x1c') + bind('ctrl+[', '\x1d') + bind('ctrl+^', '\x1e') + bind('ctrl+_', '\x1f') + + // extra ctrl- + bind('ctrl+left', '\x1f[1;5D') + bind('ctrl+right', '\x1f[1;5C') + bind('ctrl+up', '\x1f[1;5A') + bind('ctrl+down', '\x1f[1;5B') + bind('ctrl+home', '\x1f[1;5H') + bind('ctrl+end', '\x1f[1;5F') + + // extra shift- + bind('shift+left', '\x1f[1;2D') + bind('shift+right', '\x1f[1;2C') + bind('shift+up', '\x1f[1;2A') + bind('shift+down', '\x1f[1;2B') + bind('shift+home', '\x1f[1;2H') + bind('shift+end', '\x1f[1;2F') + + // macOS editing commands + bind('⌥+left', '\x1bb') // ⌥← to go back a word (^[b) + bind('⌥+right', '\x1bf') // ⌥→ to go forward one word (^[f) + bind('⌘+left', '\x01') // ⌘← to go to the beginning of a line (^A) + bind('⌘+right', '\x05') // ⌘→ to go to the end of a line (^E) + bind('⌥+backspace', '\x17') // ⌥⌫ to delete a word (^W, I think) + bind('⌘+backspace', '\x15') // ⌘⌫ to delete to the beginning of a line (possibly ^U) + /* eslint-enable */ + + _bindFnKeys(allFn) + } + + // mouse button states + let mb1 = 0 + let mb2 = 0 + let mb3 = 0 + + /** Init the Input module */ + function init (opts) { + _initKeys(opts) + + // Button presses + $('#action-buttons button').forEach(function (s) { + s.addEventListener('click', function () { + sendBtnMsg(+this.dataset['n']) + }) + }) + + // global mouse state tracking - for motion reporting + window.addEventListener('mousedown', function (evt) { + if (evt.button === 0) mb1 = 1 + if (evt.button === 1) mb2 = 1 + if (evt.button === 2) mb3 = 1 + }) + + window.addEventListener('mouseup', function (evt) { + if (evt.button === 0) mb1 = 0 + if (evt.button === 1) mb2 = 0 + if (evt.button === 2) mb3 = 0 + }) + } + + /** Prepare modifiers byte for mouse message */ + function packModifiersForMouse () { + return (key.isModifier('ctrl') ? 1 : 0) | + (key.isModifier('shift') ? 2 : 0) | + (key.isModifier('alt') ? 4 : 0) | + (key.isModifier('meta') ? 8 : 0) + } + + return { + /** Init the Input module */ + init: init, + + /** Send a literal string message */ + sendString: sendStrMsg, + + /** Enable alternate key modes (cursors, numpad, fn) */ + setAlts: function (cu, np, fn, crlf) { + if (cfg.cu_alt !== cu || cfg.np_alt !== np || cfg.fn_alt !== fn || cfg.crlf_mode !== crlf) { + cfg.cu_alt = cu + cfg.np_alt = np + cfg.fn_alt = fn + cfg.crlf_mode = crlf + + // rebind keys - codes have changed + _bindFnKeys() + } + }, + + setMouseMode: function (click, move) { + cfg.mt_click = click + cfg.mt_move = move + }, + + // Mouse events + onMouseMove: function (x, y) { + if (!cfg.mt_move) return + const b = mb1 ? 1 : mb2 ? 2 : mb3 ? 3 : 0 + const m = packModifiersForMouse() + conn.send('m' + encode2B(y) + encode2B(x) + encode2B(b) + encode2B(m)) + }, + + onMouseDown: function (x, y, b) { + if (!cfg.mt_click) return + if (b > 3 || b < 1) return + const m = packModifiersForMouse() + conn.send('p' + encode2B(y) + encode2B(x) + encode2B(b) + encode2B(m)) + // console.log("B ",b," M ",m); + }, + + onMouseUp: function (x, y, b) { + if (!cfg.mt_click) return + if (b > 3 || b < 1) return + const m = packModifiersForMouse() + conn.send('r' + encode2B(y) + encode2B(x) + encode2B(b) + encode2B(m)) + // console.log("B ",b," M ",m); + }, + + onMouseWheel: function (x, y, dir) { + if (!cfg.mt_click) return + // -1 ... btn 4 (away from user) + // +1 ... btn 5 (towards user) + const m = packModifiersForMouse() + const b = (dir < 0 ? 4 : 5) + conn.send('p' + encode2B(y) + encode2B(x) + encode2B(b) + encode2B(m)) + // console.log("B ",b," M ",m); + }, + + mouseTracksClicks: function () { + return cfg.mt_click + }, + + blockKeys: function (yes) { + cfg.no_keys = yes + } + } +} diff --git a/js/term_screen.js b/js/term_screen.js new file mode 100644 index 0000000..9573df4 --- /dev/null +++ b/js/term_screen.js @@ -0,0 +1,1369 @@ +// Some non-bold Fraktur symbols are outside the contiguous block +const frakturExceptions = { + 'C': '\u212d', + 'H': '\u210c', + 'I': '\u2111', + 'R': '\u211c', + 'Z': '\u2128' +} + +// constants for decoding the update blob +const SEQ_REPEAT = 2 +const SEQ_SET_COLORS = 3 +const SEQ_SET_ATTRS = 4 +const SEQ_SET_FG = 5 +const SEQ_SET_BG = 6 + +const SELECTION_BG = '#b2d7fe' +const SELECTION_FG = '#333' + +const themes = [ + [ // Tango + '#111213', '#CC0000', '#4E9A06', '#C4A000', '#3465A4', '#75507B', '#06989A', '#D3D7CF', + '#555753', '#EF2929', '#8AE234', '#FCE94F', '#729FCF', '#AD7FA8', '#34E2E2', '#EEEEEC' + ], + [ // Linux + '#000000', '#aa0000', '#00aa00', '#aa5500', '#0000aa', '#aa00aa', '#00aaaa', '#aaaaaa', + '#555555', '#ff5555', '#55ff55', '#ffff55', '#5555ff', '#ff55ff', '#55ffff', '#ffffff' + ], + [ // xterm + '#000000', '#cd0000', '#00cd00', '#cdcd00', '#0000ee', '#cd00cd', '#00cdcd', '#e5e5e5', + '#7f7f7f', '#ff0000', '#00ff00', '#ffff00', '#5c5cff', '#ff00ff', '#00ffff', '#ffffff' + ], + [ // rxvt + '#000000', '#cd0000', '#00cd00', '#cdcd00', '#0000cd', '#cd00cd', '#00cdcd', '#faebd7', + '#404040', '#ff0000', '#00ff00', '#ffff00', '#0000ff', '#ff00ff', '#00ffff', '#ffffff' + ], + [ // 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' + ] +] + +// TODO move this to the initializer so it's not run on non-terminal pages + +// 256color lookup table +// should not be used to look up 0-15 (will return transparent) +const colorTable256 = new Array(16).fill('rgba(0, 0, 0, 0)') + +// fill color table +// colors 16-231 are a 6x6x6 color cube +for (let red = 0; red < 6; red++) { + for (let green = 0; green < 6; green++) { + for (let blue = 0; blue < 6; blue++) { + let redValue = red * 40 + (red ? 55 : 0) + let greenValue = green * 40 + (green ? 55 : 0) + let blueValue = blue * 40 + (blue ? 55 : 0) + colorTable256.push(`rgb(${redValue}, ${greenValue}, ${blueValue})`) + } + } +} +// colors 232-255 are a grayscale ramp, sans black and white +for (let gray = 0; gray < 24; gray++) { + let value = gray * 10 + 8 + colorTable256.push(`rgb(${value}, ${value}, ${value})`) +} + +window.TermScreen = class TermScreen { + constructor () { + this.canvas = mk('canvas') + this.ctx = this.canvas.getContext('2d') + + if ('AudioContext' in window || 'webkitAudioContext' in window) { + this.audioCtx = new (window.AudioContext || window.webkitAudioContext)() + } else { + console.warn('No AudioContext!') + } + + // dummy + this.input = new Proxy({}, { + get () { + return () => console.warn('TermScreen#input not set!') + } + }) + + this.cursor = { + x: 0, + y: 0, + blinkOn: false, + blinking: true, + visible: true, + hanging: false, + style: 'block', + blinkInterval: null + } + + this._palette = null + + this._window = { + width: 0, + height: 0, + devicePixelRatio: 1, + fontFamily: '"DejaVu Sans Mono", "Liberation Mono", "Inconsolata", "Menlo", monospace', + fontSize: 20, + gridScaleX: 1.0, + gridScaleY: 1.2, + blinkStyleOn: true, + blinkInterval: null, + fitIntoWidth: 0, + fitIntoHeight: 0, + debug: false, + graphics: 0 + } + + // scaling caused by fitIntoWidth/fitIntoHeight + this._windowScale = 1 + + // properties of this.window that require updating size and redrawing + this.windowState = { + width: 0, + height: 0, + devicePixelRatio: 0, + gridScaleX: 0, + gridScaleY: 0, + fontFamily: '', + fontSize: 0, + fitIntoWidth: 0, + fitIntoHeight: 0 + } + + // current selection + this.selection = { + // when false, this will prevent selection in favor of mouse events, + // though alt can be held to override it + selectable: true, + + // selection start and end (x, y) tuples + start: [0, 0], + end: [0, 0] + } + + // mouse features + this.mouseMode = { clicks: false, movement: false } + + // event listeners + this._listeners = {} + + // make writing to window update size and draw + const self = this + this.window = new Proxy(this._window, { + set (target, key, value, receiver) { + target[key] = value + self.scheduleSizeUpdate() + self.scheduleDraw(`window:${key}=${value}`) + return true + } + }) + + this.bracketedPaste = false + this.blinkingCellCount = 0 + + this.screen = [] + this.screenFG = [] + this.screenBG = [] + this.screenAttrs = [] + + // used to determine if a cell should be redrawn; storing the current state + // as it is on screen + this.drawnScreen = [] + this.drawnScreenFG = [] + this.drawnScreenBG = [] + this.drawnScreenAttrs = [] + this.drawnCursor = [-1, -1, ''] + + // start blink timers + this.resetBlink() + this.resetCursorBlink() + + let selecting = false + + let selectStart = (x, y) => { + if (selecting) return + selecting = true + this.selection.start = this.selection.end = this.screenToGrid(x, y) + this.scheduleDraw('select-start') + } + + let selectMove = (x, y) => { + if (!selecting) return + this.selection.end = this.screenToGrid(x, y) + this.scheduleDraw('select-move') + } + + let selectEnd = (x, y) => { + if (!selecting) return + selecting = false + this.selection.end = this.screenToGrid(x, y) + this.scheduleDraw('select-end') + Object.assign(this.selection, this.getNormalizedSelection()) + } + + // bind event listeners + + this.canvas.addEventListener('mousedown', e => { + if ((this.selection.selectable || e.altKey) && e.button === 0) { + selectStart(e.offsetX, e.offsetY) + } else { + this.input.onMouseDown(...this.screenToGrid(e.offsetX, e.offsetY), + e.button + 1) + } + }) + + window.addEventListener('mousemove', e => { + selectMove(e.offsetX, e.offsetY) + }) + + window.addEventListener('mouseup', e => { + selectEnd(e.offsetX, e.offsetY) + }) + + // touch event listeners + + let touchPosition = null + let touchDownTime = 0 + let touchSelectMinTime = 500 + let touchDidMove = false + + let getTouchPositionOffset = touch => { + let rect = this.canvas.getBoundingClientRect() + return [touch.clientX - rect.left, touch.clientY - rect.top] + } + + this.canvas.addEventListener('touchstart', e => { + touchPosition = getTouchPositionOffset(e.touches[0]) + touchDidMove = false + touchDownTime = Date.now() + }) + + this.canvas.addEventListener('touchmove', e => { + touchPosition = getTouchPositionOffset(e.touches[0]) + + if (!selecting && touchDidMove === false) { + if (touchDownTime < Date.now() - touchSelectMinTime) { + selectStart(...touchPosition) + } + } else if (selecting) { + e.preventDefault() + selectMove(...touchPosition) + } + + touchDidMove = true + }) + + this.canvas.addEventListener('touchend', e => { + if (e.touches[0]) { + touchPosition = getTouchPositionOffset(e.touches[0]) + } + + if (selecting) { + e.preventDefault() + selectEnd(...touchPosition) + + // selection ended; show touch select menu + let touchSelectMenu = qs('#touch-select-menu') + touchSelectMenu.classList.add('open') + let rect = touchSelectMenu.getBoundingClientRect() + + // use middle position for x and one line above for y + let selectionPos = this.gridToScreen( + (this.selection.start[0] + this.selection.end[0]) / 2, + this.selection.start[1] - 1 + ) + selectionPos[0] -= rect.width / 2 + selectionPos[1] -= rect.height / 2 + touchSelectMenu.style.transform = `translate(${selectionPos[0]}px, ${ + selectionPos[1]}px)` + } + + if (!touchDidMove) { + this.emit('tap', Object.assign(e, { + x: touchPosition[0], + y: touchPosition[1] + })) + } + + touchPosition = null + }) + + this.on('tap', e => { + if (this.selection.start[0] !== this.selection.end[0] || + this.selection.start[1] !== this.selection.end[1]) { + // selection is not empty + // reset selection + this.selection.start = this.selection.end = [0, 0] + qs('#touch-select-menu').classList.remove('open') + this.scheduleDraw('select-reset') + } else { + e.preventDefault() + this.emit('open-soft-keyboard') + } + }) + + $.ready(() => { + let copyButton = qs('#touch-select-copy-btn') + if (copyButton) { + copyButton.addEventListener('click', () => { + this.copySelectionToClipboard() + }) + } + }) + + this.canvas.addEventListener('mousemove', e => { + if (!selecting) { + this.input.onMouseMove(...this.screenToGrid(e.offsetX, e.offsetY)) + } + }) + + this.canvas.addEventListener('mouseup', e => { + if (!selecting) { + this.input.onMouseUp(...this.screenToGrid(e.offsetX, e.offsetY), + e.button + 1) + } + }) + + this.canvas.addEventListener('wheel', e => { + if (this.mouseMode.clicks) { + this.input.onMouseWheel(...this.screenToGrid(e.offsetX, e.offsetY), + e.deltaY > 0 ? 1 : -1) + + // prevent page scrolling + e.preventDefault() + } + }) + + this.canvas.addEventListener('contextmenu', e => { + if (this.mouseMode.clicks) { + // prevent mouse keys getting stuck + e.preventDefault() + } + selectEnd(e.offsetX, e.offsetY) + }) + + // bind ctrl+shift+c to copy + key('⌃+⇧+c', e => { + e.preventDefault() + this.copySelectionToClipboard() + }) + } + + /** + * Bind an event listener to an event + * @param {string} event - the event name + * @param {Function} listener - the event listener + */ + on (event, listener) { + if (!this._listeners[event]) this._listeners[event] = [] + this._listeners[event].push({ listener }) + } + + /** + * Bind an event listener to be run only once the next time the event fires + * @param {string} event - the event name + * @param {Function} listener - the event listener + */ + once (event, listener) { + if (!this._listeners[event]) this._listeners[event] = [] + this._listeners[event].push({ listener, once: true }) + } + + /** + * Remove an event listener + * @param {string} event - the event name + * @param {Function} listener - the event listener + */ + off (event, listener) { + let listeners = this._listeners[event] + if (listeners) { + for (let i in listeners) { + if (listeners[i].listener === listener) { + listeners.splice(i, 1) + break + } + } + } + } + + /** + * Emits an event + * @param {string} event - the event name + * @param {...any} args - arguments passed to all listeners + */ + emit (event, ...args) { + let listeners = this._listeners[event] + if (listeners) { + let remove = [] + for (let listener of listeners) { + try { + listener.listener(...args) + if (listener.once) remove.push(listener) + } catch (err) { + console.error(err) + } + } + + // this needs to be done in this roundabout way because for loops + // do not like arrays with changing lengths + for (let listener of remove) { + listeners.splice(listeners.indexOf(listener), 1) + } + } + } + + /** + * The color palette. Should define 16 colors in an array. + * @type {number[]} + */ + get palette () { + return this._palette || themes[0] + } + /** @type {number[]} */ + set palette (palette) { + if (this._palette !== palette) { + this._palette = palette + this.scheduleDraw('palette') + } + } + + /** + * Returns the specified color. If `i` is in the palette, it will return the + * palette color. If `i` is between 16 and 255, it will return the 256color + * value. If `i` is larger than 255, it will return an RGB color value. If `i` + * is -1 (foreground) or -2 (background), it will return the selection colors. + * @param {number} i - the color + * @returns {string} the CSS color + */ + getColor (i) { + // return palette color if it exists + if (this.palette[i]) return this.palette[i] + + // -1 for selection foreground, -2 for selection background + if (i === -1) return SELECTION_FG + if (i === -2) return SELECTION_BG + + // 256 color + if (i > 15 && i < 256) return colorTable256[i] + + // true color, encoded as (hex) + 256 (such that #000 == 256) + if (i > 255) { + i -= 256 + let red = (i >> 16) & 0xFF + let green = (i >> 8) & 0xFF + let blue = i & 0xFF + return `rgb(${red}, ${green}, ${blue})` + } + + // default to transparent + return 'rgba(0, 0, 0, 0)' + } + + /** + * Schedule a size update in the next millisecond + */ + scheduleSizeUpdate () { + clearTimeout(this._scheduledSizeUpdate) + this._scheduledSizeUpdate = setTimeout(() => this.updateSize(), 1) + } + + /** + * Schedule a draw in the next millisecond + * @param {string} why - the reason why the draw occured (for debugging) + * @param {number} [aggregateTime] - time to wait for more scheduleDraw calls + * to occur. 1 ms by default. + */ + scheduleDraw (why, aggregateTime = 1) { + clearTimeout(this._scheduledDraw) + this._scheduledDraw = setTimeout(() => this.draw(why), aggregateTime) + } + + /** + * Returns a CSS font string with this TermScreen's font settings and the + * font modifiers. + * @param {Object} modifiers + * @param {string} [modifiers.style] - the font style + * @param {string} [modifiers.weight] - the font weight + * @returns {string} a CSS font string + */ + getFont (modifiers = {}) { + let fontStyle = modifiers.style || 'normal' + let fontWeight = modifiers.weight || 'normal' + return `${fontStyle} normal ${fontWeight} ${this.window.fontSize}px ${this.window.fontFamily}` + } + + /** + * The character size, used for calculating the cell size. The space character + * is used for measuring. + * @returns {Object} the character size with `width` and `height` in pixels + */ + getCharSize () { + this.ctx.font = this.getFont() + + return { + width: Math.floor(this.ctx.measureText(' ').width), + height: this.window.fontSize + } + } + + /** + * The cell size, which is the character size multiplied by the grid scale. + * @returns {Object} the cell size with `width` and `height` in pixels + */ + getCellSize () { + let charSize = this.getCharSize() + + return { + width: Math.ceil(charSize.width * this.window.gridScaleX), + height: Math.ceil(charSize.height * this.window.gridScaleY) + } + } + + /** + * Updates the canvas size if it changed + */ + updateSize () { + this._window.devicePixelRatio = this._windowScale * (window.devicePixelRatio || 1) + + let didChange = false + for (let key in this.windowState) { + if (this.windowState.hasOwnProperty(key) && this.windowState[key] !== this.window[key]) { + didChange = true + this.windowState[key] = this.window[key] + } + } + + if (didChange) { + const { + width, + height, + gridScaleX, + gridScaleY, + fitIntoWidth, + fitIntoHeight + } = this.window + const cellSize = this.getCellSize() + + // real height of the canvas element in pixels + let realWidth = width * cellSize.width + let realHeight = height * cellSize.height + + if (fitIntoWidth && fitIntoHeight) { + let terminalAspect = realWidth / realHeight + let fitAspect = fitIntoWidth / fitIntoHeight + + if (terminalAspect < fitAspect) { + // align heights + realHeight = fitIntoHeight + realWidth = realHeight * terminalAspect + } else { + // align widths + realWidth = fitIntoWidth + realHeight = realWidth / terminalAspect + } + } else if (fitIntoWidth) { + realHeight = fitIntoWidth / (realWidth / realHeight) + realWidth = fitIntoWidth + } else if (fitIntoHeight) { + realWidth = fitIntoHeight * (realWidth / realHeight) + realHeight = fitIntoHeight + } + + // store new window scale + this._windowScale = realWidth / (width * cellSize.width) + + let devicePixelRatio = this._window.devicePixelRatio = this._windowScale * window.devicePixelRatio + + this.canvas.width = width * devicePixelRatio * cellSize.width + this.canvas.style.width = `${realWidth}px` + this.canvas.height = height * devicePixelRatio * cellSize.height + this.canvas.style.height = `${realHeight}px` + + // the screen has been cleared (by changing canvas width) + this.drawnScreen = [] + this.drawnScreenFG = [] + this.drawnScreenBG = [] + this.drawnScreenAttrs = [] + + // draw immediately; the canvas shouldn't flash + this.draw('init') + } + } + + /** + * Resets the cursor blink to on and restarts the timer + */ + resetCursorBlink () { + this.cursor.blinkOn = true + clearInterval(this.cursor.blinkInterval) + this.cursor.blinkInterval = setInterval(() => { + this.cursor.blinkOn = this.cursor.blinking + ? !this.cursor.blinkOn + : true + if (this.cursor.blinking) this.scheduleDraw('cursor-blink') + }, 500) + } + + /** + * Resets the blink style to on and restarts the timer + */ + resetBlink () { + this.window.blinkStyleOn = true + clearInterval(this.window.blinkInterval) + let intervals = 0 + this.window.blinkInterval = setInterval(() => { + if (this.blinkingCellCount <= 0) return + + intervals++ + if (intervals >= 4 && this.window.blinkStyleOn) { + this.window.blinkStyleOn = false + intervals = 0 + } else if (intervals >= 1 && !this.window.blinkStyleOn) { + this.window.blinkStyleOn = true + intervals = 0 + } + }, 200) + } + + /** + * Returns a normalized version of the current selection, such that `start` + * is always before `end`. + * @returns {Object} the normalized selection, with `start` and `end` + */ + getNormalizedSelection () { + let { start, end } = this.selection + // if the start line is after the end line, or if they're both on the same + // line but the start column comes after the end column, swap + if (start[1] > end[1] || (start[1] === end[1] && start[0] > end[0])) { + [start, end] = [end, start] + } + return { start, end } + } + + /** + * Returns whether or not a given cell is in the current selection. + * @param {number} col - the column (x) + * @param {number} line - the line (y) + * @returns {boolean} + */ + isInSelection (col, line) { + 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] + } + + /** + * Sweeps for selected cells and joins them in a multiline string. + * @returns {string} the selection + */ + getSelectedText () { + const screenLength = this.window.width * this.window.height + let lines = [] + let previousLineIndex = -1 + + for (let cell = 0; cell < screenLength; cell++) { + let x = cell % this.window.width + let y = Math.floor(cell / this.window.width) + + if (this.isInSelection(x, y)) { + if (previousLineIndex !== y) { + previousLineIndex = y + lines.push('') + } + lines[lines.length - 1] += this.screen[cell] + } + } + + return lines.join('\n') + } + + /** + * Copies the selection to clipboard and creates a notification balloon. + */ + copySelectionToClipboard () { + let selectedText = this.getSelectedText() + // don't copy anything if nothing is selected + if (!selectedText) return + let textarea = mk('textarea') + document.body.appendChild(textarea) + textarea.value = selectedText + textarea.select() + if (document.execCommand('copy')) { + Notify.show('Copied to clipboard') + } else { + Notify.show('Failed to copy') + } + document.body.removeChild(textarea) + } + + /** + * Converts screen coordinates to grid coordinates. + * @param {number} x - x in pixels + * @param {number} y - y in pixels + * @returns {number[]} a tuple of (x, y) in cells + */ + screenToGrid (x, y) { + let cellSize = this.getCellSize() + + return [ + Math.floor((x + cellSize.width / 2) / cellSize.width), + Math.floor(y / cellSize.height) + ] + } + + /** + * Converts grid coordinates to screen coordinates. + * @param {number} x - x in cells + * @param {number} y - y in cells + * @param {boolean} [withScale] - when true, will apply window scale + * @returns {number[]} a tuple of (x, y) in pixels + */ + gridToScreen (x, y, withScale = false) { + let cellSize = this.getCellSize() + + return [x * cellSize.width, y * cellSize.height].map(v => withScale ? v * this._windowScale : v) + } + + /** + * Draws a cell's background with the given parameters. + * @param {Object} options + * @param {number} options.x - x in cells + * @param {number} options.y - y in cells + * @param {number} options.cellWidth - cell width in pixels + * @param {number} options.cellHeight - cell height in pixels + * @param {number} options.bg - the background color + */ + drawCellBackground ({ x, y, cellWidth, cellHeight, bg }) { + const ctx = this.ctx + ctx.fillStyle = this.getColor(bg) + ctx.clearRect(x * cellWidth, y * cellHeight, Math.ceil(cellWidth), Math.ceil(cellHeight)) + ctx.fillRect(x * cellWidth, y * cellHeight, Math.ceil(cellWidth), Math.ceil(cellHeight)) + } + + /** + * Draws a cell's character with the given parameters. Won't do anything if + * text is an empty string. + * @param {Object} options + * @param {number} options.x - x in cells + * @param {number} options.y - y in cells + * @param {Object} options.charSize - the character size, an object with + * `width` and `height` in pixels + * @param {number} options.cellWidth - cell width in pixels + * @param {number} options.cellHeight - cell height in pixels + * @param {string} options.text - the cell content + * @param {number} options.fg - the foreground color + * @param {number} options.attrs - the cell's attributes + */ + drawCell ({ x, y, charSize, cellWidth, cellHeight, text, fg, attrs }) { + if (!text) return + + const ctx = this.ctx + + let underline = false + let strike = false + let overline = false + if (attrs & (1 << 1)) ctx.globalAlpha = 0.5 + if (attrs & (1 << 3)) underline = true + if (attrs & (1 << 5)) text = TermScreen.alphaToFraktur(text) + if (attrs & (1 << 6)) strike = true + if (attrs & (1 << 7)) overline = true + + ctx.fillStyle = this.getColor(fg) + ctx.fillText(text, (x + 0.5) * cellWidth, (y + 0.5) * cellHeight) + + if (underline || strike || overline) { + ctx.strokeStyle = this.getColor(fg) + ctx.lineWidth = 1 + ctx.lineCap = 'round' + ctx.beginPath() + + if (underline) { + let lineY = Math.round(y * cellHeight + charSize.height) + 0.5 + ctx.moveTo(x * cellWidth, lineY) + ctx.lineTo((x + 1) * cellWidth, lineY) + } + + if (strike) { + let lineY = Math.round((y + 0.5) * cellHeight) + 0.5 + ctx.moveTo(x * cellWidth, lineY) + ctx.lineTo((x + 1) * cellWidth, lineY) + } + + if (overline) { + let lineY = Math.round(y * cellHeight) + 0.5 + ctx.moveTo(x * cellWidth, lineY) + ctx.lineTo((x + 1) * cellWidth, lineY) + } + + ctx.stroke() + } + + ctx.globalAlpha = 1 + } + + /** + * Returns all adjacent cell indices given a radius. + * @param {number} cell - the center cell index + * @param {number} [radius] - the radius. 1 by default + * @returns {number[]} an array of cell indices + */ + getAdjacentCells (cell, radius = 1) { + const { width, height } = this.window + const screenLength = width * height + + let cells = [] + + for (let x = -radius; x <= radius; x++) { + for (let y = -radius; y <= radius; y++) { + if (x === 0 && y === 0) continue + cells.push(cell + x + y * width) + } + } + + return cells.filter(cell => cell >= 0 && cell < screenLength) + } + + /** + * Updates the screen. + * @param {string} why - the draw reason (for debugging) + */ + draw (why) { + const ctx = this.ctx + const { + width, + height, + devicePixelRatio, + gridScaleX, + gridScaleY + } = this.window + + const charSize = this.getCharSize() + const { width: cellWidth, height: cellHeight } = this.getCellSize() + const screenWidth = width * cellWidth + const screenHeight = height * cellHeight + const screenLength = width * height + + ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0) + + if (this.window.debug && this._debug) this._debug.drawStart(why) + + ctx.font = this.getFont() + ctx.textAlign = 'center' + ctx.textBaseline = 'middle' + + // bits in the attr value that affect the font + const FONT_MASK = 0b101 + + // Map of (attrs & FONT_MASK) -> Array of cell indices + let fontGroups = new Map() + + // Map of (cell index) -> boolean, whether or not a cell has updated + let updateMap = new Map() + + for (let cell = 0; cell < screenLength; cell++) { + let x = cell % width + let y = Math.floor(cell / width) + let isCursor = !this.cursor.hanging && + this.cursor.x === x && + this.cursor.y === y && + this.cursor.blinkOn && + this.cursor.visible + + let wasCursor = x === this.drawnCursor[0] && y === this.drawnCursor[1] + + let inSelection = this.isInSelection(x, y) + + let text = this.screen[cell] + let fg = this.screenFG[cell] + let bg = this.screenBG[cell] + let attrs = this.screenAttrs[cell] + + if (attrs & (1 << 4) && !this.window.blinkStyleOn) { + // blinking is enabled and blink style is off + // set text to nothing so drawCell doesn't draw anything + text = '' + } + + if (inSelection) { + fg = -1 + bg = -2 + } + + let didUpdate = text !== this.drawnScreen[cell] || + fg !== this.drawnScreenFG[cell] || + bg !== this.drawnScreenBG[cell] || + attrs !== this.drawnScreenAttrs[cell] || + isCursor !== wasCursor || + (isCursor && this.cursor.style !== this.drawnCursor[2]) + + let font = attrs & FONT_MASK + if (!fontGroups.has(font)) fontGroups.set(font, []) + + fontGroups.get(font).push([cell, x, y, text, fg, bg, attrs, isCursor, inSelection]) + updateMap.set(cell, didUpdate) + } + + // Map of (cell index) -> boolean, whether or not a cell should be redrawn + const redrawMap = new Map() + + let isTextWide = text => + text !== ' ' && ctx.measureText(text).width >= (cellWidth + 0.05) + + // decide for each cell if it should be redrawn + let updateRedrawMapAt = cell => { + let shouldUpdate = updateMap.get(cell) || redrawMap.get(cell) + + // TODO: fonts (necessary?) + let text = this.screen[cell] + let isWideCell = isTextWide(text) + let checkRadius = isWideCell ? 2 : 1 + + if (!shouldUpdate) { + // check adjacent cells + let adjacentDidUpdate = false + + for (let adjacentCell of this.getAdjacentCells(cell, checkRadius)) { + if (updateMap.get(adjacentCell)) { + adjacentDidUpdate = true + break + } + } + + if (adjacentDidUpdate) shouldUpdate = true + } + + redrawMap.set(cell, shouldUpdate) + } + + for (let cell of updateMap.keys()) updateRedrawMapAt(cell) + + // mask to redrawing regions only + if (this.window.graphics >= 1) { + ctx.save() + ctx.beginPath() + for (let y = 0; y < height; y++) { + let regionStart = null + for (let x = 0; x < width; x++) { + let cell = y * width + x + let redrawing = redrawMap.get(cell) + if (redrawing && regionStart === null) regionStart = x + if (!redrawing && regionStart !== null) { + ctx.rect(regionStart * cellWidth, y * cellHeight, (x - regionStart) * cellWidth, cellHeight) + regionStart = null + } + } + if (regionStart !== null) { + ctx.rect(regionStart * cellWidth, y * cellHeight, (width - regionStart) * cellWidth, cellHeight) + } + } + ctx.clip() + } + + // pass 1: backgrounds + for (let font of fontGroups.keys()) { + for (let data of fontGroups.get(font)) { + let [cell, x, y, text, fg, bg, attrs, isCursor] = data + + if (redrawMap.get(cell)) { + this.drawCellBackground({ x, y, cellWidth, cellHeight, bg }) + } + } + } + + // pass 2: characters + for (let font of fontGroups.keys()) { + // set font once because in Firefox, this is a really slow action for some + // reason + let modifiers = {} + if (font & 1) modifiers.weight = 'bold' + if (font & 1 << 2) modifiers.style = 'italic' + ctx.font = this.getFont(modifiers) + + for (let data of fontGroups.get(font)) { + let [cell, x, y, text, fg, bg, attrs, isCursor, inSelection] = data + + if (redrawMap.get(cell)) { + this.drawCell({ + x, y, charSize, cellWidth, cellHeight, text, fg, attrs + }) + + this.drawnScreen[cell] = text + this.drawnScreenFG[cell] = fg + this.drawnScreenBG[cell] = bg + this.drawnScreenAttrs[cell] = attrs + + if (isCursor) this.drawnCursor = [x, y, this.cursor.style] + + if (this.window.debug && this._debug) { + // set cell flags + let flags = 1 // always redrawn + flags |= (+updateMap.get(cell)) << 1 + flags |= (+isTextWide(text)) << 2 + this._debug.setCell(cell, flags) + } + } + + if (isCursor && !inSelection) { + ctx.save() + ctx.beginPath() + if (this.cursor.style === 'block') { + // block + ctx.rect(x * cellWidth, y * cellHeight, cellWidth, cellHeight) + } else 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() + + // swap foreground/background + ;[fg, bg] = [bg, fg] + + // HACK: ensure cursor is visible + if (fg === bg) bg = fg === 0 ? 7 : 0 + + this.drawCellBackground({ x, y, cellWidth, cellHeight, bg }) + this.drawCell({ + x, y, charSize, cellWidth, cellHeight, text, fg, attrs + }) + ctx.restore() + } + } + } + + if (this.window.graphics >= 1) ctx.restore() + + if (this.window.debug && this._debug) this._debug.drawEnd() + } + + /** + * Parses the content of an `S` message and schedules a draw + * @param {string} str - the message content + */ + loadContent (str) { + // current index + let i = 0 + // Uncomment to capture screen content for the demo page + // console.log(JSON.stringify(`S${str}`)) + + // window size + const newHeight = parse2B(str, i) + const newWidth = parse2B(str, i + 2) + const resized = (this.window.height !== newHeight) || (this.window.width !== newWidth) + this.window.height = newHeight + this.window.width = newWidth + 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() + this.emit('cursor-moved') + } + + // attributes + let attributes = parse3B(str, i) + i += 3 + + this.cursor.visible = !!(attributes & 1) + this.cursor.hanging = !!(attributes & (1 << 1)) + + this.input.setAlts( + !!(attributes & (1 << 2)), // cursors alt + !!(attributes & (1 << 3)), // numpad alt + !!(attributes & (1 << 4)), // fn keys alt + !!(attributes & (1 << 12)) // crlf mode + ) + + let trackMouseClicks = !!(attributes & (1 << 5)) + let trackMouseMovement = !!(attributes & (1 << 6)) + + // 0 - Block blink 2 - Block steady (1 is unused) + // 3 - Underline blink 4 - Underline steady + // 5 - I-bar blink 6 - I-bar steady + let cursorShape = (attributes >> 9) & 0x07 + + // if it's not zero, decrement such that the two most significant bits + // are the type and the least significant bit is the blink state + if (cursorShape > 0) cursorShape-- + + let cursorStyle = cursorShape >> 1 + let cursorBlinking = !(cursorShape & 1) + + if (cursorStyle === 0) this.cursor.style = 'block' + else if (cursorStyle === 1) this.cursor.style = 'line' + else if (cursorStyle === 2) this.cursor.style = 'bar' + + if (this.cursor.blinking !== cursorBlinking) { + this.cursor.blinking = cursorBlinking + this.resetCursorBlink() + } + + this.input.setMouseMode(trackMouseClicks, trackMouseMovement) + this.selection.selectable = !trackMouseMovement + $(this.canvas).toggleClass('selectable', !trackMouseMovement) + this.mouseMode = { + clicks: trackMouseClicks, + movement: trackMouseMovement + } + + let showButtons = !!(attributes & (1 << 7)) + let showConfigLinks = !!(attributes & (1 << 8)) + + $('.x-term-conf-btn').toggleClass('hidden', !showConfigLinks) + $('#action-buttons').toggleClass('hidden', !showButtons) + + this.bracketedPaste = !!(attributes & (1 << 13)) + + // content + let fg = 7 + let bg = 0 + let attrs = 0 + let cell = 0 // cell index + let lastChar = ' ' + let screenLength = this.window.width * this.window.height + + if (resized) { + this.updateSize() + this.blinkingCellCount = 0 + this.screen = new Array(screenLength).fill(' ') + this.screenFG = new Array(screenLength).fill(' ') + this.screenBG = new Array(screenLength).fill(' ') + this.screenAttrs = new Array(screenLength).fill(' ') + } + + let bgcount = new Array(256).fill(0) + + let strArray = !undef(Array.from) ? Array.from(str) : str.split('') + + const MASK_LINE_ATTR = 0xC8 + const MASK_BLINK = 1 << 4 + + let setCellContent = () => { + // Remove blink attribute if it wouldn't have any effect + let myAttrs = attrs + if ((myAttrs & MASK_BLINK) !== 0 && + ((lastChar === ' ' && ((myAttrs & MASK_LINE_ATTR) === 0)) || // no line styles + fg === bg // invisible text + ) + ) { + myAttrs ^= MASK_BLINK + } + // update blinking cells counter if blink state changed + if ((this.screenAttrs[cell] & MASK_BLINK) !== (myAttrs & MASK_BLINK)) { + if (myAttrs & MASK_BLINK) this.blinkingCellCount++ + else this.blinkingCellCount-- + } + + bgcount[bg]++ + this.screen[cell] = lastChar + this.screenFG[cell] = fg + this.screenBG[cell] = bg + this.screenAttrs[cell] = myAttrs + } + + while (i < strArray.length && cell < screenLength) { + let character = strArray[i++] + let charCode = character.codePointAt(0) + + let data + switch (charCode) { + case SEQ_REPEAT: + let count = parse2B(strArray[i] + strArray[i + 1]) + i += 2 + for (let j = 0; j < count; j++) { + setCellContent(cell) + if (++cell > screenLength) break + } + break + + case SEQ_SET_COLORS: + data = parse3B(strArray[i] + strArray[i + 1] + strArray[i + 2]) + i += 3 + fg = data & 0xFF + bg = (data >> 8) & 0xFF + break + + case SEQ_SET_ATTRS: + data = parse2B(strArray[i] + strArray[i + 1]) + i += 2 + attrs = data & 0xFF + break + + case SEQ_SET_FG: + data = parse2B(strArray[i] + strArray[i + 1]) + i += 2 + fg = data & 0xFF + break + + case SEQ_SET_BG: + data = parse2B(strArray[i] + strArray[i + 1]) + i += 2 + bg = data & 0xFF + break + + default: + if (charCode < 32) character = '\ufffd' + lastChar = character + setCellContent(cell) + cell++ + } + } + + if (this.window.debug) console.log(`Blinky cells = ${this.blinkingCellCount}`) + + // work-around for the grid gaps bug + // will mask the glitch if most of the screen uses the same background + let mostCommonBg = 0 + let mcbIndex = 0 + for (let i = 255; i >= 0; i--) { + if (bgcount[i] > mostCommonBg) { + mostCommonBg = bgcount[i] + mcbIndex = i + } + } + this.canvas.style.backgroundColor = this.getColor(mcbIndex) + + this.scheduleDraw('load', 16) + this.emit('load') + } + + /** + * Parses the content of a `T` message and updates the screen title and button + * labels. + * @param {string} str - the message content + */ + loadLabels (str) { + let pieces = str.split('\x01') + qs('#screen-title').textContent = pieces[0] + $('#action-buttons button').forEach((button, i) => { + let label = pieces[i + 1].trim() + // if empty string, use the "dim" effect and put nbsp instead to + // stretch the button vertically + button.innerHTML = label ? esc(label) : ' ' + button.style.opacity = label ? 1 : 0.2 + }) + } + + /** + * Shows an actual notification (if possible) or a notification balloon. + * @param {string} text - the notification content + */ + showNotification (text) { + console.info(`Notification: ${text}`) + if (Notification && Notification.permission === 'granted') { + let notification = new Notification('ESPTerm', { + body: text + }) + notification.addEventListener('click', () => window.focus()) + } else { + if (Notification && Notification.permission !== 'denied') { + Notification.requestPermission() + } else { + // Fallback using the built-in notification balloon + Notify.show(text) + } + } + } + + /** + * Loads a message from the server, and optionally a theme. + * @param {string} str - the message + * @param {number} [theme] - the new theme index + */ + load (str, theme = -1) { + const content = str.substr(1) + if (theme >= 0 && theme < themes.length) { + this.palette = themes[theme] + } + + switch (str[0]) { + case 'S': + this.loadContent(content) + break + + case 'T': + this.loadLabels(content) + break + + case 'B': + this.beep() + break + + case 'G': + this.showNotification(content) + break + + default: + console.warn(`Bad data message type; ignoring.\n${JSON.stringify(str)}`) + } + } + + /** + * Creates a beep sound. + */ + beep () { + const audioCtx = this.audioCtx + if (!audioCtx) return + + // prevent screeching + if (this._lastBeep && this._lastBeep > Date.now() - 50) return + this._lastBeep = Date.now() + + 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) + } + + /** + * Converts an alphabetic character to its fraktur variant. + * @param {string} character - the character + * @returns {string} the converted character + */ + static alphaToFraktur (character) { + if (character >= 'a' && character <= 'z') { + character = String.fromCodePoint(0x1d51e - 0x61 + character.charCodeAt(0)) + } else if (character >= 'A' && character <= 'Z') { + character = frakturExceptions[character] || String.fromCodePoint( + 0x1d504 - 0x41 + character.charCodeAt(0)) + } + return character + } +} diff --git a/js/term_upload.js b/js/term_upload.js new file mode 100644 index 0000000..e399c4b --- /dev/null +++ b/js/term_upload.js @@ -0,0 +1,169 @@ +/** File upload utility */ +window.TermUpl = function (conn, input, screen) { + let lines, // array of lines without newlines + line_i, // current line index + fuTout, // timeout handle for line sending + send_delay_ms, // delay between lines (ms) + nl_str, // newline string to use + curLine, // current line (when using fuOil) + inline_pos // Offset in line (for long lines) + + // lines longer than this are split to chunks + // sending a super-ling string through the socket is not a good idea + const MAX_LINE_LEN = 128 + + function openUploadDialog () { + updateStatus('Ready...') + Modal.show('#fu_modal', onDialogClose) + $('#fu_form').toggleClass('busy', false) + input.blockKeys(true) + } + + function onDialogClose () { + console.log('Upload modal closed.') + clearTimeout(fuTout) + line_i = 0 + input.blockKeys(false) + } + + function updateStatus (msg) { + qs('#fu_prog').textContent = msg + } + + function startUpload () { + let v = qs('#fu_text').value + if (!v.length) { + fuClose() + return + } + + lines = v.split('\n') + line_i = 0 + inline_pos = 0 // offset in line + send_delay_ms = qs('#fu_delay').value + + // sanitize - 0 causes overflows + if (send_delay_ms < 0) { + send_delay_ms = 0 + qs('#fu_delay').value = send_delay_ms + } + + nl_str = { + 'CR': '\r', + 'LF': '\n', + 'CRLF': '\r\n' + }[qs('#fu_crlf').value] + + $('#fu_form').toggleClass('busy', true) + updateStatus('Starting...') + uploadLine() + } + + function uploadLine () { + if (!$('#fu_modal').hasClass('visible')) { + // Modal is closed, cancel + return + } + + if (!conn.canSend()) { + // postpone + fuTout = setTimeout(uploadLine, 1) + return + } + + if (inline_pos === 0) { + curLine = '' + if (line_i === 0) { + if (screen.bracketedPaste) { + curLine = '\x1b[200~' + } + } + + curLine += lines[line_i++] + nl_str + + if (line_i === lines.length) { + if (screen.bracketedPaste) { + curLine += '\x1b[201~' + } + } + } + + let chunk + if ((curLine.length - inline_pos) <= MAX_LINE_LEN) { + chunk = curLine.substr(inline_pos, MAX_LINE_LEN) + inline_pos = 0 + } else { + chunk = curLine.substr(inline_pos, MAX_LINE_LEN) + inline_pos += MAX_LINE_LEN + } + + console.log(chunk) + if (!input.sendString(chunk)) { + updateStatus('FAILED!') + return + } + + let pt = Math.round((line_i / lines.length) * 1000) / 10 + updateStatus(`${line_i} / ${lines.length} (${pt}%)`) + + if (lines.length > line_i || inline_pos > 0) { + fuTout = setTimeout(uploadLine, send_delay_ms) + } else { + closeWhenReady() + } + } + + function closeWhenReady () { + if (!conn.canSend()) { + // stuck in XOFF still, wait to process... + updateStatus('Waiting for Tx buffer...') + setTimeout(closeWhenReady, 100) + } else { + updateStatus('Done.') + // delay to show it + fuClose() + } + } + + function fuClose () { + Modal.hide('#fu_modal') + } + + return { + init: function () { + qs('#fu_file').addEventListener('change', function (evt) { + let reader = new FileReader() + let file = evt.target.files[0] + console.log('Selected file type: ' + file.type) + if (!file.type.match(/text\/.*|application\/(json|csv|.*xml.*|.*script.*)/)) { + // Deny load of blobs like img - can crash browser and will get corrupted anyway + if (!confirm('This does not look like a text file: ' + file.type + '\nReally load?')) { + qs('#fu_file').value = '' + return + } + } + reader.onload = function (e) { + const txt = e.target.result.replace(/[\r\n]+/, '\n') + qs('#fu_text').value = txt + } + console.log('Loading file...') + reader.readAsText(file) + }, false) + + qs('#term-fu-open').addEventListener('click', function () { + openUploadDialog() + return false + }) + + qs('#term-fu-start').addEventListener('click', function () { + startUpload() + return false + }) + + qs('#term-fu-close').addEventListener('click', function () { + fuClose() + return false + }) + } + } +} diff --git a/js/utils.js b/js/utils.js new file mode 100755 index 0000000..9a5049c --- /dev/null +++ b/js/utils.js @@ -0,0 +1,90 @@ +/** Make a node */ +function mk (e) { + return document.createElement(e) +} + +/** Find one by query */ +function qs (s) { + return document.querySelector(s) +} + +/** Find all by query */ +function qsa (s) { + return document.querySelectorAll(s) +} + +/** Convert any to bool safely */ +function bool (x) { + return (x === 1 || x === '1' || x === true || x === 'true') +} + +/** + * Filter 'spacebar' and 'return' from keypress handler, + * and when they're pressed, fire the callback. + * use $(...).on('keypress', cr(handler)) + */ +function cr (hdl) { + return function (e) { + if (e.which === 10 || e.which === 13 || e.which === 32) { + hdl() + } + } +} + +/** HTML escape */ +function esc (str) { + return $.htmlEscape(str) +} + +/** Check for undefined */ +function undef (x) { + return typeof x == 'undefined' +} + +/** Safe json parse */ +function jsp (str) { + try { + return JSON.parse(str) + } catch (e) { + console.error(e) + return null + } +} + +/** Create a character from ASCII code */ +function Chr (n) { + return String.fromCharCode(n) +} + +/** Decode number from 2B encoding */ +function parse2B (s, i = 0) { + return (s.charCodeAt(i++) - 1) + (s.charCodeAt(i) - 1) * 127 +} + +/** Decode number from 3B encoding */ +function parse3B (s, i = 0) { + return (s.charCodeAt(i) - 1) + (s.charCodeAt(i + 1) - 1) * 127 + (s.charCodeAt(i + 2) - 1) * 127 * 127 +} + +/** Encode using 2B encoding, returns string. */ +function encode2B (n) { + let lsb, msb + lsb = (n % 127) + n = ((n - lsb) / 127) + lsb += 1 + msb = (n + 1) + return Chr(lsb) + Chr(msb) +} + +/** Encode using 3B encoding, returns string. */ +function encode3B (n) { + let lsb, msb, xsb + lsb = (n % 127) + n = (n - lsb) / 127 + lsb += 1 + msb = (n % 127) + n = (n - msb) / 127 + msb += 1 + xsb = (n + 1) + return Chr(lsb) + Chr(msb) + Chr(xsb) +} diff --git a/js/wifi.js b/js/wifi.js new file mode 100644 index 0000000..bd35fe4 --- /dev/null +++ b/js/wifi.js @@ -0,0 +1,163 @@ +(function (w) { + const authStr = ['Open', 'WEP', 'WPA', 'WPA2', 'WPA/WPA2'] + let curSSID + + // Get XX % for a slider input + function rangePt (inp) { + return Math.round(((inp.value / inp.max) * 100)) + '%' + } + + // Display selected STA SSID etc + function selectSta (name, password, ip) { + $('#sta_ssid').val(name) + $('#sta_password').val(password) + + $('#sta-nw').toggleClass('hidden', name.length === 0) + $('#sta-nw-nil').toggleClass('hidden', name.length > 0) + + $('#sta-nw .essid').html(esc(name)) + const nopw = undef(password) || password.length === 0 + $('#sta-nw .passwd').toggleClass('hidden', nopw) + $('#sta-nw .nopasswd').toggleClass('hidden', !nopw) + $('#sta-nw .ip').html(ip.length > 0 ? tr('wifi.connected_ip_is') + ip : tr('wifi.not_conn')) + } + + /** Update display for received response */ + function onScan (resp, status) { + // var ap_json = { + // "result": { + // "inProgress": "0", + // "APs": [ + // {"essid": "Chlivek", "bssid": "88:f7:c7:52:b3:99", "rssi": "204", "enc": "4", "channel": "1"}, + // {"essid": "TyNikdy", "bssid": "5c:f4:ab:0d:f1:1b", "rssi": "164", "enc": "3", "channel": "1"}, + // ] + // } + // }; + + if (status !== 200) { + // bad response + rescan(5000) // wait 5sm then retry + return + } + + try { + resp = JSON.parse(resp) + } catch (e) { + console.log(e) + rescan(5000) + return + } + + const done = !bool(resp.result.inProgress) && (resp.result.APs.length > 0) + rescan(done ? 15000 : 1000) + if (!done) return // no redraw yet + + // clear the AP list + let $list = $('#ap-list') + // remove old APs + $('#ap-list .AP').remove() + + $list.toggleClass('hidden', !done) + $('#ap-loader').toggleClass('hidden', done) + + // scan done + resp.result.APs.sort(function (a, b) { + return b.rssi - a.rssi + }).forEach(function (ap) { + ap.enc = parseInt(ap.enc) + + if (ap.enc > 4) return // hide unsupported auths + + let item = mk('div') + + let $item = $(item) + .data('ssid', ap.essid) + .data('pwd', ap.enc) + .attr('tabindex', 0) + .addClass('AP') + + // mark current SSID + if (ap.essid === curSSID) { + $item.addClass('selected') + } + + let inner = mk('div') + let escapedSSID = $.htmlEscape(ap.essid) + $(inner).addClass('inner') + .htmlAppend(`
${ap.rssi_perc}
`)
+ .htmlAppend(`${escapedSSID}
`)
+ .htmlAppend(`${authStr[ap.enc]}
`)
+
+ $item.on('click', function () {
+ let $th = $(this)
+
+ const conn_ssid = $th.data('ssid')
+ let conn_pass = ''
+
+ if (+$th.data('pwd')) {
+ // this AP needs a password
+ conn_pass = prompt(tr('wifi.enter_passwd').replace(':ssid:', conn_ssid))
+ if (!conn_pass) return
+ }
+
+ $('#sta_password').val(conn_pass)
+ $('#sta_ssid').val(conn_ssid)
+ selectSta(conn_ssid, conn_pass, '')
+ })
+
+ item.appendChild(inner)
+ $list[0].appendChild(item)
+ })
+ }
+
+ function startScanning () {
+ $('#ap-loader').removeClass('hidden')
+ $('#ap-scan').addClass('hidden')
+ $('#ap-loader .anim-dots').html('.')
+
+ scanAPs()
+ }
+
+ /** Ask the CGI what APs are visible (async) */
+ function scanAPs () {
+ if (_demo) {
+ onScan(_demo_aps, 200)
+ } else {
+ $.get('http://' + _root + '/cfg/wifi/scan', onScan)
+ }
+ }
+
+ function rescan (time) {
+ setTimeout(scanAPs, time)
+ }
+
+ /** Set up the WiFi page */
+ function wifiInit (cfg) {
+ // Update slider value displays
+ $('.Row.range').forEach(function (x) {
+ let inp = x.querySelector('input')
+ let disp1 = x.querySelector('.x-disp1')
+ let disp2 = x.querySelector('.x-disp2')
+ let t = rangePt(inp)
+ $(disp1).html(t)
+ $(disp2).html(t)
+ $(inp).on('input', function () {
+ t = rangePt(inp)
+ $(disp1).html(t)
+ $(disp2).html(t)
+ })
+ })
+
+ // Forget STA credentials
+ $('#forget-sta').on('click', function () {
+ selectSta('', '', '')
+ return false
+ })
+
+ selectSta(cfg.sta_ssid, cfg.sta_password, cfg.sta_active_ip)
+ curSSID = cfg.sta_active_ssid
+ }
+
+ w.init = wifiInit
+ w.startScanning = startScanning
+})(window.WiFi = {})
diff --git a/jssrc/appcommon.js b/jssrc/appcommon.js
deleted file mode 100644
index 6b1fad6..0000000
--- a/jssrc/appcommon.js
+++ /dev/null
@@ -1,189 +0,0 @@
-/** Global generic init */
-$.ready(function () {
- // Checkbox UI (checkbox CSS and hidden input with int value)
- $('.Row.checkbox').forEach(function(x) {
- var inp = x.querySelector('input');
- var box = x.querySelector('.box');
-
- $(box).toggleClass('checked', inp.value);
-
- var hdl = function() {
- inp.value = 1 - inp.value;
- $(box).toggleClass('checked', inp.value)
- };
-
- $(x).on('click', hdl).on('keypress', cr(hdl));
- });
-
- // Expanding boxes on mobile
- $('.Box.mobcol,.Box.fold').forEach(function(x) {
- var h = x.querySelector('h2');
-
- var hdl = function() {
- $(x).toggleClass('expanded');
- };
- $(h).on('click', hdl).on('keypress', cr(hdl));
- });
-
- $('form').forEach(function(x) {
- $(x).on('keypress', function(e) {
- if ((e.keyCode == 10 || e.keyCode == 13) && e.ctrlKey) {
- x.submit();
- }
- })
- });
-
- // loader dots...
- setInterval(function () {
- $('.anim-dots').each(function (x) {
- var $x = $(x);
- var dots = $x.html() + '.';
- if (dots.length == 5) dots = '.';
- $x.html(dots);
- });
- }, 1000);
-
- // flipping number boxes with the mouse wheel
- $('input[type=number]').on('mousewheel', function(e) {
- var $this = $(this);
- var val = +$this.val();
- if (isNaN(val)) val = 1;
-
- var step = +($this.attr('step') || 1);
- var min = +$this.attr('min');
- var max = +$this.attr('max');
- if(e.wheelDelta > 0) {
- val += step;
- } else {
- val -= step;
- }
-
- if (typeof min != 'undefined') val = Math.max(val, +min);
- if (typeof max != 'undefined') val = Math.min(val, +max);
- $this.val(val);
-
- if ("createEvent" in document) {
- var evt = document.createEvent("HTMLEvents");
- evt.initEvent("change", false, true);
- $this[0].dispatchEvent(evt);
- } else {
- $this[0].fireEvent("onchange");
- }
-
- e.preventDefault();
- });
-
- var errAt = location.search.indexOf('err=');
- if (errAt !== -1 && qs('.Box.errors')) {
- var errs = location.search.substr(errAt+4).split(',');
- var hres = [];
- errs.forEach(function(er) {
- var lbl = qs('label[for="'+er+'"]');
- if (lbl) {
- lbl.classList.add('error');
- hres.push(lbl.childNodes[0].textContent.trim().replace(/: ?$/, ''));
- } else {
- hres.push(er);
- }
- });
-
- qs('.Box.errors .list').innerHTML = hres.join(', ');
- qs('.Box.errors').classList.remove('hidden');
- }
-
- Modal.init();
- Notify.init();
-
- // remove tabindixes from h2 if wide
- if (window.innerWidth > 550) {
- $('.Box h2').forEach(function (x) {
- x.removeAttribute('tabindex');
- });
-
- // brand works as a link back to term in widescreen mode
- var br = qs('#brand');
- br && br.addEventListener('click', function() {
- location.href='/'; // go to terminal
- });
- }
-});
-
-$._loader = function(vis) {
- $('#loader').toggleClass('show', vis);
-};
-
-function showPage() {
- $('#content').addClass('load');
-}
-
-$.ready(function() {
- if (window.noAutoShow !== true) {
- setTimeout(function () {
- showPage();
- }, 1);
- }
-});
-
-
-/*! http://mths.be/fromcodepoint v0.1.0 by @mathias */
-if (!String.fromCodePoint) {
- (function() {
- var defineProperty = (function() {
- // IE 8 only supports `Object.defineProperty` on DOM elements
- try {
- var object = {};
- var $defineProperty = Object.defineProperty;
- var result = $defineProperty(object, object, object) && $defineProperty;
- } catch(error) {}
- return result;
- }());
- var stringFromCharCode = String.fromCharCode;
- var floor = Math.floor;
- var fromCodePoint = function() {
- var MAX_SIZE = 0x4000;
- var codeUnits = [];
- var highSurrogate;
- var lowSurrogate;
- var index = -1;
- var length = arguments.length;
- if (!length) {
- return '';
- }
- var result = '';
- while (++index < length) {
- var codePoint = Number(arguments[index]);
- if (
- !isFinite(codePoint) || // `NaN`, `+Infinity`, or `-Infinity`
- codePoint < 0 || // not a valid Unicode code point
- codePoint > 0x10FFFF || // not a valid Unicode code point
- floor(codePoint) != codePoint // not an integer
- ) {
- throw RangeError('Invalid code point: ' + codePoint);
- }
- if (codePoint <= 0xFFFF) { // BMP code point
- codeUnits.push(codePoint);
- } else { // Astral code point; split in surrogate halves
- // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
- codePoint -= 0x10000;
- highSurrogate = (codePoint >> 10) + 0xD800;
- lowSurrogate = (codePoint % 0x400) + 0xDC00;
- codeUnits.push(highSurrogate, lowSurrogate);
- }
- if (index + 1 == length || codeUnits.length > MAX_SIZE) {
- result += stringFromCharCode.apply(null, codeUnits);
- codeUnits.length = 0;
- }
- }
- return result;
- };
- if (defineProperty) {
- defineProperty(String, 'fromCodePoint', {
- 'value': fromCodePoint,
- 'configurable': true,
- 'writable': true
- });
- } else {
- String.fromCodePoint = fromCodePoint;
- }
- }());
-}
diff --git a/jssrc/modal.js b/jssrc/modal.js
deleted file mode 100644
index ce623cd..0000000
--- a/jssrc/modal.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/** Module for toggling a modal overlay */
-(function () {
- var modal = {};
- var curCloseCb = null;
-
- modal.show = function (sel, closeCb) {
- var $m = $(sel);
- $m.removeClass('hidden visible');
- setTimeout(function () {
- $m.addClass('visible');
- }, 1);
- curCloseCb = closeCb;
- };
-
- modal.hide = function (sel) {
- var $m = $(sel);
- $m.removeClass('visible');
- setTimeout(function () {
- $m.addClass('hidden');
- if (curCloseCb) curCloseCb();
- }, 500); // transition time
- };
-
- modal.init = function () {
- // close modal by click outside the dialog
- $('.Modal').on('click', function () {
- if ($(this).hasClass('no-close')) return; // this is a no-close modal
- modal.hide(this);
- });
-
- $('.Dialog').on('click', function (e) {
- e.stopImmediatePropagation();
- });
-
- // Hide all modals on esc
- $(window).on('keydown', function (e) {
- if (e.which == 27) {
- modal.hide('.Modal');
- }
- });
- };
-
- window.Modal = modal;
-})();
diff --git a/jssrc/notif.js b/jssrc/notif.js
deleted file mode 100644
index ad08e51..0000000
--- a/jssrc/notif.js
+++ /dev/null
@@ -1,32 +0,0 @@
-(function (nt) {
- var sel = '#notif';
-
- var hideTmeo1; // timeout to start hiding (transition)
- var hideTmeo2; // timeout to add the hidden class
-
- nt.show = function (message, timeout) {
- $(sel).html(message);
- Modal.show(sel);
-
- clearTimeout(hideTmeo1);
- clearTimeout(hideTmeo2);
-
- if (undef(timeout)) timeout = 2500;
-
- hideTmeo1 = setTimeout(nt.hide, timeout);
- };
-
- nt.hide = function () {
- var $m = $(sel);
- $m.removeClass('visible');
- hideTmeo2 = setTimeout(function () {
- $m.addClass('hidden');
- }, 250); // transition time
- };
-
- nt.init = function() {
- $(sel).on('click', function() {
- nt.hide(this);
- });
- };
-})(window.Notify = {});
diff --git a/jssrc/term.js b/jssrc/term.js
deleted file mode 100644
index 2211c60..0000000
--- a/jssrc/term.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** Init the terminal sub-module - called from HTML */
-window.termInit = function () {
- Conn.init();
- Input.init();
- TermUpl.init();
-};
diff --git a/jssrc/term_conn.js b/jssrc/term_conn.js
deleted file mode 100644
index d9bbd57..0000000
--- a/jssrc/term_conn.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/** Handle connections */
-var Conn = (function () {
- var ws;
- var heartbeatTout;
- var pingIv;
- var xoff = false;
- var autoXoffTout;
- var reconTout;
-
- var pageShown = false;
-
- function onOpen(evt) {
- console.log("CONNECTED");
- doSend("i");
- }
-
- function onClose(evt) {
- console.warn("SOCKET CLOSED, code " + evt.code + ". Reconnecting...");
- clearTimeout(reconTout);
- reconTout = setTimeout(function () {
- init();
- }, 2000);
- // this happens when the buffer gets fucked up via invalid unicode.
- // we basically use polling instead of socket then
- }
-
- function onMessage(evt) {
- try {
- // . = heartbeat
- switch (evt.data.charAt(0)) {
- case 'B':
- case 'T':
- case 'S':
- Screen.load(evt.data);
- if(!pageShown) {
- showPage();
- pageShown = true;
- }
- break;
-
- case '-':
- //console.log('xoff');
- xoff = true;
- autoXoffTout = setTimeout(function () {
- xoff = false;
- }, 250);
- break;
-
- case '+':
- //console.log('xon');
- xoff = false;
- clearTimeout(autoXoffTout);
- break;
- }
- heartbeat();
- } catch (e) {
- console.error(e);
- }
- }
-
- function canSend() {
- return !xoff;
- }
-
- function doSend(message) {
- if (_demo) {
- console.log("TX: ", message);
- return true; // Simulate success
- }
- if (xoff) {
- // TODO queue
- console.log("Can't send, flood control.");
- return false;
- }
-
- if (!ws) return false; // for dry testing
- if (ws.readyState != 1) {
- console.error("Socket not ready");
- return false;
- }
- if (typeof message != "string") {
- message = JSON.stringify(message);
- }
- ws.send(message);
- return true;
- }
-
- function init() {
- if (_demo) {
- console.log("Demo mode!");
- Screen.load(_demo_screen);
- showPage();
- return;
- }
-
- clearTimeout(reconTout);
- clearTimeout(heartbeatTout);
-
- ws = new WebSocket("ws://" + _root + "/term/update.ws");
- ws.onopen = onOpen;
- ws.onclose = onClose;
- ws.onmessage = onMessage;
- console.log("Opening socket.");
- heartbeat();
- }
-
- function heartbeat() {
- clearTimeout(heartbeatTout);
- heartbeatTout = setTimeout(heartbeatFail, 2000);
- }
-
- function heartbeatFail() {
- console.error("Heartbeat lost, probing server...");
- pingIv = setInterval(function () {
- console.log("> ping");
- $.get('http://' + _root + '/system/ping', function (resp, status) {
- if (status == 200) {
- clearInterval(pingIv);
- console.info("Server ready, reloading page...");
- location.reload();
- }
- }, {
- timeout: 100,
- });
- }, 1000);
- }
-
- return {
- ws: null,
- init: init,
- send: doSend,
- canSend: canSend, // check flood control
- };
-})();
diff --git a/jssrc/term_input.js b/jssrc/term_input.js
deleted file mode 100644
index 2224a32..0000000
--- a/jssrc/term_input.js
+++ /dev/null
@@ -1,264 +0,0 @@
-/**
- * User input
- *
- * --- Rx messages: ---
- * S - screen content (binary encoding of the entire screen with simple compression)
- * T - text labels - Title and buttons, \0x01-separated
- * B - beep
- * . - heartbeat
- *
- * --- Tx messages ---
- * s - string
- * b - action button
- * p - mb press
- * r - mb release
- * m - mouse move
- */
-var Input = (function() {
- var opts = {
- np_alt: false,
- cu_alt: false,
- fn_alt: false,
- mt_click: false,
- mt_move: false,
- no_keys: false,
- crlf_mode: false,
- };
-
- /** Send a literal message */
- function sendStrMsg(str) {
- return Conn.send("s"+str);
- }
-
- /** Send a button event */
- function sendBtnMsg(n) {
- Conn.send("b"+Chr(n));
- }
-
- /** Fn alt choice for key message */
- function fa(alt, normal) {
- return opts.fn_alt ? alt : normal;
- }
-
- /** Cursor alt choice for key message */
- function ca(alt, normal) {
- return opts.cu_alt ? alt : normal;
- }
-
- /** Numpad alt choice for key message */
- function na(alt, normal) {
- return opts.np_alt ? alt : normal;
- }
-
- function _bindFnKeys() {
- var keymap = {
- 'tab': '\x09',
- 'backspace': '\x08',
- 'enter': opts.crlf_mode ? '\x0d\x0a' : '\x0d',
- 'ctrl+enter': '\x0a',
- 'esc': '\x1b',
- 'up': ca('\x1bOA', '\x1b[A'),
- 'down': ca('\x1bOB', '\x1b[B'),
- 'right': ca('\x1bOC', '\x1b[C'),
- 'left': ca('\x1bOD', '\x1b[D'),
- 'home': ca('\x1bOH', fa('\x1b[H', '\x1b[1~')),
- 'insert': '\x1b[2~',
- 'delete': '\x1b[3~',
- 'end': ca('\x1bOF', fa('\x1b[F', '\x1b[4~')),
- 'pageup': '\x1b[5~',
- 'pagedown': '\x1b[6~',
- 'f1': fa('\x1bOP', '\x1b[11~'),
- 'f2': fa('\x1bOQ', '\x1b[12~'),
- 'f3': fa('\x1bOR', '\x1b[13~'),
- 'f4': fa('\x1bOS', '\x1b[14~'),
- 'f5': '\x1b[15~', // note the disconnect
- 'f6': '\x1b[17~',
- 'f7': '\x1b[18~',
- 'f8': '\x1b[19~',
- 'f9': '\x1b[20~',
- 'f10': '\x1b[21~', // note the disconnect
- 'f11': '\x1b[23~',
- 'f12': '\x1b[24~',
- 'shift+f1': fa('\x1bO1;2P', '\x1b[25~'),
- 'shift+f2': fa('\x1bO1;2Q', '\x1b[26~'), // note the disconnect
- 'shift+f3': fa('\x1bO1;2R', '\x1b[28~'),
- 'shift+f4': fa('\x1bO1;2S', '\x1b[29~'), // note the disconnect
- 'shift+f5': fa('\x1b[15;2~', '\x1b[31~'),
- 'shift+f6': fa('\x1b[17;2~', '\x1b[32~'),
- 'shift+f7': fa('\x1b[18;2~', '\x1b[33~'),
- 'shift+f8': fa('\x1b[19;2~', '\x1b[34~'),
- 'shift+f9': fa('\x1b[20;2~', '\x1b[35~'), // 35-38 are not standard - but what is?
- 'shift+f10': fa('\x1b[21;2~', '\x1b[36~'),
- 'shift+f11': fa('\x1b[22;2~', '\x1b[37~'),
- 'shift+f12': fa('\x1b[23;2~', '\x1b[38~'),
- 'np_0': na('\x1bOp', '0'),
- 'np_1': na('\x1bOq', '1'),
- 'np_2': na('\x1bOr', '2'),
- 'np_3': na('\x1bOs', '3'),
- 'np_4': na('\x1bOt', '4'),
- 'np_5': na('\x1bOu', '5'),
- 'np_6': na('\x1bOv', '6'),
- 'np_7': na('\x1bOw', '7'),
- 'np_8': na('\x1bOx', '8'),
- 'np_9': na('\x1bOy', '9'),
- 'np_mul': na('\x1bOR', '*'),
- 'np_add': na('\x1bOl', '+'),
- 'np_sub': na('\x1bOS', '-'),
- 'np_point': na('\x1bOn', '.'),
- 'np_div': na('\x1bOQ', '/'),
- // we don't implement numlock key (should change in numpad_alt mode, but it's even more useless than the rest)
- };
-
- for (var k in keymap) {
- if (keymap.hasOwnProperty(k)) {
- bind(k, keymap[k]);
- }
- }
- }
-
- /** Bind a keystroke to message */
- function bind(combo, str) {
- // mac fix - allow also cmd
- if (combo.indexOf('ctrl+') !== -1) {
- combo += ',' + combo.replace('ctrl', 'command');
- }
-
- // unbind possible old binding
- key.unbind(combo);
-
- key(combo, function (e) {
- if (opts.no_keys) return;
- e.preventDefault();
- sendStrMsg(str)
- });
- }
-
- /** Bind/rebind key messages */
- function _initKeys() {
- // This takes care of text characters typed
- window.addEventListener('keypress', function(evt) {
- if (opts.no_keys) return;
- var str = '';
- if (evt.key) str = evt.key;
- else if (evt.which) str = String.fromCodePoint(evt.which);
- if (str.length>0 && str.charCodeAt(0) >= 32) {
-// console.log("Typed ", str);
- sendStrMsg(str);
- }
- });
-
- // ctrl-letter codes are sent as simple low ASCII codes
- for (var i = 1; i<=26;i++) {
- bind('ctrl+' + String.fromCharCode(96+i), String.fromCharCode(i));
- }
- bind('ctrl+]', '\x1b'); // alternate way to enter ESC
- bind('ctrl+\\', '\x1c');
- bind('ctrl+[', '\x1d');
- bind('ctrl+^', '\x1e');
- bind('ctrl+_', '\x1f');
-
- _bindFnKeys();
- }
-
- // mouse button states
- var mb1 = 0;
- var mb2 = 0;
- var mb3 = 0;
-
- /** Init the Input module */
- function init() {
- _initKeys();
-
- // Button presses
- $('#action-buttons button').forEach(function(s) {
- s.addEventListener('click', function() {
- sendBtnMsg(+this.dataset['n']);
- });
- });
-
- // global mouse state tracking - for motion reporting
- window.addEventListener('mousedown', function(evt) {
- if (evt.button == 0) mb1 = 1;
- if (evt.button == 1) mb2 = 1;
- if (evt.button == 2) mb3 = 1;
- });
-
- window.addEventListener('mouseup', function(evt) {
- if (evt.button == 0) mb1 = 0;
- if (evt.button == 1) mb2 = 0;
- if (evt.button == 2) mb3 = 0;
- });
- }
-
- /** Prepare modifiers byte for mouse message */
- function packModifiersForMouse() {
- return (key.isModifier('ctrl')?1:0) |
- (key.isModifier('shift')?2:0) |
- (key.isModifier('alt')?4:0) |
- (key.isModifier('meta')?8:0);
- }
-
- return {
- /** Init the Input module */
- init: init,
-
- /** Send a literal string message */
- sendString: sendStrMsg,
-
- /** Enable alternate key modes (cursors, numpad, fn) */
- setAlts: function(cu, np, fn, crlf) {
- if (opts.cu_alt != cu || opts.np_alt != np || opts.fn_alt != fn || opts.crlf_mode != crlf) {
- opts.cu_alt = cu;
- opts.np_alt = np;
- opts.fn_alt = fn;
- opts.crlf_mode = crlf;
-
- // rebind keys - codes have changed
- _bindFnKeys();
- }
- },
-
- setMouseMode: function(click, move) {
- opts.mt_click = click;
- opts.mt_move = move;
- },
-
- // Mouse events
- onMouseMove: function (x, y) {
- if (!opts.mt_move) return;
- var b = mb1 ? 1 : mb2 ? 2 : mb3 ? 3 : 0;
- var m = packModifiersForMouse();
- Conn.send("m" + encode2B(y) + encode2B(x) + encode2B(b) + encode2B(m));
- },
- onMouseDown: function (x, y, b) {
- if (!opts.mt_click) return;
- if (b > 3 || b < 1) return;
- var m = packModifiersForMouse();
- Conn.send("p" + encode2B(y) + encode2B(x) + encode2B(b) + encode2B(m));
- // console.log("B ",b," M ",m);
- },
- onMouseUp: function (x, y, b) {
- if (!opts.mt_click) return;
- if (b > 3 || b < 1) return;
- var m = packModifiersForMouse();
- Conn.send("r" + encode2B(y) + encode2B(x) + encode2B(b) + encode2B(m));
- // console.log("B ",b," M ",m);
- },
- onMouseWheel: function (x, y, dir) {
- if (!opts.mt_click) return;
- // -1 ... btn 4 (away from user)
- // +1 ... btn 5 (towards user)
- var m = packModifiersForMouse();
- var b = (dir < 0 ? 4 : 5);
- Conn.send("p" + encode2B(y) + encode2B(x) + encode2B(b) + encode2B(m));
- // console.log("B ",b," M ",m);
- },
- mouseTracksClicks: function() {
- return opts.mt_click;
- },
- blockKeys: function(yes) {
- opts.no_keys = yes;
- }
- };
-})();
-
diff --git a/jssrc/term_screen.js b/jssrc/term_screen.js
deleted file mode 100644
index bfbc4ad..0000000
--- a/jssrc/term_screen.js
+++ /dev/null
@@ -1,380 +0,0 @@
-var Screen = (function () {
- var W = 0, H = 0; // dimensions
- 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',
- 'H': '\u210c',
- 'I': '\u2111',
- 'R': '\u211c',
- 'Z': '\u2128',
- };
-
- // for BEL
- var audioCtx = null;
- try {
- audioCtx = new (window.AudioContext || window.audioContext || window.webkitAudioContext)();
- } catch (er) {
- console.error("No AudioContext!", er);
- }
-
- /** Get cell under cursor */
- function _curCell() {
- return screen[cursor.y*W + cursor.x];
- }
-
- /** Safely move cursor */
- function cursorSet(y, x) {
- // Hide and prevent from showing up during the move
- cursor.suppress = true;
- _draw(_curCell(), false);
- cursor.x = x;
- cursor.y = y;
- // Show again
- cursor.suppress = false;
- _draw(_curCell());
- }
-
- function alpha2fraktur(t) {
- // perform substitution
- if (t >= 'a' && t <= 'z') {
- t = String.fromCodePoint(0x1d51e - 97 + t.charCodeAt(0));
- }
- else if (t >= 'A' && t <= 'Z') {
- // this set is incomplete, some exceptions are needed
- if (frakturExceptions.hasOwnProperty(t)) {
- t = frakturExceptions[t];
- } else {
- t = String.fromCodePoint(0x1d504 - 65 + t.charCodeAt(0));
- }
- }
- return t;
- }
-
- /** Update cell on display. inv = invert (for cursor) */
- function _draw(cell, inv) {
- if (!cell) return;
- if (typeof inv == 'undefined') {
- inv = cursor.a && cursor.x == cell.x && cursor.y == cell.y;
- }
-
- var fg, bg, cn, t;
-
- fg = inv ? cell.bg : cell.fg;
- bg = inv ? cell.fg : cell.bg;
-
- t = cell.t;
- if (!t.length) t = ' ';
-
- cn = 'fg' + fg + ' bg' + bg;
- if (cell.attrs & (1<<0)) cn += ' bold';
- if (cell.attrs & (1<<1)) cn += ' faint';
- if (cell.attrs & (1<<2)) cn += ' italic';
- 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;
- cell.elem.className = cn;
- }
-
- /** Show entire screen */
- function _drawAll() {
- for (var i = W*H-1; i>=0; i--) {
- _draw(screen[i]);
- }
- }
-
- function _rebuild(rows, cols) {
- W = cols;
- H = rows;
-
- /* Build screen & show */
- var cOuter, cInner, cell, screenDiv = qs('#screen');
-
- // Empty the screen node
- while (screenDiv.firstChild) screenDiv.removeChild(screenDiv.firstChild);
-
- screen = [];
-
- for(var i = 0; i < W*H; i++) {
- cOuter = mk('span');
- cInner = mk('span');
-
- /* Mouse tracking */
- (function() {
- var x = i % W;
- var y = Math.floor(i / W);
- cOuter.addEventListener('mouseenter', function (evt) {
- Input.onMouseMove(x, y);
- });
- 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 */
- if ((i > 0) && (i % W == 0)) {
- screenDiv.appendChild(mk('br'));
- }
- /* The cell */
- cOuter.appendChild(cInner);
- screenDiv.appendChild(cOuter);
-
- cell = {
- t: ' ',
- fg: 7,
- bg: 0, // the colors will be replaced immediately as we receive data (user won't see this)
- attrs: 0,
- elem: cOuter,
- slot: cInner,
- x: i % W,
- y: Math.floor(i / W),
- };
- screen.push(cell);
- _draw(cell);
- }
- }
-
- /** Init the terminal */
- function _init() {
- /* Cursor blinking */
- clearInterval(blinkIval);
- blinkIval = setInterval(function () {
- cursor.a = !cursor.a;
- if (cursor.hidden || cursor.hanging) {
- cursor.a = false;
- }
-
- if (!cursor.suppress) {
- _draw(_curCell(), cursor.forceOn || cursor.a);
- }
- }, 500);
-
- /* blink attribute animation */
- setInterval(function () {
- $('#screen').removeClass('blink-hide');
- setTimeout(function () {
- $('#screen').addClass('blink-hide');
- }, 800); // 200 ms ON
- }, 1000);
-
- inited = true;
- }
-
- // constants for decoding the update blob
- 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) */
- function _load_content(str) {
- var i = 0, ci = 0, j, jc, num, num2, t = ' ', fg, bg, attrs, cell;
-
- if (!inited) _init();
-
- var cursorMoved;
-
- // Set size
- num = parse2B(str, i); i += 2; // height
- num2 = parse2B(str, i); i += 2; // width
- if (num != H || num2 != W) {
- _rebuild(num, num2);
- }
- // console.log("Size ",num, num2);
-
- // Cursor position
- num = parse2B(str, i); i += 2; // row
- num2 = parse2B(str, i); i += 2; // col
- cursorMoved = (cursor.x != num2 || cursor.y != num);
- cursorSet(num, num2);
- // console.log("Cursor at ",num, num2);
-
- // Attributes
- num = parse3B(str, i); i += 3;
- cursor.hidden = !(num & (1<<0)); // DEC opt "visible"
- cursor.hanging = !!(num & (1<<1));
-
- Input.setAlts(
- !!(num & (1<<2)), // cursors alt
- !!(num & (1<<3)), // numpad alt
- !!(num & (1<<4)), // fn keys alt
- !!(num & (1<<12)) // crlf mode
- );
-
- var mt_click = !!(num & (1<<5));
- var mt_move = !!(num & (1<<6));
- Input.setMouseMode(
- mt_click,
- mt_move
- );
- $('#screen').toggleClass('noselect', mt_move);
-
- var show_buttons = !!(num & (1<<7));
- var show_config_links = !!(num & (1<<8));
- $('.x-term-conf-btn').toggleClass('hidden', !show_config_links);
- $('#action-buttons').toggleClass('hidden', !show_buttons);
-
- // bits 9-11 are cursor shape (not implemented)
-
- fg = 7;
- bg = 0;
- attrs = 0;
-
- // Here come the content
- while(i < str.length && ci{0}
'.format(ap.rssi_perc))
- .htmlAppend('{0}
'.format($.htmlEscape(ap.essid)))
- .htmlAppend('{0}
'.format(authStr[ap.enc]));
-
- $item.on('click', function () {
- var $th = $(this);
-
- var conn_ssid = $th.data('ssid');
- var conn_pass = '';
-
- if (+$th.data('pwd')) {
- // this AP needs a password
- conn_pass = prompt(tr("wifi.enter_passwd").replace(":ssid:", conn_ssid));
- if (!conn_pass) return;
- }
-
- $('#sta_password').val(conn_pass);
- $('#sta_ssid').val(conn_ssid);
- selectSta(conn_ssid, conn_pass, '');
- });
-
-
- item.appendChild(inner);
- $list[0].appendChild(item);
- });
- }
-
- function startScanning() {
- $('#ap-loader').removeClass('hidden');
- $('#ap-scan').addClass('hidden');
- $('#ap-loader .anim-dots').html('.');
-
- scanAPs();
- }
-
- /** Ask the CGI what APs are visible (async) */
- function scanAPs() {
- if (_demo) {
- onScan(_demo_aps, 200);
- } else {
- $.get('http://' + _root + '/cfg/wifi/scan', onScan);
- }
- }
-
- function rescan(time) {
- setTimeout(scanAPs, time);
- }
-
- /** Set up the WiFi page */
- function wifiInit(cfg) {
- // Update slider value displays
- $('.Row.range').forEach(function(x) {
- var inp = x.querySelector('input');
- var disp1 = x.querySelector('.x-disp1');
- var disp2 = x.querySelector('.x-disp2');
- var t = rangePt(inp);
- $(disp1).html(t);
- $(disp2).html(t);
- $(inp).on('input', function() {
- t = rangePt(inp);
- $(disp1).html(t);
- $(disp2).html(t);
- });
- });
-
- // Forget STA credentials
- $('#forget-sta').on('click', function() {
- selectSta('', '', '');
- return false;
- });
-
- selectSta(cfg.sta_ssid, cfg.sta_password, cfg.sta_active_ip);
- curSSID = cfg.sta_active_ssid;
- }
-
- w.init = wifiInit;
- w.startScanning = startScanning;
-})(window.WiFi = {});
diff --git a/lang/en.php b/lang/en.php
index e099ce2..9c57a65 100644
--- a/lang/en.php
+++ b/lang/en.php
@@ -60,6 +60,7 @@ return [
'term.show_buttons' => 'Show buttons',
'term.loopback' => 'Local Echo',
'term.crlf_mode' => 'Enter sends CR+LF',
+ 'term.want_all_fn' => 'Capture all keys(F5, F11, F12…)', 'term.button_msgs' => 'Button codes
(ASCII, dec, CSV)', 'cursor.block_blink' => 'Block, blinking', diff --git a/package.json b/package.json new file mode 100644 index 0000000..cd9b9e5 --- /dev/null +++ b/package.json @@ -0,0 +1,18 @@ +{ + "name": "espterm-front-end", + "version": "1.0.0", + "description": "ESPTerm web interface", + "license": "MPL-2.0", + "devDependencies": { + "babel-cli": "^6.26.0", + "babel-minify": "^0.2.0", + "babel-preset-env": "^1.6.0", + "node-sass": "^4.5.3", + "standard": "^10.0.3" + }, + "scripts": { + "babel": "babel $@", + "minify": "babel-minify $@", + "sass": "node-sass $@" + } +} diff --git a/pages/_head.php b/pages/_head.php index 37e5862..a5d3cd7 100644 --- a/pages/_head.php +++ b/pages/_head.php @@ -5,13 +5,12 @@
ESP8266 Remote Terminal
-
+
© Ondřej Hruška, 2016-2017 @@ -17,10 +17,16 @@
Version
+| ESPTerm | -v%vers_fw%, built %date% at %time% | +v%vers_fw%, built %date% at~%time% | +
|---|---|---|
| Git hash | +back-end: %hash_backend%, + front-end: %hash_frontend% | |
| libesphttpd | @@ -31,6 +37,7 @@v%vers_sdk% |
diff --git a/pages/cfg_term.php b/pages/cfg_term.php
index 10ed719..e4dba6b 100644
--- a/pages/cfg_term.php
+++ b/pages/cfg_term.php
@@ -165,6 +165,12 @@
+
+
+
+
+
diff --git a/pages/help.php b/pages/help.php
index 575d4d5..12bbb45 100644
--- a/pages/help.php
+++ b/pages/help.php
@@ -1,5 +1,10 @@
Enable (`h`) or disable (`l`) cursor auto-wrap and screen auto-scroll
+
+
+
+ Toggle cursor blinking (`h` on, `l` off)
+
Show (`h`) or hide (`l`) the cursor
+
+
+
+ Enable (`h`) or disable (`l`) reverse wrap-around (when using "move left" or backspace)
+
diff --git a/pages/help/cmd_screen.php b/pages/help/cmd_screen.php
index 948b8a8..d19c0b3 100644
--- a/pages/help/cmd_screen.php
+++ b/pages/help/cmd_screen.php
@@ -34,6 +34,13 @@
Erase _n_ characters in line.
+
- Expand all | Collapse all
+
+ Note: This list of commands is not exhaustive. \\
+ There's a more detailed and technical
+ document available online.
diff --git a/pages/help/cmd_cursor.php b/pages/help/cmd_cursor.php
index 4dd0d13..9ede2f2 100644
--- a/pages/help/cmd_cursor.php
+++ b/pages/help/cmd_cursor.php
@@ -184,6 +184,15 @@
+ \e[?12h \\
+ \e[?12l
+
+
@@ -193,6 +202,15 @@
+ \e[?45h \\
+ \e[?45l
+
+
diff --git a/pages/help/cmd_system.php b/pages/help/cmd_system.php
index d8956fc..f7b19f0 100644
--- a/pages/help/cmd_system.php
+++ b/pages/help/cmd_system.php
@@ -18,6 +18,10 @@
The screen size, title and button labels remain unchanged.
- \e]80+n;t\a
+ \e]8x;t\a
- \e]90+n;m\a
+ \e]9x;m\a
+
+
+ \e]9;t\a
+
+
+ \e[?ns \\
+ \e[?nr
+ \e[?2004h \\
+ \e[?2004l
+
+
+ \e[?1049h \\
+ \e[?1049l
+
+
@@ -93,10 +158,6 @@
SRM is the opposite of Local Echo, meaning `\e[12h` disables and `\e[12l` enables Local Echo.
- The initial screen size, title text and button labels can be configured in Terminal Settings. + The initial screen size, title text and button labels can be configured + in Terminal Settings.
@@ -13,5 +14,17 @@ repaint. If you experience issues (broken image due to dropped bytes), try adjusting those config options. It may also be useful to try different baud rates.
+ +UTF-8 support
+ ++ ESPTerm supports all UTF-8 characters, but to reduce the screen buffer RAM size, + only a small amount of unique multi-byte characters can be used at the same time + (up to 160, depending on compile flags). Unique multi-byte characters are stored in a + look-up table and are removed when they are no longer used on the screen. In + rare cases it can happen that a character stays in the table after no longer + being used (this can be noticed when the table fills up and new characters + are not shown correctly). This is fixed by clearing the screen (`\e[2J` or `\ec`). +
+
+
+
diff --git a/pages/help/sgr_styles.php b/pages/help/sgr_styles.php
index a1e5237..bfa788a 100644
--- a/pages/help/sgr_styles.php
+++ b/pages/help/sgr_styles.php
@@ -3,7 +3,7 @@
Commands: Color SGR
- Colors are set using SGR commands (like `\e[10;20;30m`). The following tables list the SGR codes to use. - Selected colors are used for any new text entered, as well as for empty space when using line and screen clearing commands. - The configured default colors can be restored using SGR 39 for foreground and SGR 49 for background. + Colors are set using SGR commands (like `\e[30;47m`). The following tables list the SGR + codes to use. Selected colors are used for any new text entered, as well as for empty + space when using clearing commands (except screen reset `\ec`, which first clears all + style attriutes. The configured default colors can be restored using `SGR 39` for + foreground and `SGR 49` for background.
- The actual color representation depends on a color theme which + The actual color representation of the basic 16 colors depends on a color theme which can be selected in Terminal Settings.
@@ -61,5 +63,19 @@ 106 107256-color palette
+ ++ ESPTerm supports in total 256 standard colors. The dark and bright basic colors are + numbered 0-7 and 8-15. To use colors higher than 15 (or 0-15 using this simpler numbering), + send `CSI 38 ; 5 ; n m`, where `n` is the color to set. Use 48 for background colors. +
+ ++ For a fererence of all 256 shades please refer to + jonasjacek.github.io/colors + or look it up elsewhere. +
- All text attributes are set using SGR commands like `\e[10;20;30m`, with up to 10 numbers separated by semicolons. + All text attributes are set using SGR commands like `\e[1;4m`, with up to 10 numbers separated by semicolons. To restore all attributes to their default states, use SGR 0: `\e[0m` or `\e[m`.
@@ -16,11 +16,23 @@1Conceal turns all characters invisible.
-
+
+
+
+