commit
891a44624e
@ -0,0 +1,18 @@ |
||||
{ |
||||
"presets": [ |
||||
["env", { |
||||
"targets": { |
||||
"browsers": [ |
||||
"last 2 versions", |
||||
"> 4%", |
||||
"ie 11", |
||||
"safari 8", |
||||
"android 4.4" |
||||
] |
||||
} |
||||
}], |
||||
["minify", { |
||||
"mergeVars": false |
||||
}] |
||||
] |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
# possibly minified output |
||||
out/**/* |
||||
|
||||
# libraries |
||||
js/lib/* |
||||
|
||||
# php generated file |
||||
js/lang.js |
||||
@ -0,0 +1,191 @@ |
||||
{ |
||||
"parserOptions": { |
||||
"ecmaVersion": 8, |
||||
"ecmaFeatures": { |
||||
"experimentalObjectRestSpread": true, |
||||
"jsx": true |
||||
}, |
||||
"sourceType": "module" |
||||
}, |
||||
|
||||
"env": { |
||||
"es6": true, |
||||
"node": true |
||||
}, |
||||
|
||||
"plugins": [ |
||||
"import", |
||||
"node", |
||||
"promise", |
||||
"standard" |
||||
], |
||||
|
||||
"globals": { |
||||
"document": false, |
||||
"navigator": false, |
||||
"window": false |
||||
}, |
||||
|
||||
"rules": { |
||||
"accessor-pairs": "error", |
||||
"arrow-spacing": ["error", { "before": true, "after": true }], |
||||
"block-spacing": ["error", "always"], |
||||
"brace-style": ["warn", "1tbs", { "allowSingleLine": true }], |
||||
"camelcase": ["off", { "properties": "never" }], |
||||
"comma-dangle": ["error", { |
||||
"arrays": "never", |
||||
"objects": "never", |
||||
"imports": "never", |
||||
"exports": "never", |
||||
"functions": "never" |
||||
}], |
||||
"comma-spacing": ["error", { "before": false, "after": true }], |
||||
"comma-style": ["error", "last"], |
||||
"constructor-super": "error", |
||||
"curly": ["error", "multi-line"], |
||||
"dot-location": ["error", "property"], |
||||
"eol-last": "error", |
||||
"eqeqeq": ["error", "smart"], |
||||
"func-call-spacing": ["error", "never"], |
||||
"generator-star-spacing": ["error", { "before": true, "after": true }], |
||||
"handle-callback-err": ["error", "^(err|error)$" ], |
||||
"indent": ["error", 2, { "SwitchCase": 1 }], |
||||
"key-spacing": ["error", { "beforeColon": false, "afterColon": true }], |
||||
"keyword-spacing": ["error", { "before": true, "after": true }], |
||||
"new-cap": ["error", { "newIsCap": true, "capIsNew": false }], |
||||
"new-parens": "error", |
||||
"no-array-constructor": "error", |
||||
"no-caller": "error", |
||||
"no-class-assign": "error", |
||||
"no-compare-neg-zero": "error", |
||||
"no-cond-assign": "error", |
||||
"no-const-assign": "error", |
||||
"no-constant-condition": ["error", { "checkLoops": false }], |
||||
"no-control-regex": "error", |
||||
"no-debugger": "error", |
||||
"no-delete-var": "error", |
||||
"no-dupe-args": "error", |
||||
"no-dupe-class-members": "error", |
||||
"no-dupe-keys": "error", |
||||
"no-duplicate-case": "error", |
||||
"no-empty-character-class": "error", |
||||
"no-empty-pattern": "error", |
||||
"no-eval": "error", |
||||
"no-ex-assign": "error", |
||||
"no-extend-native": "warn", |
||||
"no-extra-bind": "error", |
||||
"no-extra-boolean-cast": "error", |
||||
"no-extra-parens": ["error", "functions"], |
||||
"no-fallthrough": "error", |
||||
"no-floating-decimal": "error", |
||||
"no-func-assign": "error", |
||||
"no-global-assign": "error", |
||||
"no-implied-eval": "error", |
||||
"no-inner-declarations": ["error", "functions"], |
||||
"no-invalid-regexp": "error", |
||||
"no-irregular-whitespace": "error", |
||||
"no-iterator": "error", |
||||
"no-label-var": "error", |
||||
"no-labels": ["error", { "allowLoop": false, "allowSwitch": false }], |
||||
"no-lone-blocks": "warn", |
||||
"no-mixed-operators": ["error", { |
||||
"groups": [ |
||||
["==", "!=", "===", "!==", ">", ">=", "<", "<="], |
||||
["&&", "||"], |
||||
["in", "instanceof"] |
||||
], |
||||
"allowSamePrecedence": true |
||||
}], |
||||
"no-mixed-spaces-and-tabs": "error", |
||||
"no-multi-spaces": "warn", |
||||
"no-multi-str": "error", |
||||
"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0 }], |
||||
"no-negated-in-lhs": "error", |
||||
"no-new": "error", |
||||
"no-new-func": "error", |
||||
"no-new-object": "error", |
||||
"no-new-require": "error", |
||||
"no-new-symbol": "error", |
||||
"no-new-wrappers": "error", |
||||
"no-obj-calls": "error", |
||||
"no-octal": "error", |
||||
"no-octal-escape": "error", |
||||
"no-path-concat": "error", |
||||
"no-proto": "error", |
||||
"no-redeclare": "error", |
||||
"no-regex-spaces": "error", |
||||
"no-return-assign": ["error", "except-parens"], |
||||
"no-return-await": "error", |
||||
"no-self-assign": "error", |
||||
"no-self-compare": "error", |
||||
"no-sequences": "error", |
||||
"no-shadow-restricted-names": "error", |
||||
"no-sparse-arrays": "error", |
||||
"no-tabs": "error", |
||||
"no-template-curly-in-string": "error", |
||||
"no-this-before-super": "error", |
||||
"no-throw-literal": "error", |
||||
"no-trailing-spaces": "off", |
||||
"no-undef": "off", |
||||
"no-undef-init": "error", |
||||
"no-unexpected-multiline": "error", |
||||
"no-unmodified-loop-condition": "error", |
||||
"no-unneeded-ternary": ["error", { "defaultAssignment": false }], |
||||
"no-unreachable": "error", |
||||
"no-unsafe-finally": "error", |
||||
"no-unsafe-negation": "error", |
||||
"no-unused-expressions": ["warn", { "allowShortCircuit": true, "allowTernary": true, "allowTaggedTemplates": true }], |
||||
"no-unused-vars": ["off", { "vars": "local", "args": "none", "ignoreRestSiblings": true }], |
||||
"no-use-before-define": ["error", { "functions": false, "classes": false, "variables": false }], |
||||
"no-useless-call": "error", |
||||
"no-useless-computed-key": "error", |
||||
"no-useless-constructor": "error", |
||||
"no-useless-escape": "error", |
||||
"no-useless-rename": "error", |
||||
"no-useless-return": "error", |
||||
"no-whitespace-before-property": "error", |
||||
"no-with": "error", |
||||
"object-property-newline": ["error", { "allowMultiplePropertiesPerLine": true }], |
||||
"one-var": ["error", { "initialized": "never" }], |
||||
"operator-linebreak": ["error", "after", { "overrides": { "?": "before", ":": "before" } }], |
||||
"padded-blocks": ["error", { "blocks": "never", "switches": "never", "classes": "never" }], |
||||
"prefer-promise-reject-errors": "error", |
||||
"quotes": ["error", "single", { "avoidEscape": true, "allowTemplateLiterals": true }], |
||||
"rest-spread-spacing": ["error", "never"], |
||||
"semi": ["error", "never"], |
||||
"semi-spacing": ["error", { "before": false, "after": true }], |
||||
"space-before-blocks": ["error", "always"], |
||||
"space-before-function-paren": ["error", "always"], |
||||
"space-in-parens": ["error", "never"], |
||||
"space-infix-ops": "error", |
||||
"space-unary-ops": ["error", { "words": true, "nonwords": false }], |
||||
"spaced-comment": ["error", "always", { |
||||
"line": { "markers": ["*package", "!", "/", ","] }, |
||||
"block": { "balanced": true, "markers": ["*package", "!", ",", ":", "::", "flow-include"], "exceptions": ["*"] } |
||||
}], |
||||
"symbol-description": "error", |
||||
"template-curly-spacing": ["error", "never"], |
||||
"template-tag-spacing": ["error", "never"], |
||||
"unicode-bom": ["error", "never"], |
||||
"use-isnan": "error", |
||||
"valid-typeof": ["error", { "requireStringLiterals": true }], |
||||
"wrap-iife": ["error", "any", { "functionPrototypeMethods": true }], |
||||
"yield-star-spacing": ["error", "both"], |
||||
"yoda": ["error", "never"], |
||||
|
||||
"import/export": "error", |
||||
"import/first": "error", |
||||
"import/no-duplicates": "error", |
||||
"import/no-webpack-loader-syntax": "error", |
||||
|
||||
"node/no-deprecated-api": "error", |
||||
"node/process-exit-as-throw": "error", |
||||
|
||||
"promise/param-names": "error", |
||||
|
||||
"standard/array-bracket-even-spacing": ["error", "either"], |
||||
"standard/computed-property-even-spacing": ["error", "even"], |
||||
"standard/no-callback-literal": "error", |
||||
"standard/object-curly-even-spacing": ["error", "either"] |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
#!/bin/bash |
||||
source "_build_common.sh" |
||||
|
||||
echo 'Copying resources...' |
||||
|
||||
cp -r img out/img |
||||
cp favicon.ico out/ |
||||
|
||||
if [[ $ESP_PROD ]]; then |
||||
echo 'Cleaning junk files...' |
||||
find out/ -name "*.orig" -delete |
||||
find out/ -name "*.xcf" -delete |
||||
find out/ -name "*~" -delete |
||||
find out/ -name "*.bak" -delete |
||||
find out/ -name "*.map" -delete |
||||
fi |
||||
@ -0,0 +1,3 @@ |
||||
#!/bin/bash |
||||
|
||||
export FRONT_END_HASH=$(git rev-parse --short HEAD) |
||||
@ -0,0 +1,13 @@ |
||||
#!/bin/bash |
||||
source "_build_common.sh" |
||||
|
||||
echo 'Building CSS...' |
||||
|
||||
if [[ $ESP_PROD ]]; then |
||||
stylearg=compressed |
||||
else |
||||
stylearg=expanded |
||||
fi |
||||
|
||||
mkdir -p out/css |
||||
npm run sass -- --output-style ${stylearg} sass/app.scss "out/css/app.$FRONT_END_HASH.css" |
||||
@ -0,0 +1,6 @@ |
||||
#!/bin/bash |
||||
source "_build_common.sh" |
||||
|
||||
echo 'Building HTML...' |
||||
|
||||
php ./compile_html.php |
||||
@ -0,0 +1,35 @@ |
||||
#!/bin/bash |
||||
source "_build_common.sh" |
||||
|
||||
mkdir -p out/js |
||||
echo 'Generating lang.js...' |
||||
php ./dump_js_lang.php |
||||
|
||||
if [[ $ESP_DEMO ]]; then |
||||
demofile=js/demo.js |
||||
else |
||||
demofile= |
||||
fi |
||||
|
||||
echo 'Processing JS...' |
||||
if [[ $ESP_PROD ]]; then |
||||
smarg= |
||||
else |
||||
smarg=--source-maps |
||||
fi |
||||
|
||||
npm run babel -- -o "out/js/app.$FRONT_END_HASH.js" ${smarg} \ |
||||
js/lib/chibi.js \ |
||||
js/lib/keymaster.js \ |
||||
js/lib/polyfills.js \ |
||||
js/utils.js \ |
||||
js/modal.js \ |
||||
js/notif.js \ |
||||
js/appcommon.js \ |
||||
$demofile \ |
||||
js/lang.js \ |
||||
js/wifi.js \ |
||||
js/term_* \ |
||||
js/debug_screen.js \ |
||||
js/soft_keyboard.js \ |
||||
js/term.js |
||||
@ -0,0 +1,13 @@ |
||||
<?php |
||||
|
||||
if (preg_match('/\\/(?:js|css)/', $_SERVER["REQUEST_URI"])) { |
||||
$path = pathinfo($_SERVER["REQUEST_URI"]); |
||||
if ($path["extension"] == "js") { |
||||
header("Content-Type: application/javascript"); |
||||
} else if ($path["extension"] == "css") { |
||||
header("Content-Type: text/css"); |
||||
} |
||||
readfile("out" . $_SERVER["REQUEST_URI"]); |
||||
} else { |
||||
return false; |
||||
} |
||||
@ -1,25 +1,14 @@ |
||||
#!/bin/bash |
||||
|
||||
echo "Packing JS..." |
||||
cd $(dirname $0) |
||||
|
||||
cat jssrc/chibi.js \ |
||||
jssrc/keymaster.js \ |
||||
jssrc/utils.js \ |
||||
jssrc/modal.js \ |
||||
jssrc/notif.js \ |
||||
jssrc/appcommon.js \ |
||||
jssrc/lang.js \ |
||||
jssrc/wifi.js \ |
||||
jssrc/term_* \ |
||||
jssrc/term.js > js/app-full.js |
||||
source "_build_common.sh" |
||||
|
||||
yuicompressor js/app-full.js > js/app.js |
||||
rm -fr out/* |
||||
|
||||
echo "Building CSS..." |
||||
./_build_css.sh |
||||
./_build_js.sh |
||||
./_build_html.sh |
||||
./_build_assets.sh |
||||
|
||||
sass --style=compressed sass/app.scss css/app.css |
||||
|
||||
echo "Building HTML..." |
||||
php ./build_html.php |
||||
|
||||
echo "ESPTerm front-end ready" |
||||
echo 'ESPTerm front-end ready' |
||||
|
||||
Binary file not shown.
@ -0,0 +1,131 @@ |
||||
/** Global generic init */ |
||||
$.ready(function () { |
||||
// Checkbox UI (checkbox CSS and hidden input with int value)
|
||||
$('.Row.checkbox').forEach(function (x) { |
||||
let inp = x.querySelector('input') |
||||
let box = x.querySelector('.box') |
||||
|
||||
$(box).toggleClass('checked', inp.value) |
||||
|
||||
let 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) { |
||||
let h = x.querySelector('h2') |
||||
|
||||
let 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) { |
||||
let $x = $(x) |
||||
let 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) { |
||||
let $this = $(this) |
||||
let val = +$this.val() |
||||
if (isNaN(val)) val = 1 |
||||
|
||||
const step = +($this.attr('step') || 1) |
||||
const min = +$this.attr('min') |
||||
const max = +$this.attr('max') |
||||
if (e.wheelDelta > 0) { |
||||
val += step |
||||
} else { |
||||
val -= step |
||||
} |
||||
|
||||
if (undef(min)) val = Math.max(val, +min) |
||||
if (undef(max)) val = Math.min(val, +max) |
||||
$this.val(val) |
||||
|
||||
if ('createEvent' in document) { |
||||
let evt = document.createEvent('HTMLEvents') |
||||
evt.initEvent('change', false, true) |
||||
$this[0].dispatchEvent(evt) |
||||
} else { |
||||
$this[0].fireEvent('onchange') |
||||
} |
||||
|
||||
e.preventDefault() |
||||
}) |
||||
|
||||
// populate the form errors box from GET arg ?err=...
|
||||
// (a way to pass errors back from server via redirect)
|
||||
let errAt = location.search.indexOf('err=') |
||||
if (errAt !== -1 && qs('.Box.errors')) { |
||||
let errs = location.search.substr(errAt + 4).split(',') |
||||
let humanReadableErrors = [] |
||||
errs.forEach(function (er) { |
||||
let lbl = qs('label[for="' + er + '"]') |
||||
if (lbl) { |
||||
lbl.classList.add('error') |
||||
humanReadableErrors.push(lbl.childNodes[0].textContent.trim().replace(/: ?$/, '')) |
||||
} |
||||
// else {
|
||||
// hres.push(er)
|
||||
// }
|
||||
}) |
||||
|
||||
qs('.Box.errors .list').innerHTML = humanReadableErrors.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
|
||||
let br = qs('#brand') |
||||
br && br.addEventListener('click', function () { |
||||
location.href = '/' // go to terminal
|
||||
}) |
||||
} |
||||
}) |
||||
|
||||
// setup the ajax loader
|
||||
$._loader = function (vis) { |
||||
$('#loader').toggleClass('show', vis) |
||||
} |
||||
|
||||
// reveal content on load
|
||||
function showPage () { |
||||
$('#content').addClass('load') |
||||
} |
||||
|
||||
// Auto reveal pages other than the terminal (sets window.noAutoShow)
|
||||
$.ready(function () { |
||||
if (window.noAutoShow !== true) { |
||||
setTimeout(function () { |
||||
showPage() |
||||
}, 1) |
||||
} |
||||
}) |
||||
@ -0,0 +1,106 @@ |
||||
window.attachDebugScreen = function (screen) { |
||||
const debugCanvas = mk('canvas') |
||||
const ctx = debugCanvas.getContext('2d') |
||||
|
||||
debugCanvas.style.position = 'absolute' |
||||
// hackity hack should probably set this in CSS
|
||||
debugCanvas.style.top = '6px' |
||||
debugCanvas.style.left = '6px' |
||||
debugCanvas.style.pointerEvents = 'none' |
||||
|
||||
let addCanvas = function () { |
||||
if (!debugCanvas.parentNode) screen.canvas.parentNode.appendChild(debugCanvas) |
||||
} |
||||
let removeCanvas = function () { |
||||
if (debugCanvas.parentNode) debugCanvas.parentNode.removeChild(debugCanvas) |
||||
} |
||||
let updateCanvasSize = function () { |
||||
let { width, height, devicePixelRatio } = screen.window |
||||
let cellSize = screen.getCellSize() |
||||
debugCanvas.width = width * cellSize.width * devicePixelRatio |
||||
debugCanvas.height = height * cellSize.height * devicePixelRatio |
||||
debugCanvas.style.width = `${width * cellSize.width}px` |
||||
debugCanvas.style.height = `${height * cellSize.height}px` |
||||
} |
||||
|
||||
let startTime, endTime, lastReason |
||||
let cells = new Map() |
||||
|
||||
let startDrawing |
||||
|
||||
screen._debug = { |
||||
drawStart (reason) { |
||||
lastReason = reason |
||||
startTime = Date.now() |
||||
}, |
||||
drawEnd () { |
||||
endTime = Date.now() |
||||
console.log(`Draw: ${lastReason} (${(endTime - startTime)} ms) with fancy graphics: ${screen.window.graphics}`) |
||||
startDrawing() |
||||
}, |
||||
setCell (cell, flags) { |
||||
cells.set(cell, [flags, Date.now()]) |
||||
} |
||||
} |
||||
|
||||
let isDrawing = false |
||||
|
||||
let drawLoop = function () { |
||||
if (isDrawing) requestAnimationFrame(drawLoop) |
||||
|
||||
let { devicePixelRatio, width, height } = screen.window |
||||
let { width: cellWidth, height: cellHeight } = screen.getCellSize() |
||||
let screenLength = width * height |
||||
let now = Date.now() |
||||
|
||||
ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0) |
||||
ctx.clearRect(0, 0, width * cellWidth, height * cellHeight) |
||||
|
||||
let activeCells = 0 |
||||
for (let cell = 0; cell < screenLength; cell++) { |
||||
if (!cells.has(cell) || cells.get(cell)[0] === 0) continue |
||||
|
||||
let [flags, timestamp] = cells.get(cell) |
||||
let elapsedTime = (now - timestamp) / 1000 |
||||
|
||||
if (elapsedTime > 1) continue |
||||
|
||||
activeCells++ |
||||
ctx.globalAlpha = 0.5 * Math.max(0, 1 - elapsedTime) |
||||
|
||||
let x = cell % width |
||||
let y = Math.floor(cell / width) |
||||
|
||||
if (flags & 1) { |
||||
// redrawn
|
||||
ctx.fillStyle = '#f0f' |
||||
} |
||||
if (flags & 2) { |
||||
// updated
|
||||
ctx.fillStyle = '#0f0' |
||||
} |
||||
|
||||
ctx.fillRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight) |
||||
|
||||
if (flags & 4) { |
||||
// wide cell
|
||||
ctx.lineWidth = 2 |
||||
ctx.strokeStyle = '#f00' |
||||
ctx.strokeRect(x * cellWidth, y * cellHeight, cellWidth, cellHeight) |
||||
} |
||||
} |
||||
|
||||
if (activeCells === 0) { |
||||
isDrawing = false |
||||
removeCanvas() |
||||
} |
||||
} |
||||
|
||||
startDrawing = function () { |
||||
if (isDrawing) return |
||||
addCanvas() |
||||
updateCanvasSize() |
||||
isDrawing = true |
||||
drawLoop() |
||||
} |
||||
} |
||||
@ -0,0 +1,758 @@ |
||||
class ANSIParser { |
||||
constructor (handler) { |
||||
this.reset() |
||||
this.handler = handler |
||||
this.joinChunks = true |
||||
} |
||||
reset () { |
||||
this.currentSequence = 0 |
||||
this.sequence = '' |
||||
} |
||||
parseSequence (sequence) { |
||||
if (sequence[0] === '[') { |
||||
let type = sequence[sequence.length - 1] |
||||
let content = sequence.substring(1, sequence.length - 1) |
||||
|
||||
let numbers = content ? content.split(';').map(i => +i.replace(/\D/g, '')) : [] |
||||
let numOr1 = numbers.length ? numbers[0] : 1 |
||||
if (type === 'H') { |
||||
this.handler('set-cursor', (numbers[0] | 0) - 1, (numbers[1] | 0) - 1) |
||||
} else if (type >= 'A' && type <= 'D') { |
||||
this.handler(`move-cursor-${type <= 'B' ? 'y' : 'x'}`, ((type === 'B' || type === 'C') ? 1 : -1) * numOr1) |
||||
} else if (type === 'E' || type === 'F') { |
||||
this.handler('move-cursor-line', (type === 'E' ? 1 : -1) * numOr1) |
||||
} else if (type === 'G') { |
||||
this.handler('set-cursor-x', numOr1 - 1) |
||||
} else if (type === 'J') { |
||||
let number = numbers.length ? numbers[0] : 2 |
||||
if (number === 2) this.handler('clear') |
||||
} else if (type === 'P') { |
||||
this.handler('delete', numOr1) |
||||
} else if (type === '@') { |
||||
this.handler('insert-blanks', numOr1) |
||||
} else if (type === 'q') this.handler('set-cursor-style', numOr1) |
||||
else if (type === 'm') { |
||||
if (!numbers.length || numbers[0] === 0) { |
||||
this.handler('reset-style') |
||||
return |
||||
} |
||||
let type = numbers[0] |
||||
if (type === 1) this.handler('add-attrs', 1) // bold
|
||||
else if (type === 2) this.handler('add-attrs', 1 << 1) // faint
|
||||
else if (type === 3) this.handler('add-attrs', 1 << 2) // italic
|
||||
else if (type === 4) this.handler('add-attrs', 1 << 3) // underline
|
||||
else if (type === 5 || type === 6) this.handler('add-attrs', 1 << 4) // blink
|
||||
else if (type === 7) this.handler('add-attrs', -1) // invert
|
||||
else if (type === 9) this.handler('add-attrs', 1 << 6) // strike
|
||||
else if (type === 20) this.handler('add-attrs', 1 << 5) // fraktur
|
||||
else if (type >= 30 && type <= 37) this.handler('set-color-fg', type % 10) |
||||
else if (type >= 40 && type <= 47) this.handler('set-color-bg', type % 10) |
||||
else if (type === 39) this.handler('set-color-fg', 7) |
||||
else if (type === 49) this.handler('set-color-bg', 0) |
||||
else if (type >= 90 && type <= 98) this.handler('set-color-fg', (type % 10) + 8) |
||||
else if (type >= 100 && type <= 108) this.handler('set-color-bg', (type % 10) + 8) |
||||
else if (type === 38 || type === 48) { |
||||
if (numbers[1] === 5) { |
||||
let color = (numbers[2] | 0) & 0xFF |
||||
if (type === 38) this.handler('set-color-fg', color) |
||||
if (type === 48) this.handler('set-color-bg', color) |
||||
} |
||||
} |
||||
} else if (type === 'h' || type === 'l') { |
||||
if (content === '?25') { |
||||
if (type === 'h') this.handler('show-cursor') |
||||
else if (type === 'l') this.handler('hide-cursor') |
||||
} |
||||
} |
||||
} |
||||
} |
||||
write (text) { |
||||
for (let character of text.toString()) { |
||||
let code = character.codePointAt(0) |
||||
if (code === 0x1b) this.currentSequence = 1 |
||||
else if (this.currentSequence === 1 && character === '[') { |
||||
this.currentSequence = 2 |
||||
this.sequence += '[' |
||||
} else if (this.currentSequence && character.match(/[\x40-\x7e]/)) { |
||||
this.parseSequence(this.sequence + character) |
||||
this.currentSequence = 0 |
||||
this.sequence = '' |
||||
} else if (this.currentSequence > 1) this.sequence += character |
||||
else if (this.currentSequence === 1) { |
||||
// something something nothing
|
||||
this.currentSequence = 0 |
||||
this.handler('write', character) |
||||
} else if (code === 0x07) this.handler('bell') |
||||
else if (code === 0x08) this.handler('back') |
||||
else if (code === 0x0a) this.handler('new-line') |
||||
else if (code === 0x0d) this.handler('return') |
||||
else if (code === 0x15) this.handler('delete-line') |
||||
else if (code === 0x17) this.handler('delete-word') |
||||
else this.handler('write', character) |
||||
} |
||||
if (!this.joinChunks) this.reset() |
||||
} |
||||
} |
||||
const TERM_DEFAULT_STYLE = 7 |
||||
const TERM_MIN_DRAW_DELAY = 10 |
||||
|
||||
let getRainbowColor = t => { |
||||
let r = Math.floor(Math.sin(t) * 2.5 + 2.5) |
||||
let g = Math.floor(Math.sin(t + 2 / 3 * Math.PI) * 2.5 + 2.5) |
||||
let b = Math.floor(Math.sin(t + 4 / 3 * Math.PI) * 2.5 + 2.5) |
||||
return 16 + 36 * r + 6 * g + b |
||||
} |
||||
|
||||
class ScrollingTerminal { |
||||
constructor (screen) { |
||||
this.width = 80 |
||||
this.height = 25 |
||||
this.termScreen = screen |
||||
this.parser = new ANSIParser((...args) => this.handleParsed(...args)) |
||||
|
||||
this.reset() |
||||
|
||||
this._lastLoad = Date.now() |
||||
this.termScreen.load(this.serialize(), 0) |
||||
} |
||||
reset () { |
||||
this.style = TERM_DEFAULT_STYLE |
||||
this.cursor = { x: 0, y: 0, style: 1, visible: true } |
||||
this.trackMouse = false |
||||
this.theme = 0 |
||||
this.rainbow = false |
||||
this.parser.reset() |
||||
this.clear() |
||||
} |
||||
clear () { |
||||
this.screen = [] |
||||
for (let i = 0; i < this.width * this.height; i++) { |
||||
this.screen.push([' ', this.style]) |
||||
} |
||||
} |
||||
scroll () { |
||||
this.screen.splice(0, this.width) |
||||
for (let i = 0; i < this.width; i++) { |
||||
this.screen.push([' ', TERM_DEFAULT_STYLE]) |
||||
} |
||||
this.cursor.y-- |
||||
} |
||||
newLine () { |
||||
this.cursor.y++ |
||||
if (this.cursor.y >= this.height) this.scroll() |
||||
} |
||||
writeChar (character) { |
||||
this.screen[this.cursor.y * this.width + this.cursor.x] = [character, this.style] |
||||
this.cursor.x++ |
||||
if (this.cursor.x >= this.width) { |
||||
this.cursor.x = 0 |
||||
this.newLine() |
||||
} |
||||
} |
||||
moveBack (n = 1) { |
||||
for (let i = 0; i < n; i++) { |
||||
this.cursor.x-- |
||||
if (this.cursor.x < 0) { |
||||
if (this.cursor.y > 0) this.cursor.x = this.width - 1 |
||||
else this.cursor.x = 0 |
||||
this.cursor.y = Math.max(0, this.cursor.y - 1) |
||||
} |
||||
} |
||||
} |
||||
moveForward (n = 1) { |
||||
for (let i = 0; i < n; i++) { |
||||
this.cursor.x++ |
||||
if (this.cursor.x >= this.width) { |
||||
this.cursor.x = 0 |
||||
this.cursor.y++ |
||||
if (this.cursor.y >= this.height) this.scroll() |
||||
} |
||||
} |
||||
} |
||||
deleteChar () { |
||||
this.moveBack() |
||||
this.screen.splice((this.cursor.y + 1) * this.width, 0, [' ', TERM_DEFAULT_STYLE]) |
||||
this.screen.splice(this.cursor.y * this.width + this.cursor.x, 1) |
||||
} |
||||
deleteForward (n) { |
||||
n = Math.min(this.width, n) |
||||
for (let i = 0; i < n; i++) this.screen.splice((this.cursor.y + 1) * this.width, 0, [' ', TERM_DEFAULT_STYLE]) |
||||
this.screen.splice(this.cursor.y * this.width + this.cursor.x, n) |
||||
} |
||||
clampCursor () { |
||||
if (this.cursor.x < 0) this.cursor.x = 0 |
||||
if (this.cursor.y < 0) this.cursor.y = 0 |
||||
if (this.cursor.x > this.width - 1) this.cursor.x = this.width - 1 |
||||
if (this.cursor.y > this.height - 1) this.cursor.y = this.height - 1 |
||||
} |
||||
handleParsed (action, ...args) { |
||||
if (action === 'write') { |
||||
this.writeChar(args[0]) |
||||
} else if (action === 'delete') { |
||||
this.deleteForward(args[0]) |
||||
} else if (action === 'insert-blanks') { |
||||
this.insertBlanks(args[0]) |
||||
} else if (action === 'clear') { |
||||
this.clear() |
||||
} else if (action === 'bell') { |
||||
this.terminal.load('B') |
||||
} else if (action === 'back') { |
||||
this.moveBack() |
||||
} else if (action === 'new-line') { |
||||
this.newLine() |
||||
} else if (action === 'return') { |
||||
this.cursor.x = 0 |
||||
} else if (action === 'set-cursor') { |
||||
this.cursor.x = args[0] |
||||
this.cursor.y = args[1] |
||||
this.clampCursor() |
||||
} else if (action === 'move-cursor-y') { |
||||
this.cursor.y += args[0] |
||||
this.clampCursor() |
||||
} else if (action === 'move-cursor-x') { |
||||
this.cursor.x += args[0] |
||||
this.clampCursor() |
||||
} else if (action === 'move-cursor-line') { |
||||
this.cursor.x = 0 |
||||
this.cursor.y += args[0] |
||||
this.clampCursor() |
||||
} else if (action === 'set-cursor-x') { |
||||
this.cursor.x = args[0] |
||||
} else if (action === 'set-cursor-style') { |
||||
this.cursor.style = Math.max(0, Math.min(6, args[0])) |
||||
} else if (action === 'reset-style') { |
||||
this.style = TERM_DEFAULT_STYLE |
||||
} else if (action === 'add-attrs') { |
||||
if (args[0] === -1) { |
||||
this.style = (this.style & 0xFF0000) | ((this.style >> 8) & 0xFF) | ((this.style & 0xFF) << 8) |
||||
} else { |
||||
this.style |= (args[0] << 16) |
||||
} |
||||
} else if (action === 'set-color-fg') { |
||||
this.style = (this.style & 0xFFFF00) | args[0] |
||||
} else if (action === 'set-color-bg') { |
||||
this.style = (this.style & 0xFF00FF) | (args[0] << 8) |
||||
} else if (action === 'hide-cursor') { |
||||
this.cursor.visible = false |
||||
} else if (action === 'show-cursor') { |
||||
this.cursor.visible = true |
||||
} |
||||
} |
||||
write (text) { |
||||
this.parser.write(text) |
||||
this.scheduleLoad() |
||||
} |
||||
serialize () { |
||||
let serialized = 'S' |
||||
serialized += encode2B(this.height) + encode2B(this.width) |
||||
serialized += encode2B(this.cursor.y) + encode2B(this.cursor.x) |
||||
|
||||
let attributes = +this.cursor.visible |
||||
attributes |= (3 << 5) * +this.trackMouse // track mouse controls both
|
||||
attributes |= 3 << 7 // buttons/links always visible
|
||||
attributes |= (this.cursor.style << 9) |
||||
serialized += encode3B(attributes) |
||||
|
||||
let lastStyle = null |
||||
let index = 0 |
||||
for (let cell of this.screen) { |
||||
let style = cell[1] |
||||
if (this.rainbow) { |
||||
let x = index % this.width |
||||
let y = Math.floor(index / this.width) |
||||
style = (style & 0xFF0000) | getRainbowColor((x + y) / 10 + Date.now() / 1000) |
||||
index++ |
||||
} |
||||
if (style !== lastStyle) { |
||||
let foreground = style & 0xFF |
||||
let background = (style >> 8) & 0xFF |
||||
let attributes = (style >> 16) & 0xFF |
||||
let setForeground = foreground !== (lastStyle & 0xFF) |
||||
let setBackground = background !== ((lastStyle >> 8) & 0xFF) |
||||
let setAttributes = attributes !== ((lastStyle >> 16) & 0xFF) |
||||
|
||||
if (setForeground && setBackground) serialized += '\x03' + encode3B(style & 0xFFFF) |
||||
else if (setForeground) serialized += '\x05' + encode2B(foreground) |
||||
else if (setBackground) serialized += '\x06' + encode2B(background) |
||||
if (setAttributes) serialized += '\x04' + encode2B(attributes) |
||||
|
||||
lastStyle = style |
||||
} |
||||
serialized += cell[0] |
||||
} |
||||
return serialized |
||||
} |
||||
scheduleLoad () { |
||||
clearTimeout(this._scheduledLoad) |
||||
if (this._lastLoad < Date.now() - TERM_MIN_DRAW_DELAY) { |
||||
this.termScreen.load(this.serialize(), this.theme) |
||||
} else { |
||||
this._scheduledLoad = setTimeout(() => { |
||||
this.termScreen.load(this.serialize()) |
||||
}, TERM_MIN_DRAW_DELAY - this._lastLoad) |
||||
} |
||||
} |
||||
rainbowTimer () { |
||||
if (!this.rainbow) return |
||||
clearInterval(this._rainbowTimer) |
||||
this._rainbowTimer = setInterval(() => { |
||||
if (this.rainbow) this.scheduleLoad() |
||||
}, 50) |
||||
} |
||||
} |
||||
|
||||
class Process { |
||||
constructor (args) { |
||||
// event listeners
|
||||
this._listeners = {} |
||||
} |
||||
on (event, listener) { |
||||
if (!this._listeners[event]) this._listeners[event] = [] |
||||
this._listeners[event].push({ listener }) |
||||
} |
||||
once (event, listener) { |
||||
if (!this._listeners[event]) this._listeners[event] = [] |
||||
this._listeners[event].push({ listener, once: true }) |
||||
} |
||||
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 |
||||
} |
||||
} |
||||
} |
||||
} |
||||
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) |
||||
} |
||||
} |
||||
for (let listener of remove) { |
||||
listeners.splice(listeners.indexOf(listener), 1) |
||||
} |
||||
} |
||||
} |
||||
write (data) { |
||||
this.emit('in', data) |
||||
} |
||||
destroy () { |
||||
// death.
|
||||
this.emit('exit', 0) |
||||
} |
||||
run () { |
||||
// noop
|
||||
} |
||||
} |
||||
|
||||
let demoData = { |
||||
buttons: { |
||||
1: '', |
||||
2: '', |
||||
3: '', |
||||
4: '', |
||||
5: function (terminal, shell) { |
||||
if (shell.child) shell.child.destroy() |
||||
let chars = 'info\r' |
||||
let loop = function () { |
||||
shell.write(chars[0]) |
||||
chars = chars.substr(1) |
||||
if (chars) setTimeout(loop, 100) |
||||
} |
||||
setTimeout(loop, 200) |
||||
} |
||||
} |
||||
} |
||||
|
||||
let demoshIndex = { |
||||
clear: class Clear extends Process { |
||||
run () { |
||||
this.emit('write', '\x1b[2J\x1b[1;1H') |
||||
this.destroy() |
||||
} |
||||
}, |
||||
screenfetch: class Screenfetch extends Process { |
||||
run () { |
||||
let image = ` |
||||
###. ESPTerm Demo |
||||
'###. Hostname: ${window.location.hostname} |
||||
'###. Shell: ESPTerm Demo Shell |
||||
'###. Resolution: 80x25@${window.devicePixelRatio}x |
||||
:###- |
||||
.###' |
||||
.###' |
||||
.###' ############### |
||||
###' ############### |
||||
`.split('\n').filter(line => line.trim())
|
||||
|
||||
let chars = '' |
||||
for (let y = 0; y < image.length; y++) { |
||||
for (let x = 0; x < 80; x++) { |
||||
if (image[y][x]) { |
||||
chars += `\x1b[38;5;${getRainbowColor((x + y) / 10)}m${image[y][x]}` |
||||
} else chars += ' ' |
||||
} |
||||
} |
||||
|
||||
this.emit('write', '\r\n\x1b[?25l') |
||||
let loop = () => { |
||||
this.emit('write', chars.substr(0, 80)) |
||||
chars = chars.substr(80) |
||||
if (chars.length) setTimeout(loop, 50) |
||||
else { |
||||
this.emit('write', '\r\n\x1b[?25h') |
||||
this.destroy() |
||||
} |
||||
} |
||||
loop() |
||||
} |
||||
}, |
||||
'local-echo': class LocalEcho extends Process { |
||||
run (...args) { |
||||
if (!args.includes('--suppress-note')) { |
||||
this.emit('write', '\x1b[38;5;239mNote: not all terminal features are supported or and may not work as expected in this demo\x1b[0m\r\n') |
||||
} |
||||
} |
||||
write (data) { |
||||
this.emit('write', data) |
||||
} |
||||
}, |
||||
'info': class Info extends Process { |
||||
run (...args) { |
||||
let fast = args.includes('--fast') |
||||
this.showSplash().then(() => { |
||||
this.printText(fast) |
||||
}) |
||||
} |
||||
showSplash () { |
||||
let splash = ` |
||||
-#####- -###*..#####- ######- |
||||
-#* -#- .## .##. *#- |
||||
-##### .-###*..#####- *#- -*##*- #*-#--#**#-*##- |
||||
-#* -#-.##. *#- *##@#* ##. -#* *# .#* |
||||
-#####--####- .##. *#- -*#@@- ##. -#* *# .#* |
||||
`.split('\n').filter(line => line.trim())
|
||||
let levels = { |
||||
' ': -231, |
||||
'.': 4, |
||||
'-': 8, |
||||
'*': 17, |
||||
'#': 24 |
||||
} |
||||
for (let i in splash) { |
||||
if (splash[i].length < 79) splash[i] += ' '.repeat(79 - splash[i].length) |
||||
} |
||||
this.emit('write', '\r\n'.repeat(splash.length + 1)) |
||||
this.emit('write', '\x1b[A'.repeat(splash.length)) |
||||
this.emit('write', '\x1b[?25l') |
||||
|
||||
let cursorX = 0 |
||||
let cursorY = 0 |
||||
let moveTo = (x, y) => { |
||||
let moveX = x - cursorX |
||||
let moveY = y - cursorY |
||||
this.emit('write', `\x1b[${Math.abs(moveX)}${moveX > 0 ? 'C' : 'D'}`) |
||||
this.emit('write', `\x1b[${Math.abs(moveY)}${moveY > 0 ? 'B' : 'A'}`) |
||||
cursorX = x |
||||
cursorY = y |
||||
} |
||||
let drawCell = (x, y) => { |
||||
moveTo(x, y) |
||||
if (splash[y][x] === '@') { |
||||
this.emit('write', '\x1b[48;5;8m\x1b[38;5;255m▄\b') |
||||
} else { |
||||
this.emit('write', `\x1b[48;5;${231 + levels[splash[y][x]]}m \b`) |
||||
} |
||||
} |
||||
return new Promise((resolve, reject) => { |
||||
const self = this |
||||
let x = 14 |
||||
let cycles = 0 |
||||
let loop = function () { |
||||
for (let y = 0; y < splash.length; y++) { |
||||
let dx = x - y |
||||
if (dx > 0) drawCell(dx, y) |
||||
} |
||||
|
||||
if (++x < 79) { |
||||
if (++cycles >= 3) { |
||||
setTimeout(loop, 20) |
||||
cycles = 0 |
||||
} else loop() |
||||
} else { |
||||
moveTo(0, splash.length) |
||||
self.emit('write', '\x1b[m\x1b[?25h') |
||||
resolve() |
||||
} |
||||
} |
||||
loop() |
||||
}) |
||||
} |
||||
printText (fast = false) { |
||||
// lots of printing
|
||||
let parts = [ |
||||
'', |
||||
' ESPTerm is a VT100-like terminal emulator running on the ESP8266 WiFi chip.', |
||||
'', |
||||
' \x1b[93mThis is an online demo of the web user interface, simulating a simple ', |
||||
' terminal in your browser.\x1b[m', |
||||
'', |
||||
' Type \x1b[92mls\x1b[m to list available commands.', |
||||
' Use the \x1b[94mlinks\x1b[m below this screen for a demo of the options and more info.', |
||||
'' |
||||
] |
||||
|
||||
if (fast) { |
||||
this.emit('write', parts.join('\r\n') + '\r\n') |
||||
this.destroy() |
||||
} else { |
||||
const self = this |
||||
let loop = function () { |
||||
self.emit('write', parts.shift() + '\r\n') |
||||
if (parts.length) setTimeout(loop, 17) |
||||
else self.destroy() |
||||
} |
||||
loop() |
||||
} |
||||
} |
||||
}, |
||||
colors: class PrintColors extends Process { |
||||
run () { |
||||
this.emit('write', '\r\n') |
||||
let fgtext = 'foreground-color' |
||||
this.emit('write', ' ') |
||||
for (let i = 0; i < 16; i++) { |
||||
this.emit('write', '\x1b[' + (i < 8 ? `3${i}` : `9${i - 8}`) + 'm') |
||||
this.emit('write', fgtext[i] + ' ') |
||||
} |
||||
this.emit('write', '\r\n ') |
||||
for (let i = 0; i < 16; i++) { |
||||
this.emit('write', '\x1b[' + (i < 8 ? `4${i}` : `10${i - 8}`) + 'm ') |
||||
} |
||||
this.emit('write', '\x1b[m\r\n') |
||||
for (let r = 0; r < 6; r++) { |
||||
this.emit('write', ' ') |
||||
for (let g = 0; g < 6; g++) { |
||||
for (let b = 0; b < 6; b++) { |
||||
this.emit('write', `\x1b[48;5;${16 + r * 36 + g * 6 + b}m `) |
||||
} |
||||
this.emit('write', '\x1b[m') |
||||
} |
||||
this.emit('write', '\r\n') |
||||
} |
||||
this.emit('write', ' ') |
||||
for (let g = 0; g < 24; g++) { |
||||
this.emit('write', `\x1b[48;5;${232 + g}m `) |
||||
} |
||||
this.emit('write', '\x1b[m\r\n\n') |
||||
this.destroy() |
||||
} |
||||
}, |
||||
ls: class ListCommands extends Process { |
||||
run () { |
||||
this.emit('write', '\x1b[92mList of demo commands\x1b[m\r\n') |
||||
for (let i in demoshIndex) { |
||||
if (typeof demoshIndex[i] === 'string') continue |
||||
this.emit('write', i + '\r\n') |
||||
} |
||||
this.destroy() |
||||
} |
||||
}, |
||||
theme: class SetTheme extends Process { |
||||
constructor (shell) { |
||||
super() |
||||
this.shell = shell |
||||
} |
||||
run (...args) { |
||||
let theme = args[0] | 0 |
||||
if (!args.length || !Number.isFinite(theme) || theme < 0 || theme > 5) { |
||||
this.emit('write', '\x1b[31mUsage: theme [0–5]\r\n') |
||||
this.destroy() |
||||
return |
||||
} |
||||
this.shell.terminal.theme = theme |
||||
// HACK: reset drawn screen to prevent only partly redrawn screen
|
||||
this.shell.terminal.termScreen.drawnScreenFG = [] |
||||
this.emit('write', '') |
||||
this.destroy() |
||||
} |
||||
}, |
||||
cursor: class SetCursor extends Process { |
||||
run (...args) { |
||||
let steady = args.includes('--steady') |
||||
if (args.includes('block')) { |
||||
this.emit('write', `\x1b[${0 + 2 * steady} q`) |
||||
} else if (args.includes('line')) { |
||||
this.emit('write', `\x1b[${3 + steady} q`) |
||||
} else if (args.includes('bar') || args.includes('beam')) { |
||||
this.emit('write', `\x1b[${5 + steady} q`) |
||||
} else { |
||||
this.emit('write', '\x1b[31mUsage: cursor [block|line|bar] [--steady]\r\n') |
||||
} |
||||
this.destroy() |
||||
} |
||||
}, |
||||
rainbow: class ToggleRainbow extends Process { |
||||
constructor (shell) { |
||||
super() |
||||
this.shell = shell |
||||
} |
||||
run () { |
||||
this.shell.terminal.rainbow = !this.shell.terminal.rainbow |
||||
this.shell.terminal.rainbowTimer() |
||||
this.emit('write', '') |
||||
this.destroy() |
||||
} |
||||
}, |
||||
pwd: '/this/is/a/demo\r\n', |
||||
cd: '\x1b[38;5;239mNo directories to change to\r\n', |
||||
whoami: `${window.navigator.userAgent}\r\n`, |
||||
hostname: `${window.location.hostname}`, |
||||
uname: 'ESPTerm Demo\r\n', |
||||
mkdir: '\x1b[38;5;239mDid not create a directory because this is a demo.\r\n', |
||||
rm: '\x1b[38;5;239mDid not delete anything because this is a demo.\r\n', |
||||
cp: '\x1b[38;5;239mNothing to copy because this is a demo.\r\n', |
||||
mv: '\x1b[38;5;239mNothing to move because this is a demo.\r\n', |
||||
ln: '\x1b[38;5;239mNothing to link because this is a demo.\r\n', |
||||
touch: '\x1b[38;5;239mNothing to touch\r\n', |
||||
exit: '\x1b[38;5;239mNowhere to go\r\n' |
||||
} |
||||
|
||||
class DemoShell { |
||||
constructor (terminal, printInfo) { |
||||
this.terminal = terminal |
||||
this.terminal.reset() |
||||
this.parser = new ANSIParser((...args) => this.handleParsed(...args)) |
||||
this.input = '' |
||||
this.cursorPos = 0 |
||||
this.child = null |
||||
this.index = demoshIndex |
||||
|
||||
if (printInfo) this.run('info') |
||||
else this.prompt() |
||||
} |
||||
write (text) { |
||||
if (this.child) { |
||||
if (text.codePointAt(0) === 3) this.child.destroy() |
||||
else this.child.write(text) |
||||
} else this.parser.write(text) |
||||
} |
||||
prompt (success = true) { |
||||
if (this.terminal.cursor.x !== 0) this.terminal.write('\x1b[m\x1b[38;5;238m⏎\r\n') |
||||
this.terminal.write('\x1b[34;1mdemosh \x1b[m') |
||||
if (!success) this.terminal.write('\x1b[31m') |
||||
this.terminal.write('$ \x1b[m') |
||||
this.input = '' |
||||
this.cursorPos = 0 |
||||
} |
||||
handleParsed (action, ...args) { |
||||
this.terminal.write('\b\x1b[P'.repeat(this.cursorPos)) |
||||
if (action === 'write') { |
||||
this.input = this.input.substr(0, this.cursorPos) + args[0] + this.input.substr(this.cursorPos) |
||||
this.cursorPos++ |
||||
} else if (action === 'back') { |
||||
this.input = this.input.substr(0, this.cursorPos - 1) + this.input.substr(this.cursorPos) |
||||
this.cursorPos-- |
||||
if (this.cursorPos < 0) this.cursorPos = 0 |
||||
} else if (action === 'move-cursor-x') { |
||||
this.cursorPos = Math.max(0, Math.min(this.input.length, this.cursorPos + args[0])) |
||||
} else if (action === 'delete-line') { |
||||
this.input = '' |
||||
this.cursorPos = 0 |
||||
} else if (action === 'delete-word') { |
||||
let words = this.input.substr(0, this.cursorPos).split(' ') |
||||
words.pop() |
||||
this.input = words.join(' ') + this.input.substr(this.cursorPos) |
||||
this.cursorPos = words.join(' ').length |
||||
} |
||||
|
||||
this.terminal.write(this.input) |
||||
this.terminal.write('\b'.repeat(this.input.length)) |
||||
this.terminal.moveForward(this.cursorPos) |
||||
this.terminal.write('') // dummy. Apply the moveFoward
|
||||
|
||||
if (action === 'return') { |
||||
this.terminal.write('\r\n') |
||||
this.parse(this.input) |
||||
} |
||||
} |
||||
parse (input) { |
||||
if (input === 'help') input = 'info' |
||||
// TODO: basic chaining (i.e. semicolon)
|
||||
this.run(input) |
||||
} |
||||
run (command) { |
||||
let parts = [''] |
||||
|
||||
let inQuote = false |
||||
for (let character of command.trim()) { |
||||
if (inQuote && character !== inQuote) { |
||||
parts[parts.length - 1] += character |
||||
} else if (inQuote) { |
||||
inQuote = false |
||||
} else if (character === '"' || character === "'") { |
||||
inQuote = character |
||||
} else if (character.match(/\s/)) { |
||||
if (parts[parts.length - 1]) parts.push('') |
||||
} else parts[parts.length - 1] += character |
||||
} |
||||
|
||||
let name = parts.shift() |
||||
if (name in this.index) { |
||||
this.spawn(name, parts) |
||||
} else { |
||||
this.terminal.write(`demosh: Unknown command: ${name}\r\n`) |
||||
this.prompt(false) |
||||
} |
||||
} |
||||
spawn (name, args = []) { |
||||
let Process = this.index[name] |
||||
if (Process instanceof Function) { |
||||
this.child = new Process(this) |
||||
let write = data => this.terminal.write(data) |
||||
this.child.on('write', write) |
||||
this.child.on('exit', code => { |
||||
if (this.child) this.child.off('write', write) |
||||
this.child = null |
||||
this.prompt(!code) |
||||
}) |
||||
this.child.run(...args) |
||||
} else { |
||||
this.terminal.write(Process) |
||||
this.prompt() |
||||
} |
||||
} |
||||
} |
||||
|
||||
window.demoInterface = { |
||||
input (data) { |
||||
let type = data[0] |
||||
let content = data.substr(1) |
||||
|
||||
if (type === 's') { |
||||
this.shell.write(content) |
||||
} else if (type === 'b') { |
||||
let button = content.charCodeAt(0) |
||||
let action = demoData.buttons[button] |
||||
if (action) { |
||||
if (typeof action === 'string') this.shell.write(action) |
||||
else if (action instanceof Function) action(this.terminal, this.shell) |
||||
} |
||||
} else if (type === 'm' || type === 'p' || type === 'r') { |
||||
console.log(JSON.stringify(data)) |
||||
} |
||||
}, |
||||
init (screen) { |
||||
this.terminal = new ScrollingTerminal(screen) |
||||
this.shell = new DemoShell(this.terminal, true) |
||||
} |
||||
} |
||||
@ -1,8 +1,8 @@ |
||||
// Generated from PHP locale file
|
||||
var _tr = { |
||||
let _tr = { |
||||
"wifi.connected_ip_is": "Connected, IP is ", |
||||
"wifi.not_conn": "Not connected.", |
||||
"wifi.enter_passwd": "Enter password for \":ssid:\"" |
||||
}; |
||||
|
||||
function tr(key) { return _tr[key] || '?'+key+'?'; } |
||||
function tr (key) { return _tr[key] || '?' + key + '?' } |
||||
@ -0,0 +1,63 @@ |
||||
/*! 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; |
||||
} |
||||
}()); |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
/** Module for toggling a modal overlay */ |
||||
(function () { |
||||
let modal = {} |
||||
let curCloseCb = null |
||||
|
||||
modal.show = function (sel, closeCb) { |
||||
let $m = $(sel) |
||||
$m.removeClass('hidden visible') |
||||
setTimeout(function () { |
||||
$m.addClass('visible') |
||||
}, 1) |
||||
curCloseCb = closeCb |
||||
} |
||||
|
||||
modal.hide = function (sel) { |
||||
let $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 |
||||
})() |
||||
@ -0,0 +1,65 @@ |
||||
window.Notify = (function () { |
||||
let nt = {} |
||||
const sel = '#notif' |
||||
let $balloon |
||||
|
||||
let timerHideBegin // timeout to start hiding (transition)
|
||||
let timerHideEnd // timeout to add the hidden class
|
||||
let timerCanCancel |
||||
let canCancel = false |
||||
|
||||
let stopTimeouts = function () { |
||||
clearTimeout(timerHideBegin) |
||||
clearTimeout(timerHideEnd) |
||||
} |
||||
|
||||
nt.show = function (message, timeout, isError) { |
||||
$balloon.toggleClass('error', isError === true) |
||||
$balloon.html(message) |
||||
Modal.show($balloon) |
||||
stopTimeouts() |
||||
|
||||
if (undef(timeout) || timeout === null || timeout <= 0) { |
||||
timeout = 2500 |
||||
} |
||||
|
||||
timerHideBegin = setTimeout(nt.hide, timeout) |
||||
|
||||
canCancel = false |
||||
timerCanCancel = setTimeout(function () { |
||||
canCancel = true |
||||
}, 500) |
||||
} |
||||
|
||||
nt.hide = function () { |
||||
let $m = $(sel) |
||||
$m.removeClass('visible') |
||||
timerHideEnd = setTimeout(function () { |
||||
$m.addClass('hidden') |
||||
}, 250) // transition time
|
||||
} |
||||
|
||||
nt.init = function () { |
||||
$balloon = $(sel) |
||||
|
||||
// close by click outside
|
||||
$(document).on('click', function () { |
||||
if (!canCancel) return |
||||
nt.hide(this) |
||||
}) |
||||
|
||||
// click caused by selecting, prevent it from bubbling
|
||||
$balloon.on('click', function (e) { |
||||
e.stopImmediatePropagation() |
||||
return false |
||||
}) |
||||
|
||||
// stop fading if moused
|
||||
$balloon.on('mouseenter', function () { |
||||
stopTimeouts() |
||||
$balloon.removeClass('hidden').addClass('visible') |
||||
}) |
||||
} |
||||
|
||||
return nt |
||||
})() |
||||
@ -0,0 +1,113 @@ |
||||
window.initSoftKeyboard = function (screen, input) { |
||||
const keyInput = qs('#softkb-input') |
||||
if (!keyInput) return // abort, we're not on the terminal page
|
||||
|
||||
let keyboardOpen = false |
||||
|
||||
let updateInputPosition = function () { |
||||
if (!keyboardOpen) return |
||||
|
||||
let [x, y] = screen.gridToScreen(screen.cursor.x, screen.cursor.y, true) |
||||
keyInput.style.transform = `translate(${x}px, ${y}px)` |
||||
} |
||||
|
||||
keyInput.addEventListener('focus', () => { |
||||
keyboardOpen = true |
||||
updateInputPosition() |
||||
}) |
||||
|
||||
keyInput.addEventListener('blur', () => (keyboardOpen = false)) |
||||
|
||||
screen.on('cursor-moved', updateInputPosition) |
||||
|
||||
let kbOpen = function (open) { |
||||
keyboardOpen = open |
||||
updateInputPosition() |
||||
if (open) keyInput.focus() |
||||
else keyInput.blur() |
||||
} |
||||
|
||||
qs('#term-kb-open').addEventListener('click', function () { |
||||
kbOpen(true) |
||||
return false |
||||
}) |
||||
|
||||
// Chrome for Android doesn't send proper keydown/keypress events with
|
||||
// real key values instead of 229 “Unidentified,” so here's a workaround
|
||||
// that deals with the input composition events.
|
||||
|
||||
let lastCompositionString = '' |
||||
let compositing = false |
||||
|
||||
// sends the difference between the last and the new composition string
|
||||
let sendInputDelta = function (newValue) { |
||||
let resend = false |
||||
if (newValue.length > lastCompositionString.length) { |
||||
if (newValue.startsWith(lastCompositionString)) { |
||||
// characters have been added at the end
|
||||
input.sendString(newValue.substr(lastCompositionString.length)) |
||||
} else resend = true |
||||
} else if (newValue.length < lastCompositionString.length) { |
||||
if (lastCompositionString.startsWith(newValue)) { |
||||
// characters have been removed at the end
|
||||
input.sendString('\b'.repeat(lastCompositionString.length - |
||||
newValue.length)) |
||||
} else resend = true |
||||
} else if (newValue !== lastCompositionString) resend = true |
||||
|
||||
if (resend) { |
||||
// the entire string changed; resend everything
|
||||
input.sendString('\b'.repeat(lastCompositionString.length) + |
||||
newValue) |
||||
} |
||||
lastCompositionString = newValue |
||||
} |
||||
|
||||
keyInput.addEventListener('keydown', e => { |
||||
if (e.key === 'Unidentified') return |
||||
|
||||
keyInput.value = '' |
||||
|
||||
if (e.key === 'Backspace') { |
||||
e.preventDefault() |
||||
input.sendString('\b') |
||||
} else if (e.key === 'Enter') { |
||||
e.preventDefault() |
||||
input.sendString('\x0d') |
||||
} |
||||
}) |
||||
|
||||
keyInput.addEventListener('keypress', e => { |
||||
// prevent key duplication on iOS (because Safari *does* send proper events)
|
||||
e.stopPropagation() |
||||
}) |
||||
|
||||
keyInput.addEventListener('input', e => { |
||||
e.stopPropagation() |
||||
|
||||
if (e.isComposing) { |
||||
sendInputDelta(e.data) |
||||
} else { |
||||
if (e.inputType === 'insertCompositionText') input.sendString(e.data) |
||||
else if (e.inputType === 'deleteContentBackward') { |
||||
lastCompositionString = '' |
||||
sendInputDelta('') |
||||
} else if (e.inputType === 'insertText') { |
||||
input.sendString(e.data) |
||||
} |
||||
} |
||||
}) |
||||
|
||||
keyInput.addEventListener('compositionstart', e => { |
||||
lastCompositionString = '' |
||||
compositing = true |
||||
}) |
||||
|
||||
keyInput.addEventListener('compositionend', e => { |
||||
lastCompositionString = '' |
||||
compositing = false |
||||
keyInput.value = '' |
||||
}) |
||||
|
||||
screen.on('open-soft-keyboard', () => keyInput.focus()) |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,97 @@ |
||||
/** Init the terminal sub-module - called from HTML */ |
||||
window.termInit = function (opts) { |
||||
let { labels, theme, allFn } = opts |
||||
|
||||
const screen = new TermScreen() |
||||
const conn = Conn(screen) |
||||
const input = Input(conn) |
||||
const termUpload = TermUpl(conn, input, screen) |
||||
screen.input = input |
||||
|
||||
conn.init() |
||||
input.init({ allFn }) |
||||
termUpload.init() |
||||
Notify.init() |
||||
|
||||
window.onerror = function (errorMsg, file, line, col) { |
||||
Notify.show(`<b>JS ERROR!</b><br>${errorMsg}<br>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 |
||||
} |
||||
@ -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
|
||||
} |
||||
} |
||||
@ -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 |
||||
} |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -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 |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
@ -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) |
||||
} |
||||
@ -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(`<div class="rssi">${ap.rssi_perc}</div>`) |
||||
.htmlAppend(`<div class="essid" title="${escapedSSID}">${escapedSSID}</div>`) |
||||
.htmlAppend(`<div class="auth">${authStr[ap.enc]}</div>`) |
||||
|
||||
$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 = {}) |
||||
@ -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; |
||||
} |
||||
}()); |
||||
} |
||||
@ -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; |
||||
})(); |
||||
@ -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 = {}); |
||||
@ -1,6 +0,0 @@ |
||||
/** Init the terminal sub-module - called from HTML */ |
||||
window.termInit = function () { |
||||
Conn.init(); |
||||
Input.init(); |
||||
TermUpl.init(); |
||||
}; |
||||
@ -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
|
||||
}; |
||||
})(); |
||||
@ -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; |
||||
} |
||||
}; |
||||
})(); |
||||
|
||||
@ -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<W*H) { |
||||
|
||||
j = str[i++]; |
||||
jc = j.charCodeAt(0); |
||||
if (jc == SEQ_SET_COLOR_ATTR) { |
||||
num = parse3B(str, i); i += 3; |
||||
fg = num & 0x0F; |
||||
bg = (num & 0xF0) >> 4; |
||||
attrs = (num & 0xFF00)>>8; |
||||
} |
||||
else if (jc == SEQ_SET_COLOR) { |
||||
num = parse2B(str, i); i += 2; |
||||
fg = num & 0x0F; |
||||
bg = (num & 0xF0) >> 4; |
||||
} |
||||
else if (jc == SEQ_SET_ATTR) { |
||||
num = parse2B(str, i); i += 2; |
||||
attrs = num & 0xFF; |
||||
} |
||||
else if (jc == SEQ_REPEAT) { |
||||
num = parse2B(str, i); i += 2; |
||||
// console.log("Repeat x ",num);
|
||||
for (; num>0 && ci<W*H; num--) { |
||||
cell = screen[ci++]; |
||||
cell.fg = fg; |
||||
cell.bg = bg; |
||||
cell.t = t; |
||||
cell.attrs = attrs; |
||||
} |
||||
} |
||||
else { |
||||
cell = screen[ci++]; |
||||
// Unique cell character
|
||||
t = cell.t = j; |
||||
cell.fg = fg; |
||||
cell.bg = bg; |
||||
cell.attrs = attrs; |
||||
// console.log("Symbol ", j);
|
||||
} |
||||
} |
||||
|
||||
_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); |
||||
} |
||||
} |
||||
|
||||
/** Apply labels to buttons and screen title (leading T removed already) */ |
||||
function _load_labels(str) { |
||||
var pieces = str.split('\x01'); |
||||
qs('h1').textContent = pieces[0]; |
||||
$('#action-buttons button').forEach(function(x, i) { |
||||
var s = pieces[i+1].trim(); |
||||
// if empty string, use the "dim" effect and put nbsp instead to stretch the btn vertically
|
||||
x.innerHTML = s.length > 0 ? e(s) : " "; |
||||
x.style.opacity = s.length > 0 ? 1 : 0.2; |
||||
}) |
||||
} |
||||
|
||||
/** Audible beep for ASCII 7 */ |
||||
function _beep() { |
||||
var osc, gain; |
||||
if (!audioCtx) return; |
||||
|
||||
// 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); |
||||
} |
||||
|
||||
/** Load screen content from a binary sequence (new) */ |
||||
function load(str) { |
||||
//console.log(JSON.stringify(str));
|
||||
var content = str.substr(1); |
||||
switch(str.charAt(0)) { |
||||
case 'S': |
||||
_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 { |
||||
load: load, // full load (string)
|
||||
}; |
||||
})(); |
||||
@ -1,146 +0,0 @@ |
||||
/** File upload utility */ |
||||
var TermUpl = (function() { |
||||
var 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
|
||||
var MAX_LINE_LEN = 128; |
||||
|
||||
function fuOpen() { |
||||
fuStatus("Ready..."); |
||||
Modal.show('#fu_modal', onClose); |
||||
$('#fu_form').toggleClass('busy', false); |
||||
Input.blockKeys(true); |
||||
} |
||||
|
||||
function onClose() { |
||||
console.log("Upload modal closed."); |
||||
clearTimeout(fuTout); |
||||
line_i = 0; |
||||
Input.blockKeys(false); |
||||
} |
||||
|
||||
function fuStatus(msg) { |
||||
qs('#fu_prog').textContent = msg; |
||||
} |
||||
|
||||
function fuSend() { |
||||
var 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); |
||||
fuStatus("Starting..."); |
||||
fuSendLine(); |
||||
} |
||||
|
||||
function fuSendLine() { |
||||
if (!$('#fu_modal').hasClass('visible')) { |
||||
// Modal is closed, cancel
|
||||
return; |
||||
} |
||||
|
||||
if (!Conn.canSend()) { |
||||
// postpone
|
||||
fuTout = setTimeout(fuSendLine, 1); |
||||
return; |
||||
} |
||||
|
||||
if (inline_pos == 0) { |
||||
curLine = lines[line_i++] + nl_str; |
||||
} |
||||
|
||||
var 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; |
||||
} |
||||
|
||||
if (!Input.sendString(chunk)) { |
||||
fuStatus("FAILED!"); |
||||
return; |
||||
} |
||||
|
||||
var all = lines.length; |
||||
|
||||
fuStatus(line_i+" / "+all+ " ("+(Math.round((line_i/all)*1000)/10)+"%)"); |
||||
|
||||
if (lines.length > line_i || inline_pos > 0) { |
||||
fuTout = setTimeout(fuSendLine, send_delay_ms); |
||||
} else { |
||||
closeWhenReady(); |
||||
} |
||||
} |
||||
|
||||
function closeWhenReady() { |
||||
if (!Conn.canSend()) { |
||||
// stuck in XOFF still, wait to process...
|
||||
fuStatus("Waiting for Tx buffer..."); |
||||
setTimeout(closeWhenReady, 100); |
||||
} else { |
||||
fuStatus("Done."); |
||||
// delay to show it
|
||||
setTimeout(function() { |
||||
fuClose(); |
||||
}, 100); |
||||
} |
||||
} |
||||
|
||||
function fuClose() { |
||||
Modal.hide('#fu_modal'); |
||||
} |
||||
|
||||
return { |
||||
init: function() { |
||||
qs('#fu_file').addEventListener('change', function (evt) { |
||||
var reader = new FileReader(); |
||||
var 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) { |
||||
var txt = e.target.result.replace(/[\r\n]+/,'\n'); |
||||
qs('#fu_text').value = txt; |
||||
}; |
||||
console.log("Loading file..."); |
||||
reader.readAsText(file); |
||||
}, false); |
||||
}, |
||||
close: fuClose, |
||||
start: fuSend, |
||||
open: fuOpen, |
||||
} |
||||
})(); |
||||
@ -1,161 +0,0 @@ |
||||
/** 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(); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
/** Extend an objects with options */ |
||||
function extend(defaults, options) { |
||||
var target = {}; |
||||
|
||||
Object.keys(defaults).forEach(function(k){ |
||||
target[k] = defaults[k]; |
||||
}); |
||||
|
||||
Object.keys(options).forEach(function(k){ |
||||
target[k] = options[k]; |
||||
}); |
||||
|
||||
return target; |
||||
} |
||||
|
||||
/** Escape string for use as literal in RegExp */ |
||||
function rgxe(str) { |
||||
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); |
||||
} |
||||
|
||||
/** Format number to N decimal places, output as string */ |
||||
function numfmt(x, places) { |
||||
var pow = Math.pow(10, places); |
||||
return Math.round(x*pow) / pow; |
||||
} |
||||
|
||||
/** Get millisecond timestamp */ |
||||
function msNow() { |
||||
return +(new Date); |
||||
} |
||||
|
||||
/** Get ms elapsed since msNow() */ |
||||
function msElapsed(start) { |
||||
return msNow() - start; |
||||
} |
||||
|
||||
/** Shim for log base 10 */ |
||||
Math.log10 = Math.log10 || function(x) { |
||||
return Math.log(x) / Math.LN10; |
||||
}; |
||||
|
||||
/** |
||||
* Perform a substitution in the given string. |
||||
* |
||||
* Arguments - array or list of replacements. |
||||
* Arguments numeric keys will replace {0}, {1} etc. |
||||
* Named keys also work, ie. {foo: "bar"} -> replaces {foo} with bar. |
||||
* |
||||
* Braces are added to keys if missing. |
||||
* |
||||
* @returns {String} result |
||||
*/ |
||||
String.prototype.format = function () { |
||||
var out = this; |
||||
var repl = arguments; |
||||
|
||||
if (arguments.length == 1 && (Array.isArray(arguments[0]) || typeof arguments[0] == 'object')) { |
||||
repl = arguments[0]; |
||||
} |
||||
|
||||
for (var ph in repl) { |
||||
if (repl.hasOwnProperty(ph)) { |
||||
var ph_orig = ph; |
||||
|
||||
if (!ph.match(/^\{.*\}$/)) { |
||||
ph = '{' + ph + '}'; |
||||
} |
||||
|
||||
// replace all occurrences
|
||||
var pattern = new RegExp(rgxe(ph), "g"); |
||||
out = out.replace(pattern, repl[ph_orig]); |
||||
} |
||||
} |
||||
|
||||
return out; |
||||
}; |
||||
|
||||
/** HTML escape */ |
||||
function e(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) { |
||||
return (s.charCodeAt(i++) - 1) + (s.charCodeAt(i) - 1) * 127; |
||||
} |
||||
|
||||
/** Decode number from 3B encoding */ |
||||
function parse3B(s, i) { |
||||
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) { |
||||
var 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) { |
||||
var 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); |
||||
} |
||||
@ -1,163 +0,0 @@ |
||||
(function(w) { |
||||
var authStr = ['Open', 'WEP', 'WPA', 'WPA2', 'WPA/WPA2']; |
||||
var 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(e(name)); |
||||
var 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; |
||||
} |
||||
|
||||
var done = !bool(resp.result.inProgress) && (resp.result.APs.length > 0); |
||||
rescan(done ? 15000 : 1000); |
||||
if (!done) return; // no redraw yet
|
||||
|
||||
// clear the AP list
|
||||
var $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
|
||||
|
||||
var item = mk('div'); |
||||
|
||||
var $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'); |
||||
} |
||||
|
||||
var inner = mk('div'); |
||||
$(inner).addClass('inner') |
||||
.htmlAppend('<div class="rssi">{0}</div>'.format(ap.rssi_perc)) |
||||
.htmlAppend('<div class="essid" title="{0}">{0}</div>'.format($.htmlEscape(ap.essid))) |
||||
.htmlAppend('<div class="auth">{0}</div>'.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 = {}); |
||||
@ -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 $@" |
||||
} |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,115 @@ |
||||
@media print { |
||||
.Row.buttons, nav { |
||||
display: none !important; |
||||
} |
||||
.Row.buttons .button { |
||||
display: none !important; |
||||
} |
||||
|
||||
h1, h2, h3 { |
||||
// chrome ignores those :( |
||||
break-after: avoid-page!important; |
||||
page-break-after: avoid!important; |
||||
font-family: sans-serif; |
||||
} |
||||
|
||||
html, body { |
||||
background: white; |
||||
color: black; |
||||
font-family: serif; |
||||
//font-size: 12pt; |
||||
line-height: 1.3em; |
||||
} |
||||
|
||||
label, p { |
||||
color: black !important; |
||||
text-shadow: none !important; |
||||
} |
||||
|
||||
.Box { |
||||
box-shadow: none; |
||||
} |
||||
|
||||
input, select, button { |
||||
background: white !important; |
||||
color: black !important; |
||||
border: 1px solid black !important; |
||||
} |
||||
|
||||
a { |
||||
color: #004eff !important; |
||||
} |
||||
|
||||
a[href^="http://"]::after, |
||||
a[href^="https://"]::after { |
||||
content: attr(href); |
||||
padding-left: .8ex; |
||||
text-decoration: underline !important; |
||||
} |
||||
p a { |
||||
word-wrap: break-word; |
||||
} |
||||
|
||||
.Row.checkbox .box { |
||||
border-color: black; |
||||
border-radius: 3px; |
||||
background: white; |
||||
color: black; |
||||
} |
||||
|
||||
.button { |
||||
background: white; border: 1px solid black; |
||||
text-shadow: none !important; |
||||
color: black; |
||||
box-shadow: none; |
||||
text-decoration: underline !important; |
||||
} |
||||
|
||||
[class^="icn-"], [class*=" icn-"] { |
||||
&::before { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
.Box .Row { |
||||
display: block !important; |
||||
} |
||||
|
||||
.Box.fold h2::after { |
||||
display: none; |
||||
} |
||||
|
||||
#outer { |
||||
display: block; |
||||
overflow: auto; |
||||
width: unset; |
||||
height: unset; |
||||
position: static; |
||||
} |
||||
|
||||
html, body { |
||||
overflow: auto !important; |
||||
width: unset; height: unset; |
||||
} |
||||
|
||||
.Box { |
||||
padding: 0; border: 0 none; |
||||
} |
||||
|
||||
.charset div span:nth-child(1), |
||||
.charset div span:nth-child(2) { |
||||
color: #666; |
||||
} |
||||
|
||||
.page-help code { |
||||
background: rgba(0, 215, 255, 0.31); |
||||
} |
||||
|
||||
[noprint] { |
||||
display: none !important; |
||||
} |
||||
|
||||
#content tbody th { |
||||
color: black !important; |
||||
} |
||||
} |
||||
@ -1,3 +1,3 @@ |
||||
#!/bin/bash |
||||
|
||||
xterm -e "php -S 0.0.0.0:2000" |
||||
xterm -e "php -S 0.0.0.0:2000 _dev_router.php" |
||||
|
||||
Loading…
Reference in new issue