<head>
<title>Remote Terminal Viewer</title>
<script src="/jquery.js"></script>
+ <script src="/terminal.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function() {
+ var term = null;
+ // 8-14 are bolded versions
var palette = [
'2e3436',
- 'a40000',
+ 'cc0000',
'4e9a06',
'c4a000',
'3465a4',
'75507b',
- 'ce5c00',
- 'babdb6',
+ '06989a',
+ 'd3d7cf',
+ '555753',
+ 'ef2929',
+ '8ae234',
+ 'fce94f',
+ '729fcf',
+ 'ad7fa8',
+ '34e2e2',
+ 'eeeeec',
+
+ // 256 colors
+ '000000',
+ '00005f',
+ '000087',
+ '0000af',
+ '0000d7',
+ '0000ff',
+ '005f00',
+ '005f5f',
+ '005f87',
+ '005faf',
+ '005fd7',
+ '005fff',
+ '008700',
+ '00875f',
+ '008787',
+ '0087af',
+ '0087d7',
+ '0087ff',
+ '00af00',
+ '00af5f',
+ '00af87',
+ '00afaf',
+ '00afd7',
+ '00afff',
+ '00d700',
+ '00d75f',
+ '00d787',
+ '00d7af',
+ '00d7d7',
+ '00d7ff',
+ '00ff00',
+ '00ff5f',
+ '00ff87',
+ '00ffaf',
+ '00ffd7',
+ '00ffff',
+ '5f0000',
+ '5f005f',
+ '5f0087',
+ '5f00af',
+ '5f00d7',
+ '5f00ff',
+ '5f5f00',
+ '5f5f5f',
+ '5f5f87',
+ '5f5faf',
+ '5f5fd7',
+ '5f5fff',
+ '5f8700',
+ '5f875f',
+ '5f8787',
+ '5f87af',
+ '5f87d7',
+ '5f87ff',
+ '5faf00',
+ '5faf5f',
+ '5faf87',
+ '5fafaf',
+ '5fafd7',
+ '5fafff',
+ '5fd700',
+ '5fd75f',
+ '5fd787',
+ '5fd7af',
+ '5fd7d7',
+ '5fd7ff',
+ '5fff00',
+ '5fff5f',
+ '5fff87',
+ '5fffaf',
+ '5fffd7',
+ '5fffff',
+ '870000',
+ '87005f',
+ '870087',
+ '8700af',
+ '8700d7',
+ '8700ff',
+ '875f00',
+ '875f5f',
+ '875f87',
+ '875faf',
+ '875fd7',
+ '875fff',
+ '878700',
+ '87875f',
+ '878787',
+ '8787af',
+ '8787d7',
+ '8787ff',
+ '87af00',
+ '87af5f',
+ '87af87',
+ '87afaf',
+ '87afd7',
+ '87afff',
+ '87d700',
+ '87d75f',
+ '87d787',
+ '87d7af',
+ '87d7d7',
+ '87d7ff',
+ '87ff00',
+ '87ff5f',
+ '87ff87',
+ '87ffaf',
+ '87ffd7',
+ '87ffff',
+ 'af0000',
+ 'af005f',
+ 'af0087',
+ 'af00af',
+ 'af00d7',
+ 'af00ff',
+ 'af5f00',
+ 'af5f5f',
+ 'af5f87',
+ 'af5faf',
+ 'af5fd7',
+ 'af5fff',
+ 'af8700',
+ 'af875f',
+ 'af8787',
+ 'af87af',
+ 'af87d7',
+ 'af87ff',
+ 'afaf00',
+ 'afaf5f',
+ 'afaf87',
+ 'afafaf',
+ 'afafd7',
+ 'afafff',
+ 'afd700',
+ 'afd75f',
+ 'afd787',
+ 'afd7af',
+ 'afd7d7',
+ 'afd7ff',
+ 'afff00',
+ 'afff5f',
+ 'afff87',
+ 'afffaf',
+ 'afffd7',
+ 'afffff',
+ 'd70000',
+ 'd7005f',
+ 'd70087',
+ 'd700af',
+ 'd700d7',
+ 'd700ff',
+ 'd75f00',
+ 'd75f5f',
+ 'd75f87',
+ 'd75faf',
+ 'd75fd7',
+ 'd75fff',
+ 'd78700',
+ 'd7875f',
+ 'd78787',
+ 'd787af',
+ 'd787d7',
+ 'd787ff',
+ 'd7af00',
+ 'd7af5f',
+ 'd7af87',
+ 'd7afaf',
+ 'd7afd7',
+ 'd7afff',
+ 'd7d700',
+ 'd7d75f',
+ 'd7d787',
+ 'd7d7af',
+ 'd7d7d7',
+ 'd7d7ff',
+ 'd7ff00',
+ 'd7ff5f',
+ 'd7ff87',
+ 'd7ffaf',
+ 'd7ffd7',
+ 'd7ffff',
+ 'ff0000',
+ 'ff005f',
+ 'ff0087',
+ 'ff00af',
+ 'ff00d7',
+ 'ff00ff',
+ 'ff5f00',
+ 'ff5f5f',
+ 'ff5f87',
+ 'ff5faf',
+ 'ff5fd7',
+ 'ff5fff',
+ 'ff8700',
+ 'ff875f',
+ 'ff8787',
+ 'ff87af',
+ 'ff87d7',
+ 'ff87ff',
+ 'ffaf00',
+ 'ffaf5f',
+ 'ffaf87',
+ 'ffafaf',
+ 'ffafd7',
+ 'ffafff',
+ 'ffd700',
+ 'ffd75f',
+ 'ffd787',
+ 'ffd7af',
+ 'ffd7d7',
+ 'ffd7ff',
+ 'ffff00',
+ 'ffff5f',
+ 'ffff87',
+ 'ffffaf',
+ 'ffffd7',
+ 'ffffff',
+ '080808',
+ '121212',
+ '1c1c1c',
+ '262626',
+ '303030',
+ '3a3a3a',
+ '444444',
+ '4e4e4e',
+ '585858',
+ '626262',
+ '6c6c6c',
+ '767676',
+ '808080',
+ '8a8a8a',
+ '949494',
+ '9e9e9e',
+ 'a8a8a8',
+ 'b2b2b2',
+ 'bcbcbc',
+ 'c6c6c6',
+ 'd0d0d0',
+ 'dadada',
+ 'e4e4e4',
+ 'eeeeee'
];
var $body = $('body');
var socket = io.connect('http://localhost');
var color_to_css = function(i) {
- return 'color: #' + palette[i] + '; ';
- }
+ index = i & 0xff
+ // lighten the basic 8 colors when they're bold
+ if (i & 0x10000 && index < 8) {
+ index += 8;
+ }
+ return 'color: #' + palette[index] + '; ';
+ };
var bg_color_to_css = function(i) {
- return 'background-' + color_to_css(i);
- }
+ return 'background-' + color_to_css((i&0x10000) | ((i&0xff00) >> 8));
+ };
var stylize = function (txt, style) {
- if(txt.length == 0 || style == 0) {
+ if (txt.length == 0 || style == 0x000007) {
return txt
}
css = ''
- if(style & 0x10000) css += 'font-weight: bold; ';
- if(style & 0x20000) css += 'text-decoration: underline; ';
- if(style & 0x40000) css += 'text-decoration: underline; '; // blink
- if(style & 0x80000) css += 'text-decoration: line-through; '; // invisible
- if(style & 0x000ff) css += color_to_css(style & 0xff);
- if(style & 0x0ff00) css += bg_color_to_css((style & 0xff00) >> 8);
+ if (style & 0x10000) css += 'font-weight: bold; ';
+ if (style & 0x20000) css += 'text-decoration: underline; ';
+ if (style & 0x40000) css += 'text-decoration: underline; '; // blink
+ if (style & 0x80000) css += 'text-decoration: line-through; '; // invisible
+ if (style & 0x000ff) css += color_to_css(style);
+ if (style & 0x0ff00) css += bg_color_to_css(style);
return $('<span style="'+css+'"></span>').text(txt);
- }
- socket.on('init', function (v) {
+ };
+ var redraw_wait = false;
+ var redraw_again = false;
+ var redraw_now = function () {
$body.children().remove();
- for(i in v.text) {
+ for (i in term.text) {
div = $('<div>');
txt = ''
- a = 0;
- for(j in v.text[i]) {
- if(v.attributes[i][j] != a) {
- if(txt.length) {
+ a = 0x000007;
+ for (j in term.text[i]) {
+ if (term.attributes[i][j] != a) {
+ if (txt.length) {
div.append(stylize(txt, a));
txt = ''
}
- a = v.attributes[i][j]
+ a = term.attributes[i][j]
}
- txt += v.text[i][j]
+ txt += term.text[i][j]
}
if(txt.length) {
div.append(stylize(txt, a));
}
$body.append(div);
}
+ }
+ // limit to 50fps
+ var redraw = function () {
+ if (redraw_wait) {
+ redraw_again = true;
+ } else {
+ redraw_now()
+ redraw_wait = true;
+ redraw_again = false;
+ setTimeout(function () {
+ redraw_wait = false;
+ if(redraw_again) {
+ redraw_again = false;
+ redraw();
+ }
+ }, 20);
+ }
+ }
+ var update = function (data) {
+ if (term) {
+ term.update(data);
+ redraw();
+ }
+ };
+
+ socket.on('data', function (data) {
+ update(data);
+ });
+ socket.on('init', function (v) {
+ term = terminal.new(v.width, v.height);
+ term.x = v.x;
+ term.y = v.y;
+ term.a = v.a;
+ term.text = v.text;
+ term.attributes = v.attributes;
+ redraw();
});
});
</script>
<style>
body {
- color: #babdb6;
+ color: #d3d7cf;
background: #2e3436;
font-family: monospace;
font-size: 12px;
Got questions, comments, patches, etc.? Contact Jason Woofenden