<title>Remote Terminal Viewer</title>
<script src="/jquery.js"></script>
<script src="/terminal.js"></script>
+ <script src="/htmlterm.js"></script>
+ <script src="/client.js"></script>
<script src="/socket.io/socket.io.js"></script>
- <script>
- $(function() {
- var term = null;
- // 8-14 are bolded versions
- var palette = [
- '2e3436',
- 'cc0000',
- '4e9a06',
- 'c4a000',
- '3465a4',
- '75507b',
- '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) {
- index = 0xff & i;
- // 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&0x10000) | ((i&0xff00) >> 8));
- };
- var stylize = function (txt, style) {
- 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);
- if (style & 0x0ff00) css += bg_color_to_css(style);
- return $('<span style="'+css+'"></span>').text(txt);
- };
- var redraw_wait = false;
- var redraw_again = false;
- var redraw_now = function () {
- $body.children().remove();
- for (i in term.text) {
- div = $('<div>');
- txt = ''
- a = 0x000007;
- for (j in term.text[i]) {
- if (term.attributes[i][j] != a) {
- if (txt.length) {
- div.append(stylize(txt, a));
- txt = ''
- }
- a = term.attributes[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: #d3d7cf;
- background: #2e3436;
font-family: monospace;
font-size: 12px;
line-height: 14px;
+ padding: 0;
+ margin: 0;
+ }
+ body code {
+ display: block;
white-space: pre;
}
</style>
Got questions, comments, patches, etc.? Contact Jason Woofenden