-<script src="/socket.io/socket.io.js"></script>
-<script>
- var socket = io.connect('http://localhost');
- socket.on('news', function (data) {
- console.log(data);
- socket.emit('my other event', { my: 'data' });
- socket.emit('jason', { is: 'large and in charge' });
- });
-</script>
+<!DOCTYPE html>
+<html lang="en">
+<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',
+ 'cc0000',
+ '4e9a06',
+ 'c4a000',
+ '3465a4',
+ '75507b',
+ '06989a',
+ 'd3d7cf',
+ '555753',
+ 'ef2929',
+ '8ae234',
+ 'fce94f',
+ '729fcf',
+ 'ad7fa8',
+ '34e2e2',
+ 'eeeeec'
+ ];
+ var $body = $('body');
+ var socket = io.connect('http://localhost');
+ var color_to_css = function(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&0x10000) | ((i&0xff00) >> 8));
+ };
+ var stylize = function (txt, style) {
+ if (txt.length == 0 || style == 0) {
+ 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 = 0;
+ 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;
+ white-space: pre;
+ }
+ </style>
+</head>
+<body>
+</body>
+</html>