mattburchett/webglmapview
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add websocket client

Browse Source
This commit is contained in:
Robert L 2018-01-09 10:27:33 -05:00
parent 67a3b386d3
commit 4f526b39c6
6 changed files with 2209 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
js/GUI.Utils.js
View File

@ -62,6 +62,14 @@ $(document).ready(function() {
var predicted = predictDestination(new THREE.Vector3(Number($('#x').val()),Number($('#y').val()),Number($('#z').val())),new THREE.Vector2(Number($('#azmuth').val()),Number($('#inclination').val())),$('#intel_frame option:selected').val()); var predicted = predictDestination(new THREE.Vector3(Number($('#x').val()),Number($('#y').val()),Number($('#z').val())),new THREE.Vector2(Number($('#azmuth').val()),Number($('#inclination').val())),$('#intel_frame option:selected').val());
$('#intel_predicted').html(predicted); $('#intel_predicted').html(predicted);
}); });
$('#client-bar-control').click(function() {
$('#client-term-container').toggleClass("hidden");
$('#client-ico-down').toggleClass("hidden");
$('#client-ico-up').toggleClass("hidden");
});
$('#client-login').click(function() { reconnect();})
startup();
}); });

561
js/local.js Normal file
View File

@ -0,0 +1,561 @@
// A Simple WSClient for PennMUSH
// -grapenut
var defaultHost = "ats.trekmush.org";
var defaultPort = '1701';
// pre-define the connection object, later it will be set to
// conn = WSClient.open('ws://host:port/wsclient')
var conn = null;
// user information
var login = document.getElementById('client-login');
var username = document.getElementById('username');
var password = document.getElementById('password');
// terminal is the container for output, cmdprompt, quicklinks and the entry box.
var terminal = document.getElementById('client-term');
// the main terminal output window
var output = WSClient.output(document.getElementById('client-term-output'));
// update the command prompt without modifying the main output
var cmdprompt = WSClient.output(document.getElementById('client-term-prompt'));
// clickable command links that do some common tasks (who, look, @mail, etc)
var quicklinks = document.getElementById('quicklinks');
// the user input box
var entry = WSClient.input(document.getElementById('client-term-entry'));
// settings popup and the different configuration options
/*var settingsContainer = document.getElementById('settings-container');
var settingsForm = document.getElementById('settings');
var fontSelect = document.getElementById('fontSelect');
var fontSize = document.getElementById('fontSize');
var fontBold = document.getElementById('fontBold');
var forceSSL = document.getElementById('forceSSL');
var keepAliveTime = document.getElementById('keepAliveTime');
var keepAliveLabel = document.getElementById('keepAliveLabel');
*/
// info window (show the credits)
//var infoContainer = document.getElementById('info-container');
/***********************************************/
/** Body **/
// called by body.onLoad
function startup() {
// load browser cookie and parse settings
//settings.load();
// set the initial screen dimensions (use for multi-window output)
// terminal.style.left = settings.SCREEN_LEFT + 'em';
// terminal.style.right = settings.SCREEN_RIGHT + 'em';
// terminal.style.top = settings.SCREEN_TOP + 'em';
// terminal.style.bottom = settings.SCREEN_BOT + 'em';
// set some obvious ChangeMe values if there are none saved
// if (username.value === '') {
// username.value = 'Username';
// }
/*
if (password.value === '') {
password.value = 'Password';
}
// autoconnect, if desired
settings.autoConnect.val && reconnect();
*/
// start the keepalive loop
keepalive();
// set focus on the input box
//refocus();
};
// called by body.onUnload
function shutdown() {
// if we have an active connection,
// send a QUIT command and exit gracefully
if (conn && conn.socket.readyState === 1) {
conn.sendText('QUIT');
setTimeout(conn.close, 1000);
}
conn = null;
};
/***********************************************/
/** Callbacks **/
// the user pressed enter
entry.onEnter = function(cmd) {
// detect whether we have an overlay showing and close it
/* if (settingsContainer.style.visibility === 'visible') {
settings.save();
} else if (infoContainer.style.visibility === 'visible') {
infoContainer.style.visibility = 'hidden';
} else { */
// no overlay, submit user input
if (conn && conn.socket.readyState === 1) {
// send current user input to the MUSH
conn.sendText(cmd);
// and echo to the terminal
settings.localEcho.val && msg(cmd);
} else {
// auto-reconnect if the connection was lost
settings.autoReConnect.val && reconnect();
}
//}
};
// the user pressed escape
/* entry.onEscape = function() {
toggle_overlays();
}; */
/* settingsForm.onsubmit = function () {
settings.save();
entry.focus();
return false;
}; */
/*
settingsForm.onkeydown = function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 27) {
// escape pressed, toggle form input and delete command elements
toggle_overlay();
}
};
*/
// automatically update port +/- 1 when forceSSL is changed
// 4201 -> 4202 with ssl
// this maybe is a bit awkward, but I didn't come up with a better idea
/*forceSSL.onchange = function() {
if (forceSSL.checked) {
serverPort.value = parseInt(serverPort.value) + 1;
} else {
serverPort.value = parseInt(serverPort.value) - 1;
}
};
*/
/*
// close the info window on any key press
infoContainer.onkeydown = function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
toggle_overlay();
};
*/
/***********************************************/
/** Focus **/
// put focus back on the user input box
// unless it's in another input box (e.g. username/password/settings)
function refocus() {
if (((window.getSelection == "undefined") ||
(window.getSelection() == "")) &&
((document.getSelection == "undefined") ||
(document.getSelection() == "")) &&
!((document.activeElement.tagName === "INPUT") &&
(document.activeElement.type.search(/image/gi) === -1)))
{
entry.focus();
}
};
// move the input cursor to the end of the input elements current text
function move_cursor_to_end(el) {
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
el.focus();
var range = el.createTextRange();
range.collapse(false);
range.select();
}
};
/*
// close anything that may be showing or bring up the settings
function toggle_overlay() {
if (settingsContainer.style.visibility === 'visible') {
settings.show();
settings.reconfigure();
} else if (infoContainer.style.visibility === 'visible') {
infoContainer.style.visibility = 'hidden';
} else {
// no overlay, bring up settings
settings.show();
}
entry.focus();
};
*/
/***********************************************/
/** Terminal **/
// send a log message to the terminal output
function msg(data) {
output.appendMessage('logMessage', data);
};
function xch_cmd(command) {
output.onCommand(command);
};
// execute pueblo command
// a '??' token in command will be replaced with user input
output.onCommand = function (command) {
var cmd = WSClient.parseCommand(command);
// send the parsed command to the MUSH
conn && conn.sendText(cmd);
settings.localEcho.val && msg(cmd);
};
// clear the child elements from any element (like the output window)
function clearscreen () {
output.clear();
cmdprompt.clear();
entry.clear();
};
// keepalive function continually calls itself and sends the IDLE command
function keepalive () {
conn && settings.keepAlive.val && conn.sendText("IDLE");
setTimeout(keepalive, settings.keepAliveTime.val*1000.0);
};
// connect or reconnect to the MUSH
function reconnect() {
// we can't do websockets, redirect to 505
if (!window.WebSocket){
window.location.replace("/505.htm");
}
entry.focus();
// clean up the old connection gracefully
if (conn) {
var old = conn;
old.sendText('QUIT');
setTimeout(function () { old.close(); }, 1000);
conn = null;
}
msg('%% Reconnecting to server...\r\n');
// detect whether to use SSL or not
var proto = ((window.location.protocol == "https:") || settings.forceSSL.val) ? 'wss://' : 'ws://';
// open a new connection to ws://host:port/wsclient
conn = WSClient.connect(proto + settings.serverAddress.val + ":" + settings.serverPort.val + '/wsclient');
// auto-login if username and password are not the default values
conn.onOpen = function (text) {
msg("%% Connected.");
// if (username.value.toUpperCase() !== "USERNAME" && username.value !== "") {
// setTimeout(function () {
// conn.sendText('connect "' + username.value + '" ' + password.value);
// }, 4000);
//}
};
// send a log message if there is a connection error
conn.onError = function (evt) {
msg("%% Connection error!");
console.log('error', evt);
};
// send a log message when connection closed
conn.onClose = function (evt) {
msg("%% Connection closed.");
console.log('close', evt);
};
// handle incoming plain text
// this will parse ansi color codes, but won't render untrusted HTML
conn.onText = function (text) {
var reg = /^FugueEdit > /;
// detect if we are capturing a FugueEdit string
if (text.search(reg) !== -1) {
// replace the user input with text, sans the FugueEdit bit
entry.value = text.replace(reg, "");
} else {
// append text to the output window
output.appendText(text);
}
};
// handle incoming JSON object
conn.onObject = function (obj) {
// just send a log message
// could use this for lots of neat stuff
// maps, huds, combat logs in a separate window
console.log('object', obj);
};
// handle incoming HTML from the MUSH
// it's already been encoded and trusted by the MUSH
conn.onHTML = function (fragment) {
// just append it to the terminal output
output.appendHTML(fragment);
};
// handle incoming pueblo tags
// currently implements xch_cmd and xch_hint
conn.onPueblo = function (tag, attrs) {
// just append it to the terminal output
output.appendPueblo(tag, attrs);
};
// handle incoming command prompt
conn.onPrompt = function (text) {
// replace anything in cmdprompt with text
// cmdprompt is an emulated terminal, so use appendText() to get ansi parsed
cmdprompt.root.innerHTML = '';
cmdprompt.appendText(text + '\r\n');
};
};
/***********************************************/
/** Settings **/
var SettingsClass = (function (window, document, undefined) {
this.localEcho = {val: true};
this.autoConnect = {val: true};
this.autoReConnect = {val: true};
this.numInputLines = {val: 3};
this.serverAddress = {val: defaultHost};
this.serverPort = {val: defaultPort};
this.forceSSL = {val: false};
this.keepAlive = {val: true};
this.keepAliveTime = {val: 600};
this.fontSelect = {val: "Courier New"};
this.fontSize = {val: 10};
this.fontBold = {val: false};
this.SCREEN_TOP = 3;
this.SCREEN_BOT = 3;
this.SCREEN_LEFT = 3;
this.SCREEN_RIGHT = 3;
this.doc = document;
// settingsContainer.style.visibility = 'hidden';
/////////////////////////////////////
this.updateFonts = function() {
document.body.style.fontFamily = fontSelect.value + ", 'Courier New', monospace";
document.body.style.fontSize = fontSize.value + 'pt';
document.body.style.fontWeight = (fontBold.checked ? "bold" : "normal");;
keepAliveLabel.innerHTML='KeepAlive('+keepAliveTime.value+'s)';
};
/* this.show = function () {
if (settingsContainer.style.visibility === 'visible') {
// settingsContainer.style.visibility = 'hidden';
// this.reconfigure();
} else {
// restore form values from actual settings
var opts = document.getElementsByClassName('option');
for (var i=0; i < opts.length; i++)
{
var opt = this[opts[i].id];
if (opt) {
if (opts[i].type.toUpperCase() === 'CHECKBOX') {
opts[i].checked = opt.val;
} else {
opts[i].value = opt.val;
}
}
}
settingsContainer.style.visibility = 'visible';
}
};
*/
this.cookie = function (c_name) {
var c_value = this.doc.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1) {
c_value = null;
} else {
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1) {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
};
/*
// Load values from cookies, or save the cookie on first visitl
this.load = function () {
var opts = document.getElementsByClassName('option');
var exdate=new Date();
exdate.setDate(exdate.getDate() + 365*10);
for (var i = 0; i < opts.length; i++)
{
var opt = this[opts[i].id];
if (opt) {
if (opts[i].type.toUpperCase() === 'CHECKBOX') {
var val = this.cookie(opts[i].id);
if (val && val != 'undefined') {
opt.val = (val.toUpperCase() === 'TRUE');
} else {
this.doc.cookie = opts[i].id + "=" + opt.val
}
opts[i].checked = opt.val;
} else {
var val = this.cookie(opts[i].id);
if (val && val != 'undefined') {
opt.val = val;
} else {
this.doc.cookie = opts[i].id + "=" + opt.val
}
opts[i].value = opt.val;
}
}
}
// this.reconfigure();
};
*/
// Save form values to settings values, and settings values to cookies
this.save = function () {
var opts = document.getElementsByClassName('option');
var exdate=new Date();
exdate.setDate(exdate.getDate() + 365*10);
for (var i = 0; i < opts.length; i++)
{
var opt = this[opts[i].id];
// copy form values to settings values
if (opt) {
if (opts[i].type.toUpperCase() === 'CHECKBOX') {
if (opts[i].checked !== opt.val) {
opt.val = opts[i].checked;
}
} else {
if (opts[i].value !== opt.val) {
opt.val = opts[i].value;
}
}
// save settings value to cookie
this.doc.cookie=opts[i].id + "=" + opt.val + "; expires="+exdate.toUTCString();
}
}
// this.reconfigure();
// toggle visibility
// settingsContainer.style.visibility = 'hidden';
};
// Resize or otherwise modify the output window to reflect the new settings
/* this.reconfigure = function() {
document.body.style.fontFamily = this.fontSelect.val + ", 'Courier New', monospace";
document.body.style.fontSize = this.fontSize.val + 'pt';
document.body.style.fontWeight = (this.fontBold.val ? "bold" : "normal");;
output.root.style.bottom = 4.0+parseInt(this.numInputLines.val) + 'em';
quicklinks.style.bottom = 2.0+parseInt(this.numInputLines.val) + 'em';
cmdprompt.root.style.bottom = 1.0+parseInt(this.numInputLines.val) + 'em';
entry.root.style.height = parseInt(this.numInputLines.val) + 'em';
keepAliveLabel.innerHTML='KeepAlive('+keepAliveTime.value+'s)';
};
*/
});
var settings = new SettingsClass(window,document,undefined);

985
js/wsclient.js Normal file
View File

@ -0,0 +1,985 @@
//////////////////////////////////////////////////////////////////
// WebSockClient for PennMUSH
// There is no license. Just make a neato game with it.
//////////////////////////////////////////////////////////////////
var WSClient = (function (window, document, undefined) {
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
// MU* protocol carried over the WebSocket API.
function Connection(url) {
var that = this;
this.url = url;
this.socket = null;
this.isOpen = false;
Connection.reconnect(that);
}
Connection.CHANNEL_TEXT = 't';
Connection.CHANNEL_JSON = 'j';
Connection.CHANNEL_HTML = 'h';
Connection.CHANNEL_PUEBLO = 'p';
Connection.CHANNEL_PROMPT = '>';
Connection.reconnect = function (that) {
that.reconnect();
};
Connection.onopen = function (that, evt) {
that.isOpen = true;
that.onOpen && that.onOpen(evt);
};
Connection.onerror = function (that, evt) {
that.onError && that.onError(evt);
};
Connection.onclose = function (that, evt) {
that.onClose && that.onClose(evt);
};
Connection.onmessage = function (that, evt) {
that.onMessage && that.onMessage(evt.data[0], evt.data.substring(1));
};
Connection.prototype.reconnect = function () {
var that = this;
// quit the old connection, if we have one
if (this.socket) {
var old = this.socket;
this.sendText('QUIT');
setTimeout(old.close, 1000);
}
this.socket = new window.WebSocket(this.url);
this.isOpen = false;
this.socket.onopen = function (evt) {
Connection.onopen(that, evt);
};
this.socket.onerror = function (evt) {
Connection.onerror(that, evt);
};
this.socket.onclose = function (evt) {
Connection.onclose(that, evt);
};
this.socket.onmessage = function (evt) {
Connection.onmessage(that, evt);
};
};
Connection.prototype.isConnected = function() {
return (this.socket && this.isOpen && (this.socket.readyState === 1));
};
Connection.prototype.close = function () {
this.socket && this.socket.close();
};
Connection.prototype.sendText = function (data) {
this.isConnected() && this.socket.send(Connection.CHANNEL_TEXT + data + '\r\n');
};
Connection.prototype.sendObject = function (data) {
this.isConnected() && this.socket.send(Connection.CHANNEL_JSON + window.JSON.stringify(data));
};
Connection.prototype.onOpen = null;
Connection.prototype.onError = null;
Connection.prototype.onClose = null;
Connection.prototype.onMessage = function (channel, data) {
switch (channel) {
case Connection.CHANNEL_TEXT:
this.onText && this.onText(data);
break;
case Connection.CHANNEL_JSON:
this.onObject && this.onObject(window.JSON.parse(data));
break;
case Connection.CHANNEL_HTML:
if (this.onHTML) {
var div = document.createElement('div');
div.innerHTML = data;
var fragment = document.createDocumentFragment();
for (var child = div.firstChild; child; child = child.nextSibling) {
fragment.appendChild(child);
}
this.onHTML(fragment);
}
break;
case Connection.CHANNEL_PUEBLO:
if (this.onPueblo) {
var tag, attrs;
var idx = data.indexOf(' ');
if (idx !== -1) {
tag = data.substring(0, idx);
attrs = data.substring(idx + 1);
} else {
tag = data;
attrs = '';
}
this.onPueblo(tag.toUpperCase(), attrs);
}
break;
case Connection.CHANNEL_PROMPT:
this.onPrompt && this.onPrompt(data);
break;
default:
window.console && window.console.log('unhandled message', channel, data);
return false;
}
return true;
};
Connection.prototype.onText = null;
Connection.prototype.onObject = null;
Connection.prototype.onHTML = null;
Connection.prototype.onPueblo = null;
Connection.prototype.onPrompt = null;
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
// MU* terminal emulator.
function Terminal(root) {
this.root = root;
this.clear();
}
Terminal.PARSE_PLAIN = 0;
Terminal.PARSE_CR = 1;
Terminal.PARSE_ESC1 = 2;
Terminal.PARSE_ESC2 = 3;
Terminal.ANSI_NORMAL = 0;
Terminal.ANSI_BRIGHT = 1;
Terminal.ANSI_UNDERLINE = 4;
Terminal.ANSI_BLINK = 5;
Terminal.ANSI_INVERSE = 7;
Terminal.ANSI_XTERM_FG = 38;
Terminal.ANSI_XTERM_BG = 48;
Terminal.DEFAULT_FG = 37;
Terminal.DEFAULT_BG = 30;
Terminal.UNCLOSED_TAGS = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img',
'input', 'keygen', 'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr'];
/////////////////////////////////////////////////////
// ansi parsing routines
Terminal.encodeState = function (state) {
if (!state) {
return '';
}
var classes = [];
if (state[Terminal.ANSI_INVERSE]) {
var value = state.fg;
state.fg = state.bg;
state.bg = value;
value = state.fg256;
state.fg256 = state.bg256;
state.bg256 = value;
}
var fg = state.fg;
var bg = state.bg;
if (state[Terminal.ANSI_UNDERLINE]) {
classes[classes.length] = 'ansi-' + Terminal.ANSI_UNDERLINE;
}
// make sure to avoid conflict with XTERM256 color's usage of blink (code 5)
if (state.fg256) {
classes[classes.length] = 'ansi-38-5-' + state.fg;
} else {
if (state[Terminal.ANSI_BRIGHT]) {
if (state[Terminal.ANSI_INVERSE]) {
if (fg !== Terminal.DEFAULT_FG) {
classes[classes.length] = 'ansi-' + fg;
}
} else {
classes[classes.length] = 'ansi-1-' + fg;
}
} else if (fg !== Terminal.DEFAULT_FG) {
classes[classes.length] = 'ansi-' + fg;
}
}
if (state.bg256) {
classes[classes.length] = 'ansi-48-5-' + state.bg;
} else {
if (state[Terminal.ANSI_BRIGHT]) {
if (state[Terminal.ANSI_INVERSE]) {
classes[classes.length] = 'ansi-1-' + (bg + 10);
} else {
if (bg !== Terminal.DEFAULT_BG) {
classes[classes.length] = 'ansi-' + (bg + 10);
}
}
} else if (bg !== Terminal.DEFAULT_BG) {
classes[classes.length] = 'ansi-' + (bg + 10);
}
}
if (state[Terminal.ANSI_BLINK] && !(state.fg256 || state.bg256)) {
classes[classes.length] = 'ansi-' + Terminal.ANSI_BLINK;
}
return classes.join(' ');
};
Terminal.prototype.getANSI = function () {
if (!this.ansiState) {
this.ansiState = {
fg: Terminal.DEFAULT_FG,
bg: Terminal.DEFAULT_BG,
fg256: false,
bg256: false
};
}
return this.ansiState;
};
Terminal.prototype.applyANSI = function (ansi) {
switch (ansi.charCodeAt(ansi.length - 1)) {
case 109: // m (SGR)
var codes = ansi.substring(0, ansi.length - 1).split(';');
var value, state;
for (var ii = 0; (value = codes[ii]) !== undefined; ++ii) {
if (value.length === 0) {
// Empty is treated as the equivalent of 0.
value = Terminal.ANSI_NORMAL;
} else {
value = parseInt(value);
}
state = this.getANSI();
// check for xterm256 fg/bg first, fallback to standard codes otherwise
if (state[Terminal.ANSI_XTERM_FG] && state[Terminal.ANSI_BLINK]) {
if (value >= 0 && value <= 255) {
state.fg = value;
state.fg256 = true;
state[Terminal.ANSI_XTERM_FG] = false;
state[Terminal.ANSI_BLINK] = false;
} else {
// invalid xterm256, let's reset the ansi state due to bad codes
this.ansiState = null;
}
} else if (state[Terminal.ANSI_XTERM_BG] && state[Terminal.ANSI_BLINK]) {
if (value >= 0 && value <= 255) {
state.bg = value;
state.bg256 = true;
state[Terminal.ANSI_XTERM_BG] = false;
state[Terminal.ANSI_BLINK] = false;
} else {
// invalid xterm256, let's reset the ansi state due to bad codes
this.ansiState = null;
}
} else {
// detect regular ansi codes
switch (value) {
case Terminal.ANSI_NORMAL: // reset
this.ansiState = null;
break;
case Terminal.ANSI_BRIGHT:
case Terminal.ANSI_UNDERLINE:
case Terminal.ANSI_BLINK:
case Terminal.ANSI_INVERSE:
case Terminal.ANSI_XTERM_FG:
case Terminal.ANSI_XTERM_BG:
state[value] = true;
break;
default:
if (30 <= value && value <= 37) {
state.fg = value;
} else if (40 <= value && value <= 47) {
state.bg = value - 10;
}
break;
}
}
this.ansiDirty = true;
}
break;
}
};
Terminal.prototype.write = function (value, start, end) {
if (start === end) {
return;
}
if (this.ansiDirty) {
var next = Terminal.encodeState(this.ansiState);
if (this.ansiClass !== next) {
this.ansiClass = next;
this.span = null;
}
this.ansiDirty = false;
}
if (this.ansiClass && !this.span) {
this.span = document.createElement('span');
this.span.className = this.ansiClass;
this.stack[this.stack.length - 1].appendChild(this.span);
}
var text = document.createTextNode(value.substring(start, end));
this.lineBuf[this.lineBuf.length] = text;
this.appendHTML(text);
};
Terminal.prototype.endLine = function () {
var that = this;
this.onLine && this.onLine(that, this.lineBuf);
this.write('\n', 0, 1);
this.lineBuf.length = 0;
};
Terminal.prototype.abortParse = function (value, start, end) {
switch (this.state) {
case Terminal.PARSE_PLAIN:
this.write(value, start, end);
break;
case Terminal.PARSE_ESC1:
this.write('\u001B', 0, 1);
break;
case Terminal.PARSE_ESC2:
this.write('\u001B[', 0, 2);
this.write(this.parseBuf, 0, this.parseBuf.length);
this.parseBuf = '';
break;
}
};
/////////////////////////////////////////////////////
// message appending routines
// appends a text string to the terminal, parsing ansi escape codes into html/css
Terminal.prototype.appendText = function (data) {
var start = 0;
// Scan for sequence start characters.
// TODO: Could scan with RegExp; not convinced sufficiently simpler/faster.
for (var ii = 0, ilen = data.length; ii < ilen; ++ii) {
var ch = data.charCodeAt(ii);
// Resynchronize at special characters.
switch (ch) {
case 10: // newline
if (this.state !== Terminal.PARSE_CR) {
this.abortParse(data, start, ii);
this.endLine();
}
start = ii + 1;
this.state = Terminal.PARSE_PLAIN;
continue;
case 13: // carriage return
this.abortParse(data, start, ii);
this.endLine();
start = ii + 1;
this.state = Terminal.PARSE_CR;
continue;
case 27: // escape
this.abortParse(data, start, ii);
start = ii + 1;
this.state = Terminal.PARSE_ESC1;
continue;
}
// Parse other characters.
switch (this.state) {
case Terminal.PARSE_CR:
this.state = Terminal.PARSE_PLAIN;
break;
case Terminal.PARSE_ESC1:
if (ch === 91) {
// Start of escape sequence (\e[).
start = ii + 1;
this.state = Terminal.PARSE_ESC2;
} else {
// Not an escape sequence.
this.abortParse(data, start, ii);
start = ii;
this.state = Terminal.PARSE_PLAIN;
}
break;
case Terminal.PARSE_ESC2:
if (64 <= ch && ch <= 126) {
// End of escape sequence.
this.parseBuf += data.substring(start, (start = ii + 1));
this.applyANSI(this.parseBuf);
this.parseBuf = '';
this.state = Terminal.PARSE_PLAIN;
}
break;
}
}
// Handle tail.
switch (this.state) {
case Terminal.PARSE_PLAIN:
this.write(data, start, data.length);
break;
case Terminal.PARSE_ESC2:
this.parseBuf += data.substring(start);
break;
}
};
// append an HTML fragment to the terminal
Terminal.prototype.appendHTML = function (fragment) {
(this.span || this.stack[this.stack.length - 1]).appendChild(fragment);
// TODO: May want to animate this, to make it less abrupt.
this.root.scrollTop = this.root.scrollHeight;
};
// append a log message to the terminal
Terminal.prototype.appendMessage = function (classid, message) {
var div = document.createElement('div');
div.className = classid;
// create a text node to safely append the string without rendering code
var text = document.createTextNode(message);
div.appendChild(text);
this.appendHTML(div);
};
// push a new html element onto the stack
Terminal.prototype.pushElement = function (element) {
this.span = null;
this.stack[this.stack.length - 1].appendChild(element);
this.stack[this.stack.length] = element;
};
// remove 1 level from the stack, check consistency
Terminal.prototype.popElement = function () {
this.span = null;
if (this.stack.length > 1) {
--this.stack.length;
} else {
window.console && window.console.warn('element stack underflow');
}
};
// append a pueblo tag to the terminal stack (or pop if an end tag)
Terminal.prototype.appendPueblo = function (tag, attrs) {
var html = '<' + tag + (attrs ? ' ' : '') + attrs + '>';
var start;
if (tag[0] !== '/') {
start = true;
} else {
start = false;
tag = tag.substring(1);
}
var selfClosing = false;
if ((tag.substring(-1) === '/') || (attrs.substring(-1) === '/')) {
selfClosing = true;
}
if (Terminal.UNCLOSED_TAGS.indexOf(tag.toLowerCase()) > -1) {
selfClosing = true;
}
if ((tag === 'XCH_PAGE') ||
((tag === 'IMG') && (attrs.search(/xch_graph=(("[^"]*")|('[^']*')|([^\s]*))/i) !== -1))) {
//console.log("unhandled pueblo", html);
return;
}
// we have a starting <tag> (not </tag>)
if (start) {
var div = document.createElement('div');
html = html.replace(
/xch_graph=(("[^"]*")|('[^']*')|([^\s]*))/i,
''
);
html = html.replace(
/xch_mode=(("[^"]*")|('[^']*')|([^\s]*))/i,
''
);
html = html.replace(
/xch_hint="([^"]*)"/i,
'title="$1"'
);
div.innerHTML = html.replace(
/xch_cmd="([^"]*)"/i,
"onClick='this.onCommand(&quot;$1&quot;)'"
);
div.firstChild.onCommand = this.onCommand;
div.setAttribute('target', '_blank');
// add this tag to the stack to keep track of nested elements
this.pushElement(div.firstChild);
// automatically pop the tag if it is self closing
if (selfClosing) {
this.popElement();
}
} else {
// we have an ending </tag> so remove the closed tag from the stack
// don't bother for self closing tags with an explicit end tag, we already popped them
if (!selfClosing) {
this.popElement();
}
}
};
Terminal.prototype.clear = function() {
this.root.innerHTML = '';
this.stack = [this.root];
this.state = Terminal.PARSE_PLAIN;
this.line = null;
this.lineBuf = [];
this.span = null;
this.parseBuf = '';
this.ansiClass = '';
this.ansiState = null;
this.ansiDirty = false;
};
// setup the pueblo xch_cmd callback
Terminal.prototype.onCommand = null;
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
// User input handler (command history, callback events)
function UserInput(root) {
var that = this;
this.root = root;
this.history = [];
this.ncommand = 0;
this.save_current = '';
this.current = -1;
this.root.onkeydown = function(evt) {
UserInput.onkeydown(that, evt);
};
this.root.onkeyup = function(evt) {
UserInput.onkeyup(that, evt);
};
}
// passthrough to the local onKeyDown callback
UserInput.onkeydown = function(that, evt) {
that.onKeyDown && that.onKeyDown(evt);
};
// passthrough to the local onKeyUp callback
UserInput.onkeyup = function(that, evt) {
that.onKeyUp && that.onKeyUp(evt);
};
// set the default onKeyDown handler
UserInput.prototype.onKeyDown = function(e) {
PressKey(this, e);
};
// set the default onKeyUp handler
UserInput.prototype.onKeyUp = function(e) {
ReleaseKey(this, e);
};
UserInput.prototype.onEnter = null;
UserInput.prototype.onEscape = null;
// push a command onto the history list and clear the input box
UserInput.prototype.saveCommand = function() {
if (this.root.value !== '') {
this.history[this.ncommand] = this.root.value;
this.ncommand++;
this.save_current = '';
this.current = -1;
this.root.value = '';
}
};
// cycle the history backward
UserInput.prototype.cycleBackward = function() {
// save the current entry in case we come back
if (this.current < 0) {
this.save_current = this.root.value;
}
// cycle command history backward
if (this.current < this.ncommand - 1) {
this.current++;
this.root.value = this.history[this.ncommand - this.current - 1];
}
};
// cycle the history forward
UserInput.prototype.cycleForward = function () {
// cycle command history forward
if (this.current > 0) {
this.current--;
this.root.value = this.history[this.ncommand - this.current - 1];
} else if (this.current === 0) {
// recall the current entry if they had typed something already
this.current = -1;
this.root.value = this.save_current;
}
};
// move the input cursor to the end of the input elements current text
UserInput.prototype.moveCursor = function() {
if (typeof this.root.selectionStart === "number") {
this.root.selectionStart = this.root.selectionEnd = this.root.value.length;
} else if (typeof this.root.createTextRange !== "undefined") {
this.focus();
var range = this.root.createTextRange();
range.collapse(false);
range.select();
}
};
// clear the current input text
UserInput.prototype.clear = function() {
this.root.value = '';
};
// get the current text in the input box
UserInput.prototype.value = function() {
return this.root.value;
};
// refocus the input box
UserInput.prototype.focus = function() {
this.root.focus();
};
// user-defined keys for command history
UserInput.prototype.keyCycleForward = null;
UserInput.prototype.keyCycleBackward = null;
UserInput.isKeyCycleForward = function(that, key) {
if (that && that.keyCycleForward) {
return that.keyCycleForward(key);
} else {
// default key is ctrl+n
return (key.code === 78 && key.ctrl);
}
};
UserInput.isKeyCycleBackward = function (that, key) {
if (that && that.keyCycleBackward) {
return that.keyCycleBackward(key);
} else {
// default key is ctrl+p
return (key.code === 80 && key.ctrl);
}
};
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
// some string helper functions for replacing links and user input tokens
// Example onLine() handler that linkifies URLs in text.
function LinkHandler(that, lineBuf) {
// Merge text so we can scan it.
if (!lineBuf.length) {
return;
}
var line = '';
for (var ii = 0, ilen = lineBuf.length; ii < ilen; ++ii) {
line += lineBuf[ii].nodeValue;
}
// Scan the merged text for links.
var links = LinkHandler.scan(line);
if (!links.length) {
return;
}
// Find the start and end text nodes.
var nodeIdx = 0, nodeStart = 0, nodeEnd = lineBuf[0].nodeValue.length;
for (var ii = 0, ilen = links.length; ii < ilen; ++ii) {
var info = links[ii], startOff, startNode, endOff, endNode;
while (nodeEnd <= info.start) {
nodeStart = nodeEnd;
nodeEnd += lineBuf[++nodeIdx].nodeValue.length;
}
startOff = info.start - nodeStart;
startNode = lineBuf[nodeIdx];
while (nodeEnd < info.end) {
nodeStart = nodeEnd;
nodeEnd += lineBuf[++nodeIdx].nodeValue.length;
}
endOff = info.end - nodeStart;
endNode = lineBuf[nodeIdx];
// Wrap the link text.
// TODO: In this version, we won't try to cross text nodes.
// TODO: Discard any text nodes that are already part of links?
if (startNode !== endNode) {
window.console && window.console.warn('link', info);
continue;
}
lineBuf[nodeIdx] = endNode.splitText(endOff);
nodeStart += endOff;
var middleNode = startNode.splitText(startOff);
var anchor = document.createElement('a');
middleNode.parentNode.replaceChild(anchor, middleNode);
anchor.target = '_blank';
if (info.url === '' && info.xch_cmd !== '') {
anchor.setAttribute('onClick', 'this.onCommand("'+info.xch_cmd+'");');
anchor.onCommand = that.onCommand;
} else {
anchor.href = info.url;
}
anchor.appendChild(middleNode);
}
}
// Link scanner function.
// TODO: Customizers may want to replace this, since regular expressions
// ultimately limit how clever our heuristics can be.
LinkHandler.scan = function (line) {
var links = [], result;
LinkHandler.regex.lastIndex = 0;
while ((result = LinkHandler.regex.exec(line))) {
var info = {};
info.start = result.index + result[1].length;
info.xch_cmd = '';
if (result[2]) {
result = result[2];
info.url = result;
} else if (result[3]) {
result = result[3];
info.url = 'mailto:' + result;
} else if (result[4]) {
result = result[4];
info.url = '';
info.xch_cmd = 'help ' + result;
info.className = "ansi-1-37";
}
info.end = info.start + result.length;
links[links.length] = info;
}
return links;
};
// LinkHandler regex:
//
// 1. Links must be preceded by a non-alphanumeric delimiter.
// 2. Links are matched greedily.
// 3. URLs must start with a supported scheme.
// 4. E-mail addresses are also linkified.
// 5. Twitter users and hash tags are also linkified.
//
// TODO: This can be improved (but also customized). One enhancement might be
// to support internationalized syntax.
LinkHandler.regex = /(^|[^a-zA-Z0-9]+)(?:((?:http|https):\/\/[-a-zA-Z0-9_.~:\/?#[\]@!$&'()*+,;=%]+)|([-.+a-zA-Z0-9_]+@[-a-zA-Z0-9]+(?:\.[-a-zA-Z0-9]+)+)|(@[a-zA-Z]\w*))/g;
// set the default line handler for the terminal to use the LinkHandler
Terminal.prototype.onLine = LinkHandler;
// detect if more user input is required for a pueblo command
function ReplaceToken(command) {
var cmd = command;
var regex = /\?\?/;
// check for the search token '??'
if (cmd.search(regex) !== -1) {
var val = prompt(command);
if (val === null) {
// user cancelled the prompt, don't send any command
cmd = '';
} else {
// replace the ?? token with the prompt value
cmd = cmd.replace(regex, val);
}
}
return cmd;
};
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
// default handler for key press events
function PressKey(that, e) {
var key = { code: (e.keyCode ? e.keyCode : e.which),
ctrl: e.ctrlKey,
shift: e.shiftKey,
alt: e.altKey };
var prevent = true;
if (UserInput.isKeyCycleBackward(that, key)) {
// cycle history backward
that.cycleBackward();
} else if (UserInput.isKeyCycleForward(that, key)) {
// cycle history forward
that.cycleForward();
} else if (key.code === 13) {
// enter key
// save the command string and clear the input box
var cmd = that.root.value;
that.saveCommand();
// pass through to the local callback for sending data
that.onEnter && that.onEnter(cmd);
} else if (key.code === 27) {
// pass through to the local callback for the escape key
that.onEscape && that.onEscape();
} else {
// didn't capture anything, pass it through
prevent = false;
}
if (prevent) {
e.preventDefault();
}
// make sure input retains focus
that.focus();
};
// default handler for key release events
function ReleaseKey(that, e) {
var key = { code: (e.keyCode ? e.keyCode : e.which),
ctrl: e.ctrlKey,
shift: e.shiftKey,
alt: e.altKey };
if (UserInput.isKeyCycleBackward(that, key) ||
UserInput.isKeyCycleForward(that, key)) {
// move the cursor to end of the input text after a history change
that.moveCursor();
}
};
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
// Module exports.
var exports = {};
// open a websocket connection to url
exports.connect = function (url) {
return new Connection(url);
};
// create a terminal emulator that appends output to root
exports.output = function (root) {
return new Terminal(root);
};
// create an input handler that saves and recalls command history
exports.input = function (root) {
return new UserInput(root);
};
// default key event callback handlers
exports.pressKey = PressKey;
exports.releaseKey = ReleaseKey;
// helper for replacing ?? in string with user input
exports.parseCommand = ReplaceToken;
// export the LinkHandler just in case it's useful elsewhere
exports.parseLinks = LinkHandler;
return exports;
})(window, document);

567
styles/ansi.css Normal file
View File

@ -0,0 +1,567 @@
/******************************************/
/** ANSI Colors **/
/* underlined text */
.ansi-4 { text-decoration: underline; }
/* blinking text */
.ansi-5 {
-webkit-animation: blink .75s linear infinite;
-moz-animation: blink .75s linear infinite;
-ms-animation: blink .75s linear infinite;
-o-animation: blink .75s linear infinite;
animation: blink .75s linear infinite;
}
/* standard 16 foreground colors */
.ansi-30 { color: black; }
.ansi-1-30 { color: gray; }
.ansi-31 { color: maroon; }
.ansi-1-31 { color: red; }
.ansi-32 { color: green; }
.ansi-1-32 { color: lime; }
.ansi-33 { color: olive; }
.ansi-1-33 { color: yellow; }
.ansi-34 { color: navy; }
.ansi-1-34 { color: blue; }
.ansi-35 { color: purple; }
.ansi-1-35 { color: fuchsia; }
.ansi-36 { color: teal; }
.ansi-1-36 { color: aqua; }
.ansi-37 { color: silver; }
.ansi-1-37 { color: white; }
/* standard 16 background colors */
.ansi-40 { background-color: black; }
.ansi-1-40 { background-color: gray; }
.ansi-41 { background-color: maroon; }
.ansi-1-41 { background-color: red; }
.ansi-42 { background-color: green; }
.ansi-1-42 { background-color: lime; }
.ansi-43 { background-color: olive; }
.ansi-1-43 { background-color: yellow; }
.ansi-44 { background-color: navy; }
.ansi-1-44 { background-color: blue; }
.ansi-45 { background-color: purple; }
.ansi-1-45 { background-color: fuchsia; }
.ansi-46 { background-color: teal; }
.ansi-1-46 { background-color: aqua; }
.ansi-47 { background-color: silver; }
.ansi-1-47 { background-color: white; }
/* xterm256 foreground colors */
.ansi-38-5-0 { color: #000000; }
.ansi-38-5-1 { color: #800000; }
.ansi-38-5-2 { color: #008000; }
.ansi-38-5-3 { color: #808000; }
.ansi-38-5-4 { color: #000080; }
.ansi-38-5-5 { color: #800080; }
.ansi-38-5-6 { color: #008080; }
.ansi-38-5-7 { color: #c0c0c0; }
.ansi-38-5-8 { color: #808080; }
.ansi-38-5-9 { color: #ff0000; }
.ansi-38-5-10 { color: #00ff00; }
.ansi-38-5-11 { color: #ffff00; }
.ansi-38-5-12 { color: #0000ff; }
.ansi-38-5-13 { color: #ff00ff; }
.ansi-38-5-14 { color: #00ffff; }
.ansi-38-5-15 { color: #ffffff; }
.ansi-38-5-16 { color: #000000; }
.ansi-38-5-17 { color: #00005f; }
.ansi-38-5-18 { color: #000087; }
.ansi-38-5-19 { color: #0000af; }
.ansi-38-5-20 { color: #0000d7; }
.ansi-38-5-21 { color: #0000ff; }
.ansi-38-5-22 { color: #005f00; }
.ansi-38-5-23 { color: #005f5f; }
.ansi-38-5-24 { color: #005f87; }
.ansi-38-5-25 { color: #005faf; }
.ansi-38-5-26 { color: #005fd7; }
.ansi-38-5-27 { color: #005fff; }
.ansi-38-5-28 { color: #008700; }
.ansi-38-5-29 { color: #00875f; }
.ansi-38-5-30 { color: #008787; }
.ansi-38-5-31 { color: #0087af; }
.ansi-38-5-32 { color: #0087d7; }
.ansi-38-5-33 { color: #0087ff; }
.ansi-38-5-34 { color: #00af00; }
.ansi-38-5-35 { color: #00af5f; }
.ansi-38-5-36 { color: #00af87; }
.ansi-38-5-37 { color: #00afaf; }
.ansi-38-5-38 { color: #00afd7; }
.ansi-38-5-39 { color: #00afff; }
.ansi-38-5-40 { color: #00d700; }
.ansi-38-5-41 { color: #00d75f; }
.ansi-38-5-42 { color: #00d787; }
.ansi-38-5-43 { color: #00d7af; }
.ansi-38-5-44 { color: #00d7d7; }
.ansi-38-5-45 { color: #00d7ff; }
.ansi-38-5-46 { color: #00ff00; }
.ansi-38-5-47 { color: #00ff5f; }
.ansi-38-5-48 { color: #00ff87; }
.ansi-38-5-49 { color: #00ffaf; }
.ansi-38-5-50 { color: #00ffd7; }
.ansi-38-5-51 { color: #00ffff; }
.ansi-38-5-52 { color: #5f0000; }
.ansi-38-5-53 { color: #5f005f; }
.ansi-38-5-54 { color: #5f0087; }
.ansi-38-5-55 { color: #5f00af; }
.ansi-38-5-56 { color: #5f00d7; }
.ansi-38-5-57 { color: #5f00ff; }
.ansi-38-5-58 { color: #5f5f00; }
.ansi-38-5-59 { color: #5f5f5f; }
.ansi-38-5-60 { color: #5f5f87; }
.ansi-38-5-61 { color: #5f5faf; }
.ansi-38-5-62 { color: #5f5fd7; }
.ansi-38-5-63 { color: #5f5fff; }
.ansi-38-5-64 { color: #5f8700; }
.ansi-38-5-65 { color: #5f875f; }
.ansi-38-5-66 { color: #5f8787; }
.ansi-38-5-67 { color: #5f87af; }
.ansi-38-5-68 { color: #5f87d7; }
.ansi-38-5-69 { color: #5f87ff; }
.ansi-38-5-70 { color: #5faf00; }
.ansi-38-5-71 { color: #5faf5f; }
.ansi-38-5-72 { color: #5faf87; }
.ansi-38-5-73 { color: #5fafaf; }
.ansi-38-5-74 { color: #5fafd7; }
.ansi-38-5-75 { color: #5fafff; }
.ansi-38-5-76 { color: #5fd700; }
.ansi-38-5-77 { color: #5fd75f; }
.ansi-38-5-78 { color: #5fd787; }
.ansi-38-5-79 { color: #5fd7af; }
.ansi-38-5-80 { color: #5fd7d7; }
.ansi-38-5-81 { color: #5fd7ff; }
.ansi-38-5-82 { color: #5fff00; }
.ansi-38-5-83 { color: #5fff5f; }
.ansi-38-5-84 { color: #5fff87; }
.ansi-38-5-85 { color: #5fffaf; }
.ansi-38-5-86 { color: #5fffd7; }
.ansi-38-5-87 { color: #5fffff; }
.ansi-38-5-88 { color: #870000; }
.ansi-38-5-89 { color: #87005f; }
.ansi-38-5-90 { color: #870087; }
.ansi-38-5-91 { color: #8700af; }
.ansi-38-5-92 { color: #8700d7; }
.ansi-38-5-93 { color: #8700ff; }
.ansi-38-5-94 { color: #875f00; }
.ansi-38-5-95 { color: #875f5f; }
.ansi-38-5-96 { color: #875f87; }
.ansi-38-5-97 { color: #875faf; }
.ansi-38-5-98 { color: #875fd7; }
.ansi-38-5-99 { color: #875fff; }
.ansi-38-5-100 { color: #878700; }
.ansi-38-5-101 { color: #87875f; }
.ansi-38-5-102 { color: #878787; }
.ansi-38-5-103 { color: #8787af; }
.ansi-38-5-104 { color: #8787d7; }
.ansi-38-5-105 { color: #8787ff; }
.ansi-38-5-106 { color: #87af00; }
.ansi-38-5-107 { color: #87af5f; }
.ansi-38-5-108 { color: #87af87; }
.ansi-38-5-109 { color: #87afaf; }
.ansi-38-5-110 { color: #87afd7; }
.ansi-38-5-111 { color: #87afff; }
.ansi-38-5-112 { color: #87d700; }
.ansi-38-5-113 { color: #87d75f; }
.ansi-38-5-114 { color: #87d787; }
.ansi-38-5-115 { color: #87d7af; }
.ansi-38-5-116 { color: #87d7d7; }
.ansi-38-5-117 { color: #87d7ff; }
.ansi-38-5-118 { color: #87ff00; }
.ansi-38-5-119 { color: #87ff5f; }
.ansi-38-5-120 { color: #87ff87; }
.ansi-38-5-121 { color: #87ffaf; }
.ansi-38-5-122 { color: #87ffd7; }
.ansi-38-5-123 { color: #87ffff; }
.ansi-38-5-124 { color: #af0000; }
.ansi-38-5-125 { color: #af005f; }
.ansi-38-5-126 { color: #af0087; }
.ansi-38-5-127 { color: #af00af; }
.ansi-38-5-128 { color: #af00d7; }
.ansi-38-5-129 { color: #af00ff; }
.ansi-38-5-130 { color: #af5f00; }
.ansi-38-5-131 { color: #af5f5f; }
.ansi-38-5-132 { color: #af5f87; }
.ansi-38-5-133 { color: #af5faf; }
.ansi-38-5-134 { color: #af5fd7; }
.ansi-38-5-135 { color: #af5fff; }
.ansi-38-5-136 { color: #af8700; }
.ansi-38-5-137 { color: #af875f; }
.ansi-38-5-138 { color: #af8787; }
.ansi-38-5-139 { color: #af87af; }
.ansi-38-5-140 { color: #af87d7; }
.ansi-38-5-141 { color: #af87ff; }
.ansi-38-5-142 { color: #afaf00; }
.ansi-38-5-143 { color: #afaf5f; }
.ansi-38-5-144 { color: #afaf87; }
.ansi-38-5-145 { color: #afafaf; }
.ansi-38-5-146 { color: #afafd7; }
.ansi-38-5-147 { color: #afafff; }
.ansi-38-5-148 { color: #afd700; }
.ansi-38-5-149 { color: #afd75f; }
.ansi-38-5-150 { color: #afd787; }
.ansi-38-5-151 { color: #afd7af; }
.ansi-38-5-152 { color: #afd7d7; }
.ansi-38-5-153 { color: #afd7ff; }
.ansi-38-5-154 { color: #afff00; }
.ansi-38-5-155 { color: #afff5f; }
.ansi-38-5-156 { color: #afff87; }
.ansi-38-5-157 { color: #afffaf; }
.ansi-38-5-158 { color: #afffd7; }
.ansi-38-5-159 { color: #afffff; }
.ansi-38-5-160 { color: #d70000; }
.ansi-38-5-161 { color: #d7005f; }
.ansi-38-5-162 { color: #d70087; }
.ansi-38-5-163 { color: #d700af; }
.ansi-38-5-164 { color: #d700d7; }
.ansi-38-5-165 { color: #d700ff; }
.ansi-38-5-166 { color: #d75f00; }
.ansi-38-5-167 { color: #d75f5f; }
.ansi-38-5-168 { color: #d75f87; }
.ansi-38-5-169 { color: #d75faf; }
.ansi-38-5-170 { color: #d75fd7; }
.ansi-38-5-171 { color: #d75fff; }
.ansi-38-5-172 { color: #d78700; }
.ansi-38-5-173 { color: #d7875f; }
.ansi-38-5-174 { color: #d78787; }
.ansi-38-5-175 { color: #d787af; }
.ansi-38-5-176 { color: #d787d7; }
.ansi-38-5-177 { color: #d787ff; }
.ansi-38-5-178 { color: #d7af00; }
.ansi-38-5-179 { color: #d7af5f; }
.ansi-38-5-180 { color: #d7af87; }
.ansi-38-5-181 { color: #d7afaf; }
.ansi-38-5-182 { color: #d7afd7; }
.ansi-38-5-183 { color: #d7afff; }
.ansi-38-5-184 { color: #d7d700; }
.ansi-38-5-185 { color: #d7d75f; }
.ansi-38-5-186 { color: #d7d787; }
.ansi-38-5-187 { color: #d7d7af; }
.ansi-38-5-188 { color: #d7d7d7; }
.ansi-38-5-189 { color: #d7d7ff; }
.ansi-38-5-190 { color: #d7ff00; }
.ansi-38-5-191 { color: #d7ff5f; }
.ansi-38-5-192 { color: #d7ff87; }
.ansi-38-5-193 { color: #d7ffaf; }
.ansi-38-5-194 { color: #d7ffd7; }
.ansi-38-5-195 { color: #d7ffff; }
.ansi-38-5-196 { color: #ff0000; }
.ansi-38-5-197 { color: #ff005f; }
.ansi-38-5-198 { color: #ff0087; }
.ansi-38-5-199 { color: #ff00af; }
.ansi-38-5-200 { color: #ff00d7; }
.ansi-38-5-201 { color: #ff00ff; }
.ansi-38-5-202 { color: #ff5f00; }
.ansi-38-5-203 { color: #ff5f5f; }
.ansi-38-5-204 { color: #ff5f87; }
.ansi-38-5-205 { color: #ff5faf; }
.ansi-38-5-206 { color: #ff5fd7; }
.ansi-38-5-207 { color: #ff5fff; }
.ansi-38-5-208 { color: #ff8700; }
.ansi-38-5-209 { color: #ff875f; }
.ansi-38-5-210 { color: #ff8787; }
.ansi-38-5-211 { color: #ff87af; }
.ansi-38-5-212 { color: #ff87d7; }
.ansi-38-5-213 { color: #ff87ff; }
.ansi-38-5-214 { color: #ffaf00; }
.ansi-38-5-215 { color: #ffaf5f; }
.ansi-38-5-216 { color: #ffaf87; }
.ansi-38-5-217 { color: #ffafaf; }
.ansi-38-5-218 { color: #ffafd7; }
.ansi-38-5-219 { color: #ffafff; }
.ansi-38-5-220 { color: #ffd700; }
.ansi-38-5-221 { color: #ffd75f; }
.ansi-38-5-222 { color: #ffd787; }
.ansi-38-5-223 { color: #ffd7af; }
.ansi-38-5-224 { color: #ffd7d7; }
.ansi-38-5-225 { color: #ffd7ff; }
.ansi-38-5-226 { color: #ffff00; }
.ansi-38-5-227 { color: #ffff5f; }
.ansi-38-5-228 { color: #ffff87; }
.ansi-38-5-229 { color: #ffffaf; }
.ansi-38-5-230 { color: #ffffd7; }
.ansi-38-5-231 { color: #ffffff; }
.ansi-38-5-232 { color: #080808; }
.ansi-38-5-233 { color: #121212; }
.ansi-38-5-234 { color: #1c1c1c; }
.ansi-38-5-235 { color: #262626; }
.ansi-38-5-236 { color: #303030; }
.ansi-38-5-237 { color: #3a3a3a; }
.ansi-38-5-238 { color: #444444; }
.ansi-38-5-239 { color: #4e4e4e; }
.ansi-38-5-240 { color: #585858; }
.ansi-38-5-241 { color: #626262; }
.ansi-38-5-242 { color: #6c6c6c; }
.ansi-38-5-243 { color: #767676; }
.ansi-38-5-244 { color: #808080; }
.ansi-38-5-245 { color: #8a8a8a; }
.ansi-38-5-246 { color: #949494; }
.ansi-38-5-247 { color: #9e9e9e; }
.ansi-38-5-248 { color: #a8a8a8; }
.ansi-38-5-249 { color: #b2b2b2; }
.ansi-38-5-250 { color: #bcbcbc; }
.ansi-38-5-251 { color: #c6c6c6; }
.ansi-38-5-252 { color: #d0d0d0; }
.ansi-38-5-253 { color: #dadada; }
.ansi-38-5-254 { color: #e4e4e4; }
.ansi-38-5-255 { color: #eeeeee; }
/* xterm256 background colors */
.ansi-48-5-0 { background-color: #000000; }
.ansi-48-5-1 { background-color: #800000; }
.ansi-48-5-2 { background-color: #008000; }
.ansi-48-5-3 { background-color: #808000; }
.ansi-48-5-4 { background-color: #000080; }
.ansi-48-5-5 { background-color: #800080; }
.ansi-48-5-6 { background-color: #008080; }
.ansi-48-5-7 { background-color: #c0c0c0; }
.ansi-48-5-8 { background-color: #808080; }
.ansi-48-5-9 { background-color: #ff0000; }
.ansi-48-5-10 { background-color: #00ff00; }
.ansi-48-5-11 { background-color: #ffff00; }
.ansi-48-5-12 { background-color: #0000ff; }
.ansi-48-5-13 { background-color: #ff00ff; }
.ansi-48-5-14 { background-color: #00ffff; }
.ansi-48-5-15 { background-color: #ffffff; }
.ansi-48-5-16 { background-color: #000000; }
.ansi-48-5-17 { background-color: #00005f; }
.ansi-48-5-18 { background-color: #000087; }
.ansi-48-5-19 { background-color: #0000af; }
.ansi-48-5-20 { background-color: #0000d7; }
.ansi-48-5-21 { background-color: #0000ff; }
.ansi-48-5-22 { background-color: #005f00; }
.ansi-48-5-23 { background-color: #005f5f; }
.ansi-48-5-24 { background-color: #005f87; }
.ansi-48-5-25 { background-color: #005faf; }
.ansi-48-5-26 { background-color: #005fd7; }
.ansi-48-5-27 { background-color: #005fff; }
.ansi-48-5-28 { background-color: #008700; }
.ansi-48-5-29 { background-color: #00875f; }
.ansi-48-5-30 { background-color: #008787; }
.ansi-48-5-31 { background-color: #0087af; }
.ansi-48-5-32 { background-color: #0087d7; }
.ansi-48-5-33 { background-color: #0087ff; }
.ansi-48-5-34 { background-color: #00af00; }
.ansi-48-5-35 { background-color: #00af5f; }
.ansi-48-5-36 { background-color: #00af87; }
.ansi-48-5-37 { background-color: #00afaf; }
.ansi-48-5-38 { background-color: #00afd7; }
.ansi-48-5-39 { background-color: #00afff; }
.ansi-48-5-40 { background-color: #00d700; }
.ansi-48-5-41 { background-color: #00d75f; }
.ansi-48-5-42 { background-color: #00d787; }
.ansi-48-5-43 { background-color: #00d7af; }
.ansi-48-5-44 { background-color: #00d7d7; }
.ansi-48-5-45 { background-color: #00d7ff; }
.ansi-48-5-46 { background-color: #00ff00; }
.ansi-48-5-47 { background-color: #00ff5f; }
.ansi-48-5-48 { background-color: #00ff87; }
.ansi-48-5-49 { background-color: #00ffaf; }
.ansi-48-5-50 { background-color: #00ffd7; }
.ansi-48-5-51 { background-color: #00ffff; }
.ansi-48-5-52 { background-color: #5f0000; }
.ansi-48-5-53 { background-color: #5f005f; }
.ansi-48-5-54 { background-color: #5f0087; }
.ansi-48-5-55 { background-color: #5f00af; }
.ansi-48-5-56 { background-color: #5f00d7; }
.ansi-48-5-57 { background-color: #5f00ff; }
.ansi-48-5-58 { background-color: #5f5f00; }
.ansi-48-5-59 { background-color: #5f5f5f; }
.ansi-48-5-60 { background-color: #5f5f87; }
.ansi-48-5-61 { background-color: #5f5faf; }
.ansi-48-5-62 { background-color: #5f5fd7; }
.ansi-48-5-63 { background-color: #5f5fff; }
.ansi-48-5-64 { background-color: #5f8700; }
.ansi-48-5-65 { background-color: #5f875f; }
.ansi-48-5-66 { background-color: #5f8787; }
.ansi-48-5-67 { background-color: #5f87af; }
.ansi-48-5-68 { background-color: #5f87d7; }
.ansi-48-5-69 { background-color: #5f87ff; }
.ansi-48-5-70 { background-color: #5faf00; }
.ansi-48-5-71 { background-color: #5faf5f; }
.ansi-48-5-72 { background-color: #5faf87; }
.ansi-48-5-73 { background-color: #5fafaf; }
.ansi-48-5-74 { background-color: #5fafd7; }
.ansi-48-5-75 { background-color: #5fafff; }
.ansi-48-5-76 { background-color: #5fd700; }
.ansi-48-5-77 { background-color: #5fd75f; }
.ansi-48-5-78 { background-color: #5fd787; }
.ansi-48-5-79 { background-color: #5fd7af; }
.ansi-48-5-80 { background-color: #5fd7d7; }
.ansi-48-5-81 { background-color: #5fd7ff; }
.ansi-48-5-82 { background-color: #5fff00; }
.ansi-48-5-83 { background-color: #5fff5f; }
.ansi-48-5-84 { background-color: #5fff87; }
.ansi-48-5-85 { background-color: #5fffaf; }
.ansi-48-5-86 { background-color: #5fffd7; }
.ansi-48-5-87 { background-color: #5fffff; }
.ansi-48-5-88 { background-color: #870000; }
.ansi-48-5-89 { background-color: #87005f; }
.ansi-48-5-90 { background-color: #870087; }
.ansi-48-5-91 { background-color: #8700af; }
.ansi-48-5-92 { background-color: #8700d7; }
.ansi-48-5-93 { background-color: #8700ff; }
.ansi-48-5-94 { background-color: #875f00; }
.ansi-48-5-95 { background-color: #875f5f; }
.ansi-48-5-96 { background-color: #875f87; }
.ansi-48-5-97 { background-color: #875faf; }
.ansi-48-5-98 { background-color: #875fd7; }
.ansi-48-5-99 { background-color: #875fff; }
.ansi-48-5-100 { background-color: #878700; }
.ansi-48-5-101 { background-color: #87875f; }
.ansi-48-5-102 { background-color: #878787; }
.ansi-48-5-103 { background-color: #8787af; }
.ansi-48-5-104 { background-color: #8787d7; }
.ansi-48-5-105 { background-color: #8787ff; }
.ansi-48-5-106 { background-color: #87af00; }
.ansi-48-5-107 { background-color: #87af5f; }
.ansi-48-5-108 { background-color: #87af87; }
.ansi-48-5-109 { background-color: #87afaf; }
.ansi-48-5-110 { background-color: #87afd7; }
.ansi-48-5-111 { background-color: #87afff; }
.ansi-48-5-112 { background-color: #87d700; }
.ansi-48-5-113 { background-color: #87d75f; }
.ansi-48-5-114 { background-color: #87d787; }
.ansi-48-5-115 { background-color: #87d7af; }
.ansi-48-5-116 { background-color: #87d7d7; }
.ansi-48-5-117 { background-color: #87d7ff; }
.ansi-48-5-118 { background-color: #87ff00; }
.ansi-48-5-119 { background-color: #87ff5f; }
.ansi-48-5-120 { background-color: #87ff87; }
.ansi-48-5-121 { background-color: #87ffaf; }
.ansi-48-5-122 { background-color: #87ffd7; }
.ansi-48-5-123 { background-color: #87ffff; }
.ansi-48-5-124 { background-color: #af0000; }
.ansi-48-5-125 { background-color: #af005f; }
.ansi-48-5-126 { background-color: #af0087; }
.ansi-48-5-127 { background-color: #af00af; }
.ansi-48-5-128 { background-color: #af00d7; }
.ansi-48-5-129 { background-color: #af00ff; }
.ansi-48-5-130 { background-color: #af5f00; }
.ansi-48-5-131 { background-color: #af5f5f; }
.ansi-48-5-132 { background-color: #af5f87; }
.ansi-48-5-133 { background-color: #af5faf; }
.ansi-48-5-134 { background-color: #af5fd7; }
.ansi-48-5-135 { background-color: #af5fff; }
.ansi-48-5-136 { background-color: #af8700; }
.ansi-48-5-137 { background-color: #af875f; }
.ansi-48-5-138 { background-color: #af8787; }
.ansi-48-5-139 { background-color: #af87af; }
.ansi-48-5-140 { background-color: #af87d7; }
.ansi-48-5-141 { background-color: #af87ff; }
.ansi-48-5-142 { background-color: #afaf00; }
.ansi-48-5-143 { background-color: #afaf5f; }
.ansi-48-5-144 { background-color: #afaf87; }
.ansi-48-5-145 { background-color: #afafaf; }
.ansi-48-5-146 { background-color: #afafd7; }
.ansi-48-5-147 { background-color: #afafff; }
.ansi-48-5-148 { background-color: #afd700; }
.ansi-48-5-149 { background-color: #afd75f; }
.ansi-48-5-150 { background-color: #afd787; }
.ansi-48-5-151 { background-color: #afd7af; }
.ansi-48-5-152 { background-color: #afd7d7; }
.ansi-48-5-153 { background-color: #afd7ff; }
.ansi-48-5-154 { background-color: #afff00; }
.ansi-48-5-155 { background-color: #afff5f; }
.ansi-48-5-156 { background-color: #afff87; }
.ansi-48-5-157 { background-color: #afffaf; }
.ansi-48-5-158 { background-color: #afffd7; }
.ansi-48-5-159 { background-color: #afffff; }
.ansi-48-5-160 { background-color: #d70000; }
.ansi-48-5-161 { background-color: #d7005f; }
.ansi-48-5-162 { background-color: #d70087; }
.ansi-48-5-163 { background-color: #d700af; }
.ansi-48-5-164 { background-color: #d700d7; }
.ansi-48-5-165 { background-color: #d700ff; }
.ansi-48-5-166 { background-color: #d75f00; }
.ansi-48-5-167 { background-color: #d75f5f; }
.ansi-48-5-168 { background-color: #d75f87; }
.ansi-48-5-169 { background-color: #d75faf; }
.ansi-48-5-170 { background-color: #d75fd7; }
.ansi-48-5-171 { background-color: #d75fff; }
.ansi-48-5-172 { background-color: #d78700; }
.ansi-48-5-173 { background-color: #d7875f; }
.ansi-48-5-174 { background-color: #d78787; }
.ansi-48-5-175 { background-color: #d787af; }
.ansi-48-5-176 { background-color: #d787d7; }
.ansi-48-5-177 { background-color: #d787ff; }
.ansi-48-5-178 { background-color: #d7af00; }
.ansi-48-5-179 { background-color: #d7af5f; }
.ansi-48-5-180 { background-color: #d7af87; }
.ansi-48-5-181 { background-color: #d7afaf; }
.ansi-48-5-182 { background-color: #d7afd7; }
.ansi-48-5-183 { background-color: #d7afff; }
.ansi-48-5-184 { background-color: #d7d700; }
.ansi-48-5-185 { background-color: #d7d75f; }
.ansi-48-5-186 { background-color: #d7d787; }
.ansi-48-5-187 { background-color: #d7d7af; }
.ansi-48-5-188 { background-color: #d7d7d7; }
.ansi-48-5-189 { background-color: #d7d7ff; }
.ansi-48-5-190 { background-color: #d7ff00; }
.ansi-48-5-191 { background-color: #d7ff5f; }
.ansi-48-5-192 { background-color: #d7ff87; }
.ansi-48-5-193 { background-color: #d7ffaf; }
.ansi-48-5-194 { background-color: #d7ffd7; }
.ansi-48-5-195 { background-color: #d7ffff; }
.ansi-48-5-196 { background-color: #ff0000; }
.ansi-48-5-197 { background-color: #ff005f; }
.ansi-48-5-198 { background-color: #ff0087; }
.ansi-48-5-199 { background-color: #ff00af; }
.ansi-48-5-200 { background-color: #ff00d7; }
.ansi-48-5-201 { background-color: #ff00ff; }
.ansi-48-5-202 { background-color: #ff5f00; }
.ansi-48-5-203 { background-color: #ff5f5f; }
.ansi-48-5-204 { background-color: #ff5f87; }
.ansi-48-5-205 { background-color: #ff5faf; }
.ansi-48-5-206 { background-color: #ff5fd7; }
.ansi-48-5-207 { background-color: #ff5fff; }
.ansi-48-5-208 { background-color: #ff8700; }
.ansi-48-5-209 { background-color: #ff875f; }
.ansi-48-5-210 { background-color: #ff8787; }
.ansi-48-5-211 { background-color: #ff87af; }
.ansi-48-5-212 { background-color: #ff87d7; }
.ansi-48-5-213 { background-color: #ff87ff; }
.ansi-48-5-214 { background-color: #ffaf00; }
.ansi-48-5-215 { background-color: #ffaf5f; }
.ansi-48-5-216 { background-color: #ffaf87; }
.ansi-48-5-217 { background-color: #ffafaf; }
.ansi-48-5-218 { background-color: #ffafd7; }
.ansi-48-5-219 { background-color: #ffafff; }
.ansi-48-5-220 { background-color: #ffd700; }
.ansi-48-5-221 { background-color: #ffd75f; }
.ansi-48-5-222 { background-color: #ffd787; }
.ansi-48-5-223 { background-color: #ffd7af; }
.ansi-48-5-224 { background-color: #ffd7d7; }
.ansi-48-5-225 { background-color: #ffd7ff; }
.ansi-48-5-226 { background-color: #ffff00; }
.ansi-48-5-227 { background-color: #ffff5f; }
.ansi-48-5-228 { background-color: #ffff87; }
.ansi-48-5-229 { background-color: #ffffaf; }
.ansi-48-5-230 { background-color: #ffffd7; }
.ansi-48-5-231 { background-color: #ffffff; }
.ansi-48-5-232 { background-color: #080808; }
.ansi-48-5-233 { background-color: #121212; }
.ansi-48-5-234 { background-color: #1c1c1c; }
.ansi-48-5-235 { background-color: #262626; }
.ansi-48-5-236 { background-color: #303030; }
.ansi-48-5-237 { background-color: #3a3a3a; }
.ansi-48-5-248 { background-color: #444444; }
.ansi-48-5-239 { background-color: #4e4e4e; }
.ansi-48-5-240 { background-color: #585858; }
.ansi-48-5-241 { background-color: #626262; }
.ansi-48-5-242 { background-color: #6c6c6c; }
.ansi-48-5-243 { background-color: #767676; }
.ansi-48-5-244 { background-color: #808080; }
.ansi-48-5-245 { background-color: #8a8a8a; }
.ansi-48-5-246 { background-color: #949494; }
.ansi-48-5-247 { background-color: #9e9e9e; }
.ansi-48-5-248 { background-color: #a8a8a8; }
.ansi-48-5-249 { background-color: #b2b2b2; }
.ansi-48-5-250 { background-color: #bcbcbc; }
.ansi-48-5-251 { background-color: #c6c6c6; }
.ansi-48-5-252 { background-color: #d0d0d0; }
.ansi-48-5-253 { background-color: #dadada; }
.ansi-48-5-254 { background-color: #e4e4e4; }
.ansi-48-5-255 { background-color: #eeeeee; }

66
styles/styles.css
View File

@ -96,8 +96,72 @@ input[type=radio]:checked + label:before {
.toolsep { margin-right: 1vw; padding:0; padding-top: 1vh; padding-bottom: 2.5vh; border-bottom: 1px #AAA solid; height: 1vh; display: block; width: 64%;} .toolsep { margin-right: 1vw; padding:0; padding-top: 1vh; padding-bottom: 2.5vh; border-bottom: 1px #AAA solid; height: 1vh; display: block; width: 64%;}
.calc_data { padding-top: 2.5vh; font-size: 1.5vh; font-family: 'Open Sans', sans-serif;} .calc_data { padding-top: 2.5vh; font-size: 1.5vh; font-family: 'Open Sans', sans-serif;}
#client {
position: fixed;
bottom: 0px;
width: 80%;
margin:0;
}
#client-bar {
width:100%;
margin: 0;
}
#client-bar-control {
margin: 0;
}
.client-bar-control-container:hover, .client-bar-control-container:hover a:hover {
color: black;
background-color: lightgrey;
}
.client-bar-control-container {
width: 5vw;
text-align: center;
background-color: black;
border-top: 1px solid darkgrey;
border-left: 1px solid darkgrey;
border-right: 1px solid darkgrey;
margin-bottom: 0;
border-radius: 5px 5px 0 0;
display: block;
padding: 0;
text-decoration: none;
}
.client-bar-control-container a:link, .client-bar-control-container a:visited { color: white; text-decoration: none }
#client-tab-desc{ padding-left: 0.5vw;}
#client-term-container {
height: 40vh;
width: 100%;
background-color: black;
}
#client-term-output {
width: 100%;
height: 30vh;
background-color: #111;
border-bottom: 1px solid #444;
overflow-y: auto;
overflow-x: hidden;
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
border: 0;
font-family: monospace;
}
#client-term-prompt {
width: 100%;
height: 0.9vh;
overflow: hidden;
white-space: pre-wrap;
text-align: left;
background-color: #111
}
.hidden { display: none; }
#client-term-entry { width: 100%; height: 5vh; border: 0; border-top: 1px solid white; border-bottom: 1px solid white; background-color: #222; margin: 0; padding:0; resize: none; color: silver; vertical-align: middle;}
@media only screen and (max-width: 1290px) { #client-tab-desc { display: none; } }
@media only screen and (max-width: 900px) { .wvg-navbar { height: 6vh; font-size: 1.25em;} .wvg-controls { width: 65%;} .wvg-navbar li { padding-left: 1vw; padding-right: 2vw; padding-top: 2.0vh;} .wvg-tools span, .select-route-map {width: 95%;} @media only screen and (max-width: 900px) { .wvg-navbar { height: 6vh; font-size: 1.25em;} .wvg-controls { width: 65%;} .wvg-navbar li { padding-left: 1vw; padding-right: 2vw; padding-top: 2.0vh;} .wvg-tools span, .select-route-map {width: 95%;}
.menu-button { font-weight: bold; font-size:1.5em; padding-top: 0.5vh; }} .menu-button { font-weight: bold; font-size:1.5em; padding-top: 0.5vh; } #client-tab-desc { display: none; } }
@media only screen and (max-width: 500px) { .wvg-controls { width: 100%;} .wvg-tablink { font-size: 0.75em; padding:0; padding-left: 2vw; padding-right: 2vw; } } @media only screen and (max-width: 500px) { .wvg-controls { width: 100%;} .wvg-tablink { font-size: 0.75em; padding:0; padding-left: 2vw; padding-right: 2vw; } }
@media only screen and (max-height: 575px) { .reset-container { height: 4em;} .wvg-controls { overflow-y: auto; margin-bottom: -5vh;} .wvg-tools {font-size: 0.75em;} } @media only screen and (max-height: 575px) { .reset-container { height: 4em;} .wvg-controls { overflow-y: auto; margin-bottom: -5vh;} .wvg-tools {font-size: 0.75em;} }

20
webviewgl.htm
View File

@ -10,7 +10,9 @@
<script src="js/mapviewgl.js"></script> <script src="js/mapviewgl.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:400,700,700i" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:400,700,700i" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> --> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="styles/styles.css" rel="stylesheet"> <link href="styles/styles.css" rel="stylesheet">
<link href="styles/ansi.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="js/GUI.Utils.js"></script> <script src="js/GUI.Utils.js"></script>
<script> <script>
@ -121,5 +123,23 @@
<div class="reset-container"><span class="reset-button"> Reset </span></div> <div class="reset-container"><span class="reset-button"> Reset </span></div>
</div> </div>
<div id="client">
<div id="client-bar">
<span class="client-bar-control-container">
<a href="#" id="client-bar-control"><i id="client-ico-up" class="fa fa-chevron-up" aria-hidden="true"></i><i id="client-ico-down" class="fa fa-chevron-down hidden" aria-hidden="true"></i><b id="client-tab-desc">Client</b></a>
</span>
</div>
<div id="client-term-container" class="hidden">
<form id="client-term">
<div id="client-term-output" class="ansi-37 ansi-40"></div>
<div id="client-term-prompt" class="ansi-37 ansi-40"></div>
<textarea id="client-term-entry" autocomplete="off" autofocus></textarea>
<button id="client-login">(Re)Connect</button>
</form>
</div>
</div>
<script src="js/wsclient.js"></script>
<script src="js/local.js"></script>
</body> </body>
</html> </html>