You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
324 lines
6.6 KiB
324 lines
6.6 KiB
(function() {
|
|
/**
|
|
* Terminal module
|
|
*/
|
|
var Term = (function () {
|
|
var W, H;
|
|
var cursor = {a: false, x: 0, y: 0, suppress: false, hidden: false};
|
|
var screen = [];
|
|
var blinkIval;
|
|
|
|
/** Colors table */
|
|
var CLR = [// dark gray #2E3436
|
|
// 0 black, 1 red, 2 green, 3 yellow
|
|
// 4 blue, 5 mag, 6 cyan, 7 white
|
|
'#111213','#CC0000','#4E9A06','#C4A000',
|
|
'#3465A4','#75507B','#06989A','#D3D7CF',
|
|
// BRIGHT
|
|
// 8 black, 9 red, 10 green, 11 yellow
|
|
// 12 blue, 13 mag, 14 cyan, 15 white
|
|
'#555753','#EF2929','#8AE234','#FCE94F',
|
|
'#729FCF','#AD7FA8','#34E2E2','#EEEEEC'
|
|
];
|
|
|
|
/** Clear screen */
|
|
function cls() {
|
|
screen.forEach(function(cell, i) {
|
|
cell.t = ' ';
|
|
cell.fg = 7;
|
|
cell.bg = 0;
|
|
blit(cell);
|
|
});
|
|
}
|
|
|
|
/** Set text and color at XY */
|
|
function cellAt(y, x) {
|
|
return screen[y*W+x];
|
|
}
|
|
|
|
/** Get cell under cursor */
|
|
function cursorCell() {
|
|
return cellAt(cursor.y, cursor.x);
|
|
}
|
|
|
|
/** Enable or disable cursor visibility */
|
|
function cursorEnable(enable) {
|
|
cursor.hidden = !enable;
|
|
cursor.a &= enable;
|
|
blit(cursorCell(), cursor.a);
|
|
}
|
|
|
|
/** Safely move cursor */
|
|
function cursorSet(y, x) {
|
|
// Hide and prevent from showing up during the move
|
|
cursor.suppress = true;
|
|
blit(cursorCell(), false);
|
|
|
|
cursor.x = x;
|
|
cursor.y = y;
|
|
|
|
// Show again
|
|
cursor.suppress = false;
|
|
blit(cursorCell(), cursor.a);
|
|
}
|
|
|
|
/** Update cell on display. inv = invert (for cursor) */
|
|
function blit(cell, inv) {
|
|
var e = cell.e, fg, bg;
|
|
// Colors
|
|
fg = inv ? cell.bg : cell.fg;
|
|
bg = inv ? cell.fg : cell.bg;
|
|
// Update
|
|
e.innerText = (cell.t+' ')[0];
|
|
e.classList.className = 'fg'+fg+' bg'+bg;
|
|
// e.style.color = colorHex(fg);
|
|
// e.style.backgroundColor = colorHex(bg);
|
|
// e.style.fontWeight = fg > 7 ? 'bold' : 'normal';
|
|
}
|
|
|
|
/** Show entire screen */
|
|
function blitAll() {
|
|
screen.forEach(function(cell, i) {
|
|
/* Invert if under cursor & cursor active */
|
|
var inv = cursor.a && (i == cursor.y*W+cursor.x);
|
|
blit(cell, inv);
|
|
});
|
|
}
|
|
|
|
/** Load screen content from a 'binary' sequence */
|
|
function load(obj) {
|
|
cursor.x = obj.x;
|
|
cursor.y = obj.y;
|
|
cursor.hidden = !obj.cv;
|
|
|
|
// full re-init if size changed
|
|
if (obj.w != W || obj.h != H) {
|
|
Term.init(obj);
|
|
return;
|
|
}
|
|
|
|
// Simple compression - hexFG hexBG 'ASCII' (r/s/t/u NUM{1,2,3,4})?
|
|
// comma instead of both colors = same as before
|
|
|
|
var i = 0, ci = 0, str = obj.screen;
|
|
var fg = 7, bg = 0;
|
|
while(i < str.length && ci<W*H) {
|
|
var cell = screen[ci++];
|
|
|
|
var j = str[i];
|
|
if (j != ',') { // comma = repeat last colors
|
|
fg = cell.fg = parseInt(str[i++], 16);
|
|
bg = cell.bg = parseInt(str[i++], 16);
|
|
} else {
|
|
i++;
|
|
cell.fg = fg;
|
|
cell.bg = bg;
|
|
}
|
|
|
|
var t = cell.t = str[i++];
|
|
|
|
var repchars = 0;
|
|
switch(str[i]) {
|
|
case 'r': repchars = 1; break;
|
|
case 's': repchars = 2; break;
|
|
case 't': repchars = 3; break;
|
|
case 'u': repchars = 4; break;
|
|
default: repchars = 0;
|
|
}
|
|
|
|
if (repchars > 0) {
|
|
var rep = parseInt(str.substr(i+1,repchars));
|
|
i = i + repchars + 1;
|
|
for (; rep>0 && ci<W*H; rep--) {
|
|
cell = screen[ci++];
|
|
cell.fg = fg;
|
|
cell.bg = bg;
|
|
cell.t = t;
|
|
}
|
|
}
|
|
}
|
|
|
|
blitAll();
|
|
}
|
|
|
|
/** Parse color */
|
|
function colorHex(c) {
|
|
c = parseInt(c);
|
|
if (c < 0 || c > 15) c = 0;
|
|
return CLR[c];
|
|
}
|
|
|
|
/** Init the terminal */
|
|
function init(obj) {
|
|
W = obj.w;
|
|
H = obj.h;
|
|
|
|
/* Build screen & show */
|
|
var e, cell, scr = qq('#screen');
|
|
|
|
// Empty the screen node
|
|
while (scr.firstChild) scr.removeChild(scr.firstChild);
|
|
|
|
screen = [];
|
|
|
|
for(var i = 0; i < W*H; i++) {
|
|
e = mk('span');
|
|
|
|
(function() {
|
|
var x = i % W;
|
|
var y = Math.floor(i / W);
|
|
e.addEventListener('click', function () {
|
|
Input.onTap(y, x);
|
|
});
|
|
})();
|
|
|
|
/* End of line */
|
|
if ((i > 0) && (i % W == 0)) {
|
|
scr.appendChild(mk('br'));
|
|
}
|
|
/* The cell */
|
|
scr.appendChild(e);
|
|
|
|
cell = {t: ' ', fg: 7, bg: 0, e: e};
|
|
screen.push(cell);
|
|
blit(cell);
|
|
}
|
|
|
|
/* Cursor blinking */
|
|
clearInterval(blinkIval);
|
|
blinkIval = setInterval(function() {
|
|
cursor.a = !cursor.a;
|
|
if (cursor.hidden) {
|
|
cursor.a = false;
|
|
}
|
|
|
|
if (!cursor.suppress) {
|
|
blit(cursorCell(), cursor.a);
|
|
}
|
|
}, 500);
|
|
|
|
load(obj);
|
|
}
|
|
|
|
// publish
|
|
return {
|
|
init: init,
|
|
load: load
|
|
};
|
|
})();
|
|
|
|
/** Handle connections */
|
|
var Conn = (function() {
|
|
var ws;
|
|
|
|
function onOpen(evt) {
|
|
console.log("CONNECTED");
|
|
}
|
|
|
|
function onClose(evt) {
|
|
console.error("SOCKET CLOSED");
|
|
}
|
|
|
|
function onMessage(evt) {
|
|
try {
|
|
console.log("RX: ", evt.data);
|
|
// Assume all our messages are screen updates
|
|
Term.load(JSON.parse(evt.data));
|
|
} catch(e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
function onError(evt) {
|
|
console.error(evt.data);
|
|
}
|
|
|
|
function doSend(message) {
|
|
console.log("TX: ", message);
|
|
if (ws.readyState != 1) {
|
|
console.error("Socket not ready");
|
|
return;
|
|
}
|
|
if (typeof message != "string") {
|
|
message = JSON.stringify(message);
|
|
}
|
|
ws.send(message);
|
|
}
|
|
|
|
function init() {
|
|
ws = new WebSocket("ws://"+_root+"/ws/update.cgi");
|
|
ws.onopen = onOpen;
|
|
ws.onclose = onClose;
|
|
ws.onmessage = onMessage;
|
|
ws.onerror = onError;
|
|
|
|
console.log("Opening socket.");
|
|
}
|
|
|
|
return {
|
|
ws: null,
|
|
init: init,
|
|
send: doSend
|
|
};
|
|
})();
|
|
|
|
//
|
|
// Keyboard (& mouse) input
|
|
//
|
|
var Input = (function() {
|
|
function sendStrMsg(str) {
|
|
Conn.send("STR:"+str);
|
|
}
|
|
|
|
function sendPosMsg(y, x) {
|
|
Conn.send("TAP:"+y+','+x);
|
|
}
|
|
|
|
function sendBtnMsg(n) {
|
|
Conn.send("BTN:"+n);
|
|
}
|
|
|
|
function init() {
|
|
window.addEventListener('keypress', function(e) {
|
|
var code = +e.which;
|
|
if (code >= 32 && code < 127) {
|
|
var ch = String.fromCharCode(code);
|
|
//console.log("Typed ", ch, "code", code, e);
|
|
sendStrMsg(ch);
|
|
}
|
|
});
|
|
|
|
window.addEventListener('keydown', function(e) {
|
|
var code = e.keyCode;
|
|
//console.log("Down ", code, e);
|
|
switch(code) {
|
|
case 8: sendStrMsg('\x08'); break;
|
|
case 13: sendStrMsg('\x0d\x0a'); break;
|
|
case 27: sendStrMsg('\x1b'); break; // this allows to directly enter control sequences
|
|
case 37: sendStrMsg('\x1b[D'); break;
|
|
case 38: sendStrMsg('\x1b[A'); break;
|
|
case 39: sendStrMsg('\x1b[C'); break;
|
|
case 40: sendStrMsg('\x1b[B'); break;
|
|
}
|
|
});
|
|
|
|
qa('#buttons button').forEach(function(s) {
|
|
s.addEventListener('click', function() {
|
|
sendBtnMsg(+this.dataset['n']);
|
|
});
|
|
});
|
|
}
|
|
|
|
return {
|
|
init: init,
|
|
onTap: sendPosMsg
|
|
};
|
|
})();
|
|
|
|
|
|
window.termInit = function (obj) {
|
|
Term.init(obj);
|
|
Conn.init();
|
|
Input.init();
|
|
}
|
|
})();
|
|
|