index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <title>Remote Terminal Viewer</title>
   5         <script src="/jquery.js"></script>
   6         <script src="/terminal.js"></script>
   7         <script src="/socket.io/socket.io.js"></script>
   8         <script>
   9                 $(function() {
  10                         var term = null;
  11                         // 8-14 are bolded versions
  12                         var palette = [
  13                                 '2e3436',
  14                                 'cc0000',
  15                                 '4e9a06',
  16                                 'c4a000',
  17                                 '3465a4',
  18                                 '75507b',
  19                                 '06989a',
  20                                 'd3d7cf',
  21                                 '555753',
  22                                 'ef2929',
  23                                 '8ae234',
  24                                 'fce94f',
  25                                 '729fcf',
  26                                 'ad7fa8',
  27                                 '34e2e2',
  28                                 'eeeeec'
  29                         ];
  30                         var $body = $('body');
  31                         var socket = io.connect('http://localhost');
  32                         var color_to_css = function(i) {
  33                                 index = i & 0xff
  34                                 // lighten the basic 8 colors when they're bold
  35                                 if (i & 0x10000 && index < 8) {
  36                                         index += 8;
  37                                 }
  38                                 return 'color: #' + palette[index] + '; ';
  39                         };
  40                         var bg_color_to_css = function(i) {
  41                                 return 'background-' + color_to_css((i&0x10000) | ((i&0xff00) >> 8));
  42                         };
  43                         var stylize = function (txt, style) {
  44                                 if (txt.length == 0 || style == 0) {
  45                                         return txt
  46                                 }
  47                                 css = ''
  48                                 if (style & 0x10000) css += 'font-weight: bold; ';
  49                                 if (style & 0x20000) css += 'text-decoration: underline; ';
  50                                 if (style & 0x40000) css += 'text-decoration: underline; '; // blink
  51                                 if (style & 0x80000) css += 'text-decoration: line-through; '; // invisible
  52                                 if (style & 0x000ff) css += color_to_css(style);
  53                                 if (style & 0x0ff00) css += bg_color_to_css(style);
  54                                 return $('<span style="'+css+'"></span>').text(txt);
  55                         };
  56                         var redraw_wait = false;
  57                         var redraw_again = false;
  58                         var redraw_now = function () {
  59                                 $body.children().remove();
  60                                 for (i in term.text) {
  61                                         div = $('<div>');
  62                                         txt = ''
  63                                         a = 0;
  64                                         for (j in term.text[i]) {
  65                                                 if (term.attributes[i][j] != a) {
  66                                                         if (txt.length) {
  67                                                                 div.append(stylize(txt, a));
  68                                                                 txt = ''
  69                                                         }
  70                                                         a = term.attributes[i][j]
  71                                                 }
  72                                                 txt += term.text[i][j]
  73                                         }
  74                                         if(txt.length) {
  75                                                 div.append(stylize(txt, a));
  76                                         }
  77                                         $body.append(div);
  78                                 }
  79                         }
  80                         // limit to 50fps
  81                         var redraw = function () {
  82                                 if (redraw_wait) {
  83                                         redraw_again = true;
  84                                 } else {
  85                                         redraw_now()
  86                                         redraw_wait = true;
  87                                         redraw_again = false;
  88                                         setTimeout(function () {
  89                                                 redraw_wait = false;
  90                                                 if(redraw_again) {
  91                                                         redraw_again = false;
  92                                                         redraw();
  93                                                 }
  94                                         }, 20);
  95                                 }
  96                         }
  97                         var update = function (data) {
  98                                 if (term) {
  99                                         term.update(data);
 100                                         redraw();
 101                                 }
 102                         };
 103
 104                         socket.on('data', function (data) {
 105                                 update(data);
 106                         });
 107                         socket.on('init', function (v) {
 108                                 term = terminal.new(v.width, v.height);
 109                                 term.x = v.x;
 110                                 term.y = v.y;
 111                                 term.a = v.a;
 112                                 term.text = v.text;
 113                                 term.attributes = v.attributes;
 114                                 redraw();
 115                         });
 116                 });
 117         </script>
 118         <style>
 119                 body {
 120                         color: #d3d7cf;
 121                         background: #2e3436;
 122                         font-family: monospace;
 123                         font-size: 12px;
 124                         line-height: 14px;
 125                         white-space: pre;
 126                 }
 127         </style>
 128 </head>
 129 <body>
 130 </body>
 131 </html>